[html/css] div gaat ineens wegspringen

[Saven]

Hey GoT'ers,
Ik heb een vaag probleempje met CSS die ik nog nooit eerder heb gehad, terwijl ik een tijd terug soortgelijke layouts maken.

Ik zal eerst even laten zien wat ik bedoel:


De bovenste rand en onderste rand van het content vlak (3 aparte div's) gaan van elkaar afstaan. Ik heb inmiddels achterhaald dat als ik de h1 en de p tag 0 margin en padding geef, het probleem is 'opgelost' maar dit is natuurlijk een non-oplossing.

Een <br style="clear: both;" /> zorgt ook dat er geen ruimte meer tussenkomt, maar zorgt wel voor een vieze br onder en boven wat zorgt dat de h1 veel te ver van de bovenkant staat, en de p veel te ver van de onderkant.

Mijn code (incl de br clear both)

HTML:

    <div id="wrapper">
        
        <div id="left">
            <div id="logo"></div>
            
            <div class="menu-top"></div>
            <div class="menu-content">
                <div id="laatste-nieuws"></div>
                &nbsp;
            </div>
            <div class="menu-bottom"></div>
        </div>
        
        <div id="right">
            <div id="topmenu">
                <ul>
                    <li><a href="#">HOME</a></li>
                    <li><a href="<?php echo $url; ?>contact">CONTACT</a></li>
                </ul>
            </div>
            
            <div id="content-top"></div>
            <div id="content">
                <br style="clear: both;" />
                <h1>Contact opnemen</h1>
                <p>Blala</p>
                <br style="clear: both;" />
            </div>
            <div id="content-bottom"></div>
        </div>
        
    </div>

En de css:

Cascading Stylesheet:

#content
{
    background: #fafafa;
    padding-left: 10px;
    padding-right: 10px;
    width: 705px;
}

#content-bottom
{
    background: url(i/content_bottom.png) no-repeat;
    height: 11px;
    width: 725px;
}

#content-top
{
    background: url(i/content_top.png) no-repeat;
    height: 11px;
    width: 725px;
}

img
{
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#laatste-nieuws
{
    background: url(i/laatste_nieuws.png) top right no-repeat;
    height: 22px;
    margin-bottom: 5px;
    width: 202px;
}

#left
{
    float: left;
    width: 222px;
}

#logo
{
    background: url(i/logo.png) no-repeat;
    height: 125px;
    margin-bottom: 10px;
    width: 222px;
}

.menu-bottom
{
    background: url(i/menu_bottom.png) no-repeat;
    height: 10px;
    margin-bottom: 10px;
    width: 222px;
}

.menu-content
{
    background: #0a0a0a url(i/menu_bg.png) repeat-y;
    color: #fff;
    padding: 0px 10px 0px 10px;
    width: 202px;
}

.menu-top
{
    background: url(i/menu_top.png) no-repeat;
    height: 10px;
    width: 222px;
}

#right
{
    float: right;
    overflow: hidden;
    width: 728px;
}

#topmenu
{
    height: 135px;
}

#topmenu ul
{
    list-style-type: none;
    margin: 0px;
    margin-left: 5px;
    padding: 0px;
    padding-top:15px;
}

#topmenu ul li
{
    background: #000;
    color: #fcd1dd;
    float: left;
    font-size: 34px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    margin-right: 15px;
    margin-bottom: 10px;
    padding: 0px 5px 0px 5px;
}

#wrapper
{
    margin: 10px auto 10px auto;
    overflow: hidden;
    width: 960px;
}

Zoals je misschien verwacht, hebben lists's en p's ook hetzelfde effect in de menu-div's.

Ik heb geen idee wat ik voor mooie oplossing kan bedenken voor mijn 'probleem'. Iemand die mij toevallig uit de brand kan helpen? Gok dat het een vrij simpele oplossing is maar ik kom er niet op

[C0rnelis]

Als samengevat je probleem is dat je elementen wilt clearen, maar door het gebruik van de <br> ongewenste whitespace kijkt, google dan eens naar clearfix en lees sowieso eens http://www.positioniseverything.net/easyclearing.html. Verder heb je waarschijnlijk voor jouw probleem lang niet alle geposte html + css nodig en als je die twee samenvoegt krijg je naar mijn idee nu niet echt een beeld van jouw probleem.. (en al helemaal niet iets wat lijkt op jouw screenshot)

[ Voor 15% gewijzigd door C0rnelis op 07-04-2012 00:02 ]

[Saven]

C0rnelis schreef op zaterdag 07 april 2012 @ 00:00:
Als samengevat je probleem is dat je elementen wilt clearen, maar door het gebruik van de <br> ongewenste whitespace kijkt, google dan eens naar clearfix en lees sowieso eens http://www.positioniseverything.net/easyclearing.html. Verder heb je waarschijnlijk voor jouw probleem lang niet alle geposte html + css nodig en als je die twee samenvoegt krijg je naar mijn idee nu niet echt een beeld van jouw probleem.. (en al helemaal niet iets wat lijkt op jouw screenshot)

onderstaande lijkt bij mij anders verdacht veel op mn screenshot als je dat opslaan in een html file (heb even contrast wat duidelijker gemaakt)

Ik wil niet per se elementen clearen (snap die term niet helemaal), volgensmijn css zou #content gewoon aan moeten sluiten op #content-top en #content-bottom, maar als ik gebruik maak van lists's of p's of h's dan gaat ie trippen

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" />
<title>Untitled Document</title>
<style>
body{ background: #000; }
#content 
{ 
    background: #fafafa; 
    padding-left: 10px; 
    padding-right: 10px; 
    width: 705px; 
} 

#content-bottom 
{ 
    background: #00ff00 url(i/content_bottom.png) no-repeat; 
    height: 11px; 
    width: 725px; 
} 

#content-top 
{ 
    background: #00ff00 url(i/content_top.png) no-repeat; 
    height: 11px; 
    width: 725px; 
} 

img 
{ 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 
} 

#laatste-nieuws 
{ 
    background: url(i/laatste_nieuws.png) top right no-repeat; 
    height: 22px; 
    margin-bottom: 5px; 
    width: 202px; 
} 

#left 
{ 
    float: left; 
    width: 222px; 
} 

#logo 
{ 
    background: url(i/logo.png) no-repeat; 
    height: 125px; 
    margin-bottom: 10px; 
    width: 222px; 
} 

.menu-bottom 
{ 
    background: url(i/menu_bottom.png) no-repeat; 
    height: 10px; 
    margin-bottom: 10px; 
    width: 222px; 
} 

.menu-content 
{ 
    background: #0a0a0a url(i/menu_bg.png) repeat-y; 
    color: #fff; 
    padding: 0px 10px 0px 10px; 
    width: 202px; 
} 

.menu-top 
{ 
    background: url(i/menu_top.png) no-repeat; 
    height: 10px; 
    width: 222px; 
} 

#right 
{ 
    float: right; 
    overflow: hidden; 
    width: 728px; 
} 

#topmenu 
{ 
    height: 135px; 
} 

#topmenu ul 
{ 
    list-style-type: none; 
    margin: 0px; 
    margin-left: 5px; 
    padding: 0px; 
    padding-top:15px; 
} 

#topmenu ul li 
{ 
    background: #000; 
    color: #fcd1dd; 
    float: left; 
    font-size: 34px; 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    margin-right: 15px; 
    margin-bottom: 10px; 
    padding: 0px 5px 0px 5px; 
} 

#wrapper 
{ 
    margin: 10px auto 10px auto; 
    overflow: hidden; 
    width: 960px; 
}
</style>
</head>

<body>

    <div id="wrapper"> 
         
        <div id="left"> 
            <div id="logo"></div> 
             
            <div class="menu-top"></div> 
            <div class="menu-content"> 
                <div id="laatste-nieuws"></div> 
                &nbsp; 
            </div> 
            <div class="menu-bottom"></div> 
        </div> 
         
        <div id="right"> 
            <div id="topmenu"> 
                <ul> 
                    <li><a href="#">HOME</a></li> 
                    <li><a href="<?php echo $url; ?>contact">CONTACT</a></li> 
                </ul> 
            </div> 
             
            <div id="content-top"></div> 
            <div id="content"> 
                <h1>Contact opnemen</h1> 
                <p>Blala</p>
            </div> 
            <div id="content-bottom"></div> 
        </div> 
         
    </div>

</body>
</html>

[ Voor 8% gewijzigd door Saven op 07-04-2012 00:13 ]

[jopitan]

En wat als je het volgende stukje CSS bovenaan je CSS zet:

Cascading Stylesheet:

* {
margin: 0;
padding: 0;
}

Dit zou je probleem op moeten lossen, dat deed het voor mij althans.

[ Voor 25% gewijzigd door jopitan op 07-04-2012 00:18 ]

[Saven]

jopitan schreef op zaterdag 07 april 2012 @ 00:16:
En wat als je het volgende stukje CSS bovenaan je CSS zet:

Cascading Stylesheet:

* {
margin: 0;
padding: 0;
}

Dit zou je probleem op moeten lossen, dat deed het voor mij althans.

dat is eigenlijk hetzelfde als wat ik deed bij h's en p's de padding en margin weghalen, maar das volgensmij niet echt een oplossing. vooral niet als ik bijv. een p een (bijv)bottom-margin wil geven, het lijkt er dus op alsof het content vlak niet mee 'rekt' met de margin's, maar de #content-bottom div verder afstoot naar onder (zoals te zien in screenshot)

[ Voor 6% gewijzigd door Saven op 07-04-2012 00:26 ]

[jopitan]

Saven schreef op zaterdag 07 april 2012 @ 00:21:
[...]

dat is eigenlijk hetzelfde als wat ik deed bij h's en p's de padding en margin weghalen, maar das volgensmij niet echt een oplossing. vooral niet als ik bijv. een p een (bijv)bottom-margin wil geven, het lijkt er dus op alsof het content vlak niet mee 'rekt' met de margin's

Het is ook margin-bottom niet bottom-margin...

[Saven]

jopitan schreef op zaterdag 07 april 2012 @ 00:23:
[...]


Het is ook margin-bottom niet bottom-margin...

typo, niet belangrijk verder zie mijn edit , misschien iets duidelijker nu met de extra edit op het eind

[ Voor 15% gewijzigd door Saven op 07-04-2012 00:26 ]

[WouterKvG]

Saven schreef op zaterdag 07 april 2012 @ 00:21:
[...]

dat is eigenlijk hetzelfde als wat ik deed bij h's en p's de padding en margin weghalen, maar das volgensmij niet echt een oplossing. vooral niet als ik bijv. een p een (bijv)bottom-margin wil geven, het lijkt er dus op alsof het content vlak niet mee 'rekt' met de margin's, maar de #content-bottom div verder afstoot naar onder

Dat is juist wel de oplossing. De meeste (zo niet alle) browsers geven <p> en <h#> automatisch een bepaald padding en margin mee. Als je deze zelf wil bepalen moet je ze dus ook definieren. In dit geval wil je er geen ruimte tussen hebben zitten dus zet je ze op 0.

[jopitan]

WouterKvG schreef op zaterdag 07 april 2012 @ 00:27:
[...]


Dat is juist wel de oplossing. De meeste (zo niet alle) browsers geven <p> en <h#> automatisch een bepaald padding en margin mee. Als je deze zelf wil bepalen moet je ze dus ook definieren. In dit geval wil je er geen ruimte tussen hebben zitten dus zet je ze op 0.

Ik wou net zeggen, ik probeerde de code met mijn oplossing en het werd gewoon perfect weergegeven.
Nou meen ik dat de TS graag wil dat er de content aan de onderkant nog wat extra white space heeft?

Dat is simpel te doen door:

Cascading Stylesheet:

#content  
{  
    background: #fafafa;  
    padding: 0px 10px 10px 10px;
    width: 705px;  
}  

[Saven]

WouterKvG schreef op zaterdag 07 april 2012 @ 00:27:
[...]


Dat is juist wel de oplossing. De meeste (zo niet alle) browsers geven <p> en <h#> automatisch een bepaald padding en margin mee. Als je deze zelf wil bepalen moet je ze dus ook definieren. In dit geval wil je er geen ruimte tussen hebben zitten dus zet je ze op 0.

Dus stel ik heb in de #content div 5 p's onder elkaar, en om dat netjes van elkaar te scheiden zit daar een margin van 10px op de bottom, dan moet ik per se de laatste p een style tag meegeven waarin ik zeg dat de margin-bottom van die laatste p 0px moet zijn?

Of ik wil mijn H1 tag op 10px van de bovenkant, moet ik per pagina verschillend de content-div een padding-top meegeven? (afhankelijk of ik een h1 op die pagina heb of niet)

jopitan schreef op zaterdag 07 april 2012 @ 00:30:
[...]


Ik wou net zeggen, ik probeerde de code met mijn oplossing en het werd gewoon perfect weergegeven.
Nou meen ik dat de TS graag wil dat er de content aan de onderkant nog wat extra white space heeft?

Dat is simpel te doen door:

Cascading Stylesheet:

#content  
{  
    background: #fafafa;  
    padding: 0px 10px 10px 10px;
    width: 705px;  
}  

Nee niet per se whitespace aan de onderkant. Maar volgens mij heb ik gewoon veel te lang niet meer fatsoenlijk css gecode en haal ik vanalles door elkaar

[ Voor 38% gewijzigd door Saven op 07-04-2012 00:34 ]

[jopitan]

Cascading Stylesheet:

#content h1 {
    padding-top: 10px;
}

#content p {
    padding-bottom: 10px;
}

#content p:last-child {
    padding-bottom: 0;
}

