Mettre une image de fond sur les côtés
Vous êtes ici : Accueil / Articles / Formations en XHTML / CSS
Ce que nous voulons obtenir
Nous sommes une entreprise qui fait semblant de savoir parler latin, et nous voulons afficher un texte avec une affreuse bordure bleue à gauche et à droite :
Premier essai
Tout naturellement, nous allons essayer le code suivant :
<head>
<style>
#container {
width: 400px;
border: 1px solid blue;
}
.left, .right {
background-image: url(bord.gif);
background-repeat: repeat-y;
height: 100%;
width: 14px;
}
.left { float: left; }
.right { float: right; }
</style>
</head>
<body>
<div id="container">
<div class="left"></div>
<div class="right"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sit amet arcu at lectus consectetuer imperdiet. Curabitur in nunc. Donec magna est, pellentesque eget, suscipit vitae, elementum ac, justo. Integer molestie enim. Vestibulum est enim, semper id, pulvinar a, pulvinar et, ipsum. Maecenas blandit ante quis velit. Aenean ultrices semper felis. Vestibulum sodales porta urna. Nam magna ligula, volutpat suscipit, pretium in, tincidunt in, nunc. Nullam fermentum viverra eros. Quisque urna sem, dapibus eget, elementum ut, vulputate at, sem. Quisque adipiscing imperdiet pede. Quisque feugiat.</p>
</div>
</body>
</html>
Le résultat sous firefox est :
Et sous internet explorer :
Effectivement, le résultat est loin d’être au rendez-vous. Pas de panique, sortons l’arme fatale : les tableaux.
Deuxième essai
Depuis la nuit des temps ( enfin presque ), les développeurs ont pallié au manque de compatibilité des navigateurs par une utilisation abusive de tableaux. Perpétuons cette tradition.
Le principe est simple : une colonne pour la bordure de gauche, une pour la bordure de droite, et une pour le texte.
<head>
<style>
#container {
width: 400px;
border: 1px solid blue;
}
.left, .right {
background-image: url(bord.gif);
background-repeat: repeat-y;
height: 100%;
width: 14px;
}
</style>
</head>
<body>
<table id="container" cellspacing="0" cellpadding="0">
<tr>
<td class="left"></td>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sit amet arcu at lectus consectetuer imperdiet. Curabitur in nunc. Donec magna est, pellentesque eget, suscipit vitae, elementum ac, justo. Integer molestie enim. Vestibulum est enim, semper id, pulvinar a, pulvinar et, ipsum. Maecenas blandit ante quis velit. Aenean ultrices semper felis. Vestibulum sodales porta urna. Nam magna ligula, volutpat suscipit, pretium in, tincidunt in, nunc. Nullam fermentum viverra eros. Quisque urna sem, dapibus eget, elementum ut, vulputate at, sem. Quisque adipiscing imperdiet pede. Quisque fugiat.</td>
<td class="right"></td>
</tr>
</table>
</body>
</html>
Le résultat sous les 2 navigateurs est :
Tout est pour le mieux dans le meilleur des mondes, jusqu’à ce que vous vous aperceviez que cette entreprise est une filiale du W3C. La patron va en faire une jaunisse s’il s’aperçoit que votre site n’est pas valide XHTML. Vous avez le choix entre 2 solutions : soit faire un pied de nez à votre patron et tant pis pour le boulot, soit essayer de rendre votre xhtml valide coûte que coûte.
Dernière solution
Après réflexion, vous vous dites que 10 000 € pour un bloc xhtml, cela en vaut quand même peut-être le coup. Vous essayez le code suivant :
<head>
<style>
#container {
width: 400px;
border: 1px solid blue;
position: absolute
}
.left, .right {
background-image: url(bord.gif);
background-repeat: repeat-y;
position: absolute;
height: 100%;
width: 14px;
}
.left { left: 0px; }
.right { right: 0px; }
</style>
</head>
<body>
<div id="container">
<div class="left"></div>
<div class="right"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sit amet arcu at lectus consectetuer imperdiet. Curabitur in nunc. Donec magna est, pellentesque eget, suscipit vitae, elementum ac, justo. Integer molestie enim. Vestibulum est enim, semper id, pulvinar a, pulvinar et, ipsum. Maecenas blandit ante quis velit. Aenean ultrices semper felis. Vestibulum sodales porta urna. Nam magna ligula, volutpat suscipit, pretium in, tincidunt in, nunc. Nullam fermentum viverra eros. Quisque urna sem, dapibus eget, elementum ut, vulputate at, sem. Quisque adipiscing imperdiet pede. Quisque feugiat.</p>
</div>
</body>
</html>
Le résultat sous firefox est :
Et sous internet explorer :
Zut alors, vous y étiez presque. Les larmes aux yeux, vous vous apprêtez à mettre votre fichier à la corbeille, quand tout à coup, vous vous souvenez d’une recommandation que vous a faite votre grand-père sur son lit de mort : "Souviens-toi, n’oublies jamais, jamais, de mettre une DTD". Puis il a fait argl argl et il est mort.
Vous ajoutez
Et, ô miracle, votre page s’affiche correctement sous Firefox et Internet Explorer.