wie legt man ein div über bzw unter ein anderes?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abzocken
beispiel
bild
browser
code
dank
darstellung
eigenschaft
element
gulden
header
http
ideal vorstellung
index
opus
position
sachlage
schieben
url
warnung
-
habe das problem mal etwas vereinfach, damit man eine bessere übersicht hat:
<html> <head> <style> #header{ width: 100%; height: 100px; margin: 0 auto; border: 2px solid black } #content{ width: 50%; height: 500px; margin: 0 auto; border: 2px solid black } </style> </head> <body> <div id="header"> </div> <div id="content"> </div> </body> </html>
ich würde gerne das div "content" unter das div "header" schieben ohne das sich etwas ändert. geht das irgendwie? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
wie würde das dann als css code aussehen? wie müsste ich das umändern?
-
..und dabei beachten, daß manche Browser beim z-index auch negative Zahlen können, aber andere nicht - und es so das Layout zerreißt.
Hier ist ein Code/Beispiel für den z-index: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index
Beitrag zuletzt geändert: 23.6.2012 0:20:20 von mathesoft -
oder in etwa so: floatutorial
-
danke, aber ich komm trotzdem nicht weiter.
wie müsste ich meinen code umändern, damit es funktioniert?
<html> <head> <style> #header{ width: 100%; height: 100px; margin: 0 auto; border: 2px solid black } #content{ width: 50%; height: 500px; margin: 0 auto; border: 2px solid black } </style> </head> <body> <div id="header"> </div> <div id="content"> </div> </body> </html> -
jetzt habe deine seite angesehen und muss sagen, bin etwas überrascht. es ist so, wie du es gerne haben möchtest (ohne änderung).
ultimativecharts schrieb:
wie gesagt: dein content ist unter dem header und zentriert.
... ich würde gerne das div "content" unter das div "header" schieben ohne das sich etwas ändert. -
nein nicht so darunter^^
sonder dass quasi der header über dem content liegt, also oben drauf. übereinander
hab mal versucht ein bild zu machen, bei dem man erkennt was ich meine:
https://dl.dropbox.com/u/20627319/beispiel.jpg
Beitrag zuletzt geändert: 23.6.2012 15:02:50 von ultimativecharts -
#header{ width: 100%; height: 100px; margin: 0 auto; border: 2px solid black; position:absolute; z-index:999; } -
ultimativecharts schrieb:
yo mey! @imho hat recht, das ist die lösung!
nein nicht so darunter^^
sonder dass quasi der header über dem content liegt, also oben drauf. übereinander
hab mal versucht ein bild zu machen, bei dem man erkennt was ich meine:
https://dl.dropbox.com/u/20627319/beispiel.jpg
aber kurz mal dazu:
du kannst die sachlage nicht einmal richtig ausdeutschen;
zweitens, deine erste lösung sieht so aus;
und drittens, deine 'erhoffte' so (dank @imho - nichts für ungut, du kannst nichts dafür!).
also: die erste lösung von dir ist nach fehlerbehebungen akzeptabel. die zweite (deine 'ideal'-vorstellung) ist kacke!
p.s.: (yo! ich kanns ned lossn!) das ist die 'homepage' (ohne inhalt und schon 3 fehler + 4 warnungen ... ?)! demnach ist mein vorschlag: bevor hierr gulden abzocken, lieber dazulernen.
-
ultimativecharts schrieb:
danke, aber ich komm trotzdem nicht weiter.
wie müsste ich meinen code umändern, damit es funktioniert?
Welchen Browser benutzt du denn, der dir eine falsche Seiten-Darstellung anzeigt?
In Opera12 funktioniert es.
Wenn es Firefox ist, der achtet (aus meiner Erfahrung) auf korrekte Schreibweise der Steuerinformationen, Opera ist da toleranter :) -
Wenn du uns genauer beschreiben würdes, was du machen möchtest, wäre es einfacher dir zu helfen...
Du musst beide Elemente position: absolute; zuweisen und deinem Content Element marin-top: 100px;,
dann kannst du dein Header Element so verschieben wie du möchtest mit margin-left und margin-right.
Wenn der Header über dem Content sein soll, dann muss du dem Content-Element z-index: 1; zuweisen und dem Header z-index: 2;.
<html> <head> <style> #header{ width: 100%; height: 100px; margin: 0 auto; border: 2px solid black; position: absolute; z-index: 2; margin-left: 0px; margin-right: 0px; } #content{ width: 50%; height: 500px; margin: 0 auto; border: 2px solid black; position: absolute; margin-top: 100px; z-index: 1; } </style> </head> <body> <div id="header"> </div> <div id="content"> </div> </body> </html> -
danke an euch alle. habs so gemacht wie imho gesagt hat und es funktioniert
danke an alle -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
