Ergebnis 1 bis 5 von 5

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

  1. #1
    Youngster
    Registriert seit
    08.03.2010
    Beiträge
    13
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    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-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=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>
    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;
    }
    Wofür ist der Befehl <div class="clear"></div> gut?

    gruß Manuel
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

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

    Edit:
    Definiere in der CSS also:

    Code:
    .clear {clear: both;}
    Geändert von sejuma (08.03.2010 um 21:11 Uhr)

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    08.03.2010
    Beiträge
    13
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    Danke danke so klappts Wie simpel...

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

    <div style="clear: both;"></div>


    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
    Geändert von stormraider (08.03.2010 um 21:24 Uhr)

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    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.

  5. #5
    Youngster
    Themenstarter

    Registriert seit
    08.03.2010
    Beiträge
    13
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    Ahh ok,

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

Ähnliche Themen

  1. Lässt sich nicht speichern
    Von Unregistriert im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 19
    Letzter Beitrag: 13.06.2009, 19:58
  2. Problem: ICQ lässt sich nicht installieren (Virusmeldung!)
    Von Template11 im Forum Computer - Internet Forum
    Antworten: 3
    Letzter Beitrag: 20.09.2008, 15:24
  3. Problem: "Farbkästchen" lässt sich nicht verschieb
    Von Verena im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 17.02.2007, 17:55
  4. MSN Problem - Ordner lässt sich nicht löschen
    Von davidos_no.1 im Forum Computer - Internet Forum
    Antworten: 4
    Letzter Beitrag: 31.01.2007, 22:25
  5. Quelltext lässt sich nicht anzeigen
    Von Jessy im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 16.07.2005, 19:49

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •