Jump to content

Grosse galère pour centrer ma page!


Recommended Posts

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.

Link to post
Share on other sites

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;
}

Link to post
Share on other sites
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! ;)

Link to post
Share on other sites

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. ;)

Link to post
Share on other sites

ç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:

Link to post
Share on other sites

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;

}

Link to post
Share on other sites

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 !

Link to post
Share on other sites

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. :D

Edited by aymericj
Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites
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")

Link to post
Share on other sites

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é! :)

Link to post
Share on other sites

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. :)

Link to post
Share on other sites
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)...??

Link to post
Share on other sites

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;
}

Link to post
Share on other sites

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 id="conteneur">

...

</div>

</body>

</html>

:)

Edited by byc
Link to post
Share on other sites
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 :P

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...