Here you go mate

[ Voor 13% gewijzigd door jopitan op 07-04-2012 00:40 ]

[crisp]

Dat heet margin collapsing

Mogelijke oplossingen:

- #content overflow: hidden geven
- #content padding-top en -bottom geven
- #content border-top en -bottom geven
- geen plaatjes gebruiken maar gewoon border-radius en oude browsers negeren

[jopitan]

crisp schreef op zaterdag 07 april 2012 @ 00:40:
en oude browsers negeren

offtopic:
Een man naar mijn hart

[Styxxy]

crisp schreef op zaterdag 07 april 2012 @ 00:40:
- geen plaatjes gebruiken maar gewoon border-radius en oude browsers negeren

En er zijn wel nog mogelijkheden om oude browsers ietwat te ondersteunen (weliswaar JavaScript solutions).

Ik ben tegenwoordig ook voorstander van deze aanpak, aangezien het erg veel code bespaart en alles mooier maakt. (* Styxxy mompelt iets over code-smell enzow.)

[C0rnelis]

Saven schreef op zaterdag 07 april 2012 @ 00:10:
[...]

onderstaande lijkt bij mij anders verdacht veel op mn screenshot als je dat opslaan in een html file (heb even contrast wat duidelijker gemaakt)

De css en de html die je hier post verschillen allebei van wat je in je openingspost hebt gezet, dus ja...

