pupsige div-tag-positions-Fragen

Hi,

ich hab ein paar vermutlich echt billige Fragen zu div-tags und deren Formatierung aber ich komm halt nicht drauf. :rolleyes:

Ich hab mal mit divtags rumgespielt und einfach probemäßig was erstellt:

Code:

<html><head><title>position</title> <style type="text/css"> #wrap {position:relative; width:100%; height:100%; margin:0 0;} #header {position:absolute; width:99%; height:100px; left:0.5%;} #body {position:absolute; width:99%; top:105px; left:0.5%;} #footer {position:absolute; width:99%; height:50px; bottom:0px; left:0.5%; margin:0.1em 0;} </style> </head><body> <div id="wrap" style="background:green; border:solid 1px black;"> <div id="header" style="background:orange; border:solid 1px black;"> header </div> <div id="body" style="background:purple; border:solid 1px black;"> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> </div> <div id="footer" style="background:red; border:solid 1px black;"> footer </div> </div> </body></html>

die Fragen dazu wären:

Wie krieg ichs hin dass das footer-div-tag immer unter dem body-div-tag steht, egal wie groß das body-div-tag ist?

Woie krieg ichs hin dass das wrap-div mit den inneren div-tags in der höhe dynamisch mitwächst?

das wars erstmal, ich hoffe, schätze ihr könnt mir helfen.

gruß

natze

Als erstes ist es dabei wichtig, den Browser in einen Standardkonformen Modus zu schalten. Absolut nötig ist dazu die Documententypangabe.

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Wichtig ist auch eine Inhaltstyp Metaangabe, der Zeichensatz muss ggf. angepasst werden:

HTML-Code:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

Danach die Frage: warum kompliziert, wenns auch einfach geht? Absolute Positionierung ist toll, aber nicht oft notwendig.

Das tuts doch auch oder?

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>position</title> <style type="text/css"> html, body { margin: 0; padding: 0; } body { margin: 1em; } #wrap {position:relative; background:green;} #header { height:100px; background:orange;} #body { background:purple; } #footer { height:50px; margin:0.1em 0; background:red;} #wrap, #head, #footer, #footer { border:solid 1px black; } </style> </head><body> <div id="wrap"> <div id="header"> header </div> <div id="body"> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> </div> <div id="footer"> footer </div> </div> </body></html>

Btw: style="" Attribute sollte man vermeiden, wenns auch wesentlich besser geht ;)

Zitat:

Zitat von Annasysusa

Wie krieg ichs hin dass das footer-div-tag immer unter dem body-div-tag steht, egal wie groß das body-div-tag ist?

Woie krieg ichs hin dass das wrap-div mit den inneren div-tags in der höhe dynamisch mitwächst?

Auf beide Fragen prinzipell die selbe Antwort: verwende nicht position: absolute! Wenn du stattdessen relative nimmst, wird beides automatisch geregelt - ersteres zumindest, wenn du das footer-Element nach das body-Element im Quelltext schreibst. Für zweiteres müsstest du natürlich auch die height-Angabe des wrap-Elements weglassen.

HTML-Code:

<html><head><title>position</title> <style type="text/css"> #wrap {position:relative; width:100%; margin:0 0;} #header {position:relative; width:98%; height:100px; left:1%;} #body {position:relative; width:98%; top:1%; left:1%;} #footer {position:relative; width:98%; height:50px; top: 1%; left:1%; margin:0.1em 0;} </style> </head><body> <div id="wrap" style="background:green; border:solid 1px black;"> <div id="header" style="background:orange; border:solid 1px black;"> header </div> <div id="body" style="background:purple; border:solid 1px black;"> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> body <br> </div> <div id="footer" style="background:red; border:solid 1px black;"> footer </div> </div> </body></html>

Voilà. ^^

Edit: Tja, ehrenvolles Silber immerhin...<_<''

Mir ist auch schon sehr heiß geworden^^

Vielleicht noch als Information:
<div> ist ein Blockelement und passt sich daher automatisch der Breite des anzeigebereiches an.
Wenn man so ein Blockelement zentieren möchte gibt man ihm eine bestimmte Breite, z.B. 10em oder 80% und die margin-left: auto; und margin-right: auto; Deklarationen. Das funktioniert im IE allerdings nur im standardkonformen Modus.

Okay, erstmal danke ihr beiden. ^^

@mitaki: Diese html-doc-geschichten hab ich nur deshalb noch nicht rein weil das einfach ne Probeseite ist, im Editor erstellt, bislang ohne jeglichen Zweck, deshalb hab ich sie weggelassen. ^^

Ich hab allerdings noch ein Problem, nämlich:

Code:

