centrer le tout

25 oct. 2007, 00:41

bon, je suis assez epatte par le css: meme si c'est pas un site qui sera nomine aux prochains concours de beaute ca semble aller dans le bon sens et l'affichage passe bien sous IE et firefox (utilisateurs de safaris me tapez pas!!

)

petite question: maintenant que j'ai tout ca de fait: est-il possible de centrer le tout sur la page?
j'ai fait mon template pour que ca tienne sur 760px en longueur... ca me plairait pas trop que le site soit colel sur la gauche

merci

25 oct. 2007, 01:21

Typiquement

Code : Tout sélectionner

body {
margin:0;
padding:0;
}

#corps {
position:relative;
width:760px; 
margin:auto;
}

Si tu veux percer un peu les mystères de la mise en page CSS, va faire un tour sur http://www.alsacreations.com/

25 oct. 2007, 09:28

j'aurais fait ça moi, les valeurs auto dans css, je m'en méfie.

Code : Tout sélectionner

#corps {
 position:relative;
 width:760px;
 left:50%;
 margin-left:-380px;
}

25 oct. 2007, 09:43

pour FF

Code : Tout sélectionner

margin: auto;

pour IE

Code : Tout sélectionner

text-align:center;

25 oct. 2007, 10:20

ce qui implique que je dois utiliser les 2 au sein de "corps" pour que le site soit centre?
(cela dit j'ai teste les 2 methodes, elles otn l'air de marcher dans IE et FF par contre je n'ai pas teste d'anciennes versions)

tiens j'ai trouve un truc en apparence pas mal (pas encore teste).
ca permet d'avoir plusieurs installation d'IE sur le meme ordi (donc plusieurs versions concurrentes)

http://tredosoft.com/Multiple_IE

ca doit etre pratique pour tester

25 oct. 2007, 12:30

pour FF
Code : Tout sélectionner
margin: auto;
pour IE
Code : Tout sélectionner
text-align:center;

En fait, IE, à partir de la version 6, applique sans problème les marges automatiques ; la propriété text-align: center n'est nécessaire que pour IE 5.5 et versions inférieures.

Toujours est-il que, pour que le bloc soit centré, il lui faut définir une largeur (sinon, ça ne marche pas), et ce quel que soit le navigateur.

25 oct. 2007, 13:22

pour FF
Code : Tout sélectionner
margin: auto;
pour IE
Code : Tout sélectionner
text-align:center;
En fait, IE, à partir de la version 6, applique sans problème les marges automatiques ; la propriété text-align: center n'est nécessaire que pour IE 5.5 et versions inférieures.

Les marges automatiques ne fonctionnent pas avec IE6.
Pas avec toutes les versions du moins (je te fais confiance sur le fait qu'elle fonctionnent sur certaines versions de la version 6, mêmes si j'en ai jamais vu avec lesquelles cela fonctionne personnellement)

25 oct. 2007, 14:05

...
Les marges automatiques ne fonctionnent pas avec IE6.
Pas avec toutes les versions du moins (je te fais confiance sur le fait qu'elle fonctionnent sur certaines versions de la version 6, mêmes si j'en ai jamais vu avec lesquelles cela fonctionne personnellement)

Cela ne vient pas des versions d'IE6 .... quand cela ne fonctionne pas, c'est que le site n'est pas conforme aux standards du W3C et n'a pas la bonne déclaration doctype.
Il suffit de déclarer un <!DOCTYPE html PUBLIC "-//W3C// etc.. et ça marche.

Bref une petite vérification du code sur le validateur du W3C http://validator.w3.org/ avant d'accuser les navigateurs ....

25 oct. 2007, 14:55

Effectivement en Strict ça passe.
En Transitional non par contre...

25 oct. 2007, 16:01

wow!
plus j'avance plus je decouvre de choses!

combiens d'erreurs vous pensez qu'il puisse etre tolere??

j'utilise :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

ca me retourne 10 erreurs (dans 3 que je peux virer facilement car c'est les tags alt que je n'ai pas renseigne)

si j'utilise:

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

ca m'en retourne 5 (dont 3 que je peux virer car c'est les memes)

2 erreurs viennent de short tags, 1 est une balise <div> non ouverte apparement (et pourtant je viens de les compter: elles y sont toutes!)

au fait: si je mets mes meta tags, titres etcetc dans une page php que j'appelle ca ne va pas me retourner d'erreurs supplementaires???

25 oct. 2007, 16:26

Modération :
choubix, afin d'améliorer la lisibilité de ton message,
pense à utiliser les balises [code] ou [php] (selon le langage utilisé).

Elles sont disponibles au-dessus de la zone de saisie de ton message
lorsque tu postes un nouveau message.

Des indications sont disponibles sur la manière de mettre en forme vos messages dans la FAQ

25 oct. 2007, 17:02

wow!

1/ combiens d'erreurs vous pensez qu'il puisse etre tolere??

2/ au fait: si je mets mes meta tags, titres etcetc dans une page php que j'appelle ca ne va pas me retourner d'erreurs supplementaires???

1/ 0 c'est mieux sauf quand c'est des erreurs clairement identifiées. C'est à dire des erreurs dont tu sais qu'elle ne produiront pas des erreurs d'affichage. Donc à priori comme tu es débutant et qu'il t'es difficile d'en juger, 0 faute est le but à atteindre.

2/ Non sauf si ton code php génère du html invalide

25 oct. 2007, 18:30

Zeus: ok pour la balise. (j'utilsie tres frequemment. je pensais que c'etait plus utile pour les longsssssss code. surtout que ca retourne les fonctions 'dune couleur differentes en php!)

merci AB (et vous autres amis contributeurs a mon post

)

je vais donc tendre vers le 0 faute.
quoique la balise DIV va rester en l'etat a mon avis

25 oct. 2007, 18:40

Effectivement en Strict ça passe.
En Transitional non par contre...

Probablement un cas de "doctype switching" et de passage en mode "Quirks".

25 oct. 2007, 19:55

bon, mon template prends forme et est compliant "html 401 transitional". mon css est bon lui aussi

la classe: j'ai le droit de mettre le logo html compliant sur le template!

donc: mon site est potentiellement lisible par un maximum de navigateurs??

je merite donc ma ration d'avoine pour la journee. je la partagerais bien avec vous

au fait: merci pour ces liens: tres interessant de pouvoir verifier la validite de ce que l'on fait ua fur et a mesure!! (plus qu'a avoir la meme chose pour javascript, ajax, php et les autres avec suggestions de code alternatif

)

centrer le tout

Qui est en ligne