|
|||
Container ragen aus anderen heraus
Hi All
Ich bin im Moment an meinem ersten CSS Layout. Ein relativ simples, aber ich habe Trotzdehm Probleme. Das Design steht eigentlich, aber die Boxen ragen aus dem Container. Ich habe die FAQ durgelesen. Dort wird das Problem behandelt, aber es funktioniert bei mir einfach nicht. Hier habe ich Euch den Code zu meinem Design. 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></title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"></div> <div id="main"> <div id="left"> <div id="newsbox">{HEADLINES_FILE}</div> <div id="navi">{NAVBAR_FILE}</div> <div id="search"> <form action="?section=search" method="post" name="searchForm"> <input type="text" name="term" value="Suchen" /> <input class="go" value="Go" name="Submit" type="submit" /> </form> <!-- search --></div> <div id="print"> <p><a href="[[PRINT_URL]]" class="meta">Seite Drucken</a></p> <p><a href="index.php?section=recommend">Seite Weiterempfehlen</a></p> <!-- print --></div> <div id="referenzen">{BLOCK_RANDOMIZER}</div> <!-- left --></div> <div id="right"> <div id="content">{CONTENT_FILE}</div> <!-- right --></div> <!-- main --></div> <div id="footer"> <div id="footerinhalt"> © 2006 Darodesign - <a href="index.php?page=707">Impressum</a> | Sie sind der [[VISITOR_NUMBER]]. Besucher</div> <!-- footer --></div> <!-- container --></div> </body> </html> Code:
/* allgemein */ * { margin: 0; padding: 0; } body { font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif; background: #ffffff url(images/bg.gif) top left repeat; } #container { width: 100%; margin-left: 0; margin-right: auto; } #header { width: 100%; height: 168px; background: url(images/header_bg.jpg) top left no-repeat; margin: 0; padding: 0; border-bottom: 2px solid #fff; } #main { width: 730px; background: url(images/bg_haupt.gif) top left repeat-y; } div#main { clear: both; } #right { width: 496px; margin-left: 232px; } #content { padding: 5px; } #left { position: absolute; top: 168px; left: 0px; width: 230px; } #newsbox { background-color: Black; color: White; margin-top: 10px; padding: 5px; border-bottom: 2px solid #fff; border-top: 2px solid #fff; } #navi { margin-top: 10px; border-bottom: 2px solid #fff; border-top: 2px solid #fff; } #search { margin-top: 10px; padding: 5px; border-bottom: 2px solid #fff; border-top: 2px solid #fff; text-align: center; background-color: #F3F3F3; } #search input { background-color: #e5e5e5; border: 1px solid #999; padding: 2px; } #search .go { background-color: #e5e5e5; border: 1px solid #999; padding: 1px; } #print { margin-top: 10px; padding: 5px; border-bottom: 2px solid #fff; border-top: 2px solid #fff; background-color: #F3F3F3; } #referenzen { margin-top: 10px; padding: 5px; border-bottom: 2px solid #fff; border-top: 2px solid #fff; background-color: #F3F3F3; } #footer { width: 100%; height: 33px; background: url(images/footer_bg.gif) top left repeat-y; border-top: 2px solid #fff; border-bottom: 2px solid #fff; } #footerinhalt { margin-left: 293px; margin-top: 8px; width: 496px; } Daniel |
Sponsored Links |
|
|||
wo ist Dein clearfix in #main? Einfach nur #main ein clear mitzugeben ist sinnlos, die floats beginnen ja erst in #main. Du musst clearen bevor #main endet.
EDIT: Solange Du in main absolut positionierst, ist natürlich jedes clear für die Katz. Absolut positionierte Elemente stehen völlig unabhängig vom Rest da. das "aus einem Container herausragen" in den FAQ bezieht sich nur auf floats. |
Sponsored Links |
|
|||
Hallo Mazzo
Danke für Deine Antwort. Ich habe nun einmal meine Absolute Position auf Float geändert. Code:
#left { float: left; width: 230px; } Daniel |
|
|||
Bitte lies und versteh wie float und clear (und im speziellen clearfix) funktionieren. Ein einfaches clear: both; reicht für Deinen Fall nicht aus. Erst Recht nicht, wenn es vor den floats definiert wird.
|
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Container verschoben UNTER anderen Container setzen. | Flux | CSS | 1 | 15.08.2009 07:59 |
Container geht nicht über alle anderen divs | Hurrican | CSS | 1 | 10.08.2008 11:12 |
Container ragen aus anderen heraus | amandine | CSS | 32 | 04.03.2008 16:24 |
Container ragt (nur im IE7) aus anderen heraus | Pixelchen2008 | CSS | 5 | 13.01.2008 18:43 |
Objekte in einem anderen container platzieren ?? | twm | CSS | 7 | 31.03.2005 15:44 |