ok j'ai fait autrement, j'ai fait une seule feuille de style pour toutes les pages html comme conseillé mais j'ai toujours ce probléme de centrage !!!
je sais ou je doit mettre le code css mais le probléme c'est que tout ceux que j'ai essayé jusqu'à maintenant m'on mis mon menu à la verticale or, je veux qu'il soit centrer mais à l'horizontale !!!
du coup je vous redonne juste le code de ma feuille de style
PS : JE SAIS QUE C'EST AU NIVEAU DE LA 58 éME LIGNE (voir code)
ul#menu li
{
float: left ;
text-align: center ;
}
QU'IL FAUT AGIR mais je ne sais quel code mettre
car à la place de left si je mets center sa me le mets à la verticale
help me !!!!!!
<style type="text/css">
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: #003366 ;
}
div#conteneur
{
width: 770px ;
margin: 0 auto ;
text-align: center ;
border: 2px solid #ab4 ;
background: #fff ;
}
h1#header
{
height: 258px ;
background: url(apple.jpg) no-repeat left top ;
margin: 0 ;
}
h1#header a
{
width: 400px ;
height: 70px ;
display: block ;
background: url(title.gif) no-repeat ;
position: center ;
left: 350px ;
top: 15px ;
text-indent: -5000px ;
}/* On donne les mêmes dimensions au lien, chose
possible grâce à la propriété display: block ; qui transforme le lien
en élément de type block, auquel on peut donner des propriétés de taille.
On met aussi l'image de fond qui a les mêmes dimensions que le cadre ainsi créé */
/* Le text-indent négatif est fait pour pouvoir ne
cacher le texte hors de la page, ce que nous voulons. Ainsi il reste
exploitable pour les syntèses vocales */
ul#menu
{
height: 35px ;
margin: 0 ;
padding: 0 ;
background: url(bg_menu.gif) repeat-x 0 -25px ;
list-style-type: none ;
}
/* On donne une hauteur au menu, correspondant a
la taille de l'image utilisée en fond, on met ensuite l'image de fond
avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */
ul#menu li
{
float: left ;
text-align: center ;
}
}/* On rend les li en flottant pour pouvoir les
afficher horizontalement, on cache les puces, et on centre le texte */
ul#menu li a
{
width: 130px ;
line-height: 25px ;
font-size: 1.2em ;
font-weight: bold ;
letter-spacing: 2px ;
color: #fff ;
display: block ;
text-decoration: none ;
border-right: 2px solid #dea ;
}/* C'est sur les liens que le gros du travail est
effectué, largeur, hauteur de ligne, taille de police, graisse de police,
espacement des lettres, couleur, bordure et decoration du texte.
Nous pouvons dimensionner les a grâce à la propriété display: block ; */
ul#menu li a:hover
{
background: url(bg_menu.gif) repeat-x 0 0 ;
}/* Et pour finir on décale l'image de fond au passage
de la souris pour laisser aparaître l'état survolé de l'image,
voir le tutoriel sur les roll over pour plus de détails */
div#contenu
{
padding: 0 25px 0 100px ;
background: url(bg_page.gif) no-repeat 15px 15px ;
}
div#contenu h2
{
padding-left: 25px ;
line-height: 25px ;
font-size: 1.4em ;
background: url(little_apple.gif) no-repeat left bottom ;
color: #9b2 ;
border-bottom: 1px solid #9b2 ;
}
div#contenu h3
{
margin-left: 15px ;
padding-left: 5px ;
border-bottom: 1px solid #9b2 ;
border-left: 3px solid #9b2 ;
color: #9b2 ;
}
div#contenu p
{
text-align: justify ;
text-indent: 2em ;
line-height: 1.7em ;
}
div#contenu a
{
color: #8a0 ;
}
div#contenu a:hover
{
color: #9b2 ;
}
p#footer
{
margin: 0 ;
padding-right: 10px ;
line-height: 30px ;
text-align: right ;
color: #8a0 ;
}
pre
{
overflow: auto ;
background: #dea ;
border: 2px solid #9b2 ;
padding: 5px 0 0 5px ;
font-size: 1.2em ;
}
pre span
{
color: #560 ;
}
pre span.comment
{
color: #b30000 ;
}
ul#menu
{
margin: 0 ;
padding: 0 ;
list-style-type: none ;
/* Suppression du margin, du padding et des puces du <ul> */
}
ul#menu li
{
margin: 0 0 8px 0 ;
padding: 0 ;
/* Suppression du padding du <li> et on définit une marge basse de 8px pour aérer le tout */
}
ul#menu li a
{
display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
width: 170px ;
line-height: 30px ;
color:white ;
text-indent: 5px ; /* On décale le texte de 5px du bord gauche */
text-decoration: none ;
background:#003366 no-repeat 5 5 ; /* On met une image de background, que l'on positionne à 5px du bord gauche et 5px du bord haut */
border: 1px solid #dbd ;
}
ul#menu li a:hover
{
background:#044fd2 no-repeat 0 -30px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
border: 1px solid #f97 ;
}
body {
scrollbar-arrow-color:white;
scrollbar-track-color:003366;
scrollbar-shadow-color:003366;
scrollbar-face-color:003366;
scrollbar-highlight-color:white;
scrollbar-darkshadow-color:white;
scrollbar-3dlight-color:white;
}
</style>
Modifié par suly (12 Jun 2007 - 17:26)
) mais j'ai commencé à faire ma page de présentation pour mon site et à l'aide d'un site sur le css j'ai fait mon menu (boutons) avec mais je n'arrive pas à le centrer au milieu de ma page j'ai cherché longtemps sans résultat peut étre la communauté d'alsa pourra me venir en aide .....
Bon courage pour la suite