nicht angemeldet
Problem beim Positionieren mit div.
Hallo!
Ich versuche nun schon den ganzen Tag ein Layout zu Stande zu bekommen, aber es will einfach nicht klappen.
Es soll eine Kopf- und eine Fußbereich geben. Zwischen diesen beiden Zeilen gibt es ganz Links einen Menü-Bereich, und darunter einen Werbe-Bereich. Links davon soll dann der eigentliche Inhalt angezeigt werden, und ganz Rechts sollen noch ein paar Bilder angezeigt werden.
Wenn das menü länger wird, muss die Werbung nach Unten rücken. Und der Fußbereich muss sowieso immer nach Unten rücken, wenn irgendeines der Felder darüber länger wird.
Hier mein letzter Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta
content="text/html; charset=ISO-8859-1"
http-equiv="content-type"><title>cjsTest</title>
<style type="text/css">
#Kopfzeile {position:static;width:800px;border:1px solid;background-color:yellow;}
#Menü {position:relative;top:10px;width:200px;border:1px solid;background-color:green;}
#Werbung {position:relative;top:25px;width:200px;border:1px solid;background-color:lightblue;}
#Inhalt {position:absolute;top:40px;left:220px;width:376px;border:1px solid;background-color:grey;}
#Bilder {position:absolute;top:40px;left:608px;width:200px;border:1px solid;background-color:orange;}
#Fußzeile {position:absolute;width:800px;border:1px solid;background-color:blue;}
</style></head><body><div id="Kopfzeile">Kopfzeile</div>
<div id="Menü">Menü<br>asdasdasdasd<br>asdasdasdasd<br>asdasdasdasdasd<br>asdasdasdasdads</div>
<div id="Werbung">Werbung</div>
<div id="Inhalt">Inhalt<br>dfasjhdfkjhaksdfkjasdf<br>fasdfhjsafjdhkasjdfkjasdfksajfd<br>asdfkajshdfkjhaskfjdhkjsahdfksadf</div>
<div id="Bilder">Bilder<br>asdasdasdasd<br>asdasdasd</div>
<div id="Fußzeile">Fußzeile</div>
</body></html>
Kann mir bitte jemand helfen?
Danke.
-
Grüße,
du gehst jetzt brav auf de.selfhtml.org und liest da die artikel zu den 3splaten layoputs. du positionierst absolut wilslt aber fließverhalten der floats. lies bitte nach - dir mangelts massiv an CSS grundlagen.
MFG
bleicher -
Hi!
Ohauaha. Man kann sehen, dasss bleicher wohl recht hat mit seiner Vermutung. Zuerstmal ist absolute Positioinierung in diesem Fall durchaus moeglich, aber wohl eher nicht die beste Wahl. Fuer diese Art der Positionierung fehlt dir sichtlich das Verstaendnis/die Erfahrung. Auch die Struktur erweckt einen ungeplanten Anschein. Von Semantik zu schweigen.
Zuerstmal: Was willst Du? Du moechtest scheinbar drei Spalten. Eine fuer Menue und Werbung, eine fuer Content und eine fuer Bilder. Das ganze open und unten begrenzt von Kopf- und Fusszeile.
Das Menue, das Du hast, sollte mit ziemlicher Sicherheit kein div sein. Ein div ist ein Container um mehrere Elemente zu gruppieren. Ein Menue kann man prima als unsortierte Liste (ul) darstellen, Jeder Link ein Listenelement (li).
Diese Liste und deine Werbung kommt dann in eine Spalte, die natuerlich ein div sein kann, sein sollte.
Dein Content besteht mit Sicherheit auch aus verschiedenen Elementen. Mann kann wohl von ein paar Absaetzen (p) ausgehen. Kann man wieder getrost in einen Divcontainer packen.
Die Bildleiste. Hm. Klingt nach einer Liste von Bildern. Also wieder eine Liste (ul).
Ich weiss nicht, was du unter Kopf- und Fussleiste verstehst. Eine Kopfleiste besteht gewoehnlich aus einer Ueberschrift, also haben wir hier ein h vorzugsweise h1. Eine Fuszeile besteht haeufig auch nur ein einer Ansammlung von Links (eine Liste) oder ein Absatz (p) mit ein paar Bemerkungen zum Copyright oder aehnlichem.
Deine Seitenstruktur koennte so aussehen:
<h1>Seitentitel</h1>
<div>Menue</div>
<div>Inhalt</div>
<ul>Bilder</ul>
<ul>Fusszeile</ul>Natuerlich weiss ich da nicht. Und auch wenn man die Seite selbst erstellt, ist oft nicht klar, was spaeter alles in wo positioniert sein soll. Vielleicht soll ueber die Bilder noch ein Kalender? Vielelicht soll in den Kopf gar keine Ueberschrift, sondern Aktienkurse? Deshalb haben viele Tamplates eine Struktur nur aus divs. Schliesslich weiss der Designer eines Templates nicht, was damit mal passieren soll.
Verschiedene Layouts findest du nciht nur bei selfhtml. Ich mag die die auf intensivstation.ch. Dort wird auch erklaert, was gemacht wurde. 3 Spalten dynamisch zentriert sieht nach etwas aus, das Du machen willst.
--
Vergesst Chuck Norris.
Sponge Bob kann unter Wasser grillen!
