Blog d'aide de Blog4ever

:bd: Je sais que le sujet a été publier des centaines de fois mais j'ai toujours rien compris comment centrer la barre menu

Mon css c'est ceci;

* {margin: 0; padding: 0;}

body
{
background : #FFFFFF;
background-image : url(http://jackyx.bleublog.lematin.ch/media/02/01/363823396.JPG);
background-repeat : repeat;
color : #66FFFF;
font-size : 10pt;
font-family : Arial;
text-align : center;
background-attachment : fixed;
}
#cadre
{
background-image : url(http://images.blog-24.com/830000/829000/829067.gif);
background-repeat : repeat;
width : 968px;
padding-top : 5px;
padding-left : 5px;
padding-right : 5px;
padding-bottom : 5px;
text-align : left;
margin : auto;
border : 1px solid #000000;
position : relative;
background-attachment : fixed;
}
#haut
{
background-repeat : repeat;
height : 70px;
padding-top : 10px;
border-width : auto;
border-style : solid;
border-color : transparent;
text-align : center;
background-attachment : fixed;
}
#haut h1 a
{
text-decoration : none;
font-size : 18pt;
font-family : Comic sans Ms;
}
a
{
color : #66FF00;
text-decoration : underline;
}
a:hover
{
color : #99FF00;
text-decoration : none;
}
#barre
{
margin-top : 10px;
}
#barre ul
{
width : 433px;
list-style-type : none;
margin-left : auto;
margin-right : auto;
}
#barre li
{
float : left;
}
#barre a
{
background-image : url()://images.blog-24.com/830000/829000/829067.gif);
background-repeat : no-repeat;
color : #ff0000;
text-decoration : underline;
width : auto;
height : auto;
margin-left : auto;
border-width : auto;
border-style : double;
border-color : #00ff00;
text-align : center;
display : block;
}
#barre a:hover
{
background : #FF00FF;
background-image : url(http://t2.gstatic.com/images?q=tbn);
background-repeat : repeat;
text-align : center;
}
#menu
{
width : 170px;
float : left;
}
#menu ul
{
list-style-type : none;
}
#menu ul li
{
width : 170px;
margin-top : 2px;
border-width : 5px;
border-style : solid;
border-color : #000000;
}
#menu ul li a
{
width : 170px;
font-size : 10pt;
font-family : Arial;
line-height : 25px;
}
#menu ul li a:hover
{
background-image : url(http://t2.gstatic.com/images?q=tbn);
text-decoration : blink;
}
#menu h2
{
background-image : url(http://t2.gstatic.com/images?q=tbn);
width : 170px;
height : 25px;
font-size : 15pt;
border-width : 1px;
border-style : solid;
border-color : #FF3300;
text-align : center;
}
#contenu
{
background-image : url(https://static.blog4ever.com/2010/11/447452/artfichier_447452_264381_201108055616414.jpg);
color : #ffffff;
width : 730px;
padding-top : 5px;
padding-left : 5px;
padding-right : 5px;
padding-bottom : 5px;
margin-top : 20px;
margin-left : 200px;
font-size : 10pt;
font-family : Verdana;
}
#contenu h3
{
color : #FF00FF;
width : 457px;
height : 25px;
padding-left : 15px;
padding-right : 50px;
margin-top : 10px;
margin-left : 10px;
margin-right : 10px;
margin-bottom : 15px;
font-size : 10pt;
font-family : Trebuchet MS;
}
#contenu ul
{
list-style-type : square;
margin-left : 15px;
}
#contenu a
{
color : #FFCCFF;
text-decoration : underline;
font-size : 10pt;
font-family : Arial;
}
#contenu a:hover
{
background : #FF0099;
color : #FFFFCC;
text-decoration : none;
}
#bas
{
margin : auto;
}
#spacer
{
height : 20px;
clear : both;
}
hr { margin:5px; height:1px; background-color:#66FFFF;}
fieldset { border:0; }
* html #menu h2{width: 172px;}
#contenu ol {list-style-type: decimal;margin-left:25px;}


mais je comprend rien & où le mettre j'ai lu des dizaine de fois l'actuce mais j'ai absolument rien compris :O vous pouvez m'aider s.v.p ? Merciii :)

:b0:

Déjà tu as une erreur pour l'image de fond des liens :
>>> background-image : url()://images.blog-24.com/830000/829000/829067.gif);

c'est >>> background-image : url(http://images.blog-24.com/830000/829000/829067.gif);


Comment as-tu fais pour trouver la largeur du bloc #barre ul ?

En copiant dans mon exemple >>> [lien]

C'est une valeur qui doit être calculée comme je l'explique dans mon article. Mais comme tu mets partout des valeurs "auto".
Il faut mettre une valeur dans tout ce qui est en gras :

#barre a
{
background-image : url(http://images.blog-24.com/830000/829000/829067.gif);
background-repeat : no-repeat;
color : #ff0000;
text-decoration : underline;
width : auto;
height : auto;
margin-left : auto;
border-width : auto;
border-style : double;
border-color : #00ff00;
text-align : center;
display : block;
}

Puis tu refais le calcul dans mon article.

:bye: