Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1191 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS]Mon menu horizontale

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS]Mon menu horizontale

n°2185099
leternel
Posté le 10-04-2013 à 10:22:11  profilanswer
 

Salut les amis alors voila après un long moment je me remet au css et j'avou que je suis un peu pomé j'ai tenté de faire un menu horizontale mais il part légérement en vrille je vous laisse admirez ce chef d'oeuvre de vos yeux ! http://dionation.zz.mu/html/
 
 
 
Code HTML :  

Spoiler :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<link rel="stylesheet" type="text/css" href="../css/style01.css" />
<title>Document sans nom</title>
</head>
 
<body>
 
 
<div class="global">
 <div class="banner"></div>
 
<ul id="menu_horizontal">
<li class="actuelle"><a href="Accueil.html">Accueil</a></li>
<li><a href="Construction.html">Construction</a></li>
<li><a href="livreor.php">Nettoyage</a></li>
<li><a href="contact.php">Courrier Express</a></li>
<li><a href="admin.php">Photos</a></li></ul>
<li><a href="admin.php">Contact</a></li></ul>
 
  <div class="logosas"></div>
</div>
 
 
</body>
</html>


 
 
Style CSS :

Spoiler :

*{
 margin:0;
 padding:0;
}
 
 
body  {
    background:url(../images/fonddusite/fonddusite.png) center top;
 margin: 0;  
 padding: 0;
 text-align:center;  
}
 
.global{
width: 1200px;  
margin:0 auto;
text-align:left;
 }
 
 
.banner{
background:url(../images/banniere/banniere.png);
height:147px;
width:1084px;
position:fixed;
 
}
 
.logosas{
 background-image:url(../images/banniere/logo.png);
 height:106px;
    width:207px;
 position:relative;
    top:5px;
 left:100px;
 
}
 
#menu_horizontal{
 position:relative;
 top:15px;
 left:405px;
 
 
}
 
 
 
 
ul#menu_horizontal li {
  display : block;
  padding :0;
  margin:0px 25px;
  text-decoration:none;
  float: left
 }
ul#menu_horizontal {
 list-style-type : none;
 text-decoration:none;  
 
 }
 
li a:hover{
 text-decoration:none;
 background:url(../images/menu/active.png) no-repeat;
 
text-align: center;  
 height:79px;
 width:113px;
 }
li a:active{
 text-decoration:none;
 background:url(../images/menu/active.png) no-repeat;
 
text-align: center;  
 height:79px;
 width:113px;
}
 
li a {
 
text-decoration:none;
display:block;
text-align: center;  
}
 
.actuelle {
background:url(../images/menu/active.png) no-repeat;
text-decoration:none;
 height:79px;
 width:113px;
}


 
 
l'idée est que mon la page sur la quel je me trouve que son lien ait en fond l'image et quand je survolle les autres liens il apparait.
 
 
Merci davançe les amis!

mood
Publicité
Posté le 10-04-2013 à 10:22:11  profilanswer
 

n°2185113
egege
Posté le 10-04-2013 à 11:40:09  profilanswer
 

C'est normal que ca bug, car tu donne une largeur uniquement sur le hover de tes li.
 
Il faut donc définir la largeur sur tes li et réduire tes margin comme ci dessous :
 
ul#menu_horizontal li {  
  display : block;  
  padding :0;  
  margin:0px 10px;  
  text-decoration:none;  
  float: left,
  width:113px  
 }

n°2185132
leternel
Posté le 10-04-2013 à 12:01:05  profilanswer
 

Super problème résolu merci chef !

n°2185142
leternel
Posté le 10-04-2013 à 12:50:57  profilanswer
 

J'ai donc refait mon css http://dionation.zz.mu/html/ mais tu pourrais me dire pourquoi mon bouton contact et autant sur la droite alors qu'il a les meme propriété que les autres et pourquoi le design de mon bouton ne saffiche pas constament stp ? :(

Spoiler :

*{
 margin:0;
 padding:0;
}
 
 
body  {
    background:url(../images/fonddusite/fonddusite.png) center top;
 margin: 0;  
 padding: 0;
 text-align:center;  
}
 
.global{
width: 1200px;  
margin:0 auto;
text-align:left;
 }
 
 
.banner{
background:url(../images/banniere/banniere.png);
height:147px;
width:1084px;
position:fixed;
 
}
 
.logosas{
 background-image:url(../images/banniere/logo.png);
 height:106px;
    width:207px;
 position:relative;
    top:20px;
 left:100px;
 
}
 
#menu_horizontal{
 position:relative;
 top:2px;
 left:405px;
  text-decoration:none;
 
}
 
 
ul#menu_horizontal li {  
  display : block;  
  padding :0;  
  margin:0px 0px;  
  text-decoration:none;  
  float: left  
 }  
ul#menu_horizontal {  
 list-style-type : none;  
 text-decoration:none;  
 
 }  
   
li a:hover{  
 text-decoration:none;  
 background:url(../images/menu/active.png) no-repeat;  
text-align: center;  
 height:79px;  
 width:113px;  
 }  
 
li a:active{  
background:url(../images/menu/active.png) no-repeat;  
text-decoration:none;  
 height:79px;  
 width:113px;  
}  
 
li a {  
   
text-decoration:none;  
display:block;  
text-align: center;  
 height:79px;  
 width:113px;  
}  
 
 
 
#PositionTextLien {
 position:relative;
 top:15px;
 
 }

n°2185158
leternel
Posté le 10-04-2013 à 14:07:20  profilanswer
 

C'est bon j'ai trouvé les solutions comme un grand enfin je trouve quand meme que le lien contact est + écarté que les autres menfin bon tant pis.

n°2185180
leternel
Posté le 10-04-2013 à 15:25:11  profilanswer
 

Toujours concernant mon menu je ne parvien pas a faire en sorte que la page ou je me trouve le mot CONSTRUCTION soit blanc et reste blanc une aide svp

n°2185185
egege
Posté le 10-04-2013 à 15:59:28  profilanswer
 

C'est pas compliqué, ajoute un  li#actuelle a{color:#fff;} à ton fichier css

n°2185229
leternel
Posté le 10-04-2013 à 18:10:27  profilanswer
 

Ouais le truck tout bete et j'ai pourtant tellement galéré ça doit etre la fatigue :/ merci egege pour ton aide!


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS]Mon menu horizontale

 

Sujets relatifs
Problème menu sur siteRealiser un Menu en C
programmation C (Menu)problème CSS externe pour facebook box
Problème d'actualisation image/CSSRécupérer des données mysql et les insérer dans un menu déroulant
Aide: dérouler un menu[CSS / HTML] Background / Div et image de fond
[CSS] Problème avec un overflow hidden[CSS] Menu verticale, sous menu horizontale
Plus de sujets relatifs à : [CSS]Mon menu horizontale


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR