div container positionieren!

mgraf

Morgen,
ich hoffe ich hab dich richtig verstanden:

HTML

<html>
<head>
<style type="text/css">


body {
margin: 0 auto;
padding: 0;
background: #ffffff;
height: 100%;
text-align:center;
}
#wrapper {
width: 780px;
margin: 0 auto;
border: 1px solid #CCC;
}
#banner {
height:100px;
width:780px;
background-color:#CCCCCC;
text-align:left;
}


#content-wrapper {
width: 450px;
margin: 0 auto;
}
#inhalt {
float: left;
height:500;
width:150;
background-color:#999999;
text-align:left;
}


#navi-links {
float: left;
width:150px;
background-color:#666666;
text-align:left;
}


#navi-rechts {
float: left;
width: 150px;
background-color:#333333;
text-align:left;
}


#footer {
height:100px;
width:780px;
background-color:#CCCCCC;
text-align:left;
}


.clear { clear:both; display:block; }
</style>


</head>
<body>
<div id="wrapper">
<div id="banner">Banner</div>
<div id="content-wrapper">
	<div id="navi-links">links</div>
	<div id="inhalt">Inhalt</div>
	<div id="navi-rechts">rechts</div>
</div>
<div class="clear"></div>
<div id="footer">footer</div>


</div>
</body>
</html>

Alles anzeigen

lg michi

CroweHammer

Hey super danke, dass mit dem Wrapper klappt hervorragend =) dann werd ich mich mal dran machen zu verstehen was du geändert hast damit es klappt, sonst bringts mir ja nicht viel für die Zukunft

Danke dir,

CroWeHaMmeR

mgraf

So wars, gedacht

synaptic

also man gehe von der linken oberen ecke aus...
dann sollte man wissen wie breit die navi in pixel is...
evtl sollte das banner, auch wenns mittig ist etwas kleiner sein, denn auf deinem screenshot sieht es recht mächtig aus.

ist ja auch klar, daß sich dein header(mit dem banner) und deine navi überschneiden)
du hast eine verfügbare breite des screens, davon ziehste die breite des banners ab und bekommst nen restwert.
da du das banner ja mittig setzt musste dieses restwert durch zwei teilen und hast die restliche verfügbare breite für deine navi.

ich hab das grad mal gefummelt und hab ne auflösung von 1152x864px
natürlich musste folgenden code noch auf deine bedürfnisse anpassen.
nicht vergessen: alles was im sytle-attribut der divs is, kann auch mit css definiert werden.

ich hoffe du bekommst nen kleinen denkanstoss.
das javascript is jetzt nur da um das banner bei egal welcher auflösung mittig zu positionieren.... musste halt mal checken mit welchen größen du arbeiten willst^^

HTML

<html>


<head>
  <title></title>
  <script type="text/javascript">


function positionieren(){ 
var verfbreite = screen.availWidth;
var target1 = document.getElementById("banner");
var meinebreite =(verfbreite/2);
var halbtargetbreite1 = parseInt(target1.style.width) /2;
target1.style.left = (meinebreite-halbtargetbreite1);
}
</script>
</head>
<body onLoad="positionieren();" bgcolor="#0000FF" text="#00FFFF" link="#00FF00" vlink="#FFCC99" background="">
<div id="banner" style="position:absolute; top:5px; height:200px; width:800px; background:#000000">
<center><h1>BANNER</h1></center>
</div>


<div id="navi" style="position:absolute;top:5px; left:0px; height:800px; width:160px;  background:#CCCCCC"></div>
<h3>NAVI</h3>
</body>
</html>

Alles anzeigen

edit: da war der mgraf a bissle schneller...
nur wollt ich keine komplettlösung bieten^^

mgraf

Hi,

Javascript zu verwenden, ist meiner Meinung nach unntig.
Wo steht das div dann, sollte der Benutzer Javascript deaktiviert haben (ich weiss, otto-normalverbraucher, hat das sicher nicht, aber trotzdem)

Darum lieber mit CSS
margin: 0 auto;

oder halt mit text-align: center
wobei man alle, anderen dann wieder auf left setzen muss

lg
michi

synaptic

bin halt nen javascript-fan^^ da kann man so viel schöne sachen mit machen (schöne!!! nich böse!!!)
und jou, du hast die einfachere lösung genommen.

CroweHammer

Also das mit den Wrapper hab ich kapiert hab jetzt eine ähnliche Konstruktion selbst geschrieben und hat geklappt

Aber erklär mal bitte für was diese Zeilen gut sind:

.clear { clear:both; display:block; }

mgraf

Lies dir das hier durch...
http://www.thestyleworks.de/tut-art/layout_div_2.shtml

Kurz zusammengefasst, er bricht das float auf, und alle nachfolgenden, bauen sich wieder ohne, vorhergehende float Beschränkungen auf.
so irgendwie halt, besser du lest den Text

Aber gib di .clear Div einfach mal raus.... so siehst du den Unterschied am schnellsten...

lg
michi

CroweHammer

Hey, okay danke auch an synaptic!

Ich bleib erstmal bei dem simpleren Weg, weil ich noch nicht die Zeit hatte auch noch Java zu lernen

mfg pat

sejuma

mgraf:
Den Content-wrapper würd ich weglassen.

Code

#inhalt { 
float: left; 
height:500px; 
width:64%; 
background-color:#999999; 
text-align:left; 
} 


#navi-links { 
float: left; 
width:18%; 
background-color:#666666; 
text-align:left; 
} 


#navi-rechts { 
float: left; 
width:18%; 
background-color:#333333; 
text-align:left; 
}

Alles anzeigen

@CrowHammer:
Die claer-Anweisung benötigt mann, da die vorherigen Elemente links gefloatet sind.
Dadurch wird bewirkt, dass der footer wieder unten und nicht neben der rechten Navi erscheint.

mgraf

Hi,
den Content-Wrapper hab ich drinnen das sein Inhalt auch mittig positioniert ist, habs so verstanden, dass der nicht die gesamte Breite ausmachen soll.

... und aus gewohnheit ist der schon immer automatisch bei mir drinnen

CroweHammer

jop danke, hab ich grad aus dem Link von mgraf entnommen, der beschreibt das auch ganz gut, ist ja eig. auch logisch aber den content wrapper find ich eigentlich ganz praktisch *g*

Tags