Sujet Précédent Sujet Suivant

Comment centre mon menu

Fermé
euuuh Messages postés 58 Date d'inscription dimanche 6 décembre 2009 Statut Membre Dernière intervention 25 février 2010 - 6 févr. 2010 à 18:30
euuuh Messages postés 58 Date d'inscription dimanche 6 décembre 2009 Statut Membre Dernière intervention 25 février 2010 - 6 févr. 2010 à 22:38
Bonjour,
Je viens de réaliser l'ensemble de ma page petite page d'accueil , mais je viens de me rendre compte que je ne sais pas comment faire pr centre mon menu, avez vous une idée ? D'avance Merci Voici mes codes :

Code CSS :

body{
background-color: #363636;
color: white;
font-size: small;
font-family: Century Gothic, Verdana, Trebuchet MS, Comic Sans MS, Georgia, serif;
text-align: center
}
.floatleft{
float: left;
display:inline;
padding: 2%;
margin-bottom: 10px;
margin-right: 0px;
width: 228px;
height: 156px;
}
.floatright{
float: right;
display:inline;
padding: 2%;
margin-bottom: 10px;
width: 234px;
height: 156px;
}
*{
list-style:none;
}
#menucontainer{
position:relative;
height:50px;
color:#FFFFFF;
background:#363636;
width:100%;
font-family:Helvetica,Arial,Verdana,sans-serif;
}
#menunav{
position:relative;
height:38px;
font-size:12px;
text-transform:uppercase;
font-weight:bold;
background:#363636 url(images/background.jpg) repeat-x bottom left;
padding:0 0 0 20px;}

#menunav ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
float:left;}

#menunav ul li{
display:block;
float:left;
margin:0 1px;}

#menunav ul li a{
display:block;
float:left;
color:#EAF3F8;
text-decoration:none;
padding:0 0 0 20px;
height:38px;}

#menunav ul li a span{
padding:12px 20px 0 0;
height:21px;
float:left;}

#menunav ul li a:hover{
color:#EB5313;
background:transparent url(images/hover.jpg) repeat-x bottom left;}

#menunav ul li a:hover span{
display:block;
width:auto;
cursor:pointer;}
#menunav ul li a.current, #menunav ul li a.current:hover{
color:#fff;
background:#EB5313 url(images/left.jpg) no-repeat top left;
line-height:275%;}
#menunav ul li a.current span{
display:block;
padding:0 20px 0 0;
width:auto;
background:#363636 url(images/right.jpg) no-repeat top right;
height:38px;}


Code HTML :

<html>
<head>
<title>Titre</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css"
title="stylesheet"
href="http://...free.fr/menu_style.css">
</head>
<body>
<div style="display: block;">
<p align="center"><img
src="http://....free.fr/images/titre.bmp"
alt="titre"></p>
<div id="menucontainer">
<div id="menunav">
<ul>
<li><a href="http://....free.fr/"
target="_self" title="Accueil" class="current"><span>Accueil</span></a></li>
<li><a
href="http://....free.fr/prestations.html"
target="_self" title="Prestations"><span>Prestations</span></a></li>
<li><a href="http://....free.fr/materiel.html"
target="_self" title="Matériel"><span>Matériel</span></a></li>
<li><a href="http://....free.fr/Photos.html"
target="_self" title="Photos"><span>Photos</span></a></li>
<li><a href="http://....free.fr/Contact.html"
target="_self" title="Contact"><span>Contact</span></a></li>
</ul>
</div>
</div>
</div>
<br>
<br>
<img class="floatleft"
src="http://....free.fr/images/rallye.acc.bmp"
alt="Rallye">
<img class="floatright"
src="http://....free.fr/images/concert.acc.bmp"
alt="Concert">
<p><big><big>Bienvenue chez ....:<br>
Des (texte..texte...)<br>
Du (texte...texte...)br>
Une (texte...texte...)<br>
Un (texte...texte...);</big></big></p>
<p> </p>
<p></p>
<br>
<br>
<p><small>texte.......texte...texte
</small></p>
</body>
</html>
A voir également:

14 réponses

Réponse 1 / 14
ciindyy
6 févr. 2010 à 18:31
tkt je sais moi
0
Réponse 2 / 14
euuuh Messages postés 58 Date d'inscription dimanche 6 décembre 2009 Statut Membre Dernière intervention 25 février 2010 5
6 févr. 2010 à 18:32
Merci pour ta super réponse ! ;) Et peux tu partager ton savoir?
0
Réponse 3 / 14
LelLex Messages postés 1628 Date d'inscription mercredi 18 février 2009 Statut Membre Dernière intervention 5 septembre 2012 112
6 févr. 2010 à 18:37
Pour le centrer, tu peux utiliser des valeurs stricts comme 30px dans margin ou padding.
Ou utiliser margin:auto;.

