ABAKUS

Verfasst: **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>

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

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

Verfasst: **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">

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

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

Verfasst: **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>

Verfasst: **24.09.2004, 12:12**

Geht übrigens alles nicht in Opera 7.5 !

Verfasst: **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

Verfasst: **24.09.2004, 12:35**

Auch nicht in Natscape 4 und 6!

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

ABAKUS

CSS navi Anordnung bei zentriertem Layout

CSS navi Anordnung bei zentriertem Layout