[opgelost] spelen met css Topic is solved

[iStevo]

Ik ben volop aan het spelen met css, maar ik geraak er niet uit.
Ik ben nu al een paar weken aan het uitproberen maar ik zie niet hoe ik het juist moet aanpassen.
Ik heb het gevoel dat het antwoord nabij is, hopelijk kan iemand me op weg helpen.

Dit is stuk van mijn sjabloon

Code: Select all

                <div id="footer_holder" class="container">
                           <div id="footer_links">{global_content name='openingsuren'}</div>
                           <div id="footer_midden">midden</div>
                           <div id="footer_rechts">{global_content name='copyright'}</div>
                 </div>

dit is stuk van mijn stylesheet

Code: Select all

#footer_holder {
        width: 1000px;
        min-height: 100px;
        font-size: 11px;
        background: #85aa94 url('[[root_url]]/uploads/images/layout/spacer2.png') repeat;
        font-family: Verdana, Arial, Comic Sans Ms, sans-serif;
}
#footer_links {
        width: 33%;
        text-align: left;
        float: left;
        padding: 20px;
}
#footer_midden {
        width: 33%;
        text-align: left;
        float: left;
        padding: 20px;
}
#footer_rechts {
        width: 33%;
        text-align: left;
        float: right;
        padding: 20px;
}
.container {
	width: 1000px;
        height: 99%; 
	margin: 0 auto;
        background: #c0c0c0 url('[[root_url]]/uploads/images/layout/spacer.png') repeat;
	overflow: hidden; 
}

De bedoeling is dus dat mijn teksten in mijn 3 divs op gelijke hoogte staan, maar dat lukt me niet.

[velden]

Het is eigenlijk vrij knap dat de teksten niet op gelijke hoogte staan, want standaard zou je dat wel verwachten.

Gebruik een web inspector om te controleren welke style wordt toegepast op een element. Je kunt het vaak ook live aanpassen om dingen uit te proberen. Bijvoorbeeld Firefox browser met Firebug. Overigens hebben Firefox, Chrome, Safari en Internet Explorer ook al ingebouwde 'inspectors'.

Verder is je css niet echt efficient omdat je veel dezelfde styles toepast op verschillende ids

Code: Select all

#footer_links {
        width: 33%;
        text-align: left;
        float: left;
        padding: 20px;
}
#footer_midden {
        width: 33%;
        text-align: left;
        float: left;
        padding: 20px;
}
#footer_rechts {
        width: 33%;
        text-align: left;
        float: right;
        padding: 20px;
}

is hetzelfde als

Code: Select all

#footer_links, #footer_midden, #footer_rechts {
        width: 33%;
        text-align: left;
        float: left;
        padding: 20px;
}

is in jouw geval hetzelfde als

Code: Select all

#footer_holder > div{
        width: 33%;
        text-align: left;
        float: left;
        padding: 20px;
}

.container en #footer_holder hebben ook veel hetzelfde.

Maar goed, je moet ergens beginnen natuurlijk.

[timdebuurman]

Hoi iStevo,

Werken met percentages en padding is het probleem.

Je divs zijn 33% procent breed + 20px padding, waardoor de 3 divs samen breder zijn dan de holder van 1000px breed.

Als de holder dan toch een vast aantal pixels heeft (1000 in dit geval), kun je de footer_links, footer_midden en footer_rechts ook wel vaste pixels geven.

Dus in plaats van 33%, kun je 1000 delen door 3 en dan min de 40 pixels vor de padding aan beide kanten.

1000/3=333
333 - 40 = 293pixels breed
(hou je wel 1 pixel over)

Als je wel graag wilt blijven vasthouden aan de 33%,
dan kun je de padding weghalen, de inhoud tussen <span> en </span> zetten en deze spanm dan een margin van 20px geven.

Je krijgt dan dit als html:

Code: Select all

                <div id="footer_holder" class="container">
                           <div id="footer_links"><span>{global_content name='openingsuren'}</span></div>
                           <div id="footer_midden"><span>midden</span></div>
                           <div id="footer_rechts"><span>{global_content name='copyright'}</span></div>
                 </div>

En dit als css:

Code: Select all

#footer_holder {
        width: 1000px;
        min-height: 100px;
        font-size: 11px;
        background: #85aa94 url('[[root_url]]/uploads/images/layout/spacer2.png') repeat;
        font-family: Verdana, Arial, Comic Sans Ms, sans-serif;
}
#footer_links {
        width: 33%;
        text-align: left;
        float: left;

}
#footer_midden {
        width: 33%;
        text-align: left;
        float: left;

}
#footer_rechts {
        width: 33%;
        text-align: left;
        float: right;

}
.container {
   width: 1000px;
        height: 99%;
   margin: 0 auto;
        background: #c0c0c0 url('[[root_url]]/uploads/images/layout/spacer.png') repeat;
   overflow: hidden;
}

#footer_links span, #footer_midden span, #footer_rechts span {
	margin: 20px;
}

gr Tim

[iStevo]

Hey velden,

Hartelijk dank voor het leergeld.
Ik kan inderdaad zo mijn stylesheet wat overzichtelijker maken.


Merci timdebuurman,

Bedankt om me de oplossing aan te bieden.
Door het ook zo te verklaren snap ik ook wat je bedoeld en kan ik dat voor mijn andere div ook gebruiken.

[Rolf]

Toen ik met websites begon heb ik veel aan deze site gehad http://sceneone.nl/

Grt. Rolf