[CSS] DIV volgorde source en rendering komen niet overeen

[Ronnyrr]

Hallo allemaal,

Voor mezelf durf ik wel te zeggen dat ik HTML en CSS toch wel goed beheers.
Echter zit ik nu met een aantal problemen bij een website waar ik nu aan werk.
Om gelijk maar even genoeg informatie te geven, bij deze de volgorde van me HTML-document.

HTML:

<div id="header">
    <div id="logo">
        <img src="images/logo.png" width="243" height="133" alt="Logo Lunchroom de Pionier" />
    </div> <!-- #logo -->

    <div id="nav">
        <ul class="lavaLamp">
            <li><a href="#">HOMEPAGE</a></li>
            <li><a href="#">ETEN</a></li>
            <li class="current"><a href="#">WIJNEN</a></li>
            <li><a href="#">DESERT</a></li>
            <li><a href="#">HISTORIE</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </div> <!-- #nav --> 
</div> <!-- #header -->

<div id="content">
content inhoud
</div> <!-- #content -->

<div id="footer">
footer inhoud
</div> <!-- #footer- -->

<div id="supersized"></div>

De laatste div die ik gebruik is een fullscreen background plugin voor de jQuery libary genaamd Supersized.
Mijn CSS heeft de volgende code;

Cascading Stylesheet:

* { margin:0; padding:0;}

#header { width:100%; height:130px; float:left; background:url(../images/header.png) repeat-x 0px 20px;}
    #logo { width:234px; height:133px; float:left; margin-left:100px;}

    #nav { width:800px; height:87px; float:left; margin:50px 0 0 100px;}
        #nav ul li { height:26px; float:left; text-align:center;  margin-right:40px;}
            #nav ul li a:hover { text-decoration:none;}
                        
                        
#content { width:470px; height:500px; float:right; margin:-50px 200px 0 0; padding:60px 10px; background:url(../images/content.png) no-repeat;}
    #content p { height:250px; font-size:11px; overflow-y:scroll;}
    
#footer { width:100%; height:80px; float:left; margin-top:-20px; margin-bottom:-40px; padding:10px; background:url(../images/footer.png) repeat-x;}

    .stamp { float:right; margin:15px 30px 0 0;}
    #loading { position:absolute; top:49.5%; left:49.5%; z-index:-10; width:24px; height:24px; text-indent:-999em; background-image:url(images/progress.gif);}
    #supersized { position:fixed;}
    #supersized img { -ms-interpolation-mode:bicubic;}
    #supersized img, #supersized a { height:100%; width:100%; position:absolute; z-index:-1;}   
    #supersized .prevslide, #supersized .prevslide img { z-index:-2100;}
    #supersized .activeslide, #supersized .activeslide img { z-index:-31200;}

Het eerste gedeelte is gewoon de opmaak van alle standaard div die ik gebruik zoals de header, content, footer etc, gewoon vanzelfsprekend dus.
Het laatste gedeelte is dat van de jQuery plugin, zelf persoonlijk denk ik dat mijn probleem daarbij ligt bij één van de z-index waardes dat die daarom moeilijk gaat doen oid.

Want wat is nou het probleem?
Mijn content div, die overlapt mijn header div, dit terwijl die in de html volgorde onder de header zou moeten staan.
Ook maak ik bij de 'p' tags in mijn content gebruik van een 'overflow-y:scroll;' echter kan ik die helemaal niet gebruiken, hij bestaat wel maar ik kan er niet op komen met mijn muis, ook scrollen werkt niet in die div. Het is in de content div ook niet mogelijk om mijn tekst te selecteren. Maar waar dat aanligt, ik heb geen idee.

Bij deze nog een screenshot voor de verduidelijking van wat ik bedoel.



Ook heb ik onder mijn footer div een onverklaarbare margin van circa 20px, ik heb ook geen idee waar die vandaan komt.

