|
|||
GELÖST: Clear und Float
Hallo!
War ja schon lang nicht mehr hier und habe nun mal wieder ein Problem, bei dem ich mich gerade wie der Ochs vorm Berg fühle. Auf diesem Bild sieht man links einen roten Rahmen. Der Abstand unter dem grauen Rahmen darin stellt das Problem dar. Der Abstand entsteht durch die Menge an Text, die in der News-Spalte rechts dargestellt wird. Im Prinzip habe ich ein dreispaltiges Layout gebastelt, wobei in der linken Spalte immer ein Logo und ein dazugehöriger Text steht. Darunter soll dann das nächste Logo erscheinen und der nächste Text. Und zwar mit dem Abstand, den man zwischen dem zweiten und dritten Textblock (mit dem grauen Rahmen mit den runden Ecken) sehen kann. Jetzt habe ich mich schon eine ganze Weile mit den verschiedenen Varianten von clear gespielt, aber ich komme einfach nicht drauf, was ich am HTML oder am CSS ändern muss, damit mir die rechte News-Spalte, ohne die Abstände in der linken zu beeinflussen, länger werden kann. Hier mal der Code ... HTML-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" xml:lang="de" lang="de"> <head> <title>Seite</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="revisit-after" content="7 days" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="stylesheet" type="text/css" href="xxx.css" media="screen" /> </head> <body id="home"> <div class="wrapper"> <div class="top"></div> <div class="header"> <img class="logo" src="http://xhtmlforum.de/images/logo_g.jpg" alt="XPEDIT Logo" /> </div> <div class="nav"> <ul class="nav"> <li><a href="dl/#.pdf">Testtext</a></li> <li class="catering"><span style="width: 250px; color: #9A9C9F; text-decoration: none; font-weight: 600;">Testtext</span></li> </ul> </div> <div class="content"> <div class="news"> <img src="http://xhtmlforum.de/images/news_head_bg.jpg" alt="News" /> <h3>Text Text</h3> <p>Text Text</p> <h3>Text Text</h3> <p>Text Text</p> <h3>Text Text</h3> <p>Text Text<br />Text Text<br />Text Text<br />Text Text</p> <h3>Text Text</h3> <p>Text Text<br />Text Text<br />Text Text<br />Text Text</p> </div> <div class="p_show"> <h2>P-SHOW</h2> </div> <div class="left"> <div class="logo_info"> <div class="logos"> <img src="http://xhtmlforum.de/images/logo.jpg" alt="Logo" /> </div> <div class="left_container"> <div class="left_cont_top"></div> <div class="left_cont"> <p>Wiesenstrasse 6<br />10000 Dadorf<br /><br />Tel: + 22 12345678<br /><br /><a href="mailto:irgendwo@irgendwo.net">irgendwo@irgendwo.net</a><br /><br />Text Text</p> </div> <div class="left_cont_bottom"></div> </div> <div style="clear: both;"></div> </div> <div class="logos"> <img src="http://xhtmlforum.de/images/logo.jpg" alt="XPEDIT Lager Logo" /> </div> <div class="left_container"> <div class="left_cont_top"></div> <div class="left_cont"> <p>Wiesenstrasse 6<br />10000 Dadorf<br /><br />Tel: + 22 12345678<br /><br /><a href="mailto:irgendwo@irgendwo.net">irgendwo@irgendwo.net</a><br /><br />Text Text</p> </div> <div class="left_cont_bottom"></div> </div> <div style="clear: both;"></div> <div class="logos"> <img src="http://xhtmlforum.de/images/logo.jpg" alt="XPEDIT Van Veinsten Logo" /> </div> <div class="left_container"> <div class="left_cont_top"></div> <div class="left_cont"> <p>Wiesenstrasse 6<br />10000 Dadorf<br /><br />Tel: + 22 12345678<br /><br /><a href="mailto:irgendwo@irgendwo.net">irgendwo@irgendwo.net</a><br /><br />Text Text</p> </div> <div class="left_cont_bottom"></div> </div> <div style="clear: both;"></div> <div class="logos"> <img src="http://xhtmlforum.de/images/logo.jpg" alt="XPEDIT Kiosk Logo" /> </div> <div class="left_container"> <div class="left_cont_top"></div> <div class="left_cont"> <p>Wiesenstrasse 6<br />10000 Dadorf<br /><br />Tel: + 22 12345678<br /><br /><a href="mailto:irgendwo@irgendwo.net">irgendwo@irgendwo.net</a><br /><br />Text Text</p> </div> <div class="left_cont_bottom"></div> </div> <div style="clear: both;"></div> </div> <div style="clear: left"></div> </div> <div class="footer"></div> <div class="imp"> <p class="footer"><a href="http://www.impressum.html">Impressum</a></p> </div> </div> </body> </html> Code:
* { margin:0; padding:0; border: 0; } html, body { height:100%; } body { background-color: #ffffff; font:100.01%/1.4 sans-serif; font-family: arial, verdana, sans-serif; } div.wrapper { margin: auto; width:1006px; padding: 10px; } div.top { width: 986px; min-height: 35px; background: url(images/top_bg.jpg); } div.header { width: 986px; height: 130px; background: url(images/cont_bg.jpg); } div.nav { width: 982px; background: url(images/cont_bg.jpg); min-height: 26px; } div.content { width: 986px; min-height: 500px; background: url(images/cont_bg.jpg); } div.news { width: 200px; float: right; } div.news h3 { margin-top:8px; font-weight: 700; } div.news p { border-bottom: 1px solid #dddddd; } div.news h3, div.news p { font-size: 0.71em; width: 165px; padding: 0 0 0 15px; } div.p_show { width: 280px; margin-right: 15px; float: right; border: 1px solid; } div.left { width: 470px; } div.news, div.p_show, div.left { padding-top: 30px; } div.logo_info { width: 470px; border: 1px solid red; } div.logos { float: left; width: 180px; margin: 12px 0 0 30px; } div.left_container { float: right; width: 230px; } div.left_container p { font-size: 0.7em; } div.left_cont_top { min-height: 18px; background: url(images/left_cont_top_bg.jpg); } div.left_cont { padding: 0 10px 0 10px; background: url(images/left_cont_bg.jpg); } div.left_cont_bottom { min-height: 18px; background: url(images/left_cont_bottom_bg.jpg); margin-bottom: 20px; } div.footer { width: 986px; min-height: 35px; background: url(images/foot_bg.jpg); } div.imp { margin-top: -20px; } a { color: #CC7B3B; text-decoration: underline; } a:hover { text-decoration: none; } img { border: 0px; } img.logo { margin-left: 7px; } ul.nav { margin-left: 20px; height: 25px; list-style-type: none; /*border-bottom: 1px solid #939598;*/ } ul.nav li { display: inline; padding-left: 20px; font-size: 1em; height: 25px; width: 170px; float: left; line-height: 25px; text-align: left; } ul.nav li.catering { margin-left: 12px; width: 250px; color: #9A9C9F; text-decoration: none; font-weight: 600; } ul.nav a { color: #9A9C9F; text-decoration: none; font-weight: 600; width: 170px; } ul.nav a:hover { color: #9F1E21; } ul.nav a.catering { width: 250px; } ul.nav a.catering:hover { color: #5a5a5a; } ul.nav a.subnav:hover { color: #790F5C; } h1 { font-size: 1.1em; width: 100%; color: #5a5a5a; padding-top: 20px; margin-bottom: 15px; border-bottom: 1px solid #dddddd; } h2 { color: #707070; font-size: 80%; font-weight: 600; margin-bottom: 8px; } p { font-size: 0.85em; color: #383838; } p.footer { text-align: right; width: 960px; margin-left: 10px; } p.footer a { font-size: 0.70em; color: #383838; text-decoration: none; } p.footer a:hover { text-decoration: underline; } THX!
__________________
Danke an alle, die sich hier engagieren Geändert von Smartsoul (10.06.2009 um 22:22 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Layoutcheck + Including | crimi | Site- und Layoutcheck | 8 | 27.09.2008 21:08 |
Spaltenlayout | Bilbo | CSS | 40 | 14.04.2008 15:45 |
Mozilla zeigt DIV zu oft an | cracki | CSS | 6 | 09.03.2008 15:22 |
IE zeigt gewisse Texte nicht an | zitronenbaum | CSS | 2 | 16.01.2008 15:25 |
So langsam bekomme ich die Krise mit den DIVs | Thuroc | CSS | 12 | 12.11.2007 14:25 |