[CSS]Mon menu horizontale

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS]Mon menu horizontale

leternel

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!

Publicité

egege

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
}

leternel

Super problème résolu merci chef !

leternel

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;

}

leternel

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.

leternel

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

egege

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

leternel

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

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS]Mon menu horizontale

Sujets relatifs
Problème menu sur site	Realiser un Menu en C
programmation C (Menu)	problème CSS externe pour facebook box
Problème d'actualisation image/CSS	Ré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

Page générée en 0.052 secondes