Tijden veranderen
Breedtte van li's bepalen t.o.v. breedtte browser
Ik heb een divje #menu, met daarin een mooie list die een float:left heeft om naast elkaar te staan.
Nu wil ik de li's over de hele paginabreedtte verspreiden. Hoe kan ik dit het beste doen? Als er 3 li's zijn moet elk dan 33% zijn van de pagina breeddte.
1) Ik geef alle li's in de inline-css een width mee:
style="width:25%"
Maar dit is niet echt handig, als het aantal vaak verschilt.
2) Ik dacht iets met width:auto, maar dat is niet gelukt.
Wie o wie?
Met JavaScript tel ik het aantal li's in het menu. Vervolgens geef ik ze 100/{aantal li's} width mee met JavaScript.
Stel dat JavaScript uit zal staan dan geef ik ze een padding left en right mee, maar geen breedte.
Dit scriptje even opgezocht:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
var lis = document.getElementsByTagName('nav')[0].getElementsByTagName('li'),
len = lis.length;
for( l=0; l < len; l++ ) {
lis[l].style.width = (100 / len) + '%';
}
// En het scriptje voor kijken of JS aan/uit staat
// Maak je HTML tag zo op: <html class="no-js">
var el = document.getElementsByTagName('html')[0];
el.className = el.className.replace(/no-js/, 'js');
len = lis.length;
for( l=0; l < len; l++ ) {
lis[l].style.width = (100 / len) + '%';
}
// En het scriptje voor kijken of JS aan/uit staat
// Maak je HTML tag zo op: <html class="no-js">
var el = document.getElementsByTagName('html')[0];
el.className = el.className.replace(/no-js/, 'js');
De laatste code heb ik afgekeken van Modernizr.
Dat wordt dus apart rekenen.
En dan inline css gebruiken:
Gewijzigd op 09/11/2011 20:28:06 door Ozzie PHP
Hoewel het ook best wel in Smarty kan worden afgehandeld...
De admin heet trouwens gewoon de backend, en de site zelf waar je alles op publiceert, dat is de frontend.
en wij dus ook...