Mauvais centrage dans une div

[Gribouille26]

Salut,

Je voudrais centrer les pages de mon site dans le navigateur, et je vais avoir besoin de votre aide...

Je l'ai mit dans une div.page que j'ai mise a 96%. Ca marche.

J'ai un bandeau d'entête avec un jeu de div ajustables.

J'ai mit le conteneur gobale de cette entête dans ma div.page, mais il n'est plus centré malgré les marges droites et gauches de 2% chacune que j'ai définies (il est a 96% de la div.page)!

Je ne comprend pas comment faire.

J'ai utilisé cette méthodepour être compatible avec tout les navigateurs, et j'aimerai le rester.

Si quelqu'un avait le temps de se pencher sur mon problème, se serai super sympa.

Ma page est visible ici, avec tout son code.

Merci encore pour votre aide future.

(j'espère )

[20cent]

Je n'ai eu le temps de ne jetter qu'un il mais il me semble que tu abuses des sélecteurs suivants qui retirent tes conteneurs du flux normal :

position:relative;
position:absolute;

Je ne doute pas cependant que quelqu'un t'apporte bientôt une réponse plus précise.

En attendant voici trois petits liens qui t'aideront surement :

• http://openweb.eu.org/articles/initiation_flux/
  
• http://openweb.eu.org/articles/initiation_float/
  
• http://openweb.eu.org/articles/initiation_absolue/
  

[LaurentDenis]

Hum... Cette accumulation de div te complique inutilement la tâche. Le code devrait d'abord être simplifié (première étape : après, si ça t'intéresse, on parlera sémantique )

<div class="page">

<div class="conteneur">

<img src="sitootit.gif" width="300" height="100" class="left" alt="SitooYato">

<img src="MissYato.gif" width="100" height="100" alt="">

</div>

... suite du contenu éventuellement dans un <div="contenu">

</div>

