menu css3 RESOLU

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : menu css3 RESOLU

Profil supprimé

:hello:

j'avais quelque soucis avec mon menu css, c'est un simple menu que j'ai réaliser je ne voulais pas un truc compliquer.
mais j'ai 2 ou 3 soucis que j'arrive pas a régler tous seul.

en 1er voici le code html:

Code :

<div class="right3">
<div id="navigation">
<ul>
<li><a href="#"><img src="maison-maison-icone-3710-128.png" width="58" height="58" alt=""/></a>Maison</li>
<li><a href="shop.html"><img src="ecommerce-panier-shoping-webshop-icone-6530-128.png" width="58" height="58" alt=""/></a>Shop
<ul>
<li><a href="promotion.html">Promotion amazon</a></li>
<li><a href="carte-graphique.html">Carte graphique</a></li>
<li><a href="nas.html">Serveur nas</a></li>
<li><a href="GEEK.html">geek zone</a></li>
</ul>
</li>
<li><a href="prez.html"><img src="telechargements-dossier-manille-icone-4466-128.png" width="58" height="58" alt=""/></a>Trousse a outils</li>
<li><a href="Tuto/index.html"><img src="livres-agenda-education-bibliotheque-icone-5155-128.png" width="58" height="58" alt=""/></a>Tutoriels</li>
<li><a href="contact.html"><img src="enveloppe-courrier-sobre-icone-4172-128.png" width="58" height="58" alt=""/></a>Contact</li>
</ul>
</div>
</div>

j'ai installer se menu dans la classe right3 mais je ne voit pas cette classe, si vous regarder sur mon site crash override.fr en haut les simples boutons son dans la classe right3
mais quand j'ai créer mon menu et bien je ne vois plus cette classe avec se fond gris.
savez vous comment installer cette classe dans mon menu ?

Message édité par Profil supprimé le 05-06-2014 à 13:25:20

Publicité

Profil supprimé

je suis arrivé a peu près de se que je voulais mais l'image reste sur la gauche et je trouve pas comment l'aligner au milieu, de + j'ai enlever la classe right3 et j'ai intégrer l'arrière plan directement dans le css mais le résultat n'est pas chouette.

voici le nouveau code html:

Code :

<div id="container">
<header>
<nav id="navigation">
<ul>
<li><a href="#"><img src="maison-maison-icone-3710-128.png" width="38" height="38" alt=""/></a>Maison</li>
<li><a href="shop.html"><img src="ecommerce-panier-shoping-webshop-icone-6530-128.png" width="38" height="38" alt=""/></a>Shop
<ul>
<li><a href="promotion.html">Promotion amazon</a></li>
<li><a href="carte-graphique.html">Carte graphique</a></li>
<li><a href="nas.html">Serveur nas</a></li>
<li><a href="GEEK.html">geek zone</a></li>
</ul>
</li>
<li><a href="prez.html"><img src="telechargements-dossier-manille-icone-4466-128.png" width="38" height="38" alt=""/></a>Trousse à outils
<ul>
<li><a href="prez-2.html">Page 2</a></li>
</ul>
</li>
<li><a href="Tuto/index.html"><img src="livres-agenda-education-bibliotheque-icone-5155-128.png" width="38" height="38" alt=""/></a>Tutoriels
<ul>
<li><a href="Tuto/photoshop.html">Photoshop</a></li>
<li><a href="Tuto/android.html">Android</a></li>
<li><a href="Tuto/blender.html">Blender</a></li>
<li><a href="Tuto/CSS.html">CSS</a></li>
<li><a href="Tuto/the Gimp.html">The gimp</a></li>
</ul>
</li>
<li><a href="contact.html"><img src="enveloppe-courrier-sobre-icone-4172-128.png" width="38" height="38" alt=""/></a>Contact</li>
</ul>
</nav>
</header>

billgatesanonym

Quand on va sur le site override.fr, on a tout de suite "Override en maintenance".

