nicht angemeldet
Layer-Zentrierung - Bin ich doof?
Hallo liebes Forum!
Zur Zeit scheine ich doch in vielen Feldern aufm Schlauch zu stehen (das is schon meine dritte Frage in zwei Tagen...).
Ich habe ein Konstrukt aus zwei Layern, umschlossen von einem weiteren Layer:
<div id="mainlayer">
<div id="toplayer">
...
</div>
<div id="contentlayer">
...
</div>
</div>
Jetzt wuerde ich gerne den Mainlayer einfach zentriert auf die Seite setzen (was ich persoenlich fuer nicht allzu komplex halte).
Allerdings scheitere ich im Moment sogar an solch trivialen Problemen: Nach einem text-align:center; im Mainlayer zentriert der Browser (uebrigens durch die Bank alle getesteten) mir die obere linke Ecke meines Layers!
Wat mach ich falsch?
Anschauungsunterricht: http://kunden.amazingmedia.de/vfbwissen/main2.html
das ist die Seite... (logisch, oder?)
http://kunden.amazingmedia.de/vfbwissen/styles.css
das sind die ausgelagerten CSS-Definitionen...
Kann mir da vielleicht jemand ein wenig auf die Spruenge helfen?
Mal wieder: Herzlichen Dank im voraus.
Gruss,
Marc
--
Alles wird gut - www.amazingmedia.de
Alles wird gut - www.amazingmedia.de
-
Hi Marc,
Jetzt wuerde ich gerne den Mainlayer einfach zentriert auf die Seite setzen (was ich persoenlich fuer nicht allzu komplex halte).
<div id="mainlayer" style="margin-left:auto; margin-right:auto;">
<div id="toplayer">
</div>
<div id="contentlayer">
</div>
</div>Oder kurz margin:auto;
LG Roland
-
Hallo Roland,
ja das ging ja mal fix...
Erst die gute Nachricht: Dein Tipp hat nichts verschlimmert am Design.
Dann die schlechte: Es hat sich auch nichts gebessert => alles beim Alten...Jetzt steht hier:
<div id="mainlayer">
<div id="toplayer">
</div>
<div id="contentlayer">
</div>
</div>CSS:
#mainlayer {position:absolute;
width:760px;
text-align:center;
margin-left:auto;
margin-right:auto;
}(getestet: IE6, Win98)
Netscape 6.2 zeigt das Ganze nun wieder linksbuendig an...
Aber auch ohne position- und width-Angabe keine Besserung: linksbuendige Darstellung...
Irgendwas laeuft schief...
Gruss,
Marc--
Alles wird gut - www.amazingmedia.de-
Hi Marc,
Erst die gute Nachricht: Dein Tipp hat nichts verschlimmert am Design.
*g*
Dann die schlechte: Es hat sich auch nichts gebessert => alles beim Alten...
#mainlayer {
position:absolute; <-- ?
width:760px;
text-align:center;
margin-left:auto;
margin-right:auto;
}Wozu denn position:absolute? Damit kannst du die Zentrierung vergessen, das ist richtig. Es ist ja auch sinnlos, weil du gar keine Werte angibst.
Netscape 6.2 zeigt das Ganze nun wieder linksbuendig an...
Der ist AFAIK ziemlich buggy. Was sagt denn Netscape 7 dazu?
LG Roland
-
hab mich grad mit sowas rumgeschlagen ;)
hier stehen zwei sehr gute möglichkeiten zum zentrieren:
http://www.bluerobot.com/web/layouts/eigentlich müsste das margin-left und margin-right auf auto die mittigkeit erzeugen - tut es auch, nur nicht im ie5 - dem kann man aber ein text-align:center für ein blockelement (z.b. body) verpassen. dann muss man aber im element drunter das text-align nochmal notieren (weil sonst alles, auch text, zentriert ist)
-
hier noch woran ich grad bastel, hilft vielleicht auch
http://www.sinn-haft.at/log/wie bei dem link im vorigen posting, der hauptcode für die zentrierung ist vom schema das da:
body {
margin:50px 0px; padding:0px;
text-align:center;
}#Content {
width:500px;
margin:0px auto;
text-align:left;
}
-
-
Hallo zusammen!
Wozu denn position:absolute? Damit kannst du die Zentrierung vergessen, das ist richtig. Es ist ja auch sinnlos, weil du gar keine Werte angibst.
OK: Position weg. Body hat nun text-align:center;, mainlayer hat den margin:auto und nen text-align:left in sich.
width bei mainlayer hab ich mal drin gelassen, mal nicht.Ergebnis: Keiner der getesteten Browser zentriert die Layer (IE6, N6.2, Mozilla, Opera 6.04)
Netscape 7 hab ich noch nicht. Werde ich aber gleich mal downloaden und ausprobieren...
Vorschlaege?
Uebrigens wieder zu betrachten unter:
http://kunden.amazingmedia.de/vfbwissen/main2.html und
http://kunden.amazingmedia.de/vfbwissen/styles.cssGruss,
Marc-
Und nochmals Hallo!
Gerade mit Netscape 7 getestet: Selbiges Ergebnis: linksbuendige Ausrichtung wie bei allen anderen Browsern auch.
Ich seh einfach den Fehler nich, denn wenn alle Browser das so anzeigen, dann muss es an mir liegen und nicht am Browser... :-(
Gruss,
Marc -
Hallo,
der mainlayer wird schon zentriert sein:
#mainlayer {text-align:left;
margin-left:auto;
margin-right:auto;
}
man sieht ihn halt nicht, alle andern <div>s sind immer noch absolut positioniert, sie befinden sich quasi nicht im mainlayer, nicht im seitenfluss.wenn alles zentriert sein soll, weg mit position:absolute; alle <div>s müssen _im_ mainlayer leigen, sinnvoller weise solltest du dem mainlayer eine breite geben, die <div>s die sich in dem mainlayer befinden und genauso breit sein sollen brauchen keine breiten angabe.
innerhalb des mainlayer kann mit position:relative; oder im fluss mit float:; padding:; und margin:; ausgerichtet werden.so wie es jetzt ist kann es nicht gehen.
Gruss, Jan aus Dresden
-
Hi!
Danke. Der Tipp war gut. Zumindest im IE6 ist das Ganze jetzt zentriert. In allen anderen Browsern ist das Ergebnis dafuer schlechter geworden...
Der Opera zerschiesst alles, Netscapes und Mozillas zeigen das DIV zwar nicht mehr linksbuendig, aber zentriert sind sie auch nicht (ich schaetze es auf ein Verhaeltnis 1/3 zu 2/3 Platz links und rechts)...Und jetzt habe ich ein weiteres Problem: Ich habe das Menu-Div relativ gesetzt, das Content-Div auch. Das Menu-Div ist nicht in seiner Hoehe festgelegt. Wie schaffe ich es jetzt, den Anfang des Content-Divs genau auf dieselbe Hoehe zu bekommen wie den Anfang des Menu-Divs?
Wieder auf im vorigen Posting angegebenen Seiten nachzuschauen....
Gruss,
Marc
-
-
-
-
-