La méthode de centrage du conteneur est bonne (bien qu'une largeur relative donnerait un layout plus fluide).

Mais le positionnement de tes images n'a pas besoin de passer par absolute : un simple text-align pour celle de droite et un float pour celle de gauche devraient suffir.

Quelque-chose comme :

body { 
font-family: Comic sans MS;
font-size: 12px;
background: #FFdead;
text-align: center;
} 
.page {
margin-left: auto;
margin-right: auto;
width: 750px;
text-align: left;
}
.conteneur { 
margin-top: 12px;
border: 5px solid #FF4500; 
background: #ff7f00;
text-align: right;
width: 100%;
} 
.left { 
float: left;
}

Vite fait et sûrement à améliorer...

D'une manière générale :

- quand on commence à multiplier les div dans des div pour obtenir un positionnement, c'est qu'on est dans la mauvaise voie ou qu'on veut réaliser un effet pas forcément possible.

- même remarque quand on se met à mélanger les positionnements à coup de marges, d'absolute/relative, voire de float. Il vaut mieux s'en tenir à une technique, au moins au début.

CSS est un outil simple... si on l'aborde avec la volonté de s'en tenir à des résultats et à des moyens simple

[edit] A l'éditeur/modérateur de ce message : je n'utilise pas le tag HTML parce qu'il introduit des choses bizarres du genre alt="</span>">

<<span style='color:blue'>/div>"

lorsqu'on édite le message

[/edit]

Modifié 21 Avril 2004 par LaurentDenis

[Gribouille26]

C'est vrai, je crois que j'en ai trop mis.

Je vais suivre vos conseils et essayer de simplifier tout ça...

Je vous tiens au courant si j'arrive a recentrer après simplification!

Merci de vos conseils.

[Gribouille26]

C'est bon,

J'ai simplifier tout comme tu me l'avais indiqué LaurentDenis.

Ca marche nickel! Merci.

Maintenant, j'ai un pb (si on peut dire) avec la barre <hr> que j'avais mise dans ma page. Sous IE pas de pb, mais sous Mozilla, elle sort constament sur la droite alors qu'elle est contenue dans ma div.page qui fait 750px...

Bizarre!

Si vous savez quoi faire, je suis preneuse, sinon, je peux l'enlever. Elle n'est pas essentielle du tout, mais ça serai interressant de savoir!

Merci encore

[Dan]

Maintenant, j'ai un pb (si on peut dire) avec la barre <hr> que j'avais mise dans ma page. Sous IE pas de pb, mais sous Mozilla, elle sort constament sur la droite alors qu'elle est contenue dans ma div.page qui fait 750px...

Salut Gribouille,

Il te suffit d'enlever toute information "width" pour cette balise <hr>, elle s'adaptera automatiquement au bloc conteneur

exemple:

<style>
hr.ligne { margin-top:10px; margin-bottom:10px; }
</style>
<hr class="ligne">

Dan

[Gribouille26]

Nikel

Merci Dan.

Efficace et rapide!

C'est juste que maintenant, on se rend compte que le bandeau n'est pas vraiment centré....

Modifié 21 Avril 2004 par Gribouille26

[LaurentDenis]

hr est très utile pour le rendu hors navigateurs CSS, autrement dit dans les navigateurs textes, Netscape 4 et consors.

Donc:

- sépare chaque section logique de ta page par un hr (et regarde ta page dans lynx !)

- évacue-les dans les navigateurs CSS2 avec un hr {display: none;}

- crée les effets visuels avec des border-top et des border-bottom de tes div existantes.

[Monique]

Bonjour Gribouille,

La balise de fin de ton bloc conteneur est mal placée... du moins si tu veux que ton hr en fasse partie.

Pour savoir à quel bloc appartient une balise de fermeture </div> j'ai l'habitude d'y ajouter un commentaire comme ceci :

</div><!-- fin conteneur -->
</div><!-- fin page -->

[Gribouille26]

Denis, je n'ai pas tout compris...

Monique: les balises étaient bien placées, mais du coup, je me suis rendue compte que j'avais une div qui entourait la <hr> pour rien!

Merci, mais toujours pas centré (le bandeau du haut).

[LaurentDenis]

Désolé si c'était un peu elliptique :

Utilise les hr comme des séparations logiques entre les grandes parties de ta page (bandeau titre du site / contenu de la page / menus / pied de page).

ça rendra ta page plus claire dans les navigateurs "étranges" (non graphiques et ceux qui ne savent pas comprendre ta CSS). Pour avoir un exemple, regarde ton site dans http://www.delorie.com/web/lynxview.html qui te donne un aperçu de ce qu'elle donne dans Lynx, l'un des principaux navigateurs-texte. Pour approfondir, télécharge et installe Lynx.

Mais ces hr ne sont pas facilement stylables avec CSS dans les navigateurs "normaux". Donc, il vaut mieux :

- les cacher à l'aide d'une règle hr {display: none;}

- utiliser la propriété border (plus facile à maîtriser) pour créer le même effet visuel.

Si ça n'est pas plus clair :

- oublie les hr,

- utiliser la propriété border-bottom ou border-top pour faire apparaître des lignes horizontales délimitant visuellement les parties de ta page là où tu en as besoin.

[Gribouille26]

Je suis retourné voir les liens que m'avait passé 20cents, et après quelques re-lectures attentives, j'ai compris une partie de mon problème!

Comme 20cents m'avait dit que j'abusait des positions, et que je ne savais pas trop à quoi ça servait (je fait mes calques avec Dream! je sais: booooh!! ), je les ai enlevés.

Il m'a donc suffit de remettre "position: absolute" à mon .conteneur... Mais en fait, ça marchait pas!!!!

Alors, j'ai encore écouté Denis et j'ai simplifié!

Pourquoi des pourcentages alors que mon bandeau sera maintenant dans une div de taille fixe?

Et voilà, avec des marges fixes en pixels, c'est bien centré!

C'est pratique les pourcentages, mais pas quand ça sert à rien....

Je viens de voir ton retour LaurentDenis, merci.

C'est vraiment clair cette fois-ci!

Merci grace a vous j'ai encore appris beaucoup aujourd'hui!

Et c'est pas finit...

Modifié 21 Avril 2004 par Gribouille26

[Gribouille26]

Je viens d'aller voir mon site sur l'adresse Lynx que tu m'as donner.

C'est trop genial ce truc!!

Sais-tu, à peu près, combien de personnes utilisent ce genre de navigateurs?

Je suis contente d'avoir découvert ça car j'attache beaucoup d'importance a l'accessibilité de mes sites.

[LaurentDenis]

Oublie les pourcentages d'utilisateurs de lynx et autres, c'est une bataille sans fin.

l'important, c'est que Lynx ne retient que la structure brute de la page. Autrement dit, si c'est cohérent et agréable dans lynx, c'est un très bon signe : c'est bien parti pour être accessible sur les medias que tu ne connais pas.

Cela dit, il y a une marge entre l'aperçu dans lynx et lynx lui-même. C'est pourquoi je t'encourage à télécharger celui-ci par la suite, ne serait-ce que pour les joies de la navigation au clavier

(te presse pas et assimile déjà cequi te préoccupe maintenant).

Sur le fond, voir un extrait traduit d'un concepteur que j'aime bcp :

http://www.blog-and-blues.com/2004/mars/13..._philosophy.asp

[20cent]

Gribouille26

20cents

Sans le "s" stp !

Laurent

Tu veux parler de la navigation quand tu soulignes les différences entre Lynx et Lynx Viewer ou y'a t'il autre chose ?

[LaurentDenis]

La navigation en premier, et ensuite surtout le fait que les pages ne sont plus scrollables et qu'il faut naviguer d'écran en écran dans la même page.

Après, les formulaires franchement rébarbatifs et parfois immaniables quand ils sont trop complexes...

Enfin, j'ai noté parfois des différences de rendu inattendues entre l'aperçu dans Lynx Viewer et la réalité dans Lynx, dû sans doute à des bugs.

Franchement, Lynx, c'est 5-10 minutes pour le téléchargement et l'installation, et c'est un excellent test

[LaurentDenis]

Pourquoi des pourcentages alors que mon bandeau sera maintenant dans une div de taille fixe?

Je me permets de te renvoyer ici, et surtout à la page d'exemple de l'article en question :

http://openweb.eu.org/articles/initiation_centrage/

Ce n'est pas évident d'expliquer la différence entre valeurs absolues et valeurs relatives, résultat rigide et résultat élastique.

Disons que ton 750 px provoquera des scroll horizontaux dans diverses résolutions d'écran (pas que les vieux machins : pensez aux portables) dès qu' IE ou Mozilla ont unpanneau latéral (liens...).

Donc tu peux réduire à moins de 750px, ou mieux, utiliser une valeur en %

[20cent]

C'est noté ! Je privilégierais donc le navigateur à son émulateur en ligne dorénavant.

Merci Laurent.

[Gribouille26]

20cent. OK, noté.

Lynx pour plus tard, mais c'est des trucs a toujours garder a l'esprit

LaurentDenis: tu me conseilles quelle largeur? (je preferai pas de % ici!)

[Clair de Lune]

salut gribouille

pour la largeur du site, j'utilise des ems mais je ne sais pas ce que ça fait sur un tout petit écran

je me suis basé sur une résolution de 800*600, je crois qu'il existe peu d'écrans plus petits, et ceux là ont l'habitude du scroll horizontal

donc une taille de texte en % dans le body (sinon explorer ne redimensionne pas le texte correctement, je ne sais pas pourquoi mais comme c'est correct et que ça marche...), et ensuite toutes les tailles en ems, sauf pour les images et quelques marges réglées au pif en pixels jusqu'à avoir à peu près le même aspect dans mozilla et explorer

à peu près est important, ça te permet quand même de ne pas compliquer ton code pour quelques pixels

par contre ça a l'avantage de se redimensionner (à peu près) de la même façon sur tous les navigateurs que j'ai testés

[LaurentDenis]

Une question toute bête : pourquoi voulez-vous déterminer cette largeur ?

Promis, en échange, j'ai une excellente ressource qui explique le pb des tailles de caractères en %, en em et en px selon les navigateurs, et qui vous détaille trois solutions possibles à repiquer tel que

[Gribouille26]

Et pourquoi pas!

Parce que je trouve cela plus simple pour la mise en page....