«Petit nouveau» sur ce forum, je cherche à partager notre/votre expérience en proposant de commenter le squelette XHTML annexe. Il s'agit d'une mise en page très classique, avec un «banner» (en haut), un espace réservé aux menus principaux, 3 colonnes fixe (2 pour le contenu, 1 pour les sous-menus à droite) et un bandeau «pied de page». Le tout dans un conteneur de 900 pixels, centré horizontalement au milieu de la page.
Le code me semble bon, en tout cas cela semble s'afficher correctement sous Safari (MacOS 10.3.9) et sous IExplorer (Windows XP Pro). Le contenu des colonnes de droite et centrale est censé repousser le bandeau du bas (pied de page), selon la quantité de texte.
1. Merci de me donner votre avis «d'experts CSS» et de me faire part de vos remarques, idées d'optimisation et autres corrections ...
2. N'est-il pas possible sur ce forum de placer un fichier annexe à un post (dans mon cas: code HTML sous la forme d'un fichier téléchargeable au lieu de le mettre dans le message)?
P.S. si cette page peut aider d'autres utilisateurs de ce forum, n'hésitez pas à l'utiliser comme base pour votre création ...
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Projet layout 3 colonnes</title>
<style type="text/css">
<!--
body {
background-color: #336699;
padding: 0px;
margin-top: 25px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
margin: 0px;
padding: 0px;
text-align: justify;
}
#conteneur {
background-color: #FFFFFF;
width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#bannerHaut {
background-color: #CCCCCC;
height: 100px;
}
#bannerMenu {
background-color: #999999;
height: 50px;
}
#gauche {
background-color: #FFFFFF;
float: left;
width: 290px;
margin: 0px;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 30px;
}
#centre {
background-color: #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 270px;
margin-left: 340px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 0px;
padding-left: 0px;
}
#droite {
background-color: #CCCCCC;
float: right;
width: 230px;
padding-top: 20px;
padding-left: 20px;
padding-bottom: 20px;
}
#piedPage {
background-color: #CCCCCC;
height: 50px;
clear: both;
}
-->
</style>
<link href="file:///MegaDur 250Go/Users/Pub2/Desktop/Dreamweaver vidéo/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteneur">
<div id="bannerHaut">
<p>Banner<br />
</p>
</div>
<div id="bannerMenu">
<p>menu</p>
</div>
<div id="gauche">
<p>Earum vero majores natu, quamquam insigni specie erant, tamen humanis verbis satis laudari poterant; at minoris pulchritudo tam mira erat ut humano sermone ne exprimi quidem posset. Jam cives advenaeque multi puellam, ut deam, summa religione colebant ferebantque alteram Venerem in mediis hominibus versari. Fama denique per gentes latius manante, a proximis insulis atque etiam a terrae omnibus provinciis plurimi homines ad puellam conspi- ciendam longis itineribus convenerunt.</p>
<p> </p>
<p>Iipsius autem Veneris templis relictis, pervenit res ad aures verae deae quae, ubi se neglegi honoresque suos ad puellam mortalem conferri cognovit, maxima ira incensa clamavit: Non diutius gaudebit ista ! o Vocato igitur filio, pinnato illi et sagittis armato Cupidini Psychen ostendit jussitque: Matris tuae injurias vindica ! Puella ista turpissimi mortalis amore teneatur, ut miserior nulla per totum orbem terrarum inveniri possit.</p>
</div>
<div id="droite">
<p>Sous-catégorie 1</p>
<p>Sous-catégorie 2</p>
<p>Sous-catégorie 3</p>
<p>Sous-catégorie 4</p>
<p>Sous-catégorie 5</p>
<p>Sous-catégorie 6</p>
<p>Sous-catégorie 7</p>
</div>
<div id="centre">
<p>Fama denique per gentes latius manante, a proximis insulis atque etiam a terrae omnibus provinciis plurimi homines ad puellam conspi- ciendam longis itineribus convenerunt; ipsius autem Veneris templis relictis, pervenit res ad aures verae deae quae, ubi se neglegi honoresque suos ad puellam mortalem conferri cognovit, maxima ira incensa clamavit.</p>
<p> </p>
<p>Non diutius gaudebit ista ! o Vocato igitur filio, pinnato illi et sagittis armato Cupidini Psychen ostendit jussitque: Matris tuae injurias vindica ! Puella ista turpissimi mortalis amore teneatur, ut miserior nulla per totum orbem terrarum inveniri possit. Erant olim in quadam civitate rex et regina, quibus fuerunt tres pulcherrimae filIae. Earum vero majores natu, quamquam insigni specie erant, tamen humanis verbis satis laudari poterant; at minoris pulchritudo tam mira erat ut humano sermone ne exprimi quidem posset.</p>
<p> </p>
<p>Earum vero majores natu, quamquam insigni specie erant, tamen humanis verbis satis laudari poterant; at minoris pulchritudo tam mira erat ut humano sermone ne exprimi quidem posset. Jam cives advenaeque multi puellam, ut deam, summa religione colebant ferebantque alteram Venerem in mediis hominibus versari. Fama denique per gentes latius manante, a proximis insulis atque etiam a terrae.</p>
</div>
<div id="piedPage">
<p>Pied de page </p>
</div>
</div>
</body>
</html>
Edit Modérateur : Merci d'utiliser la balise CODEBOX pour les codes longs