28173 sujets

CSS et mise en forme, CSS3

Menu CSS, de l'aide svp !

Bonjour,

je crée une petite barre de naviguation mais j'ai plusieurs problèmes:

-je voudrais que lorsque je survole avec la souris "Catégorie", les sous-rubriques s'affichent en dessous du nom "Catégorie" et en ligne mais pas au-dessus des photos comme ceci :

Catégorie >
paysage portrait
---------------------------------------
les photos...
---------------------------------------

idem pour Classement bien sur, comme ceci :

Catégorie > Classement par >
visites notes dates
---------------------------------------
les photos...
---------------------------------------

Merci d'avance pour votre aide.

En passant trés bon forum ! Smiley cligne

Pour voir le problème en ligne :

code css:


[code]#nav, #nav ul { /* toutes les listes */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	width: 10em;
}

#nav li { /* tous les items de liste */
	float: left;
	width: 10em; /* largeur obligatoire, sinon opera devient fou */
}

#nav li ul { /* listes de deuxième niveau */
	position: absolute;
	padding:8px;
	border-top:1px solid #CCCCCC;
	background: white;
	width: 10em;
	left: -999em; /* on met left plutôt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
}

#nav li:hover ul, #nav li.sfhover ul { /* listes imbriquées sous les items de listes survolés */
	left: auto;
}


allez sur ce lien puis cliquez sur "Vos plus belles photos" et rubrique "Galeries".
Modifié par Chypster (26 Jul 2007 - 17:38)
Tout simplement je pense qu'il te faut créer un div (vide à la base) juste en dessous de tes liens.
Et quand la souris passe sur le lien, le texte apparaît dans le div...

Il doit bien y avoir d'autres solutions, mais celle-ci me semble plutôt simple

Bon courage
cevichero a écrit :
Salut,

ça ne se bouscule pas, ils sont tous en vacances ! Smiley cligne
tu peux t'inspirer de ce qu'il y a sur ce lien : http://css.alsacreations.com/xmedia/exemples/deroulant/cssmenu3.htm


Merci, je vais y jeter un coup d'oeil !!!

edit : bon même en m'aidant de ton lien, je n'arrive pas à avoir ce que je souhaite. zut et zut

J'ai vraiment besoin d'aide là, en tout cas pour le moment j'abandonne.
Modifié par Chypster (26 Jul 2007 - 21:17)
Bonjour,

Ben avec le code html qui va avec ou mieux avec une page en ligne ce serait plus clair Smiley cligne

<edit> ton lien re fonctionne c'est mieux !! </edit>
Modifié par ghost (27 Jul 2007 - 12:35)
Re,

Tout d'abord, il faut un peu fouiller pour retrouver ta page,
ensuite, tu as un souci surement d'include car tu te retrouves avec 2 balises html, des déclarations de css dans le html ... Smiley biggol et 146 erreurs au validateur ...

Ensuite ton menu basé sur des li:hover ne passera pas sur ie6 (les hovers ne sont fonctionnels que sur <a>)
Puis le code est tarabiscoté! Si tu tiens quand même à ce menu là, m'enfin! pour une piste...
	   <style type="text/css">
 ul { 
padding: 0;
margin: 0;
list-style: none;
}

li{
float: left;
position: relative;
height: 20px;
}

li ul{
position: absolute;
left: 0;
top: 20px;
border: 1px solid black;
width: 500px;
height: 20px;
position: absolute;
left: -5000px;
}

li ul li{
display: inline;
margin-right: 5px;
}

li:hover ul{
background: none;/* pour ie7 ------------------------------*/
left: 0px;
}
       </style>
   </head>
 <body>
		<h3>Les galeries</h3>
	<ul>
		<li>Catégorie >
			<ul>
				<li><a href="#">Paysage</a></li>
				<li><a href="#">Portrait</a></li>
			</ul>
		</li>	
		<li>Classement par >
			<ul>
				<li><a href="#">visites</a></li>
				<li><a href="#">notes</a></li>
				<li><a href="#">dates</a></li>
			</ul>
		</li>
	</ul>
</body>


Bon courage.
Sujet clos
Aller à