Titre: Sous menu Css
Posté par: seetrins le le 12-03-2014 a 09:22:32
Bonjour voila je suis nouveau dans la conception de site internet et je suis en train de concevoir ma page d'accueil en HTML 5 et CSS 3.
Mon problème c'est que j'ai bien réussi à crée mon sous-menu en html 5 bien réussi à l'afficher sur mon site à l'aide du css 3 quand je passe mon curseur de souris sur mon menu, mais tout mes sous-menu sont en vrac je voudrais que mon sous-menu soit tout le long de mon bandeau haut et bien aligné est-ce-que c'est possible avec CSS 3 ? |
Titre: Re:Sous menu Css
Posté par: seetrins le le 12-03-2014 a 10:34:12
Voici mon Html et mon CSS
<body>
<div id="bloc_page">
<header>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Concept</a></li>
<li><a href="#">Villes</a>
<ul>
<li><a href="#">Aix-en-Provence</a></li>
<li><a href="#">Aurillac</a></li>
<li><a href="#">Avignon</a></li>
<li><a href="#">Bergerac</a></li>
<li><a href="#">Béthune</a></li>
<li><a href="#">Bron</a></li>
<li><a href="#">Evian</a></li>
<li><a href="#">Lyon</a></li>
<li><a href="#">Montauban</a></li>
<li><a href="#">Saint-Chamond/Rive de Gier</a></li>
<li><a href="#">Saumur</a></li>
<li><a href="#">Thonon-les-Bains</a></li>
<li><a href="#">Toulouse</a></li>
<li><a href="#">Tourcoing</a></li>
<li><a href="#">Vichy</a></li>
</div>
</ul>
</li>
<li><a href="#">Commercants<br/>partenaire</a>
<ul>
<li><a href="#">Alimentation</a></li>
<li><a href="#">Artisan</a></li>
<li><a href="#">Auto-Moto</a></li>
<li><a href="#">Beauté & Bien-être</a></li>
<li><a href="#">Bricolage</a></li>
<li><a href="#">Constructeur & Immobilier</a></li>
<li><a href="#">Electroménager</a></li>
<li><a href="#">Fleuriste</a></li>
<li><a href="#">Hotel & Restaurant</a></li>
<li><a href="#">Meuble & literie</a></li>
<li><a href="#">Mode & Accessoires</a></li>
<li><a href="#">Optique & santé</a></li>
<li><a href="#">Tourisme & Loisirs</a></li>
</ul>
</li>
<li><a href="#">Trouver sa carte et <br/> devenir partenaire</a></li>
<li><a href="#">Comment l'utiliser</a></li>
</ul>
</nav>
</header>
et voici mon css
body
{
background-color: white;
font-family: 'Trebuchet MS', Arial, sans-serif;
color: #181818;
}
#bloc_page
{
width: 1024px; /* Taille de la page */
margin: auto;
}
header
{
background-image: url('image/header.jpg'); /* bandeau du site */
width:1024px;
height:300px;
}
nav
{
text-align:center; /* menu du site */
display: inline-block;
width: 1024px;
}
nav ul
{
list-style-type:none; /* Position du menu*/
text-align:left;
padding-top:230px;
margin-left:200px;
}
nav li
{
float:left; /* Position du menu*/
margin: 10px;
padding:2px;
}
nav a
{
text-align:center;
margin:0px;
color:#E64CE2;
text-decoration:none;
}
nav a:hover
{
color:#FE0101;
}
nav ul li ul
{
margin:0px;
display:none;
background-color:#0BDA10;
}
nav ul li:hover ul
{
display:block; /* position du sous-menu */
width: 1024px;
margin: auto;
}
nav li ul
{
position:absolute;
margin:0px;
padding:0px;
}
Merci pour votre aide |
Titre: Re:Sous menu Css
Posté par: seetrins le le 12-03-2014 a 11:13:59
| J'ai réussi avec un margin-left pour décaler me sous menu pour qu'il soit directement sous mon header par contre j'ai que le sous menu de ville qui est bien centrer celui de commerçant partenaire non je n'arrive pas à bien le déterminer même en mettant un balise <div id=> par exemple juste pour toucher ce sous-menu la... je ne sais pas si j'ai été assez précis... |
Titre: Re:Sous menu Css
Posté par: seetrins le le 15-03-2014 a 18:40:26
| Personne pour m'aider je but la dessus depuis plusieurs jours... |
Titre: Re:Sous menu Css
Posté par: GuillaumeRoos le le 18-03-2014 a 20:30:05
Bonsoir,
En fait, ça serait plus simple de voir la page pour pouvoir vous dire ce qui ne va pas mais, au premier coup d'oeil, je vois une faute assez gênante dans votre code html : le </div> devrait se trouver après le </header>, pas en plein milieu des listes. Rien que ça, ça doit générer son lot d'erreurs. |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|