5568 sujets

Sémantique web et HTML

[Résolu] Votre avis sur mon 1er code XHTML ?

Bonjour,
Je viens de réaliser ma première trame de page en XHTML + CSS en m'inspirant des lectures d'Alsacréations.
Et j'aimerai bien avoir votre avis...

Je souhaite obtenir :
- un header (hauteur et largeurs fixes)
- un contenu "A" à gauche (largeur fixe et hauteur variable)
- un contenu "B" à droite (largeur fixe et hauteur variable)
- un footer (largeur fixe et hauteur variable)

Comme c'est ma 1ère trame, je ne suis pas sûr de mon code :
- peut-être peut-on le simplifier ?
- ou autre ?

A votre avis ? Est-ce correct ou peut-on mieux faire et comment ?

PS : Test sous IE 4 -> 6 : ok et Test Firefox 1 -> ok

CODE CSS :
# body  {
 margin : 0;
 padding : 0;
 background : navy;
}
#conteneur {
 text-align : left;
 position : absolute;
 width : 750px;
 left : 50%;
 margin-left : -375px;
 background-color : #ffffff;
}
#header {
 height : 60px;
 background : #ffffff;
}
#contenu {
 position : relative;
 background : ;
 width : 750px;
}
#contenuA {
 float : left;
 background : yellow;
 width : 600px;
}
#contenuB {
 width : 150px;
 background : lime;
 float : right;
}
#footer {
 background : #c0c0c0;
 clear : both;
}


CODE HTML :
<div id="conteneur">
	  <div id="header">Header : hauteur et largeur fixes</div>
	  <div id="contenu">
	  	<div id="contenuA">contenuA : hauteur variable, largeur fixe<br />contenuA : hauteur variable, largeur fixe<br />contenuA : hauteur variable, largeur fixe<br />contenuA : hauteur variable, largeur fixe</div>
	  	<div id="contenuB">contenuB : <br />hauteur variable <br />largeur fixe</div>
	  </div>
	 <div id="footer">Footer : hauteur variable, largeur fixe<br />Footer : hauteur variable, largeur fixe</div>
</div>


Merci
Modifié le 29 Nov 2004 - 18:54
Bonjour,

Je vois pas trop ce que tu attends de nous si tu t'es inspiré des modèles. Si cela passe déja sous les navigateurs standards alors c'est impec !

Bon courage
Un avis ou bien des améliorations du code : je suis surpris d'avoir pratiquement réussi à la 1ère tentative... je me doute que mon code doit être plutôt basique... donc je recherche des avis et conseils...
Administrateur
QuestionWeb a écrit :
Pas de commentaire à mon post...Snif
Mon code est donc OK ?
Pas d'amélioration a y amener ?

Ben en fait, je ne vois pas trop quoi dire non-plus : c'est un code déjà tout prêt à l'emploi Smiley smile

Sinon, évite de n'utiliser que des div pour ta structure :
- ton header est un titre ? --> <h1>
- ton footer est un paragraphe ? --> <p>
- etc.

Utilise les balises appropriées à leur fonction.
Effectivement mon header est un titre, donc je vais modifier... maintenant je vais me pencher sur l'accéssibilité...

Merci Raphael...
QuestionWeb a écrit :
Effectivement mon header est un titre, donc je vais modifier... maintenant je vais me pencher sur l'accéssibilité...


Non ! Faut pas modifier ! C'est OK !

header => titre => h1

<confusion>
Ah! le header n'était pas un <h1> ! Alors faut modifier ! Smiley confused
</confusion>
Modifié le 01 Dec 2004 - 04:48
QuestionWeb a écrit :

CODE HTML :
<div id="conteneur">
	  <div id="header">Header : hauteur et largeur fixes</div>
	  <div id="contenu">
	  	<div id="contenuA">contenuA : hauteur variable, largeur fixe<br />contenuA : hauteur variable, largeur fixe<br />contenuA : hauteur variable, largeur fixe<br />contenuA : hauteur variable, largeur fixe</div>
	  	<div id="contenuB">contenuB : <br />hauteur variable <br />largeur fixe</div>
	  </div>
	 <div id="footer">Footer : hauteur variable, largeur fixe<br />Footer : hauteur variable, largeur fixe</div>
</div>

Sibelius dit qu'il ne faut pas tout faire qu'avec des div, et il a raison ( http://www.alsacreations.com/blog/index.php?2004/08/15/51-maladies-exotiques-des-css ), mais dans la plupart des cas, ton html devrai ressembler à ça plutôt :

<div id="conteneur">
	  <div id="header"><h1>Header : hauteur et largeur fixes</h1></div>
	  <div id="contenu">
	  	<div id="contenuA">
                     <h2>Titre du contenuA</h2>
<p>contenuA : hauteur variable, largeur fixe<br />contenuA : hauteur variable, largeur fixe<br />contenuA : hauteur variable, largeur fixe<br />contenuA : hauteur variable, largeur fixe</p></div>
	  	<div id="contenuB">
                     <h2>Titre du contenuB</h2>
<h3>Sous-titre1 (facultatif bien sûr) du contenuB</h3>
<p>Blablabla : <br />hauteur variable <br />largeur fixe</p>
<h3>Sous-titre2 (facultatif bien sûr) du contenuB</h3>
<p>Blablabla : <br />hauteur variable <br />largeur fixe</p></div>
	  </div>
	 <div id="footer"><h2>Footer</h2>
<p>Footer : hauteur variable, largeur fixe<br />Footer : hauteur variable, largeur fixe</p></div>
</div>
a écrit :
Sibelius dit qu'il ne faut pas tout faire qu'avec des div, et il a raison ( http://www.alsacreations.com/blog/index.php?2004/08/15/51-maladies-exotiques-des-css ), mais dans la plupart des cas, ton html devrai ressembler à ça plutôt : snip


Je penses que Raphaël ne pensait pas à supprimer le div="header" mais à indiquer que si c'est un titre de premier niveau il faut le baliser avec h1.
Sinon ton code me semble correct avec une distinction grâce à quelques divs de structure qui paraissent satisfaisantes.
OK! Merci de vos réponses.
Effectivement, j'étais surpris de devoir changer mon header en H1. Par contre, il contiendra du H1.
Je ne comprends, Igor, ce que tu veux dire dans la seconde partie de ta phrase ("avec une distinction grâce") :
a écrit :
Sinon ton code me semble correct avec une distinction grâce à quelques divs de structure qui paraissent satisfaisantes.

Quoiqu'il en soit, la question sous-jacente à mon intervention était : pour mes premières lignes de code, ne suis-je pas déjà atteint de "Divite" ?
Je me suis mal exprimé.
Je rappelais simplement que les divs que tu introduits par une id constituent la structure logique de ta page.
Comme un entete de page, un contenu principal, la navigation, un pied de page. Ce que tu as fait. C'est en somme un regroupement des éléments constitutifs de tel ou tel fonction de la page.

Bon je suis sûr d'être plus claire Smiley rolleyes . Pas réveillé.
Sujet clos
Aller à