Centrer ce menu CSS...
Résolu
agencetourix
Messages postés
203
Statut
Membre
-
agencetourix Messages postés 203 Statut Membre -
agencetourix Messages postés 203 Statut Membre -
Bonjour,
J'aimerai raccourcir la largeur, centrer et augmenter la taille de police
du menu CSS suivant,
pouvez me dire comment faire et que changer dedans?
Merci d'avance pour votre aide.
MENU CSS SUIVANT:
J'aimerai raccourcir la largeur, centrer et augmenter la taille de police
du menu CSS suivant,
pouvez me dire comment faire et que changer dedans?
Merci d'avance pour votre aide.
MENU CSS SUIVANT:
@charset "utf-8";
/* CSS Document */
/*^'^ Navigation Structure ^'^*/
.nav-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(images/nav-bg.jpg);
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}
/*^'^ Primary Items ^'^*/
#nav-container a{
padding:7px 17px 7px 18px;
margin: 10px 0px 0px 0px;
color: #FFFFFF;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url(images/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: top;
}
#nav-container a:hover{
color: #6C3600;
background: url(images/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: center;
}
/*^'^ Secondary Items Container ^'^*/
#nav-container div, #nav-container ul{
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url(images/item-secondary-container-bg.jpg);
background-repeat: repeat-x;
background-color: #FF9900;
border-bottom: 1px solid #CA6500;
}
/*^'^ Secondary Items ^'^*/
#nav-container div a, #nav-container ul a{
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background: url(images/item-secondary-bg.jpg);
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}
/*^'^ Secondary Items Hover State ^'^*/
#nav-container div a:hover, #nav-container ul a:hover{
background-color: #FFFFFF;
background: url(images/item-secondary-bg.jpg);
background-repeat: no-repeat;
color:#CC0000;
}
/*^'^ Secondary Item Titles ^'^*/
#nav-container .item-secondary-title{
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;
/* background: url(images/item-secondary-title-bg.jpg); */
background-repeat: no-repeat;
font-weight:bold;
}
/*^'^ Horizontal Dividers ^'^*/
#nav-container .divider-horiz{
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}
/*^'^ Vertical Dividers ^'^*/
#nav-container .divider-vert{
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}
12 réponses
-
Salut, pour centrer ton menu tu as besoin pour commencer de lui donner une longueur avec la propriété width et ensuite tu peux le centrer:
.nav-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(images/nav-bg.jpg);
width: 900px;
margin: auto;
}
Enlève par la même occasion ça:
<div align=center></div>
car ça ne sert à rien et tu a oublié de mettre les guillemets "" -
Bonjour
Donne un bout de code html qui va avec si tu as stp -
aussi j'ai vu que tu as une div clear (certainement pour annuler le float d'autant que tu a mis float none . Le mieux est de mettre
clear:both
C'est plus propre -
Voici mon code html
je m'entraîne en fait (code issu du site du zéro)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title></title> <link rel="stylesheet" type="text/css" href="/menu/menu_style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <?php include("entete.php"); ?> <?php include("menu.php"); ?> <div id="corps"> <h1>Mon super site</h1> <p> Bienvenue sur mon super site !<br /> Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D </p> </div> <?php include("pied_de_page.php"); ?> </body> </html> -
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
-
Tu veux t'entraîner?
Et ben alors fait dans ton CSS, un div nommer "corps" qui centrera l'HTML ! x) -
Ou alors, tu mets à la place de
<div id="corps"> <h1>Mon super site</h1> <p> Bienvenue sur mon super site !<br /> Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D </p> </div>Sa<div align=center> <h1>Mon super site</h1> <p> Bienvenue sur mon super site !<br /> Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D </p> </div> -
j'ai fais un <div id="corps">
avant le menu
que j'ai refermé ensuite par un </div>
mais côté du fichier CSS je dois faire quoi en +
ou en - ;)
je suis en train d'apparendre XHTML CSS et PHP en même temps
et des fois je m'embrouille un peu les pinceaux faut dire...
merci pour ton aide en tout cas ;) -
J'ai mis
<div align=center>
au dessus du menu et </div> après pour refermer
mais ça ne fonctionne pas!
je ne vois pas ce que je fais de mal ? -
Tu veux centré ton menu ?
Met moi ton code du menu xD -
Voilà
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title></title> <link rel="stylesheet" type="text/css" href="menu/menu_style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body><div align=center> <div class="nav-container-outer"> <img src="/menu/images/nav-bg-l.jpg" alt="" class="float-left" /> <img src="/menu/images/nav-bg-r.jpg" alt="" class="float-right" /> <ul id="nav-container" class="nav-container"> <li><a class="item-primary" href="../index.php" target="_self">ACCUEIL</a> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="../page1.php" target="_self">PAGE1</a> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="../page2.php" target="_self">PAGE2</a> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="../page3.php" target="_self">PAGE3</a> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="../page4.php" target="_self">PAGE4</a> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="../partenaires.php" target="_self">PARTENAIRES</a> </li> <li><span class="divider divider-vert" ></span></li> <li class="clear"> </li> </ul> </div></div> </body> </html> -
Merci ça marche
J'ai fais ensuite mon réglage par rapport au nombre de pixels que je voulais.
je ne savais pas en fait que cette ligne
.nav-container-outer
signifiait pour faire ça, maintenant c bon ;)
bonne continuation merci l'ami !