Springen naar inhoud


- - - - -
Solved

Content-Wrapper



  • Log in a.u.b. om te beantwoorden
Er zijn 1 reacties in dit onderwerp

#1 Hypenate

Hypenate

    Guru Developer

  • Leden
  • PipPipPipPipPipPip
  • 1228 berichten
    Laatst bezocht 26 nov 2017 14:43
Inzender

Geplaatst op 09 december 2013 - 20:50

Kan iemand mij dit eens uitleggen?
Ik snap niet waarom er gezegd wordt: .content-wrapper .col1, .content-wrapper .col2
Erven col1 en col2 width en padding dan over van .content-wrapper?
En ga je in .content-wrapper .col1 dit dan overschrijven?

HTML Code:
.content-wrapper {
width: 600px;
padding: 10px;
}
.content-wrapper .col1, .content-wrapper .col2 {
display: inline-block;
vertical-align: top;
border: 1px solid #464646;
background-color: #ffffff;
}
.content-wrapper .col1 {
width: 295px;
height: 250px;
}


#2 guest_BESLO_*

guest_BESLO_*
  • Gasten
    Laatst bezocht

Geplaatst op 11 december 2013 - 17:41

Bericht bekijkenHypenate, op 09 december 2013 - 20:50, zei:

HTML Code:
.content-wrapper .col1, .content-wrapper .col2 {
display: inline-block;
vertical-align: top;
border: 1px solid #464646;
background-color: #ffffff;
}

Wat je hier eigenlijk opgeeft is dat de col1 of col2 class binnen class content-wrapper bepaalde eigenschappen krijgt: Align-top, border etc. Omdat je hier geen nieuwe maten opgeeft voor col1 of col2 zullen deze onder mekaar (want geen float en geen andere breedte => eigenlijk 100% breedte van content-wrapper) staan binnen contentwrapper. De hoogte zal bepaald worden door de inhoud van col1 en col2 respectievelijk

Bericht bekijkenHypenate, op 09 december 2013 - 20:50, zei:

HTML Code:
.content-wrapper .col1 {
width: 295px;
height: 250px;
}

Voor col1 ga je hier nu expliciet zeggen dat deze wel een vaste hoogte en breedte heeft. Deze is echter alleen geldig voor .col1;  .col2 heeft als breedte gewoon de breedte van content-wrapper.

Je hebt dus eigenlijk op de meest handige manier eerst de eigenschappen van .content-wrapper gedefinieerd, dan de gemeenschappelijke eigenschappen van zowel col1 als col2 en daarna de afwijkende eigenschappen van col1.

De langere weg had geweest:
HTML Code:
.content-wrapper .col1 {
display: inline-block;
vertical-align: top;
border: 1px solid #464646;
background-color: #ffffff;
width: 295px;
height: 250px;
}

.content-wrapper .col2 {
display: inline-block;
vertical-align: top;
border: 1px solid #464646;
background-color: #ffffff;
}

Waarbij je dus een deel steeds dubbel zou geschreven hebben.

Wel even opletten dat je voor col1 niet meer inhoud gaat voorzien dan er in die hoogte van 250px kan. Anders zal je de scrolbar moeten gaan voorzien of accepteren dat de inhoud over de rand van de betrokken div zal lopen.

De padding voor col1 en 2 is echter wel terug 0 want zijn andere divs. Wil je de padding settings van de wrapper overnemen dan zal je padding:inherit; moeten opgeven bij col1 en col2 (in jouw tweede blokje CSS eigenschappen dus).

Hoop dat dit is wat je wou weten.





Ook met taq Solved voorzien

0 gebruiker(s) lezen dit onderwerp

0 lid(leden), 0 bezoeker(s), 0 anonieme gebruikers

Inloggen


[Solved] Untitled 1

Met dank aan Jürgen voor de jarenlange inzet van visualbasic.be (anno dec 2000)
Met dank aan Mike en Ronneke voor de jarenlange inzet van vbib.be (anno dec 2010)
Met dank aan PascalBianca voor de jarenlange inzet van vbib.be (anno dec 2016)