Centrer ce menu CSS...

Résolu/Fermé
agencetourix Messages postés 192 Date d'inscription mardi 24 août 2010 Statut Membre Dernière intervention 11 novembre 2011 - 4 mars 2011 à 23:54
agencetourix Messages postés 192 Date d'inscription mardi 24 août 2010 Statut Membre Dernière intervention 11 novembre 2011 - 6 mars 2011 à 22:53
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:

@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;
}
A voir également:

12 réponses

Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
6 mars 2011 à 22:36
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 ""
1
titigrominet Messages postés 24 Date d'inscription mercredi 2 mars 2011 Statut Membre Dernière intervention 6 mars 2011 8
5 mars 2011 à 00:24
Bonjour

Donne un bout de code html qui va avec si tu as stp
0
sammedve Messages postés 14 Date d'inscription samedi 7 novembre 2009 Statut Membre Dernière intervention 28 mars 2011
5 mars 2011 à 00:32
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
0
agencetourix Messages postés 192 Date d'inscription mardi 24 août 2010 Statut Membre Dernière intervention 11 novembre 2011 33
5 mars 2011 à 20:54
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>
0

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

Posez votre question
agencetourix Messages postés 192 Date d'inscription mardi 24 août 2010 Statut Membre Dernière intervention 11 novembre 2011 33
6 mars 2011 à 21:01
up svp
0
MastercroW Messages postés 1095 Date d'inscription dimanche 3 octobre 2010 Statut Membre Dernière intervention 31 mai 2019 163
6 mars 2011 à 21:06
Tu veux t'entraîner?
Et ben alors fait dans ton CSS, un div nommer "corps" qui centrera l'HTML ! x)
0
MastercroW Messages postés 1095 Date d'inscription dimanche 3 octobre 2010 Statut Membre Dernière intervention 31 mai 2019 163
6 mars 2011 à 21:08
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>
0
agencetourix Messages postés 192 Date d'inscription mardi 24 août 2010 Statut Membre Dernière intervention 11 novembre 2011 33
6 mars 2011 à 21:11
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 ;)
0
MastercroW Messages postés 1095 Date d'inscription dimanche 3 octobre 2010 Statut Membre Dernière intervention 31 mai 2019 163
6 mars 2011 à 21:12
regarde juste en haut ce que j'ai mis
0
agencetourix Messages postés 192 Date d'inscription mardi 24 août 2010 Statut Membre Dernière intervention 11 novembre 2011 33
6 mars 2011 à 21:14
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 ?
0
MastercroW Messages postés 1095 Date d'inscription dimanche 3 octobre 2010 Statut Membre Dernière intervention 31 mai 2019 163
6 mars 2011 à 21:17
Tu veux centré ton menu ?
Met moi ton code du menu xD
0
agencetourix Messages postés 192 Date d'inscription mardi 24 août 2010 Statut Membre Dernière intervention 11 novembre 2011 33
6 mars 2011 à 21:29
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>
0
agencetourix Messages postés 192 Date d'inscription mardi 24 août 2010 Statut Membre Dernière intervention 11 novembre 2011 33
6 mars 2011 à 22:53
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 !
0