Page 1 sur 2

centrer le tout

Posté : 25 oct. 2007, 00:41
par choubix
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

Posté : 25 oct. 2007, 01:21
par AB
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/

Posté : 25 oct. 2007, 09:28
par Berzemus
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; }

Posté : 25 oct. 2007, 09:43
par Rei Itchido
pour FF

Code : Tout sélectionner

margin: auto;
pour IE

Code : Tout sélectionner

text-align:center;

Posté : 25 oct. 2007, 10:20
par choubix
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

Posté : 25 oct. 2007, 12:30
par Victor BRITO
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.

Posté : 25 oct. 2007, 13:22
par Rei Itchido
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)

Posté : 25 oct. 2007, 14:05
par AB
...
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 ....

Posté : 25 oct. 2007, 14:55
par Rei Itchido
Effectivement en Strict ça passe.
En Transitional non par contre...

Posté : 25 oct. 2007, 16:01
par choubix
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???

Posté : 25 oct. 2007, 16:26
par zeus
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

Posté : 25 oct. 2007, 17:02
par AB
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

Posté : 25 oct. 2007, 18:30
par Invité
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 ;)

Posté : 25 oct. 2007, 18:40
par Victor BRITO
Effectivement en Strict ça passe.
En Transitional non par contre...
Probablement un cas de "doctype switching" et de passage en mode "Quirks".

Posté : 25 oct. 2007, 19:55
par choubix
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 ;) )