28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Centré sous IE et pas sous FF

Bonjour, je suis un newbie ici sur le forum.

J'ai cherché, mais la solution ne s'est pas offerte à moi alors je me permets de poster.

Je me décide (enfin) à passer au xhtml et css (le début du début) donc je me suis amusé à faire un site bidon et pas trop dur.
Eh bien ça commence mal, j'arrive à centrer mon site sous ie mais sous FF il fait de la résistance. Alors ma question : COMMENT FAIRE ?
J'ai mis dans la css le body en margin et padding = 0 comme il est indiqué sur alsa, mais rien FF fait son chieur... ie lui veut bien par contre

Merci d'avance.

Chris
Bonjour & bienvenue.

Pour pouvoir t'aider, il nous faudrait un exemple de code, ou mieux, une page en ligne pour visualiser le problème.

En aveugle, tout ce que je peux répondre, c'est que les marges de <body> n'ont pas grand chose à voir avec le centrage Smiley ohwell

Pour centrer ton site, il est recommandé d'utiliser les marges automatiques sur le conteneur global de la page (ça fonctionne aussi avec <body>, mais ce n'est pas compatible avec IE 5.x, il me semble).

Le centrage fait par ailleurs l'objet d'un point de la FAQ.
Merci pour ta réponse Sopo,

Je n'avais pas mis le lien d'entrée car ne sachant pas si j'avais le droit... Donc je te mets en lien la page concernée (c'est juste la splash en ligne) clique ici.

Sinon pour le bout de code css, le voici :


html, body {
margin: 0;
padding: 0;
height: 100%
}

body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em arial, verdana, helvetica, sans-serif ;
}

Je vais voir sur la faq si je trouve qq chose qui me permet de corriger le problème. Cependant ta réponse va m'intéresser.

Merci d'avance.

Cordialement.

Chris
Modifié par TEMCA (24 Aug 2006 - 21:19)
Bonsoir TEMCA,

N'oublie pas, lorsque tu insère du code (HTML, CSS, autre) dans un message, de l'entourer des balises adéquates [ code] et [ /code] (sans les espaces).
Pourrais-tu s'il te plaît éditer ton message pour respecter cette convention ?

Merci d'avance. Smiley smile

PS : utilise le bouton d'édition en haut à droite du message à éditer.
La technique la plus adaptée au centrage d'une page ou d'un élément est celle des marges automatiques.
Cf. Alsacréations : Centrer les éléments ou un site web en CSS.

Dans le cas présent, tu pourrais faire ceci :
body {
	width: 780px;
	margin: 10px auto;
}

Mais si je me souviens bien, IE Win a un peu de mal avec certaines propriétés passées directement à l'élément body. Aussi utilise-t-on généralement un bloc conteneur (une division, élément div) pour centrer l'ensemble du contenu d'un site.

Note en passant : 780px, ça risque d'être trop court pour du 800×600. Tu cours le risque de voir apparaître une barre de défilement malgré ces quelques 20px laissés libres -- et qui risquent de ne pas suffire pour contenir bordures de la fenêtre et barre de défilement vertical, quand bien même la fenêtre prendrait toute la largeur disponible... ce qui n'est pas nécessairement le cas.
La largeur canonique pour une mise en page en largeur fixe navigue entre 750 et 770px. 760px est un bon choix.
Modifié par mpop (22 Aug 2006 - 22:33)
Modérateur
bonjour,

en fait tu met dans le css :

div#conteneur
{
	width: 780px ;
	margin: 0 auto ;
	text-align: left ;
	background: #fff ;
}

mais il est inexistant dans le xhtml :

<div id="header"></div>
<div id="bando"></div>
<div id="contenu"></div>
<div id="footer"></div>

il te suffit de l'ajouter "autour" des compoqsant de ta page :

<div id="conteneur" ><!-- ouverture du conteneur -->
<div id="header"></div>
<div id="bando"></div>
<div id="contenu"></div>
<div id="footer"></div>
</div><!-- on referme le conteneur ici -->


le conteneur ce centrera automatiquement avec son contenu .
++
Bonsoir,

Je tiens à remercier vivement tous ceux qui me sont venus en aide concernant ce problème.
Désolé pour la règle du post, je viens de l'éditer et de le faire correspondre aux pré-requis.
Je teste ça et je vous dis si je suis parvenu à mes fins.

Par ailleurs j'ai acheté les bouquins "CSS2" et "Design web utiliser les standards", je suis à la ligne les indications mais je trouve encore quelques problèmes. Du style dreamweaver qui refuse d'afficher le site centré dans la partie de prévisualisation et qui pourtant, après, affiche tel que je l'ai défini dans les navigateurs (ça a tendance à un peu m'énverver ça aussi lol) enfin sauf avec FF pour le moment.

... A suivre

Cordialement.

Chris
Salut

Un (bon) conseil : ne te fie pas au rendu sous Dreamweaver, pas plus qu'aux messages d'erreurs éventuels qu'il te donne.

Les références, ce sont d'une part les navigateurs cibles pour le rendu, et d'autre part les validateurs pour les éventuelles erreurs. (en ce qui concerne la partie XHTML & CSS).
Merci donc à tous, ça marche !!! nickel impec... content le chris !

Merci Sopo pour ton (bon) conseil, mais je trouve ça pas très "cool" de payer une fortune dreamweaver (si c'est cher quand même) et qu'on ne puisse se fier à son affichage dans la fenêtre de prévisu sous le code, enfin bon, on fera avec...

Merci encore !.

Bien cordialement.

Chris.
et donc le sujet doit être resolu non ?


Smiley lol

Petite regle interne du forum : des que une réponse te convient , on a pris pour coutume d'editer le post et de mettre resolu dans son titre, ca evite comme ca a du monde de cliquer sur ton sujet si tu n'as plus de question....( j'aurais pu aussi renvoyer vers l'url expliquant ca mais trop de flemme pour la chercher ....)

PS: question newbie et pas grand chose a voir mais pourquoi quand on tapes resolu entre crochet sur la zone message , il les supprime dans le post ( antislash avant ne fonctionne pas , c'est quoi le truc ?)
Modifié par RoseGrenouille (24 Aug 2006 - 20:34)
RoseGrenouille a écrit :
Petite regle interne du forum : des que une réponse te convient , on a pris pour coutume d'editer le post et de mettre resolu dans son titre, ca evite comme ca a du monde de cliquer sur ton sujet si tu n'as plus de question...


Et ça facilite la recherche, en plus ... Smiley lol

Les crochets s'en vont probablement parce que le forum interprète tout ce qui se trouve entre crochet comme du "bbcode" ...
Modifié par Sopo (24 Aug 2006 - 20:44)
Oui c'est sur que c'est ca mais il doit y avoir un moyen d'eviter ca , mpop utilise les crochets a tour de bras dans ses interventions , ca doit etre un expert de ca......vais voir ca en mp.
Voilà, voilà c'est fait, décidement je me suis fait remarqué pour mon premier post... Gloups, pardon.

MErci encore à tout le monde.

Bien cordialement.

Chris
RoseGrenouille a écrit :
Oui c'est sur que c'est ca mais il doit y avoir un moyen d'eviter ca , mpop utilise les crochets a tour de bras dans ses interventions , ca doit etre un expert de ca......vais voir ca en mp.


Il suffit de mettre un espace: [ foo][ /foo] Smiley cligne
... comme le disait précédemment mpop en toute lettre Smiley cligne :
a écrit :
N'oublie pas, lorsque tu insère du code (HTML, CSS, autre) dans un message, de l'entourer des balises adéquates [ code] et [ /code] (sans les espaces).

Modifié par Igor (24 Aug 2006 - 21:28)
Sujet clos
Aller à