Squelette d'une page XHTML (CSS)

SuperVespa · 15 Décembre 2006

Salut à tous,

«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 ...


<!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

xpatval · 15 Décembre 2006

Salut,

Une remarque concernant la taille du conteneur: 900px n'est pas (encore) une taille "accessible", j'entends par là qu'un minimum de 10% d'internautes possèdent encore des écrans 800x600...

Et le scrolling horizontal ET vertical est assez rebutant au cours de la navigation

Bien entendu, cette remarque est personnelle.

xpatval

klelugi · 15 Décembre 2006

Bonjour SuperVespa,

A vu de nez c'est vraiment sympa

code propre que tu pourras aisement passé en strict d'ailleur j'imagine.

J'aurai peut etre 2 choses sur lesquelles j'interviendrais pour ma part :

- utilisation d'une liste pour la colonne droite (les ss-cat)

- imbrication de : div centre dans le div droite de façon a ce que ta colonne droite ait une couleur de fond sur toute la hauteur, si cela est important pour ton visuel final biensur

SuperVespa · 15 Décembre 2006

Salut xpatval et klelugi, merci pour vos réponses !

Concernant la dimension (900 pixels de large), je suis le premier à insister sur le respect d'un affichage 800x600 pour un site «tout public». Surtout que, même avec un affichage 1024x768, la surface est limitée à environ 800 pixels lorsqu'une fenêtre optionnelle d'IE est ouverte (l'historique par exemple). Mais dans le cas présent, le site s'adressera principalement à un public bien équipé et ce format fait partie du cahier des charges.

Concernant la colonne de droite (sous-menu & «last news»), le layout de base (montage Photoshop) prévoit qu'il n'occupe pas obligatoirement toute la hauteur. Donc la couleur de fond ne doit pas aller jusqu'en bas. Par contre, klelugi, n'hésite pas à poster un exemple du code retouché par tes soins avec un <div> de fond sur toute la hauteur. Sinon, qu'entends-tu par «les ss-cat»?

Si d'autres personnes veulent bien tester et commenter mon code, merci par avance ...

karnabal · 15 Décembre 2006

Slt,

Sinon, qu'entends-tu par «les ss-cat»?

Les sous-catégories. CQFD

Inspire-toi des exemples qui se trouvent là, le code est propre.

Connexion

Squelette d'une page XHTML (CSS)

Sujets conseillés

SuperVespa

xpatval

klelugi

SuperVespa

karnabal

Veuillez vous connecter pour commenter

Parcourir

Activité