nicht angemeldet
Richtige Positionierung von DIVs in CSS-Template
Hallo zusammen,
ich bin mir gerade dabei, mir dieses Design entsprechend meinen Wünschen anzupassen.
Ich würde allerdings gerne den Content-Bereich vergrößern und zu diesem Zweck die linke Navigationsspalte sowie entsprechend analog auch Header (ECOBUSINESS) und den darunter stehenden Text nach links an den Rand verschieben (mit ein paar Pixel Abstand).
Da ich leider nicht komplett durch das CSS durchsteige, hoffe ich, dass mir in dieser Sache jemand helfen kann. Nachfolgend der (relevante) Teil der CSS-Datei:
.container{
width:900px;
margin: 0 auto;
position: relative;
overflow:hidden;
}
#header{
height: 253px;
background: #4a4841 url(../images/top_bg.jpg) top repeat-x;
position: relative;
}
#navigation{
position: absolute;
right: 0;
top:20px;
}
#main{padding:24px 0 20px 0;}
#leftcolumn{float: left;width:193px;}
#center{float: left;width:380px;padding: 0 20px;}
#rightcolumn{float: left;width:287px;}
#bottominfo{
border-top: 5px solid #42423b;
background: #f1eee7;
padding-bottom:25px;
width: 100%;
overflow: hidden;
}
.bottomcolumn{
float: left;
width:288px;
margin-right: 18px;
}
.bottomright{margin-right:0;}
#header .container{height: 253px;}
#banner{
position: absolute;
height: 125px;
color: #a49c8f;
font-weight: bold;
padding:0 440px 0 7px;
bottom: 0;
background: url(../images/building.gif) right bottom no-repeat;
font-size: 1.3em;
}
.leftbox{background: #f1f0ef;padding: 10px 23px 10px 23px;margin-bottom:3px;line-height:1.8em;}
.rightbox_wrapper{
background: #eeeded;
padding:5px;
margin-bottom: 20px;
width:277px;
overflow: hidden;
font-size:11px;
line-height: 18px;
color: #58584D;
}
Hier habe ich die CSS-Datei auch nochmal hochgeladen.
Ich hoffe, jemand kann mir da helfen. Besten Dank im Voraus für eure Hilfe!
Grüße,
Olli
-
Hi,
Da ich leider nicht komplett durch das CSS durchsteige,
an welcher Stelle hast Du denn Schwierigkeiten?
hoffe ich, dass mir in dieser Sache jemand helfen kann.
Du hast kein Problem beschrieben, folglich steht diese Hoffnung auf recht wackeligen Füßen.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Ich denke, meine Probleme fußen vor allem auf die Absolut- und Relativangaben der Container-Positionen. Ich kann zwar beispielsweise die Position von #container auf absolut ändern und dann verschiebt sich auch der ganze Summs nach links. Das Ergebnis sieht aber nichtsdestotrotz absolut nicht so aus wie vorgestellt :) Alle anderen Container sind dann in scheinbar wilder Reihenfolge auf dem Bildschirm angeordnet.
Das ich kein CSS-Profi bin, merkt man wohl schon daran, dass ich auf ein Freetemplate zurückgreife. Bislang haben meine rudimentären Kenntnisse auch immer ausgereicht, um mir solche an meine Bedürfnisse anzupassen. Aber wie du siehst, stoße ich relativ schnell an meine Grenzen :) Andererseits hatte ich gehofft, meine Änderung wären nur ein paar kleine Umänderungen im CSS-Code - aber irgendwie habe ich ihm Gefühl, dass mir gleich Grundwissen-Artikel über "position" sowie "float" nahegelegt werden; deshalb werde ich schonmal selber anfangen, mich dort reinzulesen :)
Vielleicht hat aber doch jemand noch einen Tipp für mich, was es im CSS-Code umzuändern gilt. Dir, Cheatah, aber schonmal danke für deine Antwort.
Grüße,
Olli-
Hi,
Ich denke, meine Probleme
welche sind das denn nun? Worauf sie beruhen, finde ich dann schon selbst raus.
Das ich kein CSS-Profi bin, merkt man wohl schon daran, dass ich auf ein Freetemplate zurückgreife.
Was merkwürdig ist - gerade Anfänger sollten mit dem Verstehen nicht bei komplexen Gebilden beginnen, sondern mit einfacheren Dingen loslegen. Schmeiße dieses "Freetemplate" also erst mal weg, bis Du die nötigen Kenntnisse besitzt, um es zu verwenden.
irgendwie habe ich ihm Gefühl, dass mir gleich Grundwissen-Artikel über "position" sowie "float" nahegelegt werden; deshalb werde ich schonmal selber anfangen, mich dort reinzulesen :)
Hervorragende Wahl ;-)
Vielleicht hat aber doch jemand noch einen Tipp für mich, was es im CSS-Code umzuändern gilt.
Wie lautet denn nun Dein Problem?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Ich habe deshalb auf ein Freetemplate zurückgegriffen, weil ich das ganze noch in ein relativ komplexes CMS einbetten muss und - wie gesagt - dieses Template eigentlich genau die Form hat, wie ich sie mir vorgestellt habe. Das Projekt mache ich so nebenbei und für lau, und leider habe ich auch nicht sooo viel Zeit, um mir jetzt noch CSS von Grund auf beizubringen und dann ein Design komplett selber zu schreiben.
Mein Problem ist ganz einfach, dass ich, wie bereits gesagt, den Inhaltsbereich vergrößern möchte, indem ich den Abstand des linken Navigationsmenüs (Products + Features) zum linken Seitenrand verkleinern möchte. Analog dazu soll auch der Kopfbereich (Schriftzug ECOBUSINESS und die Willkommensnachricht darunter) mit nach links rücken, damit das Template sein einheitliches Aussehen behält.
Ich würde ja gerne etwas rumexperimentieren (habe ich auch schon gemacht), aber ich kenne einfach die Richtung nicht. Wenn du mir jetzt sowas sagen würdest wie "Ändere bei diesem oder diesem Element entsprechend die Positionsangabe in absolut, vergrößere hier die Pixelanzahl", wüsste ich ja schon, wo ich anfangen kann :)
-
Moin Moin!
Mein Problem ist ganz einfach, dass ich, wie bereits gesagt, den Inhaltsbereich vergrößern möchte, indem ich den Abstand des linken Navigationsmenüs (Products + Features) zum linken Seitenrand verkleinern möchte. Analog dazu soll auch der Kopfbereich (Schriftzug ECOBUSINESS und die Willkommensnachricht darunter) mit nach links rücken, damit das Template sein einheitliches Aussehen behält.
Das ist Deine Aufgabe, nicht dein Problem.
Hilfeiche Fragen für eine Problembeschreibung: Was hast Du gemacht, was hast Du erwartet, was ist stattdessen passiert?
Ich würde ja gerne etwas rumexperimentieren (habe ich auch schon gemacht), aber ich kenne einfach die Richtung nicht. Wenn du mir jetzt sowas sagen würdest wie "Ändere bei diesem oder diesem Element entsprechend die Positionsangabe in absolut, vergrößere hier die Pixelanzahl", wüsste ich ja schon, wo ich anfangen kann :)
Du weißt schon, was die Silbe SELF in SELFHTML und SELFHTML-Forum bedeutet?
Alexander
--
Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".
-
-
-
Ich denke, meine Probleme fußen vor allem auf die Absolut- und Relativangaben der Container-Positionen. Ich kann zwar beispielsweise die Position von #container auf absolut ändern und dann verschiebt sich auch der ganze Summs nach links. Das Ergebnis sieht aber nichtsdestotrotz absolut nicht so aus wie vorgestellt :) Alle anderen Container sind dann in scheinbar wilder Reihenfolge auf dem Bildschirm angeordnet.
Da denkst Du nicht ganz richtig. Dein Layout ist schlicht zentriert. Was Du aber ja scheinbar nicht moechtest. Wenn Du das geaendert hast kann man weitersehen.
Du schreibst immer recht viel, aber leider nichts wirklich hilfreiches. Ich stoss hier einfach mal in eine Richtung vor, weil ich keine Lust mehr habe die 'didaktisch wertvollen' Postings der anderen zu lesen. Die fruchten scheinbar nicht.
--
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
- T. Pratchett-
Da denkst Du nicht ganz richtig. Dein Layout ist schlicht zentriert. Was Du aber ja scheinbar nicht moechtest. Wenn Du das geaendert hast kann man weitersehen.
Du schreibst immer recht viel, aber leider nichts wirklich hilfreiches. Ich stoss hier einfach mal in eine Richtung vor, weil ich keine Lust mehr habe die 'didaktisch wertvollen' Postings der anderen zu lesen. Die fruchten scheinbar nicht.
»»
Danke für deine Antwort. Da ich im Stylesheet nirgendwo eine entsprechende Angabe finde, gehe ich davon aus, dass die Zentrierung mit position: absolute bzw. relative erfolgt?-
Hi,
Da ich im Stylesheet nirgendwo eine entsprechende Angabe finde, gehe ich davon aus, dass die Zentrierung mit position: absolute bzw. relative erfolgt?
Da gehst du falsch.
Die Zentrierung erfolgt ueber die Formatierung der Klasse .container mittels margin.MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Hi,
Da ich im Stylesheet nirgendwo eine entsprechende Angabe finde, gehe ich davon aus, dass die Zentrierung mit position: absolute bzw. relative erfolgt?
Da gehst du falsch.
Die Zentrierung erfolgt ueber die Formatierung der Klasse .container mittels margin.MfG ChrisB
Besten Dank, aufgrund deiner Aussage konnte ich das Design so hinbiegen, wie ich es wollte!
-
-
-
-
-