Ergebnis 1 bis 14 von 14
  1. #1
    thunderstick ist offline Jungspund
    registriert
    08-01-2006
    Beiträge
    15

    Probleme mit FLOAT innerhalb eines divs

    Also.. zuerst mal der Link zur Seite um die es geht:
    http://www.maexx-web.de/test/csslayouttest.html
    http://www.maexx-web.de/test/csslayout.css

    Wenn ihr die Seite im Firefox öffnet, werdet ihr sehen, dass das #boxcontent div nicht darum schert, das das #content div größer ist als es selbst, dh sich nicht mit nach unten verlängert. Dies gilt auch für die beiden anderen divs die drumherum liegen. da diese mein bg image festlegen ist das sehr ärgerlich...
    ich glaube, das es an dem float-tag liegt, habe aber nicht rausgefunden, das problem lösen kann.. bitte schaut mal ob ihr eine lösung für das problem wisst.

  2. #2
    nwibs ist offline Doppel-As
    registriert
    26-08-2005
    Beiträge
    138

    AW: Probleme mit FLOAT innerhalb eines divs

    Hm, probiers mal mit "height:100%" *ungetestet allerdings!*


    mfg nwibs
    Wer nicht fragt bleibt dumm --- auch wenns andere nervt

  3. #3
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Probleme mit FLOAT innerhalb eines divs

    Du könntest #content erstmal eine height geben (z.B.280px) und dann noch ein overflow:auto...

  4. #4
    thunderstick ist offline Jungspund
    registriert
    08-01-2006
    Beiträge
    15

    AW: Probleme mit FLOAT innerhalb eines divs

    das mit height:100% funzt ned...
    die idee mit overflow hatte ich auch schon, würde es aber hübscher finden, wenn keine scrollbalken angezeigt würden.

    damit das ganze einfacher wird, poste ich hier mal den quelltext von css und html


    HTML
    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>
    <title>CSS LAYOUT</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="csslayout.css" rel="stylesheet" type="text/css" />
    </head>
    <body> 
    <div id="box1">box1
    <div id="boxtop">boxtop</div>
    <div id="boxback">
    
    <div id="leiste1">leiste1</div>
    
    <div id="boxheader">
     <div id="headerleft">headerleft</div>
     <div id="headermitte">headermitte
       
       <div id="bildheader1"><a href="#"><img src="space.gif" width="138" height="36" border="0" /></a></div>
       <div id="bildheader2"><a href="#"><img src="space.gif" width="138" height="36" border="0" /></a></div>
       <div id="bildheader3"><a href="#"><img src="space.gif" width="138" height="31" border="0" /></a></div>
       <div id="bildheader4"><a href="#"><img src="space.gif" width="138" height="50" border="0" /></a></div> 
      
      </div>
     <div id="headerrechts">headerrechts</div>
    </div>
    <div id="leiste2">leiste2</div>
    <div id="boxcontent">
      
       <span id="navi">navi</span>
       <div id="content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content cntent content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
        </div>
       </div>
    </div>
    <div id="footer"></div>
    </div>
    </body>
    </html>
    CSS

    HTML-Code:
    body { 
    background-color:#6d623d;
    color: #fef8bb;
    font-family: verdana, arial;
    font-size: 10pt;
    text-decoration:none;
    }
    
    #box1 {
    min-width: 695px;
    min-height:300px;
    margin: 0px auto;
    width: 695px;
    }
    
    #boxback {
    background: url(images/layout/mw_30.jpg);
    width: 695px;
    height:auto;
    min-height:300px;
    }
     
    #boxtop {
    width:695px;
    height:31px;
    background:url(images/layout/mw_03.png) no-repeat ;
    background-repeat:;
    }
    
    #leiste1 {
    width:626px;
    height:18px;
    background: url(images/layout/mw_06.jpg) no-repeat;
    position:relative;
    left:34px;
    }
    
    #boxheader {
    width: 626px;
    position:relative;
    left:34px;
    top:6px;
    height:171px;
    background-color:#fef8bb;
    color:#000;
    }
    
    #headerleft {
    width:276px;
    height:171px;
    background:url(images/layout/mw_09.jpg) no-repeat;
    float:left;
    }
    
    #headermitte {
    width:138px;
    height:171;
    position:absolute;
    left:282px;
    }
    
    #headerrechts {
    background:url(layout/mw_13.jpg) no-repeat;
    width:198px;
    height:171px;
    float:right;
    }
    
    #leiste2 {
    background:url(images/layout/mw_23.jpg) no-repeat top;
    width:626px;
    height:18px;
    margin-top:11px;
    position:relative;
    left:34px;
    }
    
    #bildheader1 {
    position:absolute;
    top:0px;
    left:0px;
    background: url(images/layout/mwo_11.jpg) no-repeat #fef8bb;
    width:138px;
    height:36px;
    }
    
    #bildheader1 a:hover {
    background:url(images/layout/mw_11.jpg)  no-repeat #fef8bb;
    width:138px;
    height:36px;
    position:absolute;
    top:0px;
    left:0px;
    
    }
    
    #bildheader2 {
    position:absolute;
    left:0px;
    top: 41px;
    background: url(images/layout/mwo_15.jpg) no-repeat #fef8bb;
    width:138px;
    height:36px;
    }
    
    #bildheader2  a:hover {
    position:absolute;
    left:0px;
    top: 0px;
    background: url(images/layout/mw_15.jpg) no-repeat #fef8bb;
    width:138px;
    height:36px;
    }
    
    
    #bildheader3 {
    position:absolute;
    left:0px;
    top:83px;
    background: url(images/layout/mwo_17.jpg) no-repeat #fef8bb;
    width:138px;
    height:31px;
    }
    
    #bildheader3 a:hover {
    position:absolute;
    left:0px;
    top:0px;
    background: url(images/layout/mw_17.jpg) no-repeat #fef8bb;
    width:138px;
    height:31px;
    }
    
    
    #bildheader4 {
    position: absolute;
    left:0px;
    top:121px;
    background: url(images/layout/mwo_19.jpg) no-repeat #fef8bb;
    width:138px;
    height:50px;
    }
    
    #bildheader4  a:hover {
    position: absolute;
    left:0px;
    top:0px;
    background: url(images/layout/mw_19.jpg) no-repeat #fef8bb;
    width:138px;
    height:50px;
    }
    
    
    #boxcontent {
    width: 626px;
    position:relative;
    left:34px;
    top:6px;
    min-height:300px;
    background-color:#fef8bb;
    color:#000;
    }
    
    #navi {
    width: 142px;
    padding:5px;
    height:300px;
    background:url(images/layout/mw_25.jpg) no-repeat top #afa575;
    float:left;
    }
    
    #content {
    	background:url(images/layout/mw_27.jpg) top no-repeat #6B603D;
    	color:#fef8bb;
    	padding:10px;
    	width:447px;
    	float:right;
    	margin-bottom:7px;
    	
    }
    
    #footer {
    background-image: url(images/layout/mw_31.gif);
    background-repeat: no-repeat;
    width:695px;
    height:54px;
    z-index:1;
    }
    
    
    
    h1 {
    border-left: 20px solid #fef8bb;
    border-right: 180px solid #fef8bb;
    background-color:#afa575;
    display:block;
    letter-spacing: 3px;
    font-size:16px;
    padding-left: 15px;
    padding-top:2px;
    padding-bottom:2px;
    margin-top: 5px;
    }
    Geändert von thunderstick (08-01-2006 um 17:21 Uhr)

  5. #5
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Probleme mit FLOAT innerhalb eines divs

    Also ich habe das mit EditCSS aus der DeveloperToolbar des FireFox getestet und bei mit ging's dann.

  6. #6
    thunderstick ist offline Jungspund
    registriert
    08-01-2006
    Beiträge
    15

    AW: Probleme mit FLOAT innerhalb eines divs

    prinzipiell eine gute idee... aber sinn und zweck des layouts ist halt, das sich der rest mit nach unten erweitert, je nachdem, wie hoch der content ist.

  7. #7
    Avatar von bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.902

    AW: Probleme mit FLOAT innerhalb eines divs

    ich löse das immer mit einer Hintergrundgrafik. Quasi ein Hintergrundcontainer, welcher eine sich vertikal wiederholende Hintergrundgrafik "einmal quer rüber" enthält.
    bine

  8. #8
    thunderstick ist offline Jungspund
    registriert
    08-01-2006
    Beiträge
    15

    AW: Probleme mit FLOAT innerhalb eines divs

    Also den habe ich, falls ich verstanden habe, was du meinst... also bei mir ist das der #boxback ... vllt habe ich den auch nur falsch formatiert... ich weiß ned weiter..

  9. #9
    Avatar von bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.902

    AW: Probleme mit FLOAT innerhalb eines divs

    ok, aber clear:both find ich nirgends in deinem Code.
    bine

  10. #10
    thunderstick ist offline Jungspund
    registriert
    08-01-2006
    Beiträge
    15

    AW: Probleme mit FLOAT innerhalb eines divs

    Also... ich bin leider noch kein CSS gott... und das ist auch mein erstes CSS Layout, das clear:both würdest du in das #boxback legen?? das boxback war von mir so gedacht, das es mit dem hintergrundbild hinter dem ganzen inhalt liegt...
    ich werds mal probieren..

    *edit*
    1000 DANK !!!!
    Problem gelöst!
    Hätte mir ja mal jemand sagen können, das man nach dem float wieder ein clear setzen muss!!
    Geändert von thunderstick (08-01-2006 um 19:26 Uhr)

  11. #11
    Avatar von bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.902

    AW: Probleme mit FLOAT innerhalb eines divs

    Also... ich bin leider noch kein CSS gott...
    keine Panik, ich auch nicht

    AbBer dein boxback div endet schon direkt hinter headerrechts. das dient quasi nur für den Hintergrund bis einschließlich Headerbereich.

    moment ich schau mal was hinter navi und content für ein Hintergrund liegt.

    [edit: wart mal, ich schau nun doch mal gründlich bevor ich Verwirrung stifte oder was falsches sage.
    bine

  12. #12
    Avatar von bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.902

    AW: Probleme mit FLOAT innerhalb eines divs

    hinter das schließende /div vom boxheader würd ich das erste mal ein
    Code:
    <br class="clear" />
    schreiben, welches in der CSS so angelegt wird:
    Code:
    .clear	{
    font-size:1px;
    line-height:0px;
    clear:both;
    }
    Das zweite mal hinter dem schließenden div von boxcontent
    Code:
    <br class="clear" />
    Also wenn du einen Layoutbereich wie z.B. im Header in drei durch float nebeneinander positionierte Bereiche einteilst, dann muß man anschließend entfloaten, wenn wieder eine über die ganze Breite gehende Leiste folgt.

    In deinem Layout quasi nach diesem Schema:
    1
    1 2 3
    clear
    1
    1 2
    clear
    1
    bine

  13. #13
    thunderstick ist offline Jungspund
    registriert
    08-01-2006
    Beiträge
    15

    AW: Probleme mit FLOAT innerhalb eines divs

    habs genauso gemacht und es funzt wunderbar...
    danke nochmal!

  14. #14
    Bomb-Jack ist offline Grünschnabel
    registriert
    18-06-2010
    Beiträge
    1

    Arrow AW: Probleme mit FLOAT innerhalb eines divs

    hier gibt es ne gute Workaround Erklärung zu oben genannten Float Problem.

    jassesnee.de/easyclear

    Gruß, Bomb-Jack
    Geändert von dkdenz (18-06-2010 um 14:06 Uhr) Grund: Link entschärft...

Ähnliche Themen

  1. 3 Div's nebeneinander?
    Von Bub im Forum CSS und (X)HTML
    Antworten: 27
    Letzter Beitrag: 20-08-2005, 01:12
  2. Antworten: 3
    Letzter Beitrag: 06-04-2005, 21:49
  3. divs nebeneinander alle 100% Höhe
    Von bine im Forum CSS und (X)HTML
    Antworten: 15
    Letzter Beitrag: 30-08-2004, 16:44
  4. Probleme mit DMA-controller
    Von brainshock im Forum Windows
    Antworten: 10
    Letzter Beitrag: 11-11-2003, 13:55
  5. Antworten: 9
    Letzter Beitrag: 26-10-2001, 17:10

Lesezeichen

Berechtigungen

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