|
|||
DIVs überlappen sich nicht
Hallo werte Foren-Mitglieder!
Ich weiß, die DIV-Überlappungs-Frage kommt mehrmals täglich - aber ich konnte trotz 2stündigen Googlen und Testen auf keinen grünen Zweig kommen. Vielleicht fehlt mir nur ein kleiner Hint, aber für den wäre ich Euch sehr dankbar. Zur Erklärung meines Problems hab ich ein Bild angehängt. Das sollte aussagekräftig genug sein: Mein HTML-Code bis jetzt: HTML-Code:
... <body> <div id="wrapper"> <div id="top_left_top"> <div id="logo"></div> <div id="top_menu_left"> [top_menu_left]</div> </div> <div id="top_right_top"> [top_right_top] </div> <div style="clear:both;"></div> <div id="top_left_middle"></div> <div id="top_right_middle"> <p>[top_right_middle] </p> <p>sdfasdf</p> <p>sdfasdf</p> ... <p>asdad</p> <p>sadfasdfdasfs</p> </div> <div id="middle_left"> <p>[middle_left] </p> ... <p>sfasdfasf</p> </div> <div id="middle_right">[middle_right]</div> </div> </body> ... Code:
@charset "utf-8"; /* CSS Document */ html,body { height: 100%; margin: 0px; padding: 0px; } body { background-repeat: repeat-x; background-color: #05274E; overflow-x: scroll; background-image: url(../used/main_page/background_01.png); } #wrapper { width: 1100px; margin-left: auto; margin-right: auto; display: block; } #top_left_top { float: left; height: 85px; width: 790px; } #top_menu_left { background-color: #B5C6E1; float: right; height: 40px; width: 330px; border: 10px solid #FFF; margin-top: 15px; text-align: center; } #logo { float: left; height: 71px; padding-top: 14px; width: 334px; } #top_right_top { background-color: #FFF; float: right; height: 58px; width: 298px; margin-top: 15px; margin-bottom: 10px; border: 1px solid #05274E; text-align: center; } #top_left_middle { float: left; height: 330px; width: 790px; background-color: #CCC; } #top_right_middle { float: right; width: 280px; border: 10px solid #FFF; background-color: #B5C6E1; } #middle_left { background-color: #ECEFF2; float: left; width: 770px; border: 10px solid #FFF; margin-top: 10px; z-index: 2; } #middle_right { float: right; width: 280px; border: 10px solid #B5C6E1; background-color: #FFF; margin-top: 25px; z-index: 5; margin-right: 45px; position: relative; } Lg, Webwurm |
Sponsored Links |
|
|||
Vielen Dank.
Aber das Problem ist, dass ich die Höhe vom DIV rechts darüber ([top_right_middle]) nicht kenne. Auch kenn ich die Höhe von dem betroffenen DIV ([middle_right]) selbst nicht. Ziel ist, dass das betroffene DIV immer den gleichen Abstand vom oberen DIV hat (z. B. 50 Pixel), egal welche Höhe dies hat... |
|
||||
mal schnell gemacht, ohne groß zu überarbeiten.
CSS: Code:
#links {width: 800px; float: left;} #rechts {width: 300px; float: left;} HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css" type="text/css" /> <title>Spalten Test</title> </head> <body> <div id="wrapper"> <div id="links"> <div id="top_left_top"> <div id="logo"></div> <div id="top_menu_left">[top_menu_left]</div> </div> <div id="top_left_middle"></div> <div id="middle_left"> <p>[middle_left] </p> <p>...</p> <p>sfasdfasf</p> </div> </div> <div id="rechts"> <div id="top_right_top">[top_right_top]</div> <div id="top_right_middle"> <p>[top_right_middle]</p> <p>sdfasdf</p> <p>sdfasdf</p> <p>...</p> <p>asdad</p> <p>sadfasdfdasfs</p> </div> <div id="middle_right">[middle_right]</div> </div> </div> </body> </html> |
|
|||
Danke. Aber der Punkt ist ja, dass sich die beiden Überschneiden. Das funktioniert nicht, wenn ich "links" und "rechts" 2 Spalten mache bzw. bringt es mich nicht weiter.
Ich habs jetzt so gelöst: Ich hab dem DIV "Wrapper" (das große "Rundherum-DIV") ein position:relative zugewiesen und das zu positionierende DIV dann absolut innerhalb dieses Wrappers positioniert. Genügt mir grundsätzlich auch fürs Erste; ganz glücklich bin ich aber nicht: Schaffe ich es irgendwie, dass der Abstand zum (grafisch gesehen) darüber liegenden DIV ([top_right_middle]) immer der gleiche ist, egal, wie hoch dieses ist? Dort soll nämlich ein von TypoScript dynamisch erstelltes Menü rein... |
|
||||
Zitat:
So sieht das bei mir aus. EDIT: Zitat:
Geändert von Manfred62 (13.12.2011 um 16:56 Uhr) Grund: EDIT ergänzt |
|
|||
@Manfred62: Getestet schon, aber anscheinend war ich nicht genau genug, sorry.
Es funktioniert genau so, wie Du geschrieben hast. Vielen herzlichen Dank! Ganz versteh ich es aber leider noch nicht: Warum kann ich aus dem DIV "rechts" plötzlich heraus- und in den linken Bereich hineinragen? Warum verschiebt sich das nicht, wie bei mir immer? Vor allem weil "links" und "rechts" auch keine position-Angabe haben? |
Sponsored Links |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Divs überlappen?? | meGa | CSS | 13 | 05.12.2007 21:08 |
Überlappen von Divs =( | Meditak | CSS | 3 | 29.05.2007 00:00 |
Problem beim überlappen von div's!? | grobi77 | CSS | 16 | 12.02.2007 17:33 |
Zwei divs mit formelementen überlappen sich nicht??? | Heavenfighter | (X)HTML | 1 | 17.02.2005 09:47 |
Divs überlappen sich | Endzeittrauma | CSS | 1 | 07.06.2004 17:57 |