Omdat margins juist buiten elementen omgaat en paddings de ruimte aangeeft binnen elementen zorgen de margin op de h1 en p er dus voor dat de content-top en content-bottom op afstand worden gehouden. Als je de h1 en p precies dezelfde waarde geeft aan padding als margin en vervolgens de margin op 0 zet is het dus in feite opgelost.

Een alternatieve oplossing is bijvoorbeeld, maar ik weet niet of dat overal gaat werken:

HTML:

<div id="content">  
        <div id="content-top"></div>
                <h1>Contact opnemen</h1>  
                <p>Blala</p> 
        <div id="content-bottom"></div>  
</div>

in combinatie met

Cascading Stylesheet:

#content  
{  
    padding:0px;  
    text-indent:10px;
} 

Zoek daarom gewoon een normalize/reset css bestand en definieer daarna de paddings die je wilt hebben op de juiste elementen.

[Saven]

Bedankt iedereen, maar inderdaad waar ik eigenlijk naar opzoek was, was overflow:hidden;

crisp schreef op zaterdag 07 april 2012 @ 00:40:
Dat heet margin collapsing

Mogelijke oplossingen:

- #content overflow: hidden geven
- #content padding-top en -bottom geven
- #content border-top en -bottom geven
- geen plaatjes gebruiken maar gewoon border-radius en oude browsers negeren

thnx