Centrer un menu

Résolu/Fermé
aeonus Messages postés 50 Date d'inscription lundi 23 septembre 2013 Statut Membre Dernière intervention 24 juillet 2014 - Modifié par aeonus le 23/09/2013 à 22:26
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 25 sept. 2013 à 14:11
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 .
A voir également:

6 réponses

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
23 sept. 2013 à 22:39
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
0
aeonus Messages postés 50 Date d'inscription lundi 23 septembre 2013 Statut Membre Dernière intervention 24 juillet 2014
23 sept. 2013 à 22:41
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>
0
aeonus Messages postés 50 Date d'inscription lundi 23 septembre 2013 Statut Membre Dernière intervention 24 juillet 2014
23 sept. 2013 à 22:52
merci beaucoup , grâce à vous mon site avance .
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 23/09/2013 à 23:23
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
0

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

Posez votre question
aeonus Messages postés 50 Date d'inscription lundi 23 septembre 2013 Statut Membre Dernière intervention 24 juillet 2014
24 sept. 2013 à 22:28
merci beaucoup .
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
25 sept. 2013 à 14:11
pas de quo si c'est ok tu peux mettre résolu
0