Grosse galère pour centrer ma page!

silv1 · 31 Janvier 2007

Bonjour!

Voilà, j'ai un petit problème pour centrer ma page... J'ai beau changer les valeurs des marges sur feuille de style, rien n'y fait, la page reste toujours "collé" sur la gauche... Comme vous pouvez le constater je ne suis pas un grand professionnel en la matière lol!

Voici ma feuille de style:

.styl {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	text-decoration: none;
	margin-top: 5px;
	margin-left: 10px;
	padding-top: 5px;
	padding-left: 10px;
}
.red {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FF6600;
	text-decoration: none;
}
.footer {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	margin-top: 5px;
	padding-top: 5px;
	margin-right: 5px;
	padding-right: 5px;

}
.links {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FF6600;
	padding-left: 27px;
	padding-top: 20px;
	font-weight: bold;
	text-decoration: none;
	margin-top: 20px;
	margin-left: 3px;




}
a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}

Si quelqun avait la gentillesse de faire les modifications necessaires ce serait le top du top!

Merci d'avance!

**EDIT Modérateur (TheRec)** Merci d'utiliser les BB Codes pour présenter ton code. Plus d'informations en cliquant sur "Aide BB Code" en dessous de la liste d'émoticons lors de la rédaction d'un message.

karnabal · 31 Janvier 2007

Salut,

Utilise les boîtes qui vont bien pour placer ton code dans ton poste s'il te plait. Sans HTML difficile de t'aider sur cet exemple précis.

Crée un <div id="conteneur"></div> à l'intérieur duquel tu places l'ensemble de ton contenu. Ensuite tu appliques les propriétés qui te permettront de centrer le conteneur ainsi que tout ce qu'il contient.

#conteneur {
	width:600px; /* ici tu mets la taille du conteneur */
	margin-left:auto; 
	margin-right:auto; 
	 }

Tch3tch · 31 Janvier 2007

Je dirais même plus que ce tutorial du super site alsacréation te donnera tout ce dont tu as besoin!!

silv1 · 31 Janvier 2007

Salut,

Utilise les boîtes qui vont bien pour placer ton code dans ton poste s'il te plait. Sans HTML difficile de t'aider sur cet exemple précis.

Crée un <div id="conteneur"></div> à l'intérieur duquel tu places l'ensemble de ton contenu. Ensuite tu appliques les propriétés qui te permettront de centrer le conteneur ainsi que tout ce qu'il contient.
#conteneur {
	width:600px; /* ici tu mets la taille du conteneur */
	margin-left:auto; 
	margin-right:auto; 
	 }

Merci Kernabal pour ta réponse si rapide! Mais pour être franc je n'ai pas tout compris :blush: Qu'est- ce que le conteneur?

Je vais quand même essayer de faire la manipe!

karnabal · 31 Janvier 2007

Le conteneur sert à centrer l'ensemble de tes éléments, de ton site si tu préfères. Cette boîte (<div>) nécessite qu'on lui attribue un certain nombre de propriétés (cf CSS) qui vont servir à placer - en l'occurence à centrer - celle-ci dans la page.

Si tu mets en application ce que je viens de préconiser tu vas tout de suite comprendre.

silv1 · 31 Janvier 2007

merci karnabal, je crois que je viens de capter! :thumbsup:

silv1 · 31 Janvier 2007

ça marche pas, j'ai du faire une bétise...

J'ai créé un conteneur et j'ai mis tout mon contenu à l'intérieur, ensuite j'ai modifié la feuille de style de la manière suivante:


.conteneur {
	 margin-left: auto;
	 margin-right: auto;
	 width: 793;
}

.styl {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	text-decoration: none;
	margin-top: auto;
	margin-left: auto;
	padding-top: auto;
	padding-left: auto;
}

.red {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FF6600;
	text-decoration: none;
}
.footer {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	margin-top: 5px;
	padding-top: 5px;
	margin-right: 5px;
	padding-right: 5px;

}
.links {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FF6600;
	padding-left: 27px;
	padding-top: 20px;
	font-weight: bold;
	text-decoration: none;
	margin-top: 20px;
	margin-left: 3px;




}
a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}

Je ne vois pas ce qui cloche :unsure:

**Dan** · 31 Janvier 2007

Tout simplement parce que tu n'as pas mis d'unité à la largeur de ton conteneur, non ?

.conteneur {
margin-left: auto;

margin-right: auto;

width: 793px;

}

silv1 · 31 Janvier 2007

Tout simplement parce que tu n'as pas mis d'unité à la largeur de ton conteneur, non ?

oups :blush: c'est vrai! Je vais tout de suite vérifier si ça marche maintenant

silv1 · 31 Janvier 2007

ça marche toujours pas... je vois vraiment plus quoi faire! Est-ce qu'il y a aurait une autre méthode?