C'est pour le centrer comment ?
Peut-on avoir ton URL ?
0
Réponse 4 / 14
LelLex Messages postés 1628 Date d'inscription mercredi 18 février 2009 Statut Membre Dernière intervention 5 septembre 2012 112
6 févr. 2010 à 18:50
Oui donc je pense que c'est bien ça.
Tu met dans .css margin:auto; pour ton menu ; ça va te le centrer horizontalement.
Pour la verticalité tu laisses toujours, si tu l'as déjà fais, margin-left:...px; et de même pour right.

Et tu me dis si ça marche, on en convient. ;)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 14
euuuh Messages postés 58 Date d'inscription dimanche 6 décembre 2009 Statut Membre Dernière intervention 25 février 2010 5
6 févr. 2010 à 19:06
euh oui, ok mais mon menu en fait je l'ai généré à partir d'un site enfin mon code, après ca je l'ai un peu customisé mais je ne sais pas ds quelle partie de mon code CSS mettre "margin:auto" ! As tu une idée?
0
Réponse 6 / 14
LelLex Messages postés 1628 Date d'inscription mercredi 18 février 2009 Statut Membre Dernière intervention 5 septembre 2012 112
6 févr. 2010 à 19:19
Remplace ce-ci :

#menucontainer{
position:relative;
height:50px;
color:#FFFFFF;
background:#363636;
width:100%;
font-family:Helvetica,Arial,Verdana,sans-serif;
}

Par cela :

#menucontainer{
margin:auto;
height:50px;
color:#FFFFFF;
background:#363636;
font-family:Helvetica,Arial,Verdana,sans-serif;
}
0
Réponse 7 / 14
euuuh Messages postés 58 Date d'inscription dimanche 6 décembre 2009 Statut Membre Dernière intervention 25 février 2010 5
6 févr. 2010 à 19:26
Zut aucun changement !
0
Réponse 8 / 14
LelLex Messages postés 1628 Date d'inscription mercredi 18 février 2009 Statut Membre Dernière intervention 5 septembre 2012 112
6 févr. 2010 à 19:33
Remplace ce-ci : 


#menunav ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
float:left;}


Par cela : 

#menunav ul{
margin:auto;
padding:0;
list-style-type:none;
width:auto;}
0
Réponse 9 / 14
euuuh Messages postés 58 Date d'inscription dimanche 6 décembre 2009 Statut Membre Dernière intervention 25 février 2010 5
6 févr. 2010 à 19:39
Ha il y a eu un peu de changement le menu cun peu décalé sur la droite .. mais pas au milieu ! tu peux le visualiser sur le site! ;)
0
Réponse 10 / 14
LelLex Messages postés 1628 Date d'inscription mercredi 18 février 2009 Statut Membre Dernière intervention 5 septembre 2012 112
6 févr. 2010 à 19:47
Je n'ai plus ton lien URL.

Enlève partout les position:relative;
0
Réponse 11 / 14
euuuh Messages postés 58 Date d'inscription dimanche 6 décembre 2009 Statut Membre Dernière intervention 25 février 2010 5
6 févr. 2010 à 19:51
Malheureusement rien comme changement, enfin si un peu décalé sur la droite !
0
Réponse 12 / 14
LelLex Messages postés 1628 Date d'inscription mercredi 18 février 2009 Statut Membre Dernière intervention 5 septembre 2012 112
6 févr. 2010 à 19:59
Je ne voit pas trop.
Le code n'est pas hiérarchisé.
Et tu ne la pas mis entre les balises <code> que tu propose CçM.

Débrouille toi avec :
- dans toutes les portions de menu : <div>, <ul>, <li>, <a> Enlèves position:; et float:;
- dans t'as plus grosse portion de menu : je crois menucontainer. Mets margin:auto; avec un width:900px;

Pour la longueur : 900px, tu peux en choisir une autre.!
Bon courage.
0
Réponse 13 / 14
euuuh Messages postés 58 Date d'inscription dimanche 6 décembre 2009 Statut Membre Dernière intervention 25 février 2010 5
6 févr. 2010 à 20:38
Merci beaucoup je vais essayer avec ca ! C'est très sympa de s'être penché sur le pb ! Bonne soirée.
0
Réponse 14 / 14
euuuh Messages postés 58 Date d'inscription dimanche 6 décembre 2009 Statut Membre Dernière intervention 25 février 2010 5
6 févr. 2010 à 22:38
J'ai essayé, mais rien à faire , je ne trouve pas ! population de CCM avez vous une idée ? ^^
0

Discussions similaires

Que signifie arrivé au centre de transport de départ ?
AlphaFurryWolf -
baladur13 -

3 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
mon ordi marque press the esc key for startup menu
jasonparris -
elow -

5 réponses