28220 sujets

CSS et mise en forme, CSS3

[resolu] Un roll over qui ne fonctionne pas sous IE

Bonsoir,
cela fait presque 1 heure que je tourne en rond sur une toute petite chose,
en effet, j'ai une barre de navigation horizontale,
quand les lien sont :hover, je fait apparaitre la bordure du bas en blanc.

Sous Firefox aucun probleme,
mais sous IE 5.5 bah, rien ! Pourtant, a 10 cm de la, sur le menu verticale, ma bordure left fonctionne comme il faut !
je suis a la fois mort de rire et tres agacé ^^

Voici le code en question:


#telex {
	width: 550px;
   float: left;
}
#telex ul
{
	margin: 0;
	padding: 0;
	color: White;
	float: left;
}
#telex ul li { 
display: inline; }
#telex ul li a
{
	color: White;
	text-decoration: none;
	border-right: 1px solid White;
	border-bottom: 4px solid Black;
	padding: 1px 4px 1px 3px;
}
#telex ul li a:hover
{
	color: White;
	border-bottom: 4px solid White;
}



<div id="telex">
          <ul>
                     <li>Menu rapide: </li>
                     <li><a href="index.php">Acceuil</a></li>
                     <li><a href="form_new.php">Inscription</a></li>
                     <li><a href="parking.php">Parking</a></li>
                     <li><a href="aide.php">Aide</a></li>
                     <li><a href="/forum/index.php">Forum</a></li>
                     
          </ul> 
</div>


Moi perso, je voit pas l'erreur,
alors j'espere que vous saurez mieu que moi Smiley lol

PS: Hors sujet mais j'ai un autre probleme,
imaginé plusieurs div les uns en dessous des autres avec du texte dedans,
et une image flottante a gauche,
mon probleme c'est que si le texte prend moin de place en hauteur que l'image,
mon image sort du div.
Comment faire pour que l'image ne depasse pas du div !
Que le div s'etende avec l'image :s
Je connais la hauteur exacte de l'image, donc est-il possible de dire a un div "height: 25px ou plus ^^"
Car cela cree des gros problemes d'affichage.
Modifié par Mobman02 (09 Jun 2005 - 02:52)
A première vu y'a rien qui cloche dans ta css (enfin bon j'suis un peu naze a cette heure)

Tu peux poster ta page en ligne?

Pour ton deuxieme problème il aurait été plus logique d'ouvrir un second sujet, a prendre en compte pour la prochaine fois. Smiley cligne
Essai de rajouter une balise hr (ou autre) en fin de ton div (mais à l'interieur) en lui appliquant la propriété clear:both.

a écrit :

height: 25px ou plus


min-height: 25px;
Ok (pour le sujet ca m'ennuyer de faire deux sujet en moin de 30 seconde ^^ ca fait floodeur un peu lol)

Pour la page en ligne, j'ai mis que le menu ca suffit largement pour ne pas fonctionner Smiley lol
Par ici, a tester avec firefox et IE pour voir la difference

Je ne comprend vraiement pas pourquoi ca marche pas...
J'utilise cette technique a un autre endroit et ca fonctionne ^^
C'est fou ca Smiley langue
Smiley confus


PS: ma technique est sensiblement la meme que celle du forum, nan, vraiement je suis Smiley decu
Modifié par Mobman02 (09 Jun 2005 - 01:55)
Ok trouvé, en fait ça fonctionne mais on ne voit pas la bordure du bas cas elle rentre dans ta liste. Il faut soit que tu ajoute un padding-bottom à ta liste (ul) soit que tu augmente la valuer de line-height de tes éléments de liste (li). Tu as le choix en plus, c'est pas beau? Smiley smile
Smiley eek bizarre, j'ai essayé des trucs en local à partir de ton code, mais rien Smiley confus

par contre en reprenant le menu d'alsa et en simplifiant les choses j'arrive à ca : 


<html>
<head>
	<title>Practice CSS</title>
	<style type="text/css">
		<!--
body{background: #000;}

#telex ul{
	border-bottom: 1px solid #000000;
}

#telex ul li { display: inline; }

#telex ul li a {
	color: #FFF;
	text-decoration: none;
	border-right: 1px solid #FFFFFF;
}

#telex ul li a:hover{
	border-bottom: 4px solid #FFFFFF;
}
		-->
	</style>
</head>
<body>


<div id="telex">
	<ul>
		<li>Menu rapide: </li>
		<li><a href="index.php">Acceuil</a></li>
		<li><a href="form_new.php">Inscription</a></li>
		<li><a href="parking.php">Parking</a></li>
		<li><a href="aide.php">Aide</a></li>
		<li><a href="/forum/index.php">Forum</a></li>
	</ul>
</div>

</body>
</html>


et la ca fonctionne Smiley smile

il devait avoir quelque chose qui lui a pas plus, mais j'ai pas vu quoi, si t'as trouvé le responsable dis le nous
CyrilCS a écrit :

il devait avoir quelque chose qui lui a pas plus, mais j'ai pas vu quoi, si t'as trouvé le responsable dis le nous


Le responsable par rapport au code que tu montre était padding: 0 sur l'élément ul.

@Mobman02 : de rien Smiley cligne
Modifié par jb_gfx (09 Jun 2005 - 02:51)
Sujet clos
Aller à