Sous menu Css - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Sous menu Css

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Sous menu Css (Lu 3361 fois)

Sous menu Css
« sur: le 12-03-2014 a 09:22:32 »

seetrins
Membre récent

Hors-Ligne

Messages: 4

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 ?

Rapporter au modérateur

Re:Sous menu Css
« Répondre #1 sur: le 12-03-2014 a 10:34:12 »

seetrins
Membre récent

Hors-Ligne

Messages: 4

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

Rapporter au modérateur

Re:Sous menu Css
« Répondre #2 sur: le 12-03-2014 a 11:13:59 »

seetrins
Membre récent

Hors-Ligne

Messages: 4

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...

Rapporter au modérateur

Re:Sous menu Css
« Répondre #3 sur: le 15-03-2014 a 18:40:26 »

seetrins
Membre récent

Hors-Ligne

Messages: 4

Personne pour m'aider je but la dessus depuis plusieurs jours...

Rapporter au modérateur

Re:Sous menu Css
« Répondre #4 sur: le 18-03-2014 a 20:30:05 »

GuillaumeRoos
P'tit nouveau

Hors-Ligne

Sexe: Male

Messages: 122

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.

Rapporter au modérateur

Guillaume Roos - Web Designer, développeur et illustrateur indépendant
http://www.guillaumeroos.com
siret : 513 379 420 00013