Seite 1 von 1
CSS navi Anordnung bei zentriertem Layout
Verfasst: 23.09.2004, 10:49
von bull
Guten morgen,
habe ein Problem. Will Layout umstellen. Horizontale Navigationsleiste oben, woselbst sie auch bleiben soll. Allerdings soll im HTML der Content zuerst kommen. Das geht auch ganz ausgezeichnet, nur leider ist das gesamte Layout vermittelst eines Wrappers zentriert und sitzt jetzt aber nicht mehr mittig. Über Ideen würde ich mich freuen.
.inhalt {
font-family: Arial, Helvetica, sans-serif;
padding-top: 10pt;
padding-left: 20pt;
padding-right: 20pt;
width: 790px;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
text-align: left;
top: 66px;
position: fixed;
}
.navi {
height: 65px;
border: 1px solid black;
text-align: left;
padding-left: 20pt;
padding-right: 20pt;
width: 790px;
position: fixed;
top: 0px;
}
.wrapper {
padding-left: 1px;
padding-right: 1px;
margin: 0px auto;
width: 791px;
}
<html> ... <body>
<div class="wrapper"><div class="inhalt"> Lorem ipsum... </div><div class="navi"><a href="..."></a></div></div></body></html>
Verfasst: 23.09.2004, 12:52
von Stefan
Hi,
sag doch mal deinem Wopper, äh wrapper bitte folgendes:
.wrapper {
padding-left: 1px;
padding-right: 1px;
margin: 0px auto;
text-align:center;
}
also raus mit der width und rein mit dem text-align
Ach, nochetwas, ich würde den div's id's geben und diese dann per #IDNAME im stylesheet Teil ansprechen.
Ist aber Geschmacksache.
mfg
Stefan
---->edit: nur ich würde es ganz anders machen, der IE versteht das, nur das wars dann auch schon, ich guck mal weiter.
Verfasst: 23.09.2004, 12:58
von bull
Leider keine Auswirkung. Das Ding ist immer noch etwas nach rechts verschoben. Im IE siehts mit beiden Varianten völlig daneben aus. Im FF wie gesagt bei der ersten etwas verschoben, bei der zweiten klebt alles nur links.
Verfasst: 23.09.2004, 13:12
von Jörg
den Wrapper zusätzlich über das Eltern-Element, in diesem Fall den body, zentrieren:
Verfasst: 23.09.2004, 13:21
von Stefan
Hi Jörg,
genau das ist es, bin leider etwas zu spät dran.
Ich hab mich gefragt, wie ich das noch gleich immer mache;-)
Code: Alles auswählen
<style type="text/css">
body {
background-color: #a3a3a3;
text-align:center;
overflow: auto;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#rahmen{
position:relative;
margin:0 auto;
width:auto;
background-color:#f6f6f6;
height:auto;
text-align: center;
width:760px;
}
#cont{
text-align:left;
position:absolute;
left:0px;
top:20px;
width:700px;
background-color:#ff3377;
}
#navi{
text-align:left;
position:absolute;
left:0px;
top:0px;
width:700px;
background-color:#ee33aa;
}
</style>
<div id="rahmen" >
<div id="cont" >sadfasd CONTENT asdasd</div>
<div id="navi" >asdasd NAVI asas</div>
</div>
So passt's.
Verfasst: 23.09.2004, 20:43
von bull
*Kopfschüttel*
Erst mal Danke. Das Ding von Stefan funktioniert für sich selbst einwandfrei. Wenn ich es aber in mein CSS einbaue, dann nicht. Irgendwas schießt da quer. Werde mal nachforschen.
Verfasst: 23.09.2004, 20:52
von bull
Okay. Es liegt an den paddings. Wenn die weg sind ist's zentriert.
Code: Alles auswählen
<style type="text/css">
body {
background-color: #a3a3a3;
text-align:center;
overflow: auto;
margin: 0;
}
#rahmen{
position:relative;
margin:0 auto;
width:auto;
background-color:#f6f6f6;
height:auto;
text-align: center;
width:760px;
}
#cont{
text-align:left;
position:absolute;
left:0px;
top:20px;
width:700px;
background-color:#ff3377;
}
#navi{
text-align:left;
position:absolute;
left:0px; /* ohne das in IE unerträglich !!! */
top:0px;
width:700px;
background-color:#ee33aa;
}
.abstandhalter {
padding-left: 20px;
padding-right: 20px;
}
</style>
<div id="rahmen" >
<div id="cont" ><div class="abstandhalter">sadfasd CONTENT asdasd</div></div>
<div id="navi" ><div class="abstandhalter">asdasd NAVI asas</div></div>
</div>
Verfasst: 24.09.2004, 12:12
von bull
Geht übrigens alles nicht in Opera 7.5 !
Verfasst: 24.09.2004, 12:28
von Jörg
für Opera 7.5 ginge es vielleicht folgendermaßen?
Code: Alles auswählen
body {
background-color: #a3a3a3;
text-align:center;
margin: 0;
padding:0;
}
also für den body overflow:auto rausnehmen und padding auf 0 setzen
Verfasst: 24.09.2004, 12:35
von seobug
Auch nicht in Natscape 4 und 6!
Verfasst: 24.09.2004, 12:46
von bull
Jörg, geht einwandfrei! Auch mit NS 6!
Danke!
Für Netscape 4 wird das Stylesheet gecloakt - muß ich leider tun, da einige italienische Forschungsinstitute NS 4.x noch standardmäßig installiert zu haben scheinen...
