28172 sujets

CSS et mise en forme, CSS3

Besoin de votre avis sur la structure de ma page

Bonsoir !

Je voudrai vous soumettre un bout de code de mon site pour savoir si c'est correcte ou pas. Actuellement, ça fonctionne très bien avec IE 10 et FF 21. Je précise que mon site a une largeur de 960px et est centré sur la page.

Voici le code CSS volontairement simplifié :

* {margin:0;padding:0;}
html {font-size: 62.5%;}
body {margin: 0; padding: 0; font: 1.2em Verdana, 'Trebuchet MS', Arial, Sans-serif; background: #FCF8F3 url('top.png') repeat-x;}

#header {width: 960px; overflow: hidden; margin-left: auto; margin-right: auto;}
#main {width: 960px; overflow: hidden; margin-left: auto; margin-right: auto;}
#footer {width: 960px; overflow: hidden; margin-left: auto; margin-right: auto;}


Et le code html :

<html>

<head>....</head>

<body>

<div id="header">Mon header</div>
<div id="main">Corps de page</div>
<div id="footer">Pied de page</div>

</body></html>


Qu'en pense nos experts ?

Merci par avance Smiley smile
Modifié par Hayreon (18 Jun 2013 - 18:47)
Première erreur (impardonnable) : il manque le doctype.

Ensuite tu supprimes les marges sur tous les éléments et juste derrière tu supprimes les marge sur l'élément body. C'est un doublon.

Une taille de police de 12 pixels par défaut est trop petite pour les écrans actuels. Elle n'offrira pas un bon confort de lecture. Essai de passer au moins à 14 pixels (1.4 em sur ton body).

Tu ne définis pas hauteur de ligne sur ta balise body.

Dans tes définitions de font tu ne donnes que des polices "Windows". Quid de OS X, Android, iOS, GNU/Linux, etc. ?

Pourquoi tu mets des overflow: hidden; sur tes éléments header, main et footer ?

Tes 3 éléments #header, #main et #footer ont exactement les mêmes règles. Il faudrait donc, logiquement, utiliser une classe commune à ces éléments.

margin-left: auto; margin-right: auto; se simplifie en : margin: auto;

Bon après il faudrait voir le code complet pour vraiment te donner tous les renseignements possibles.
Modifié par jb_gfx (18 Jun 2013 - 19:38)
Bonjour et merci pour cette réponse !

- Pour le doctype, il y est. Comme je l'ai dit, c'est un bout de code simplifié ^^
- Les marges, je vais corriger
- La police à 14px, je vais tester (je n'aime pas quand c'est trop grand !)

>> Quid de OS X, Android, iOS, GNU/Linux, etc

- Peux tu m'éclairer sur ce sujet ?

>> margin-left: auto; margin-right: auto; se simplifie en : margin: auto;

- Oui mais de cette manière on définie aussi les marges haut et bas (que je ne veut pas en auto)

Encore merci !
Hayreon a écrit :

- La police à 14px, je vais tester (je n'aime pas quand c'est trop grand !)


Tu mets une taille de 12px et pour compenser le manque de lisibilité tu utilises la police Verdana qui a la particularité d'apparaitre plus grande que les autres polices à taille égale. Cette police à été spécialement conçue pour avoir une bonne lisibilité avec une petite taille de corps. Cette époque étant révolue je te conseille de passer au moins en 14px et d'oublier Verdana (qui n'est disponible que sous Windows).

Hayreon a écrit :

&gt;&gt; Quid de OS X, Android, iOS, GNU/Linux, etc

- Peux tu m'éclairer sur ce sujet ?


Un peu de lecture ici : http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
Je te laisse faire des recherches, il y a des tas d'articles sur le sujet.

Hayreon a écrit :

&gt;&gt; margin-left: auto; margin-right: auto; se simplifie en : margin: auto;

- Oui mais de cette manière on définie aussi les marges haut et bas (que je ne veut pas en auto)


Non, regarde ici : https://developer.mozilla.org/fr/docs/CSS/margin
margin: auto; revient à dire : margin: 0 auto 0 auto;
Sujet clos
Aller à