Float-Problem lässt sich (von mir) nicht lösen

stormraider

Hallo zusammen,

ich bin nun dabei eine erste Webseite für meine Eltern zu erstellen, klappt soweit ganz gut nur jetzt stehe ich vor einem Problem.

Und zwar habe ich einen Container erstellt in diesem Container kommen dann 4 class-Bereiche die den Schatten erstellen (Inhalt, Oben, unten, mitte)

Habe dann Header und Navi erstellt soweit so gut.
Nun wollte ich den Main-Content einbauen aber sobald ich float:left dem .main_content hinzufüge geht der Schatten nur bis zur Navileiste.

Entferne ich den Float funktioniert der Schatten dafür ist der Hintergrund im Content nach unten verschoben...

kann mir da einer weiterhelfen...

HTML

<!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=utf-8" />
        <meta name="title" content="Dornröschen Wohnen" />
        <meta name="author" content="Michael Meyer - Dornröschen Wohnen" />
        <meta name="publisher" content="Manuel Meyer - Dornröschen Wohnen" />
        <meta name="copyright" content="Dornröschen Wohnen, 2010" />
        <meta name="robots" content="index, follow" />
        <meta name="language" content="de" />
        <meta name="revisit-after" content="3 days" />
        <title>Dornröschen Wohnen - kreativ, sauber, flexibel</title>

        <link rel="Shortcut Icon" href="images/favicon.ico" />


        <meta name="description" content="Dornröschen Wohnen - kreativ, sauber, flexibel. Möbelt ihr Zuhause auf. Wir verschönern ihr Zuhause, mit behutsamen Veränderungen, Akzenten und Einrichtugnsgegenständen. Kleine Veränderungen durch kreative Hände erzielen eine große Wirkung" />


        <meta name="keywords" content="Dornröschen, Wohnen, Dornröschen Wohnen, Leidenschaft, Hobby, Möbel, Dekor, Dekoration, Veränderung, Akzent, Akzente, Wohlgefühl, Einrichtung, Gegenstände, Accessoires, Stoff, Farben, Farbgebung, Materialien, Holz, Blumen, Kerzen, Raumelemente, Kreativ, Sauber, Flexibel, Gestalten, Verschönerung, Aufarbeitung, Umbau, Stimmig, Gemütlich, Gestaltungsideen, Ausführung, Neustrukturierung, Auffrischung, Frisch, Reperaturen, Kleinreperaturen, Bearbeitung, Reinigung, Raum, Kamin, Komode, Regal, Tisch, Wohnzimmer, Esszimmer, Küche, Schlafzimmer, Bad," />


<link href="styles.css" rel="stylesheet" type="text/css" media="screen"/>
</head>


<body>


<div id="container">




<div class="main">
<div class="line_top">
<div class="line_bottom">
<div class="line_lr">


<div id="header">
<div class="header_background">
</div>
</div>


<div id="navigation">
    <ul class="nav_buttons">
        <li class="link_home"><a title="Startseite" href="#">Startseite</a></li>
        <li class="link_about"><a title="Wir über uns" href="#">Wir über uns</a></li>
        <li class="link_contact"><a title="So erreichen Sie uns" href="#">So erreichen Sie uns</a></li>
        <li class="link_joblist"><a title="Dienstleistungsliste" href="#">Dienstleistungsliste</a></li>
        <li class="link_projectlist"><a title="Projektliste" href="#">Projektliste</a></li>
    </ul><!--Nav_buttons schließen-->  
</div><!--Navigation schließen-->


<div class="clear"></div>


<div id="main_content">
<div class="container_news">
<div class="news">
<h1>09.03.2010</h1>
<p>Unsere Webseite ist nun auch On-line gegangen.</p>
<p>Sie können sich nun vorab online ein Bild von uns machen.</p>
<p>Bei Fragen können sie uns gerne anschreiben.</p>
</div><!--NEWS ENDS-->
</div><!--CONTAINER_NEWS END-->
<div class="clear"></div>
<div class="container_show">
<div class="show">
<h1>Test Test Test</h1>
<p>Lorem Ipsum... Lorem Ipsum...</p>
<p>Lorem Ipsum... Lorem Ipsum...</p>
<p>Lorem Ipsum... Lorem Ipsum...</p>
<p>Lorem Ipsum... Lorem Ipsum...</p>
<p>Lorem Ipsum... Lorem Ipsum...</p>
</div><!--SHOW ENDS-->
</div><!--CONTAINER_SHOW END-->
</div><!--MAIN_CONTENT END-->
<div class="clear"></div>
<!-- Schatten schliessen -->
</div>
</div>
</div>
</div>
<!-- Container schliessen -->


</div>


</body>
</html>

Alles anzeigen

Code

html, body, div, span, applet, object, iframe;
h1, h2, h3, h4, h5, h6, p, blockquote, pre;
a, abbr, acronym, address, big, cite, code;
del, dfn, em, font, img, ins, kbd, q, s, samp;
small, strike, strong, sub, sup, tt, var;
dl, dt, dd, ol, ul, li;
fieldset, form, label, legend;
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}


