Div id en Div class
Ik ben bezig met een website en heb een vraag over het gebruik van een class binnen een id. Voorbeeld:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div id="footer">
<div class="footer-right">
tekstblok 1
</div>
<div class="footer-left">
tekstblok 2
</div>
</div>
<div class="footer-right">
tekstblok 1
</div>
<div class="footer-left">
tekstblok 2
</div>
</div>
De footer-right float naar rechts en de footer-left float naar links
Ik heb style aan de footer id meegegeven (achtergrondkleur) maar deze is niet zichtbaar.
En als ik de broncode inspecteer is de footer id leeg. Wat kan hier de verklaring voor zijn?
Guido
Gewijzigd op 24/10/2013 22:18:14 door Guido -
Guido
Dit komt waarschijnlijk doordat je .footer-left een float:left; en .footer-right een float:right; hebt meegegeven. Het hoofd element weet dan niet hoe lang hij moet zijn en geeft zichzelf uit wanhoop maar height:0, waardoor je de achtergrond dus niet ziet. Om dit op te lossen moet je een element onder de 2 floats plaatsen die aangeeft hoelang het element is. Daardoor krijgt de parent (#footer) de juiste lengte.
Dat element plaatsen we niet echt in onze HTML, omdat het de semantiek breekt. Daarom gebruiken we #footer:after, dat noemen we een psuedo-element. We maken in CSS als het ware een nieuw element, die wordt toegevoegd aan het einde van #footer. Elk pseudo-element moet een content hebben, we willen dit element niet laten zien en dus zetten we de content in op niks (''). Vervolgens zorgen we dat het een block element is en dat hij onder de beide elementen (.footer-left en .footer-right) zit:
Code (php)
1
2
3
4
5
2
3
4
5
#footer:after{
content:'';
display:block;
clear:both; /* plaats hem onder de float elementen */
}
content:'';
display:block;
clear:both; /* plaats hem onder de float elementen */
}
Nu zijn de floats gecleared, weet de parent hoe groot hij is en krijg je mooi de background te zien.
>> En als ik de broncode inspecteer is de footer id leeg. Wat kan hier de verklaring voor zijn?
Dit vind ik echter een heel erg vaag verhaal... Als het in de broncode niet bestaat bestaat het in de code dus niet...
Was die :before en :after veel vaker tegen gekomen maar had geen idee waarvoor ze gebruikt worden... Nu dus wel.
Opgelost, thanks!
Guido
Gewijzigd op 24/10/2013 23:41:57 door Guido -
