5 , 4 , 3 , 2 , 1 , 0 div !

miniature : image de base

En partant d'une image découpé en 3 portions , on se retrouve confronté a differents choix pour reproduire une page html fluide .
Une imbrications de < div > semble s'imposé pour dispatché les differents morceaux ...

5 ,4 ,3 ,2 ,1 ,0 : c'est le nombre de div a atteindre en partant d'un decoupage style année 1998/2005 vers un futur proche ... aujourd'hui ?

Ces test sont dans les cartons depuis courant 2006 , un premier essai sur un forum publique : reprise d'un topic d'alsacreations , a l'époque , les pseudo :after et :before etait eux aussi dans les cartons , on n'en parlait que trés peu , même quand on savait !

La page test : finale sans <div> , envisageable ,si vous la trouvez acceptable dans IE .

5 div , premiere approche classique

page test : avec 5 elements <div>

<div id="global"> <div id="haut"> <div id="bas"> <div id="menu"> le menu </div> <div id="main"> blablabla </div> </div> <!-- fin du bas --> </div> <!-- fin du haut --> </div> <!-- fin du global -->

Décomposition

3 elements <div> vont servir a affiché nos trois morceau d'image et 2 autres elements vont contenir le menu et le contenu

Cette methode tout à fait pertinente est interessante a juste titre et solide .

4 div , La seconde approche encore classique

page test : avec 4 elements <div>

<div id="global"> <div id="haut"> <div id="bas"> <ul id="menu"> <li>les liens </li> <li>du menu </li> </ul> <div id="main"> blablabla </div> </div> <!-- fin du bas --> </div> <!-- fin du haut --> </div> <!-- fin du global -->

Décomposition

3 elements <div> vont servir a affiché nos trois morceau d'image et 2 autres elements vont contenir le menu et le contenu , Le menu composé d'une liste est lui même un element de type block , nous pouvons donc nous defaire d'un premier <div> .

Cette methode toujours interessante est encore solide .

Une reprise sur les style pour le menu et c'est okay .

3 div , La troisieme approche demande une mise en forme un peu plus particuliere

page test : avec 3 elements <div>

<div id="global"> <div id="haut"> <div id="bas"> <ul id="menu"> <li>les liens </li> <li>du menu </li> </ul> <h1 > titre 1</h1> <h2 > titre 2</h2> <p > blablabla </p> </div> <!-- fin du bas --> </div> <!-- fin du haut --> </div> <!-- fin du global -->

Décomposition

3 elements <div> vont toujours servir a affiché nos trois morceau d'image et nos autres elements se verront appliqué directement les styles appropriés

nous venons de nous defaire d'un second <div> .

Cette methode toujours interessante est encore solide et demande un peu plus de rigueur peut-être

2 options de mise en forme (style 2 colonnes)
1 les textes contournent les menu
2 les textes se degagent sur l'ensemble de la hauteur de la page .

Mettre les navigateurs Obsolete hors jeu .

2 div , La quatrieme approche demande rigueur et standard autant coté codeur que navigateur !

page test : avec 2 elements <div>

<div id="haut"> <div id="bas"> <ul id="menu"> <li>les liens </li> <li>du menu </li> </ul> <h1 > titre 1</h1> <h2 > titre 2</h2> <p > blablabla </p> </div> <!-- fin du bas --> </div> <!-- fin du haut -->

Décomposition

2 elements <div> vont seulement servir a affiché 2 de nos trois morceau d'image , <body> se chargera du troisieme .

nous venons de nous defaire d'un troisieme <div> : #global , devenu inutile.

Cette methode interessante requiert un codage respectant les standards

les navigateurs obsoletes ne pourront dimensionné <body> , ni le centré .

1 div , dans la cinquieme approche impliquons : <html>

page test : avec 1 element <div>

<div id="bas"> <ul id="menu"> <li>les liens </li> <li>du menu </li> </ul> <h1 > titre 1</h1> <h2 > titre 2</h2> <p > blablabla </p> </div> <!-- fin du bas -->

Décomposition

1 element <div> va servir a affiché 1 de nos trois morceau d'image , <html> et <body> se chargeront des 2 autres .

nous venons de nous defaire d'un quatrieme <div> : #haut , devenu lui aussi inutile.

Cette methode interessante requiert toujours un codage respectant les standards , cette methode est envisageable aujourd'hui .

les navigateurs obsoletes ne pourront attribué une image de fond a <html>.

Navigateur particulier , cherche regle particuliere

0 div , dans la sixieme approche impliquons a nouveau : <html>

page test : avec 0 element <div>

<ul id="menu"> <li>les liens </li> <li>du menu </li> </ul> <h1 > titre 1</h1> <h2 > titre 2</h2> <p > blablabla </p>

Décomposition

aucun element <div> ne servira a affiché l'un de nos trois morceau d'image , <html> et <body> se chargeront de 2 morceaux .

<html> affublé du pseudo :after. dans les régles css pourra affiché un second elements de fond.

nous venons de nous defaire du dernier <div> : #haut , devenu lui aussi inutile.

Cette methode interessante requiert toujours un codage respectant les standards , cette methode n'est pas vraiment envisageable aujourd'hui .

Par exemple , Opera , n'affichera pas l'image de fond dans cette element créer par les style et pseudo html:after .

Epurons les style de nos derniers bug et restons logique .

page test : finale sans <div> , envisageable si acceptable dans IE

<body> determine les contenus affichable , appliquons donc nos fond et pseudo sur cet element: <body> , qui se chargera donc d'afficher nos trois morceau d'images au lieu d'impliqué <html> qui n'est pas fait pour ça .

Internet Explorer reste encore sur la touche !

derniers mots .

On remarquera , qu'en cours d'élimination des <div> , certains elements demande un surplus de style , pour conserver l'aspect initial de la page (voir le menu par exemple) .

ensuite , grace au selecteur , il est aussi possible d'egayer la page , IE 6 ne reagit pas , et IE 7 en partie .

Le test finale ne passe pas entirement dans IE , mais la page reste lisible . Le contenu est sauf !

Ecrire un commentaire




Quelle est la dernière lettre du mot qtec ?