Centrage menu horizontal+dans ma div droite &
jeromei
Messages postés
14
Statut
Membre
-
jeromei -
jeromei -
Bonjour,
j'ai un soucis avec mes div, des que je rajoute le menu horizontal en haut de page. 1 il n'est pas centré et. je n'arrive pas à corriger le tir.
http://jeromei.phpnet.org/Copie%20de%20travail/
et sur index.php en bas sous les logos voiture je n'arrive pas à centrer les liens texte implantation et groupe
pouvez vous m'aider svp
<body>
<div id="global">
<div id="header">
photo dans l'entete
</div><!-- fin div header -->
<div id="navglobal"> c'est mon menu horizontal
<div id="nav">
<ul>
<li><a class="ici" href="index.php" title="">accueil</a></li>
<li><a href="questions.php" title="">faq</a></li>
<li><a href="intranet.php" title="">Intranet</a></li>
<li><a href="recrut.php" title="">Recrut</a></li>
<li><a href="mail.php" title="">Nous contacter</a></li>
</ul>
</div><c'est la fin de ma div nav-->
</div> <!--fin div nav global-->
<div id="container"> debut de mon container
<div id="gauche">
<div id="menu" debut de mon menu vertical dans div gauche
</div> c'est la fin de ma div menu
</div><!--fin div gauche-->
<div id="centre"><!-- debut de ma div du milieu-->
<h3>Eligo-france au coeur de vos projets</h3>
<img src="images/photoaccueil.jpg" alt="photopubmaison" title="selectionner le meilleur constructeur" />
<div id="interlocuteur"> debut de ma div blabla lire la suite....
blllalalallalblable
<p class="photo"><a href="implantation.php"><img src="images/cartefrance.jpg" ><br />implantation</a></p>
</div><!--fin div interlocuteur-->
</div><!-- fin centre-->
<div id="droite">
<div id="newsletter">
<marquee height="140px" width :200px ;
0 behavior="scroll" direction="down" scrollamount="2"
scrolldelay="50" loop="-1" onmouseover="this.stop();" onmouseout="this.start();"
>code HTML à faire défiler<br />llllllllllllllllllllllllll<br /> llllllllllll
<br /> llllllllllll<br /> llllllllllll<br /> llllllllllll</marquee>
<a href="newsletter.php">abonnez vous</a>
</div><!-- fin newsletter-->
<p> <img src="images/cartefrance.jpg" alt="carte de france" title="logo carte de france" />
<img src="images/plan.jpg" alt="plan d'acces" title="image du plan d'acces" /></p>
</div> <!-- div fin droite-->
</div> <!--fin div container-->
<div id="pied">
<a href="recrute.php">Eligo recrute</a> | <a href="newsletter.php">Newsletter</a> | <a href="mail.php">Contact</a> |
<a href="developpement.php">Développement durable</a> | <a href=" conditions.html">Conditions générales</a> | <a href="partenaire.php">Partenaires</a> |
</div> <!--fin div pied-->
</div> <!--fin div global-->
</body>
</html>
les css
structure.css
body{
margin:0;
padding:0;
background: #33CCFF url(../images/degrade-bleu.jpg) repeat-x;
}
#global{
width:776px;
background-color:transparent;
margin-top:4%;
margin-left:auto;
margin-right:auto;
}
#header{
height: 151px;
width:776px;
background: #ffffff url(../images/bandeau.jpg) ;
}
/*---------ici nav haut*/
#navglobal{
width: 99,9%;
height:20px;
background: #ffffff;
}
#nav ul, li{
width:99,9%;
list-style: none;
margin: 0px;
padding: 0px;
line-height: 20px;
text-indent:50px;
float: left;
}
#nav a,
#nav a:link,
#nav a:visited,
#nav a:active{
display:block;
text-decoration: none;
color: blue;
font-size: 12px;
font-weight: normal;
text-align: center;
font-family: arial, verdana, sans-serif;
}
#nav a:hover{
color: orange;
}
#nav a.ici,
#nav a.ici:link,
#nav a.ici:visited,
#nav a.ici:active,
#nav a.ici:hover{
color: orange;
}
/*---------ici fin du nav haut*/
#container{
width: 776px;
background-color: #ffffff;
float:left;
/*margin-left: 120px;
margin-top: 38px;*/
}
#gauche{
width:180px;
float:left;
font-family: Arial, verdana, sans serif;
font-size:12px;
color:#2ab2e2;
padding-top:30px;
text-align:center;
padding-left:10px;
background-color:#ffffff;
}
#menu ul{
padding-top:30px;
margin:0;
padding-left:5px;
background-color: #ffffff;
width: 170px;
float:left;
}
#menu li{
list-style-type: none;
background-color: #ffffff;
padding-left:-20px;
margin-top: 8px;
margin-bottom: 4px;
width:160px;
}
#menu a,
#menu a:link,
#menu a:visited,
#menu a:active{
font-size: 14px;
font-weight: bold;
text-decoration: none;
font-family:arial, sans-serif;
display:block;
text-indent: 5px;/*colle les textes menus à gauche*/
width: 100%;
height: 29px;/*regle la hauteur des rectangles ou sont les cellules texte*/
line-height: 29px;/*regle la hauteur des rectangles ou sont les cellules texte*/
vertical-align: center;/*va avec les 2 lignes du dessus obligatoirement*/
font-family:arial, sans-serif;
font-weight: bold;
background: #106488 url(../images/pucebleuclaire.gif) 5px/* place les puces au centre vertical*/ no-repeat;
color:#ffffff;
}
#menu a:hover{
color: #FFFFFF;
background: #ff1f61 url(../images/pucebleuclaire.gif) 5px/* place les puces au centre vertical*/ no-repeat;
font-size: 14px;
font-weight: bold;
text-decoration: none;
font-family:arial, sans-serif;
}
#centre{
width:360px;
float:left;
font-family: Arial, verdana, sans serif;
font-size:12px;
color:#666666;
margin-left:10px;
padding-top:30px;
padding-right:20px;
background-color:#ffffff;
}
img{
align:center;
float:left;
border-style:none;
width:80px;
}
h4 {
text-align:center;
}
h3 {
text-align:center;
color:#797979;
}
.photo{
float: left;
margin-left: 5px;
margin-right:5px;
border-style:none;
text-align: center;
width: 105px;
border-style:none;
}
.photo a,
.photo a:link,
.photo a:active,
.photo a: visited{
color:#797979;
font-size: 14px;
font-weight: bold;
text-decoration: none;
/*display:block;*/
text-indent: 5px;/*colle les textes menus à gauche*/
height: 29px;/*regle la hauteur des rectangles ou sont les cellules texte*/
line-height: 29px;/*regle la hauteur des rectangles ou sont les cellules texte*/
vertical-align: center;/*va avec les 2 lignes du dessus obligatoirement*/
font-family:arial, sans-serif;
font-weight: bold;
color:#ffffff;
}
.photo a:hover{
color: #106488;
background-color: #ffffff;
font-size: 14px;
font-weight: bold;
text-decoration: none;
font-family:arial, sans-serif;
}
#interlocuteur{
width:300x;/*340px*/
text-align:justify;
color:#797979;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-left:5px;
margin-right:5px;
float:left;
}
#interlocuteur ul{
padding-top:30px;
margin:0;
padding-left:55px;
background-color: #ffffff;
}
#interlocuteur li{
list-style-type: none;
background-color: #ffffff;
padding-left:-20px;
margin-top: 8px;
margin-bottom: 4px;
}
#interlocuteur a,
#interlocuteur a:link,
#interlocuteur a:active,
#interlocuteur a: visited{
color:#797979;
font-size: 14px;
font-weight: bold;
text-decoration: none;
/*display:block;*/
text-indent: 5px;/*colle les textes menus à gauche*/
height: 15px;/*regle la hauteur des rectangles ou sont les cellules texte*/
line-height: 15px;/*regle la hauteur des rectangles ou sont les cellules texte*/
vertical-align: center;/*va avec les 2 lignes du dessus obligatoirement*/
font-family:arial, sans-serif;
font-weight: bold;
color:#ffffff;
}
#interlocuteur a:hover{
color: #106488;
background-color: #ffffff;
font-size: 12px;
font-weight: bold;
text-decoration: none;
font-family:arial, sans-serif;
}
#droite{
width:180x;
font-family: Arial, verdana, sans serif;
font-size:12px;
color:#666666;
float:left;
text-align:center;
float:left;
padding-top:30px;
background-color:#ffffff;
}
#newsletter{
width:140px;
height:200px;
text-align:center;
font-family: Arial, verdana, sans serif;
font-size:12px;
color:#797979;
}
#newsletter a,
#newsletter a:link,
#newsletter a:active,
#newsletter a:visited{
color:#106488;
text-decoration:none;
width:60px;
height:15px;
}
#newsletter a:hover{
color:#797979;
}
#pied{
height:15px;
width:776px;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
#pied a,
#pied a:link,
#pied a:active,
#pied a:visited{
color:#106488;
text-decoration:none;
}
#pied a:hover{
color:#797979;
}
#pied
{
margin:0;
clear:both;
}
j'ai un soucis avec mes div, des que je rajoute le menu horizontal en haut de page. 1 il n'est pas centré et. je n'arrive pas à corriger le tir.
http://jeromei.phpnet.org/Copie%20de%20travail/
et sur index.php en bas sous les logos voiture je n'arrive pas à centrer les liens texte implantation et groupe
pouvez vous m'aider svp
<body>
<div id="global">
<div id="header">
photo dans l'entete
</div><!-- fin div header -->
<div id="navglobal"> c'est mon menu horizontal
<div id="nav">
<ul>
<li><a class="ici" href="index.php" title="">accueil</a></li>
<li><a href="questions.php" title="">faq</a></li>
<li><a href="intranet.php" title="">Intranet</a></li>
<li><a href="recrut.php" title="">Recrut</a></li>
<li><a href="mail.php" title="">Nous contacter</a></li>
</ul>
</div><c'est la fin de ma div nav-->
</div> <!--fin div nav global-->
<div id="container"> debut de mon container
<div id="gauche">
<div id="menu" debut de mon menu vertical dans div gauche
</div> c'est la fin de ma div menu
</div><!--fin div gauche-->
<div id="centre"><!-- debut de ma div du milieu-->
<h3>Eligo-france au coeur de vos projets</h3>
<img src="images/photoaccueil.jpg" alt="photopubmaison" title="selectionner le meilleur constructeur" />
<div id="interlocuteur"> debut de ma div blabla lire la suite....
blllalalallalblable
<p class="photo"><a href="implantation.php"><img src="images/cartefrance.jpg" ><br />implantation</a></p>
</div><!--fin div interlocuteur-->
</div><!-- fin centre-->
<div id="droite">
<div id="newsletter">
<marquee height="140px" width :200px ;
0 behavior="scroll" direction="down" scrollamount="2"
scrolldelay="50" loop="-1" onmouseover="this.stop();" onmouseout="this.start();"
>code HTML à faire défiler<br />llllllllllllllllllllllllll<br /> llllllllllll
<br /> llllllllllll<br /> llllllllllll<br /> llllllllllll</marquee>
<a href="newsletter.php">abonnez vous</a>
</div><!-- fin newsletter-->
<p> <img src="images/cartefrance.jpg" alt="carte de france" title="logo carte de france" />
<img src="images/plan.jpg" alt="plan d'acces" title="image du plan d'acces" /></p>
</div> <!-- div fin droite-->
</div> <!--fin div container-->
<div id="pied">
<a href="recrute.php">Eligo recrute</a> | <a href="newsletter.php">Newsletter</a> | <a href="mail.php">Contact</a> |
<a href="developpement.php">Développement durable</a> | <a href=" conditions.html">Conditions générales</a> | <a href="partenaire.php">Partenaires</a> |
</div> <!--fin div pied-->
</div> <!--fin div global-->
</body>
</html>
les css
structure.css
body{
margin:0;
padding:0;
background: #33CCFF url(../images/degrade-bleu.jpg) repeat-x;
}
#global{
width:776px;
background-color:transparent;
margin-top:4%;
margin-left:auto;
margin-right:auto;
}
#header{
height: 151px;
width:776px;
background: #ffffff url(../images/bandeau.jpg) ;
}
/*---------ici nav haut*/
#navglobal{
width: 99,9%;
height:20px;
background: #ffffff;
}
#nav ul, li{
width:99,9%;
list-style: none;
margin: 0px;
padding: 0px;
line-height: 20px;
text-indent:50px;
float: left;
}
#nav a,
#nav a:link,
#nav a:visited,
#nav a:active{
display:block;
text-decoration: none;
color: blue;
font-size: 12px;
font-weight: normal;
text-align: center;
font-family: arial, verdana, sans-serif;
}
#nav a:hover{
color: orange;
}
#nav a.ici,
#nav a.ici:link,
#nav a.ici:visited,
#nav a.ici:active,
#nav a.ici:hover{
color: orange;
}
/*---------ici fin du nav haut*/
#container{
width: 776px;
background-color: #ffffff;
float:left;
/*margin-left: 120px;
margin-top: 38px;*/
}
#gauche{
width:180px;
float:left;
font-family: Arial, verdana, sans serif;
font-size:12px;
color:#2ab2e2;
padding-top:30px;
text-align:center;
padding-left:10px;
background-color:#ffffff;
}
#menu ul{
padding-top:30px;
margin:0;
padding-left:5px;
background-color: #ffffff;
width: 170px;
float:left;
}
#menu li{
list-style-type: none;
background-color: #ffffff;
padding-left:-20px;
margin-top: 8px;
margin-bottom: 4px;
width:160px;
}
#menu a,
#menu a:link,
#menu a:visited,
#menu a:active{
font-size: 14px;
font-weight: bold;
text-decoration: none;
font-family:arial, sans-serif;
display:block;
text-indent: 5px;/*colle les textes menus à gauche*/
width: 100%;
height: 29px;/*regle la hauteur des rectangles ou sont les cellules texte*/
line-height: 29px;/*regle la hauteur des rectangles ou sont les cellules texte*/
vertical-align: center;/*va avec les 2 lignes du dessus obligatoirement*/
font-family:arial, sans-serif;
font-weight: bold;
background: #106488 url(../images/pucebleuclaire.gif) 5px/* place les puces au centre vertical*/ no-repeat;
color:#ffffff;
}
#menu a:hover{
color: #FFFFFF;
background: #ff1f61 url(../images/pucebleuclaire.gif) 5px/* place les puces au centre vertical*/ no-repeat;
font-size: 14px;
font-weight: bold;
text-decoration: none;
font-family:arial, sans-serif;
}
#centre{
width:360px;
float:left;
font-family: Arial, verdana, sans serif;
font-size:12px;
color:#666666;
margin-left:10px;
padding-top:30px;
padding-right:20px;
background-color:#ffffff;
}
img{
align:center;
float:left;
border-style:none;
width:80px;
}
h4 {
text-align:center;
}
h3 {
text-align:center;
color:#797979;
}
.photo{
float: left;
margin-left: 5px;
margin-right:5px;
border-style:none;
text-align: center;
width: 105px;
border-style:none;
}
.photo a,
.photo a:link,
.photo a:active,
.photo a: visited{
color:#797979;
font-size: 14px;
font-weight: bold;
text-decoration: none;
/*display:block;*/
text-indent: 5px;/*colle les textes menus à gauche*/
height: 29px;/*regle la hauteur des rectangles ou sont les cellules texte*/
line-height: 29px;/*regle la hauteur des rectangles ou sont les cellules texte*/
vertical-align: center;/*va avec les 2 lignes du dessus obligatoirement*/
font-family:arial, sans-serif;
font-weight: bold;
color:#ffffff;
}
.photo a:hover{
color: #106488;
background-color: #ffffff;
font-size: 14px;
font-weight: bold;
text-decoration: none;
font-family:arial, sans-serif;
}
#interlocuteur{
width:300x;/*340px*/
text-align:justify;
color:#797979;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-left:5px;
margin-right:5px;
float:left;
}
#interlocuteur ul{
padding-top:30px;
margin:0;
padding-left:55px;
background-color: #ffffff;
}
#interlocuteur li{
list-style-type: none;
background-color: #ffffff;
padding-left:-20px;
margin-top: 8px;
margin-bottom: 4px;
}
#interlocuteur a,
#interlocuteur a:link,
#interlocuteur a:active,
#interlocuteur a: visited{
color:#797979;
font-size: 14px;
font-weight: bold;
text-decoration: none;
/*display:block;*/
text-indent: 5px;/*colle les textes menus à gauche*/
height: 15px;/*regle la hauteur des rectangles ou sont les cellules texte*/
line-height: 15px;/*regle la hauteur des rectangles ou sont les cellules texte*/
vertical-align: center;/*va avec les 2 lignes du dessus obligatoirement*/
font-family:arial, sans-serif;
font-weight: bold;
color:#ffffff;
}
#interlocuteur a:hover{
color: #106488;
background-color: #ffffff;
font-size: 12px;
font-weight: bold;
text-decoration: none;
font-family:arial, sans-serif;
}
#droite{
width:180x;
font-family: Arial, verdana, sans serif;
font-size:12px;
color:#666666;
float:left;
text-align:center;
float:left;
padding-top:30px;
background-color:#ffffff;
}
#newsletter{
width:140px;
height:200px;
text-align:center;
font-family: Arial, verdana, sans serif;
font-size:12px;
color:#797979;
}
#newsletter a,
#newsletter a:link,
#newsletter a:active,
#newsletter a:visited{
color:#106488;
text-decoration:none;
width:60px;
height:15px;
}
#newsletter a:hover{
color:#797979;
}
#pied{
height:15px;
width:776px;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
#pied a,
#pied a:link,
#pied a:active,
#pied a:visited{
color:#106488;
text-decoration:none;
}
#pied a:hover{
color:#797979;
}
#pied
{
margin:0;
clear:both;
}
A voir également:
- Centrage menu horizontal+dans ma div droite &
- Menu déroulant excel - Guide
- Barre droite mac ✓ - Forum MacOS
- Canon quick menu - Télécharger - Utilitaires
- Les textes ne doivent pas être en retrait à droite et à gauche - Guide
- Ctrl droite ✓ - Forum Logiciels
3 réponses
Modifie dans le CSS du menu du haut "left" en "center"
je l'ai mis en gras pour que tu le repères.
je l'ai mis en gras pour que tu le repères.
/*---------ici nav haut*/
#navglobal{
width: 99,9%;
height:20px;
background: #ffffff;
}
#nav ul, li{
width:99,9%;
list-style: none;
margin: 0px;
padding: 0px;
line-height: 20px;
text-indent:50px;
float: center;
}
#nav a,
#nav a:link,
#nav a:visited,
#nav a:active{
display:block;
text-decoration: none;
color: blue;
font-size: 12px;
font-weight: normal;
text-align: center;
font-family: arial, verdana, sans-serif;
}
#nav a:hover{
color: orange;
}
#nav a.ici,
#nav a.ici:link,
#nav a.ici:visited,
#nav a.ici:active,
#nav a.ici:hover{
color: orange;
}
/*---------ici fin du nav haut*/
affichage : ie+mozilla