nicht angemeldet
Positionierung von DIVs (mal wieder...)
Hallo,
die Suche kommt zwar zu diesem Thema immer wieder an die 100-Treffer-Grenze, ich komme irgendwie aber trotzdem nicht weiter.
Ich möchte eigentlich nur ein ganz einfaches Layout mit DIVs erstellen: Einen Kopf-Bereich, einen Fuß-Bereich, dazwischen den Inhalt und links vom Inhalt die Navigation. Das soll im Prinzip so aussehen: http://web129.can03.de/test/test1.html.
Ich habe da allerdings etwas "rumgepfuscht", um das so hinzubekommen. Das DIV mit dem Inhalt ist nämlich gar nicht positioniert. Es hat nur entsprechende Rand-Abstände (margin). Anders habe ich es nicht hinbekommen, daß unabhängig von der Größe des Inhaltes der Fuß-Bereich immer darunter erscheint.
Das Problem dabei ist nun, daß der Fuß-Bereich über die Navigation rutschen kann, wenn der Inhalt kleiner ist - siehe hier: http://web129.can03.de/test/test2.html.
Und auch abgesehen davon, müsste es doch eine "sauberere" Möglichkeit geben, das zu machen. Ich dachte z.B. an ein DIV, das den Inhalt und die Navigation umgibt und als Elternelement zur Positionierung dieser dient. Die Poitionierung klappt auch, aber nun drückt der Fuß-Bereich dieses DIV zusammen - siehe hier (das DIV, das Inhalt und Navigation umgeben soll hat einen blau gepunkteten Rahmen): http://web129.can03.de/test/test3.html
Kann mir jemad helfen? Schon mal vielen Dank im Voraus!
Grüße: Alex
-
Hallo,
Das Problem dabei ist nun, daß der Fuß-Bereich über die Navigation rutschen kann, wenn der Inhalt kleiner ist - siehe hier: http://web129.can03.de/test/test2.html.
wenn du die seitenaufteilung so aufbaust:
<div>oben</div>
<div style="float:left">navigation</div>
<div>texte</div>
<div style="clear:left">unten</div>keinerlei position:...;
so rutscht der untere nicht mehr über den linken und es sollte so sein wie du es wünschstGruss, Jan aus Dresden
-
Hallo,
du könntest auch noch eineige <div> gegen besser geeignete element austauschen:<div id="nav">
<div class="navhead">Inhalt1</div>
<div class="navbody">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</div>
<div class="navhead">Inhalt2</div>
<div class="navbody">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</div>
</div>kann auch so ausshen:
<div id="nav">
<h..class="navhead">Inhalt1</h..>
<ul class="navbody">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
<h..class="navhead">Inhalt2</h..>
<ul class="navbody">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>finde ich besser/sinnvoller.
und die drei oberen divs kannst du auch locker mit float nebeneinander bringen, ohne position.
Gruss, Jan aus Dresden
-
Hallo,
danke für Deine Antworten! Werde mir das mit "float" nochmal genauer anschauen. Deine Seiten über CSS sind da echt sehr hilfreich!
Ich wollte die Navigation auch erst mit Listen machen, habe aber das "a:hover" nicht so hinbekommen wie das mit "display:block" aussieht...Grüße: Alex
-
-