[CSS] Margin krijgen boven #footer lukt niet

woensdag 9 februari 2011 21:08

Acties:

0 Henk 'm!

Hopla!

Topicstarter

Ik maak een eenvoudige site: 2 kolommen, header en footer en het geheel gecentreerd op de pagina. Ik wil dat er een 1px hoog lijntje loopt tussen #header en #faux en een 10px hoge lijn tussen #faux en #footer. Dat eerste lukt, dat tweede niet. Ik zie niet wat ik verkeerd doe; in #faux staat duidelijk een bottom-margin van 10px gedefinieerd. Wie ziet de voud?

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
<style>
body {
  background: #C0DEED url('resources/bg-clouds.png') repeat-x;
}

#wrapper {
  margin: 0 auto;
  width: 800px;
}

#faux {
  width: 100%;
  margin: 1px 0 10px 0;
}

#menu {
  float: left;
  width: 200px;
}

#content {
  float: left;
  width: 600px;
}

#footer {
  clear: both;
}

#header, #menu, #content, #footer {
  background: #FFFFFF;
}

</style>
  </head>
  <body>

<div id="wrapper">
  <div id="header">HEADER</div>
  <div id="faux">
    <div id="menu">MENU</div>
    <div id="content">CONTENT</div>
  </div>
  <div id="footer">FOOTER</div>
</div>
  
  </body>
</html>

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

woensdag 9 februari 2011 21:27

Acties:

0 Henk 'm!

Verwijderd

Ik houd het op collapsing margins.

woensdag 9 februari 2011 21:34

Acties:

0 Henk 'm!

Reveller

Hopla!

Topicstarter

Verwijderd schreef op woensdag 09 februari 2011 @ 21:27:
Ik houd het op collapsing margins.

Voor zover ik begrijp zou in dat geval de top-margin van footer komen te vervallen, maar die staat al op 0. Bovendien lees ik:

There are other situations where elements do not have their margins collapsed:
floated elements
absolutely positioned elements
inline-block elements
elements with overflow set to anything other than visible (They do not collapse margins with their children.)
cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
the root element

Volgens mij twee argumenten waarom het probleem hier geen collapsing margins is?
...zei hij heel voorzichtig omdat hij ook wel Cheatahs reputatie kent...

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

woensdag 9 februari 2011 21:43

Acties:

0 Henk 'm!

gehlan

Probeer eens:

HTML:

    <div id="wrapper"> 
      <div id="header">HEADER</div> 
      <div id="faux"> 
        <div id="menu">MENU</div> 
        <div id="content">CONTENT</div> 
        <div style="clear:both;"></div>
      </div> 
      <div id="footer">FOOTER</div> 
    </div>

Er zijn elegantere manieren maar het komt erop neer dat je de floatende elementen moet clearen om de natuurlijk flow van de pagina te 'herstellen'

woensdag 9 februari 2011 21:45

Acties:

0 Henk 'm!

Verwijderd

Nee, inderdaad, ik keek eroverheen dat je beide elementen binnen #faux liet floaten. Als iets float wordt de hoogte niet meer meegenomen door de parent, tenzij je overflow: auto; gebruikt op die parent. Dat zal het in dit geval ook wel oplossen.

Je kunt overigens de meest rare bugs tegenkomen als alle elementen binnen een parent element floaten. Ik vind dan ook dat je dat niet zou moeten doen met die #content, volgens mij is dat ook helemaal niet nodig. Je kunt die beter 200px margin-left of padding-left geven (de breedte van die floatende #menu). Dat voorkomt dergelijke bugs over het algemeen wel.

woensdag 9 februari 2011 21:45

Acties:

0 Henk 'm!

orf

Overflow: hidden op #faux zal het ook wel doen.

woensdag 9 februari 2011 21:53

Acties:

0 Henk 'm!

Reveller

Hopla!

Topicstarter

@orf, @gehlan
Bedankt! Beide manieren werken; ik heb gekozen voor overflow:hidden op #faux omdat ik dan geen "loze" div hoef aan te maken. Wel ga ik eens opzoeken hoe dat nu zit met het clearen van floats en de overflow, want dat heb ik echt nooit goed begrepen (werk ook liever op de server dan op de client

)

@Cheatah: dat werkt ook, behalve dat de background van #faux dan niet meer wit kleurt (en je dus het verschil in lengte tussen #menu en #content ziet). Bovendien verschijnt er tussen #header en #faux ineens een plm 20px marge, en die blijft staan zelfs nadat ik alle margins op nul heb gezet. Ik ga nog wel uitzoeken waardoor dat komt (mss door de line-height: 20px die ik nu op de body heb gezet. Kan dan dus maar beter de line-height op een p element zetten denk ik

)

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

woensdag 9 februari 2011 22:03

Acties:

0 Henk 'm!

C0rnelis

Je hoeft niet per se een loze div aan te maken, het kan ook middels css.
Ik liep hier een tijd geleden evenzo tegenaan en via google kwam ik uiteindelijk op deze website: http://www.positioniseverything.net/easyclearing.html

Het komt er op neer dat je bijvoorbeeld met de volgende css het ook (cross-browser) oplost zonder een extra div toe te voegen in je code.

Cascading Stylesheet:

#faux:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Wanneer je veel en vaak float-elementen weergeeft in verschillende divs is het mogelijk handig om hiervoor een class te gebruiken zoals in de website aangegeven.

Cascading Stylesheet:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

edit:
Om te achterhalen waar soms iets aan ligt, is het wellicht handig om bijvoorbeeld firebug + firefox of chrome te gebruiken, je kan dan simpelweg css-rules in en uitschakelen, mocht het dus weggaan na het uitschakelen van de line-height rule dan weet je waar het aan ligt zonder direct terug te gaan naar je css

Anderzijds, kan je (ook m.b.t. die kleuren), als ik je goed snap, mogelijk ook dit toepassen? #content float niet, dus die vult gewoon de ruimte op in #faux, maar kan mogelijk problemen opleveren wanneer het menu hoger is dan de content

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
"http://www.w3.org/TR/html4/strict.dtd"> 

<html> 
  <head> 
<style> 
body { 
  background: #C0DEED url('resources/bg-clouds.png') repeat-x; 
} 

#wrapper { 
  margin: 0 auto; 
  width: 800px; 
} 

#faux { 
  width: 100%; 
  margin: 1px 0 10px 0; 
} 

#menu { 
  float: left;
  width: 200px; 
} 

#content { 
  margin-left: 200px;
  width: 600px; 
} 

#header, #footer { 
  background: #FFFFFF; 
} 

#faux, #menu {
  background-color: lightsteelblue;
}

#content {
  background-color: lightgrey;
}

</style> 
  </head> 
  <body> 

<div id="wrapper"> 
  <div id="header">HEADER</div> 
  <div id="faux"> 
    <div id="menu">MENU</div> 
    <div id="content">CONTENT <br /><br /><br />MEER CONTENT</div> 
  </div> 
  <div id="footer">FOOTER</div> 
</div> 
   
  </body> 
</html>

Ik gebruik zelf altijd de css-class, wel zo simpel en altijd te hergebruiken, gewoon toepassen op het block-element waarin floatende elementen zich bevinden.

[ Voor 67% gewijzigd door C0rnelis op 09-02-2011 22:21 ]

Onderwerpen