:focus {
    outline: 0;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}


*{
    padding:0;
    margin:0;
}


body {
    font-family: times new roman, tahoma, arial, helvetica, sans-serif;
    font-size: 11px;
    color:#000000;
    margin: 0px;
    padding: 0px;
    background-color: #676767;
    background: url(http://i47.tinypic.com/zlzy9v.jpg) fixed;
    background-position: center;
    background-repeat: repeat;
}


div#container {
    width: 820px;
    margin: 15px auto;
    text-align: left;
}


.main {
    clear: both;
    width: 820px;
}


.line_top {
    background: url(http://i47.tinypic.com/168u45f.png) no-repeat scroll left top transparent;
    padding-top: 15px;
}


.line_bottom {
    background: url(http://i47.tinypic.com/6z6dr5.png) no-repeat scroll left bottom transparent;
    padding-bottom: 20px;
}


.line_lr {
    background: url(http://i45.tinypic.com/23kc7qh.png) repeat-y transparent;
    padding: 0 0 0 10px;
}


div#header {
    position: relative;
}


div#header .header_background {
    background: url(http://i46.tinypic.com/182kqh.jpg) no-repeat scroll 0 0;
    height: 259px;
    width: 800px;
    margin: 0px;
    padding: 0px;
}


.border {
    border:0 none;
}


div#navigation {
    background-image: url(http://i48.tinypic.com/9st9pv.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    height: 82px;
    width: 800px;
}


.nav_buttons li {
    float: left;
    line-height: 81px;
    margin-top: 1px;
    text-align: center;
}


.nav_buttons li a {
    color: #e8e8e8;
    display: block;
    height: 81px;
    text-align: center;
    text-decoration: none;
}


.nav_buttons li:hover {
    background-position: center -81px;
    background-repeat: no-repeat;
}


li.link_home {
    background-image: url(http://i45.tinypic.com/2powac4.jpg);
    background-repeat: no-repeat;
    height: 81px;
    width: 122px;
    margin-right: 1px;
}


li.link_about {
    background-image: url(http://i50.tinypic.com/2mq92ys.jpg);
    background-repeat: no-repeat;
    height: 81px;
    width: 152px;
    margin-right: 1px;
}


li.link_contact {
    background-image: url(http://i46.tinypic.com/2db2hau.jpg);
    background-repeat: no-repeat;
    height: 81px;
    width: 198px;
    margin-right: 1px;
}


li.link_joblist {
    background-image: url(http://i49.tinypic.com/6gimaw.jpg);
    background-repeat: no-repeat;
    height: 81px;
    width: 191px;
    margin-right: 1px;
}


li.link_projectlist {
    background-image: url(http://i46.tinypic.com/2ewpipx.jpg);
    background-repeat: no-repeat;
    height: 81px;
    width: 133px;
}


div#main_content {
    background: url(http://i45.tinypic.com/14vhb3m.jpg) repeat-x;
    background-color: #fff;
    height: 100%;
    width: 800px;
    float: left;
}


.container_news {
    background: url(http://i45.tinypic.com/2ldcc2h.jpg) no-repeat scroll 0 0;
    width: 672px;
    height: 240px;
    overflow: hidden;
    margin-top: 18px;
    margin-left: 74px;
}


.news {
    padding: 70px 75px 10px 75px;
}


.news h1 {
    font-size: 14px;
    text-align: left;
    margin-bottom: 10px;
}


.news p {
    margin-bottom: 2px;
}


.container_show {
    background: url(http://i48.tinypic.com/2gt10zb.jpg) no-repeat;
    width: 647px;
    height: 503px;
    overflow: hidden;
    margin-left: 74px;
}


.show {
    padding: 70px 75px 10px 75px;
    }


.show h1 {
    font-size: 14px;
    text-align: left;
    margin-bottom: 5px;
}


.show p {
    margin-bottom: 5px;
}

Alles anzeigen

Wofür ist der Befehl <div class="clear"></div> gut?

gruß Manuel

sejuma

Wer floatet, muss auch clearen: http://www.ohne-css.gehts-gar.net/0042.php

Edit:
Definiere in der CSS also:

Code

.clear {clear: both;}

stormraider

Danke danke so klappts Wie simpel...

Habe nun vorm Schattenende (vor den 4divs) folgendes eingebaut:

Aber wieso funktioniert mein Befehl "clear:both" nicht im .main...?
Schließlich ist das der Container für die Schatten...?

muss man sonst extra noch das .clear { clear:both;} angeben. ?

Wo muss ich das .clear im Html code einauen?

Sry für die vielen Fragen

sejuma

So wie gepostet ist die bessere Lösung, denn auf die einmal hinterlegte Klasse .clear kannst du dann im HTML-Teil mehrmals Bezug nehmen.
Das erspart dir im HTML-Teil die Styleangaben.
Das Ergebnis ist in jedem Fall gleich.

stormraider

Ahh ok,

vielen Dank hast mir sehr damit geholfen nun kann ich endlich weitermachen

Float-Problem lässt sich (von mir) nicht lösen

Tags

Benutzer online in diesem Thema