Ik heb geprobeerd zoveel mogelijk overbodige code weg te laten.
Hopelijk is er iemand die mij kan helpen met mijn probleem.

Bij voorbaat dank!

[_Erikje_]

Je zit in de float hell. Terwijl dat helemaal niet hoeft. De positionering van #nav en dergelijke kan je beter doen met position:absolute.

Je #content heeft een negatieve top margin misschien ligt deze daarom over je
Wat me ook opvalt is dat je vaak de breedte hard opgeeft. Niet doen!

Minder floaten, liefst helemaal niet en je wordt een stuk gelukkiger als webdeveloper. Zeker met alle verschillende browsers die het allemaal op hun eigen manier afhandelen....

wtf doe je met supersized

[Ronnyrr]

Ten eerste bedankt voor je reactie.

Zelf vind ik floaten een stuk fijner werken als position:absolute, juist als ik moet uitgaan van verschillende resolutie's van beeldschermen. Met posotion absolute krijgen ik altijd op verschillende resolutie's verschillende weergave van mijn elementen wat ik persoonlijk erg storend vind. Vooral omdat ik het altijd van vind om gebruik te maken van een wrapper, wat bij position:absolute niet werkt. Echter maak ik bij deze website geen gebruik van een wrapper.

Met SuperSized zorg ik er voor dat ik een jQuery slideshow volledig en makkelijk full screen over de achterkant van me scherm kan laten draaien.

Maar om even terug te komen on topic.
Ik maak dus liever gebruik van floats, zelf moet ik zeggen ook nog nooit eerder mee in de problemen gekomen.

Ik zal ook een versie proberen uit te werken die gebruik maakt van position:absolute en relative elementen, wellicht werkt dat voor deze website wel beter. Niet geschoten is altijd mis.

[SvMp]

Probeer eens een clear tussen de header en content te plaatsen.

code:

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

en

code:

.clear {
   clear: both;
}

[Ronnyrr]

Een clear div tussen de header en de body wilt niet werken.
Ik heb ook van alles geprobeerd om met me muis de content div wel te kunnen bereiken (tekst kunnen selecteren en kunnen scrollen met een overflow). Maar niks lijkt te werken, zowel niet met een position:abosolute en ook niet als ik floats gebruik.
Heb hem ook nog geprobeerd in een wrapper te zetten en hem daarmee naar voren te laten komen maar het werkt allemaal niet..

Zodra ik de z-index van de content div (als ik position:absolute gebruik) op -1 staat en ik hem dus achter de header div leg werkt kan ik de teksten en de scroll niet bereiken, als ik hem dan op 10 zet kan ik die teksten wel selecteren etc echter ligt die dan bovenop de header div zoals aangegeven in het voorbeeld ook.

Samengevat, kom ik er dus niet uit. Weet iemand een oplossing voor mij probleem hier?

[Miyamoto]

Ik heb de code even overgenomen en bekeken in de browser. Ik weet hoe het eruit zou moeten zien, maar het komt wel overeen met de code & screenshot.

Dat de content div overlapt met de header is logisch, je geeft een negatieve margin (-50px) mee.
Onder de footer is geen margin te vinden.
De css & positie van je content div vind ik apart (float right? geen clear?), maar kan ik niet beoordelen zonder dat ik weet wat het doel is.

Als ik dan ook nog de Supersized plugin download (Supersized 3.2.6) en de voorbeeld code toevoeg, werkt dat zo ver te beoordelen prima (FF 9.0.1 / IE 9).

Gooi eens wat completere case online?

[Ronnyrr]

Normaal ben ik er geen voorstander van om maar op internet te gooien wat ik nu heb en de vraag te stellen kunnen jullie het voor mij oplossen.

Maar dat is nu alsnog de vraag niet, hiermee probeer ik mijn probleem even te verduidelijken.
Hier is een online voorbeeld te vinden voor de website waarmee ik nu dus bezig ben.

