[CSS2] pourquoi ce n'est pas centré ??

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS2] pourquoi ce n'est pas centré ??

stef_dobermann

Personne n'est parfait ...

Bonjour,

je veux faire un truc tout bête, mais c'est tellement sim!ple que je ne comprend pas pourquoi ca ne marche pas !!

L'objectif est d'avoir dans un div une liste <ul><li>...</li></ul> comme pied de page centreé dans la page et en ligne.
en ligne pas de problème mais centré dans la page pas moyen!! comment faire :??:

voici le code de la page :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Horizontal menu demo</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css">
body {font-family: verdana, arial, sans-serif; font-size:100% behavior:url(css/csshover.htc);}
* {margin:0; padding:0;}
/* the horizontal menu starts here */
div#listmenu {
width:100%; /* makes the div full width */
float:left; /*makes the div enclose the list */
border-top:1px solid #069; /* draws line on top edge of div */
border-bottom:1px solid #069; /* draws line on bottom edge of div */
font-size:.8em; /* SET FONT-SIZE HERE */
background-color:#CCF; /* colors the div */
margin-top:20px; /* TEMPORARY - pushes the div away from the top of the browser for clarity in this example*/
}
div#listmenu ul {margin:0 0 0 30px;/* indents ul from edge of container */
}
div#listmenu li {
float:left; /* causes the list to align horizontally instead of stack */
list-style-type:none; /* removes the bullet off each list item */
background-color:#FFA; /*sets the background of the menu items */
border-right:1px solid #069; /* creates dividing lines between the li elements */
}
div#listmenu li:first-child {
border-left:1px solid #069; /*the first vertical line on the menu */
}
div#listmenu li:hover {
background-color:#FFF; /*sets the background of the menu items */
}
div#listmenu a {
padding:0 6px; /*creates space each side of menu item's text */
text-decoration:none; /* removes the underlining of the link */
color:#069; /* sets the type color */
}
div#listmenu a:hover {
color:#F33;
}
div#listmenu p {text-align:center;}
* html div#listmenu ul {
float:left; /* makes the ul wrap the li's */
border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */
margin-left:15px; /* IE doubles the given value above - why? */
}
* html a {display:block;}
</style>
</head>
<body>
<div id="listmenu">
<p>
texte au centre
<ul>
<li><a href="#">Customers</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">Dealers</a></li>
<li><a href="#">Distributors</a></li>
</ul>
</p>
</div>
</body>
</html>

seul le "texte au centre" est bien centré dans la page, pas le reste !!

je ne sais pas, je ne sais plus, je suis perdu ...

Cordialement,
SteF

---------------
Tout à commencé par un rêve...

Publicité

omega2

Si je me souviens bien, en css, c'est
padding-left : 0 auto
et pareil pour la marge de droite.
Mais IE6 étant ce qu'il est, il oubliera de centrer le beau menu. (sic) Pour IE6, je sais pas faire.

stef_dobermann

Personne n'est parfait ...

merci pour ta réponse (super rapide), question bete je doit le placer à quel endroit ??

---------------
Tout à commencé par un rêve...

the big ben

sinon c'est un peu plus chiant d'accord mais ajoute un tableau et la tu seras le centrer plus facilement a mon avis

omega2

Vu que j'ai mis un ":" et pas un "=", c'est dans le css.
the big ben > Tant qu'a rajouter des éléments pour gérer le centrage autant utiliser directement la balise <center> qu'une table. C'est déjà moins pire bien que ca ne soit pas le top.

newneo2001

pour faire une liste en ligne tu dois utiliser display:inline
ensuite pr centrer un élément tu as 2 possibilités
mettre ta liste <ul> dans un conteneur que tu définis avec
text-align:center
et pour les gecko tu mets ta liste avec margin:0 auto;
ca donne ca en fait :

#center{text-align:center}
#center ul {margin:0 auto}

<div class="center">
<ul>
<li></li>
<li></li>
</ul>
</div>

Par contre ne mets surtout pas un tableau comme on te le dit plus haut, en xhtml on ne mets pas des tableaux quand il n'y en a pas besoin.

stef_dobermann

Personne n'est parfait ...

the big ben => merci mais j'avais déjà pensé à ca, seulement je veux le faire en XHTML strict

omega2=> je sais bien qu'il faut le metre dans le css, mais pour quel élément ?? UL , LI, P ... :??:

---------------
Tout à commencé par un rêve...

omega2

C'est à mettre pour l'élément que tu veux centrer, donc le UL si j'ai bien suivit.

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS2] pourquoi ce n'est pas centré ??

Sujets relatifs
différences css1 et css2 et compatiblilté avec les navigateurs ?	Img à gauche et texte centré
Bloc de texte de taille fixe / centré sur la page + image ?	Centre un bloc contenant des float
CSS : caler une image de fond sur un texte centré.	Hauteur de tableau centré
menu flash qui reste toujours centré en bas quand on scroll	[CSS] Div non-centré sous Mozilla
[css2] comment centre un tableaux ?
Plus de sujets relatifs à : [CSS2] pourquoi ce n'est pas centré ??

Page générée en 0.103 secondes