**Dan** · 31 Janvier 2007

Si dans ton code tu usilises un <div id="conteneur"> et que dans tes styles tu déclares conteneur comme classe, cela ne marchera pas.

Difficile de deviner sans l'URL, mais remplace:

.conteneur {

par

#conteneur {

dans ton fichier css, et recharge ta page !

silv1 · 31 Janvier 2007

Je crois que c'est presque bon!!!! :thumbsup: maintenant ça marche nickel sur Firefox! Par contre sur internet explorer ça centre pas! :wacko:

aymericj · 31 Janvier 2007

Deux trucs là comme ça dans le vague sans voir ton code ce n'est pas simple.

Alors oui notre ami IE est un peu capricieux avec ces petites choses, donc solutions possibles :

au dessus de ton code css essaies d'ajouter cette ligne

body {text-align:center}

Ou

dans ton code CSS ajoute cette ligne position:relative; soit comme ça.

.conteneur {
position:relative;
margin-left: auto;
margin-right: auto;
width: 793px;
}

Voir dans le doute essaies les deux.

Modifié 31 Janvier 2007 par aymericj

silv1 · 31 Janvier 2007

Merci aymericj! J'ai essayé les deux combines mais ça passe toujours pas! Mais bon je pense que la solution n'est plus très loin!

aymericj · 31 Janvier 2007

Euhhh est ce que au pire tu peux nous copier ton code html ainsi que ton code css.

Parce IE est "moins permissif" et qu'une balise non fermée peut tout casser.

Kent · 31 Janvier 2007

Salut sinon pour ie tu mets dans conteneur :

*margin-left:11%;

Pour une resolution standard 1024 ça devrait être bon...

TheRec · 31 Janvier 2007

Bonsoir,

Je te conseille, par expérience et simplement pour la pérénité de ton code, de ne pas recourrir à un "hack" CSS tel que Kent te le suggère. Surtout que dans ce cas l'alignement ne serait pas correct dans toutes les résolutions d'écrans.

Le fonctionnement a été expliqué par les précédents intervenants, je vais essayer de te résumer cela :

Prenons le code HTML suivant (je te passe l'en-tête HTML qui n'a pas beaucoup d'impact, et je ne parle que du corps) :

<body>
  <div id="content">Ton contenu</div>
</body>

Ton but et de définir une taille pour le <div id="contenu"> et de le centrer sur la page. Selon les recommandations W3C voici le code CSS nécessaire pour obtenir le résultat désiré :

#content {
  width: 750px;
  margin: 0 auto;
}

Maintenant, Internet Explorer jusqu'à la version 5.5 ne prend pas en compte cette marge (droite et gauche) auto, c'est une disfonctionnement connu dans ces navigateurs, pour le corriger il suffit de définir la propriété "text-align" dans l'élément qui contient l'élément que l'on souhaite centrer (en l'occurrence <body> contient <div id="content">), donc il faut ajouter ceci dans la feuille de styles :

body {
  text-align: center;
}

Ce n'est pas logique je te l'accorde mais les développeur de Internet Explorer on conçu leur navigateur ainsi... ne me demande pas pourquoi ils ont estimé que "text-align" devait interféré sur l'alignement d'une boîte et pas uniquement sur le texte qu'il contient

Si ces explications ne résolvent pas ton problème, je ne peux que te conseiller de poster l'entier de ton code HTML ainsi que de ta/tes feuille(s) de styles ou de nous donner une adresse à laquelle nous pourrons obtenir ces informations. Ainsi les conseils que tu recevra seront plus précis.

Florent V. · 31 Janvier 2007

Salut sinon pour ie tu mets dans conteneur :

*margin-left:11%;

Pour une resolution standard 1024 ça devrait être bon...

Et pour du 800x600 tu l'as dans l'os, et pour du 1280x[...] c'est décalé, etc.

Pour information, Internet Explorer 6 (et à fortiori la version 7) comprend très bien le centrage avec la technique des marges automatiques. Rappel de ladite technique :

div#conteneur_global {
	width: <une certaine largeur>;
	margin-left: auto;
	margin-right: auto;
}

Le seul cas dans lequel IE6 a du mal avec le code ci-dessus, c'est s'il interprète la page en mode Quirks, c'est à dire en interprétant les standards du Web à sa sauce. Et, franchement, vous n'avez pas du tout envie d'avoir des pages en mode Quirks (ou alors soit vous avez une méchante contrainte pour ça -- ce qui est rare --, soit vous êtes maso sur les bords ).

IE et le passage en mode Quirks :

Alsacréations : À propos du Modèle de boîte Microsoft (ou "quirks")

silv1 · 31 Janvier 2007

Merci à tous pour vos conseils et astuces, c'est vraimet super sympa :thumbsup: Là il est un peu tard mais demain je vais tester la ligne de code suggéré par TheRec. Et puis si ça marche toujours pas je posterai mon code html dans son intégralité!