Dit is hoever ik nu ben, een aantal problemen heb ik, gelukkig, dus zelf ook al weten op te lossen. Echter zit k nog wel met een aantal dingen.

Zo zit ik met de content div.
Zoals die nu staat(op mijn beeldscherm) is de hoogte goed, echter wanneer de resolutie veranderd krijg ik daar een aantal fouten mee.

Ik heb nu zoals te zien is het volgende gedaan met de content div in de css:

Cascading Stylesheet:

#content { position:absolute; top:107px; right:200px; width:470px; height:auto; padding:10px 10px; background:url(../images/content.png) no-repeat; z-index:10;}
    #content p { height:auto; font-size:11px; overflow-y:scroll; padding-bottom:20px;}

De positionering is zo goed, echter wil ik dat de lengte van die div zich aanpast aan de hoogte van de browser. Dit heb ik geprobeerd door 100% of 'auto' bij de height toe te voegen. Aangezien dit allebei niet lukte heb ik geen idee hoe ik dit wél zou moeten oplossen. Iemand een tip hoe ik dit wel zou kunnen oplossen?

Ook heb ik nog een vraag over de floatings die ik gebruik(te).

_Erikje_ schreef op zaterdag 21 januari 2012 @ 23:42:
Je zit in de float hell. Terwijl dat helemaal niet hoeft. De positionering van #nav en dergelijke kan je beter doen met position:absolute.

Hier zit ik mee. Ten eerst geeft Erikje aan dat ik beter een 'position:absolute;' kan gebruiken als dat ik gebruik maak van floats. Ik weet wat de verschillen zijn en wat je er aan hebt of juist niet. Maar wat is daar precies het voordeel van als ik mag vragen dan? Met position:absolute kom je toch alleen maar meer in de knoei met verschillende resolutie's en dergelijke? Of zit ik daar verkeerd mee?

Miyamoto schreef op zondag 22 januari 2012 @ 19:59:
De css & positie van je content div vind ik apart (float right? geen clear?), maar kan ik niet beoordelen zonder dat ik weet wat het doel is.

Ook heb ik hier een vraag over. Want ik gebruik al enige tijd floats en ik dacht dat wel aardig onder de knie te hebben. Echter heb ik nog nooit gehoord over het gebruik van 'clear' behalve bij het gebruik van een footer met 'clear:both'. Wat is hiervan het voordeel of wat heb ik er aan om beide te combineren? Wellicht een goede uitleg over te vinden? Want dit zou ik best onder de knie willen krijgen als het veel voordelen heeft. Na wat google werk kom ik alleen op wat vage site's uit die geburik maken van een 'clearfix' div waar ik het voordeel ook nog niet echt van in zie?

Hopelijk kunnen jullie antwoord geven op mijn vragen.

Bij voorbaat dank.

[_Erikje_]

Ronnyrr schreef op maandag 23 januari 2012 @ 15:16:


[...]


Hier zit ik mee. Ten eerst geeft Erikje aan dat ik beter een 'position:absolute;' kan gebruiken als dat ik gebruik maak van floats. Ik weet wat de verschillen zijn en wat je er aan hebt of juist niet. Maar wat is daar precies het voordeel van als ik mag vragen dan? Met position:absolute kom je toch alleen maar meer in de knoei met verschillende resolutie's en dergelijke? Of zit ik daar verkeerd mee?

Je stopt je content in een wrapper die je in het midden van het scherm van de gebruiker positioneer. Alle absolute positionering doe je vanuit het linker punt van de wrapper div. Hierdoor heb je geen last van verschillende resoluties ed

Footer op de bodem


even snel wat op jsfiddle gezet http://jsfiddle.net/3YkfT/, zie dat het zonder positionering ook prima werkt Ook geen float

[ Voor 3% gewijzigd door _Erikje_ op 23-01-2012 19:17 ]

[Ronnyrr]

