CSS navi Anordnung bei zentriertem Layout

Beitrag von **bull** » 23.09.2004, 10:49

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>

von **Anzeige von ABAKUS** »

Beitrag von **Stefan** » 23.09.2004, 12:52

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.

Beitrag von **bull** » 23.09.2004, 12:58

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.

von **Anzeige von ABAKUS** »

Beitrag von **Jörg** » 23.09.2004, 13:12

den Wrapper zusätzlich über das Eltern-Element, in diesem Fall den body, zentrieren:

Code: Alles auswählen

<body style="text-align&#58;center">

Beitrag von **Stefan** » 23.09.2004, 13:21

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 &#123;
	background-color&#58; #a3a3a3; 
	text-align&#58;center;
	overflow&#58; auto;
	margin-left&#58; 0px;
	margin-top&#58; 0px;
	margin-right&#58; 0px;
	margin-bottom&#58; 0px;
	
&#125;
#rahmen&#123;
	position&#58;relative; 
	margin&#58;0 auto; 
	width&#58;auto;
	background-color&#58;#f6f6f6;
	height&#58;auto;
	text-align&#58; center;
	width&#58;760px;
&#125;
#cont&#123;
text-align&#58;left;
	position&#58;absolute;
	left&#58;0px;
	top&#58;20px; 
	width&#58;700px;
	background-color&#58;#ff3377;
&#125;
#navi&#123;
text-align&#58;left;
	position&#58;absolute;
	left&#58;0px;
	top&#58;0px;
	width&#58;700px;
	background-color&#58;#ee33aa;
&#125;

</style>


<div  id="rahmen" >
<div id="cont" >sadfasd CONTENT asdasd</div>
<div id="navi" >asdasd NAVI asas</div>
</div>

So passt's.

Beitrag von **bull** » 23.09.2004, 20:43

*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.

Beitrag von **bull** » 23.09.2004, 20:52

Okay. Es liegt an den paddings. Wenn die weg sind ist's zentriert.

Code: Alles auswählen

<style type="text/css">
body &#123;
   background-color&#58; #a3a3a3;
   text-align&#58;center;
   overflow&#58; auto;
   margin&#58; 0;
   
&#125;
#rahmen&#123;
   position&#58;relative;
   margin&#58;0 auto;
   width&#58;auto;
   background-color&#58;#f6f6f6;
   height&#58;auto;
   text-align&#58; center;
   width&#58;760px;
&#125;
#cont&#123;
text-align&#58;left;
   position&#58;absolute;
   left&#58;0px;
   top&#58;20px;
   width&#58;700px;
   background-color&#58;#ff3377;
&#125;
#navi&#123;
text-align&#58;left;
   position&#58;absolute;
   left&#58;0px;   /* ohne das in IE unerträglich !!! */
   top&#58;0px;
   width&#58;700px;
   background-color&#58;#ee33aa;
&#125;
.abstandhalter &#123; 
padding-left&#58; 20px; 
padding-right&#58; 20px; 
&#125;

</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>

Beitrag von **bull** » 24.09.2004, 12:12

Geht übrigens alles nicht in Opera 7.5 !

Beitrag von **Jörg** » 24.09.2004, 12:28

für Opera 7.5 ginge es vielleicht folgendermaßen?

Code: Alles auswählen

body &#123;
   background-color&#58; #a3a3a3;
   text-align&#58;center;
   margin&#58; 0;
   padding&#58;0;
&#125;

also für den body overflow:auto rausnehmen und padding auf 0 setzen

Beitrag von **seobug** » 24.09.2004, 12:35

Auch nicht in Natscape 4 und 6!

Beitrag von **bull** » 24.09.2004, 12:46

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...