<html><head><title>position</title> <style type="text/css"> #wrap {width:100%; margin:0 0; background:green; border:solid 1px black;} #header {width:100%; height:100px; left:0.1em; background:orange; border:solid 1px black;} #body {width:100%; top:105px; left:0.1em; margin:0.1em 0; background:purple; border:solid 1px black;} #footer {width:100%; height:50px; left:0.1em; margin:0.1em 0; background:red; border:solid 1px black;} #menu {width:70px; height:100%; float:left; background:grey; border:solid 1px black;} #main {margin-left:72px; background:white; border: solid 1px black;} </style> </head><body> <div id="wrap"> <div id="header"> header </div> <div id="body"> <div id="menu"> menu </div> <div id="main"> main<br> main<br> main<br> main<br> main<br> main<br> main<br> main<br> main<br> main<br> main<br> main<br> main<br> main<br> main<br> main<br> main<br> main<br> main<br> main<br> main<br> main<br> main<br> main<br> main<br> </div> </div> <div id="footer"> footer </div> </div> </body></html>

Ich möchte gerne, das das menu-tag in der Höhe mit dem main-tag mitwächst. Ich könnte das main zwar in das menu-tag stecken aber dann stimmt das mit der breite ja wieder nicht. Weiß jemand ne geschickte Lösung? NPCFighter und ich sind auf keine Vernünftige gekommen. :(

Zitat:

Zitat von Nanatsusaya

Okay, erstmal danke ihr beiden. ^^

@mitaki: Diese html-doc-geschichten hab ich nur deshalb noch nicht rein weil das einfach ne Probeseite ist, im Editor erstellt, bislang ohne jeglichen Zweck, deshalb hab ich sie weggelassen. ^^

Ich hab allerdings noch ein Problem, nämlich:

Ich möchte gerne, das das menu-tag in der Höhe mit dem main-tag mitwächst. Ich könnte das main zwar in das menu-tag stecken aber dann stimmt das mit der breite ja wieder nicht. Weiß jemand ne geschickte Lösung? NPCFighter und ich sind auf keine Vernünftige gekommen. :(

Der Sinn der Doctypeangabe ist es aber doch gerade es schon beim testen zu machen!
Sonst machst du die Testseiten mit dem AB Schema, obwohl du später das CD Schema verwenden möchtest.

Hm, wenn du mit NPC zusammenarbeitest seht euch mal three column layout und three column layout (simple) von Stu Nicholls an.
Lässt sich leicht auch auf zwei kürzen und entspricht wohl dem, was am Ende rauskommen soll. Nit? Also nicht das Rad neu erfinden :p Oder an was anderes denken als mehrspaltige Designs..

Zitat:

Zitat von mitaki

Der Sinn der Doctypeangabe ist es aber doch gerade es schon beim testen zu machen!
Sonst machst du die Testseiten mit dem AB Schema, obwohl du später das CD Schema verwenden möchtest.

Hm, wenn du mit NPC zusammenarbeitest seht euch mal three column layout und three column layout (simple) von Stu Nicholls an.
Lässt sich leicht auch auf zwei kürzen und entspricht wohl dem, was am Ende rauskommen soll. Nit? Also nicht das Rad neu erfinden :p Oder an was anderes denken als mehrspaltige Designs..

Also ich habe ne ganze Weile rumgesucht und getüftelt und ne für mich optimale Lösung gefunden. Fakt ist dass man keine zwei sich in der Höhe anpassenden divs erstellen kann. Um einen optisch ähnlichen effekt zu erlangen muss man das div-tag darüber gestalten. Das sieht dann ungefähr so aus:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Div-Uebung</title> <style type="text/css" > #mantel { background-color:#99CCFF; margin:0 auto; width:100%; } #header { background-color:#99FF99; margin:0 auto; width:100%; height:70px; } #outerbwrap { background:url(bg02.jpg); margin:0 auto; width:100%; } #footer { background-color:#CCCCCC; margin:0 auto; width:100%; height:30px; } #menuelinks { float:left; width:100px; } #innerbwrap { background:url(bg03.jpg); background-position:right; margin-left:100px; } #menuerechts { float:right; width:100px; } #main { background-color:#99CCFF; margin-right:100px; } </style> </head> <body> <div id="mantel"> <div id="header"> header </div> <div id="outerbwrap"> <div id="menuelinks"> menue links </div> <div id="innerbwrap"> <div id="menuerechts"> menue rechts </div> <div id="main"> main <br /> main <br /> main <br /> main <br /> main <br /> main <br /> main <br /> main <br /> main <br /> main <br /> main <br /> main <br /> main <br /> </div> </div> </div> <div id="footer"> footer </div> </div> </body> </html>