Hier soir, j'ai vu un message demandant de l'aide sur des menus et du css.
Peut-être que vous êtes dans son équipe. Son message a disparu.

Voici une solution qui devrait marcher, à la fois pour vous et pour lui.

Code :

<html>
<head>
<style type="text/css">
#nav {
height: 77px;
width: 800px;
background-color: #cfcfcf;
}
#nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav ul li ul {
display: none;
}
#nav ul li:hover ul {
display: block;
}
#nav li:hover ul li {
float: none;
background-color: lightgreen;
}
#nav ul li:hover ul li ul li {
position: relative;
display: none;
background-color: purple;
left: 110px;
top: -33px;
}
#nav ul li:hover ul li:hover ul li {
display: block;
background-color: orange;
}
#nav li ul {
position: absolute;
}
#nav ul li {
float: left;
display: block;
padding: 0;
}
#nav ul li a:hover, #nav ul li.selected {
background-color: #2e5a77;
}
#nav ul li a {
color: #fff;
display: block;
border-right: 1px solid #fff;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
padding: 10px 20px;
text-decoration: none;
}
#nav ul li.start a {
border-left: none;
}
#nav ul li.end a {
border-right: none;
}
#nav ul li a:hover {
color: #fff;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#"><img src="maison-maison-icone-3710-128.png" width="58" height="58" alt="Maison"/></a></li>
<li><a href="shop.html"><img src="ecommerce-panier-shoping-webshop-icone-6530-128.png" width="58" height="58" alt="Shop"/></a>
<ul>
<li><a href="promotion.html">Promotion amazon</a></li>
<li><a href="carte-graphique.html">Carte graphique</a></li>
<li><a href="nas.html">Serveur nas</a></li>
<li><a href="GEEK.html">geek zone</a></li>
</ul>
</li>
<li><a href="prez.html"><img src="telechargements-dossier-manille-icone-4466-128.png" width="58" height="58" alt="Trousse à outils"/></a></li>
<li><a href="Tuto/index.html"><img src="livres-agenda-education-bibliotheque-icone-5155-128.png" width="58" height="58" alt="Tutoriels"/></a></li>
<li><a href="contact.html"><img src="enveloppe-courrier-sobre-icone-4172-128.png" width="58" height="58" alt="Contact"/></a></li>
</ul>
</div>
<h1>Test menu</h1>
<p>
Voici une autre unordered list :
<ul>
<li>qui n'est pas</i>
<li>affectée par
<ul>
<li>le CSS</li>
<li>du menu</li>
</ul>
</li>
</ul>
</body>
</html>

Profil supprimé

mon site c'est pas override.fr mais crash-override.fr
je ne connais pas la personne qui a demander de l'aide sur les menus css

j'ai refais le menu j'ai enlever le fond gris, je sais pas se que vous en penser mais se n'est pas trop moche

je ne suis pas arriver a faire comme je voulais, mais voici le code css du menu:

Code :

#navigation ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
background-color: rgba(0,0,0,0.20);
}
#navigation li {
float:left;
margin:auto;
padding:0;
}
#navigation li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
#navigation li a:hover {
color:#FFD700;
}
#navigation ul li ul {
display:none;
}
#navigation ul li:hover ul {
display:block;
}
#navigation li:hover ul li {
float:none;
}
#navigation li ul {
position:absolute;
}

FORUM HardWare.fr

Programmation

HTML/CSS

menu css3 RESOLU

Sujets relatifs
Sauvegarde du "Menu démarrer"	placer image sur panel depuis menu, plusieurs images, non !!!
barre de menu fixe qui apparait au scroll	[CSS / Wordpress] Modification de la barre de menu
faire apparaitre une partie de la page selon choix dans menu	[Résolu] Menu déroulant
Menu CSS bouge si changement de résolution d'écran ou zoom	Ajouter le menu de mon blog WP sur mon forum phpbb3 (rémunération ok)
Menu HTML/CSS	[CSS3] Pb de remonté menu animé
Plus de sujets relatifs à : menu css3 RESOLU

Page générée en 0.077 secondes