Leuk dat je het zo precies hebt uitgerekend en (ervan uitgaande dat de som klopt) als het aantal bytes heilig is dan heb je honderd procent gelijk. Toch is het volgens mij ook een kwestie van dingen gebruiken waarvoor ze bedoeld zijn. HTML markup op een deze manier gebruiken om alleen het uiterlijk te veranderen druist naar mijn eigen mening in tegen het moderne principe van vorm scheiden van functie (HTML vs CSS). Zou je een Zweedse vlag dan met 7 div-jes doen bijvoorbeeld? Dan zou het wellicht zelfs handiger worden om daar een ouderwetse tabel voor te gebruiken. ;]

Ik zou ook gaan voor de 3 div'jes.
Zal inderdaad sneller laden en mits het hier om 'slechts' drie div'jes gaat zie ik er nog geen probleem in.
Als je inderdaad een Zweedse vlag moet hebben ga je dit niet meer in div'jes doen maar in images (1x1px).
Maar zoals al gezegd het ligt eraan waar je het voor gebruikt en hier lijkt het me geen enkel probleem om met 3 div'jes te werken. Ook lekker handig voor hergebruik ;)

Helemaal met Tjerk eens, ik zou ook voor de 1px brede image gaan. En als aanvulling: zodra je de vlag op meerdere pagina's gebruikt, "wint" de CSS + image het al van de html, aangezien die gecached worden ;).

Origineel gepost door Arjan de V.

Hey Alex,

Ik heb het even voor je uitgerekend:

Jouw html en css (samen)

Code:

#italia { background: url(images/vlag.png) repeat-y; text-indent: -9999px; }
<div id="italia">Italiaanse vlag</div>

En dan komt er nog een gif (in het optimaalste geval bij) van 960px x 1px (want de vlag moet 960px breed zijn). Deze gif is 1319 bytes. De HTML + CSS van jou is 115bytes, samen dus 1434bytes

Mijn code is dit:

Code:

.bg-groen {background: #336667;}
.bg-wit {background: #ffffff;}
.bg-rood {background: #cc0001;}
<div id="italia"><div class="bg-groen"></div><div class="bg-wit"></div><div class="bg-rood"></div></div>

Dat is alles wat ik nodig heb, en is totaal 200bytes, met andere woorden dat van jou is 700% groter!

Enige wat mij rest te zeggen is:

In the face!

Ik weet niet hoe je dit ziet lukken ;)
DIV's zonder float? Zo staan ze onder elkaar terwijl ze naast elkaar moeten staan? Of je moet al de Iraanse vlag (zonder afbeelding in het midden) willen hebben.

Als de classes (float, height, width) worden aangepast "win" je op jouw manier toch nog, maar... check de post van Jacob eens.