apo-style · 1 Février 2007

J avais le meme probleme que toi et j ais essayer le code de therec et ca marche nickel

merci a tous

aymericj · 1 Février 2007

Ohhhh un Florent.

Au passage Florent, quand quelqu'un pose une question très basique sur les comportements html/css, je me pause toujours comme condition qu'IE sera en mode Quirks.

nyl auster · 1 Février 2007

En effet, IE 6.0 passe en mode Quirk dans les cas suivants :

* une page HTML sans DOCTYPE (donc non valide),

* une page HTML Frameset ou Transitionnel avec un DOCTYPE tronqué (sans URL de la DTD),

* une page HTML qui contient n'importe quel caractère avant la DTD,

* une page HTML avec une DTD dune version de HTML inférieure à la version 4,

* une page avec un DOCTYPE XHTML précédé du prologue XML (prologue inutile pour une page xhtml servie en text/html),

je pige pas, ma page est valide et ces points sont respectés, et pourtant je suis obligé de recourir au "text-align center" pour centrer sur mon IE6 (je sais pas ce que ça donne chez les autres)...??

silv1 · 1 Février 2007

je viens d'essayer la ligne de code proposé par Therec mais je n'ai pas autant de chance que Nyl Auster car ça ne fonctionne pas sur ma page!

Voici le début et la fin de mon code html:

Pour le début:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<div id="conteneur"><body link="#FFFFFF" marginwidth="0" marginheight="0">
  <blockquote>
  <blockquote>
<table width="780" border="0" cellpadding="0" cellspacing="0" height="617">
  <!--DWLayoutTable-->
  <tr> 
	<td height="1" colspan="3" valign="top" width="786">
	<img border="0" src="bfinale.jpg" width="793" height="130"></td>
	<td width="8" height="1"></td>
  </tr>
  <tr>
	<td height="21" colspan="3" valign="top" bgcolor="#000000" class="footer" width="785">
	<div align="left"> <img border="0" src="regergerg.gif" width="10" height="9"><a href="#" class="footer">ccueil</a> 
	  | <img border="0" src="P3.gif" width="11" height="11">résentation  |
	  <img border="0" src="D.gif" width="9" height="10"><a href="#" class="footer">ocumentaires </a> |
	  <img border="0" src="V2.gif" width="10" height="9"><a href="#" class="footer">idéos musicales</a> |
	  <img border="0" src="C.gif" width="10" height="10"><a href="#" class="footer">oups de coeur</a> |
	  <img border="0" src="L.gif" width="8" height="9">iens   | 
	  <img border="0" src="N.gif" width="9" height="10"><a href="#" class="footer">ous contacter</a><font face="Arial" size="1" color="#515966"><img border="0" src="new.gif" width="28" height="11"></font></div></td>
	<td height="21" width="8" bgcolor="#FFFFFF"></td>
  </tr>
  <tr> 
	<td height="9" colspan="3" valign="top" width="786">
	<p></p>
	<p></p>
	<p></p>
	<p></p>
	<p>
	<p>
	<p></td>
	<td height="9" width="8"></td>

Pour la fin de page:

  </tr>
</table>
  </blockquote>
<p> </p>
  </blockquote>
</body>
</html></div>

Merci d'avance pour les corrections

Et voici la feuille de style que j'avais oublié de rajouter!

.footer {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	margin-top: 5px;
	padding-top: 5px;
	margin-right: 5px;
	padding-right: 5px;

}
.links {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FF6600;
	padding-left: 27px;
	padding-top: 20px;
	font-weight: bold;
	text-decoration: none;
	margin-top: 20px;
	margin-left: 3px;




}
a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}

.body {
  	text-align: center;
}

byc · 1 Février 2007

Tu fais tout simplement une grosse erreur sur le div conteneur, il doit etre compris entre <body> et </body>, et là ce n'est pas vraiment leur place, donc le navigateur n'interprète pas ce bout de code. Fais plutôt :

<html>

<head>

...

</head>

<body>

...

</div>

</body>

</html>

Modifié 1 Février 2007 par byc

nyl auster · 1 Février 2007

mais je n'ai pas autant de chance que Nyl Auster

huhu si tu savais que je me suis empiffré comme tutos et comme bouquins avant de coder en xhtml/css, heureusement que j'arrive à centrer ma page après toutes ces heures de travail

Connexion

Grosse galère pour centrer ma page!

Sujets conseillés

silv1

karnabal

Tch3tch

silv1

karnabal

silv1

silv1

Dan

silv1

silv1

Dan

silv1

aymericj

silv1

aymericj

Kent

TheRec

Florent V.

silv1

apo-style

aymericj

nyl auster

silv1

byc

nyl auster

Veuillez vous connecter pour commenter

Parcourir

Activité