Centrer un menu
Résolu
Bonjour,
Pour mon futur site web j'essai de centrer les liens du menu tout en laissant la barre de couleur comme elle est .
https://www.casimages.com/i/130923102713886363.jpg.html
Ci-dessus l'image du futur site .
Le code css :
@charset "iso-8859-1";
body {
background-color: #FFFFFF;
color:#B5B5B5;
margin:0;
padding:0;
font:83%/1.4 verdana, arial, helvetica, sans-serif;
font-weight:bold;
}
img {
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}
}
p {
font-size:10px;
padding:0 10px 0 10px;
}
#pagecomplete {
width:100%;
background-color:#ffffff;
padding:0 0 10px 0;
float:left;
margin:0 0 20px 0;
}
#bloc_header {
width: 100%;
height:112px;
float:left;
position:relative;
background-color:#ffffff;
text-align: center;
}
div#menu1 ul {
text-align: center;
}
ul#menu1{
float: left;
width:100%;
height:90px;
list-style: none;
padding:0px;
margin:0px;
background-color: #ff0fff;
text-align: center;
}
ul#menu1 li{
float:left;
text-align: center;
}
ul#menu1 li a{
display: block;
width:100%;
height: 50px;
line-height:50px;
font-family: verdana;
font-size: 18px;
font-weight: 700;
color: #000000;
text-decoration: none;
outline: none;
padding:20px 20px 0 20px;
}
J'ai cherché via google mais toute les solutions proposées n'ont rien donner .
Merci d'avance .
Pour mon futur site web j'essai de centrer les liens du menu tout en laissant la barre de couleur comme elle est .
https://www.casimages.com/i/130923102713886363.jpg.html
Ci-dessus l'image du futur site .
Le code css :
@charset "iso-8859-1";
body {
background-color: #FFFFFF;
color:#B5B5B5;
margin:0;
padding:0;
font:83%/1.4 verdana, arial, helvetica, sans-serif;
font-weight:bold;
}
img {
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}
}
p {
font-size:10px;
padding:0 10px 0 10px;
}
#pagecomplete {
width:100%;
background-color:#ffffff;
padding:0 0 10px 0;
float:left;
margin:0 0 20px 0;
}
#bloc_header {
width: 100%;
height:112px;
float:left;
position:relative;
background-color:#ffffff;
text-align: center;
}
div#menu1 ul {
text-align: center;
}
ul#menu1{
float: left;
width:100%;
height:90px;
list-style: none;
padding:0px;
margin:0px;
background-color: #ff0fff;
text-align: center;
}
ul#menu1 li{
float:left;
text-align: center;
}
ul#menu1 li a{
display: block;
width:100%;
height: 50px;
line-height:50px;
font-family: verdana;
font-size: 18px;
font-weight: 700;
color: #000000;
text-decoration: none;
outline: none;
padding:20px 20px 0 20px;
}
J'ai cherché via google mais toute les solutions proposées n'ont rien donner .
Merci d'avance .
6 réponses
-
dans le ul du menu
retire
float:left;
dans le li du menu
retire
float:left;
ajoute
display:inline;
dans le a du menu
retire display:block;
ajoute text-align:center;
n'ayant pas le code source de la partie menu de ton site je ne peux pas repondre plus précisement
-
source et je vais essayer ceci je vous tiens au courant .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<head>
<meta http-equiv="content-type" content="text/html; charset="utf-8" />
<title>DAVID POIREE</title>
<link rel="stylesheet" href="themes/default/style.css" type="text/css" />
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="javascript/pngfix.js"></script>
<style type="text/css">
@import url(themes/default/iefix.css);
body{behavior:url(themes/default/csshover.htc);}
</style>
<![endif]-->
</head>
<body>
<div id="pagecomplete">
<div id="menu1">
<ul id="menu1">
<li id="current"><a href="index.html">ACCEUIL</a></li>
<li><a href="page1.html">LIVRE D'OR</a></li>
<li><a href="page2.htm">Plan Du Cabinet</a></li>
<li><a href="page3.htm">Témoignez</a></li>
<li><a href="page4.htm">Contact</a></li>
</ul>
</div>
HFHJFHJFDDGHH
<img src="c:\bateleur.jpg" alt="" class="arrondie" />
</body> -
merci beaucoup , grâce à vous mon site avance .
-
remplace
<li id="current"><a href="index.html">ACCEUIL</a></li>
par
<li><a href="index.html">ACCEUIL</a></li>
d'autre part dans le html tu as 3 déclaration de DOCTYPES différentes
1 seul suffit (transitionnal) car tu n'as pas de frames
dans ton css
img il y a 2 } retire en 1
pour le reste ce que j'ai ecrit précédemment devrait centrer ton menu
(a appliquer pour les ul li et a du #menu1)
tu peux rajouter des margin pour a afin d'espacer les liens entre eux
margin: 0 10px 0 10px; par exemple
Un petit merci vaut mieux qu'une grande ignorance -
merci beaucoup .
-
pas de quo si c'est ok tu peux mettre résolu