Maar als je een absolute positionering gebruikt negeert die div toch alles waar die in staat?
Like; http://jsfiddle.net/ronnyrr/3A2cj/ ?

Die footer volledig op de bodem is me nu gelukt, was een fout van mij met paddings.

Zit ik alleen nog met het eerder aangegeven probleem over de automatisch aanpasbare hoogte van me content div, zoals aangegeven in mijn vorige post. Iemand misschien een oplossing voor dat probleem?

[_Erikje_]

Beste vriend van position: absolute is position:relative

[Ronnyrr]

Ik snap nu wat je bedoeld, en ik heb de problemen voor mijn gevoel nu aardig goed opgelost, echter zit ik nog met 1 probleem. En die zit nog altijd in de hoogte van de content div.

Het ziet er op het moment zo uit. Bij mij op me laptop zit het er perfect uit, echter als ik dan op school ga kijken met een grotere resolutie komt het er als volgt uit te zien:



Het probleem is dus dat de content div in de hoogte niet mee schaalt tot de footer bij een grotere resolutie en natuurlijk dat die kleiner word bij een kleinere resolutie.

In de CSS gebruik ik nu de volgende code:

Cascading Stylesheet:

#content { position:absolute; top:107px; right:200px; width:470px; height:auto; padding:10px 10px; background:url(../images/content.png) repeat-y; z-index:10;}
    #content p { height:auto; font-size:11px; overflow-y:scroll; padding-bottom:20px;}

Ik maak nu dus ook gebruik van een position absolute en heb ook al verschillende dingen geprobeerd met bijv. ' height:100%' etc. Helaas kom ik er niet uit, wellicht kan iemand mij hier tips geven hoe ik dit op kan lossen?

[Verwijderd]

Probeer dit eens:

Cascading Stylesheet:

@charset "utf-8";
/* CSS Document */


html, body { height: 100%;
             font-family: Calibri, Tahoma, Geneva, sans-serif; color:#fff;
             overflow: hidden;
             margin: 0;
             padding: 0;
}


img         { border:0;}

ul, ol      { list-style:none;}

a:link, 
a:active, 
a:visited   { color:#fff; text-decoration:none;}


#header     { width: 100%;
              position: absolute;
              background: url(../img/header.png) repeat-x 0px 20px;
}
             
    #logo   { float:left; margin-left:100px;}

    #nav    { width:800px; 
              height:87px; 
              float:left; 
              margin:50px 0 0 100px;}
              
        #nav ul li { height:26px; float:left; text-align:center;  margin-right:40px;}
            #nav ul li a:hover { text-decoration:none;}

                   .lavaLamp li.back { border-top:1px solid white; border-bottom:1px solid white; width:20px; z-index:8; position:absolute;}
                    .lavaLamp li a { font-size:18px; top:3px; letter-spacing:1px; z-index:10; display:block; float:left; position:relative; overflow:hidden; margin:auto 10px; }   
                        .lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited { border:none;}                
                        
    
    #content { position:absolute; 
               top:107px; right:200px; 
               width:470px; 
               height:100%; 
               padding:10px 10px; 
               background: url(../img/content.png) repeat-y;
}
    
    
    #content p { height:100%; 
                 font-size:11px; 
                 padding-bottom:20px;
                 overflow-y: scroll;}   
                 
                 #content h2 { font-size:23px; font-style:italic; letter-spacing:1px; text-shadow:2px 2px 2px #000; margin-bottom:10px;}
    
#footer{ position:absolute; left:0; bottom:0 ;width:100%; height:81px; background:#C00 url(../images/footer.png) repeat-x;}

    #supersized { position:fixed;}
    #supersized img { -ms-interpolation-mode:bicubic;}
    #supersized img, #supersized a { height:100%; width:100%; position:absolute; z-index:-10;}  
    #supersized .prevslide, #supersized .prevslide img { z-index:-2100;}
    #supersized .activeslide, #supersized .activeslide img { z-index:-31200;}