28172 sujets

CSS et mise en forme, CSS3

Problème avec mon rollover

Bonjour, voilà je viens de suivre le tutoriel du menu graphique avec rollover sans javascript qui se trouve sur votre blog: http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html#menugraphique

Seulement je rencontre un petit soucis, l'image des mes boutons dans mon menu n'apparaissent pas entièrement, voici un petit screen de l'effet indésirable:

http://img150.imageshack.us/img150/5141/pbmenurollover.png

Voici mon code css:


.menu
{
	width:100%;
	height:71px;
	list-style:none;
	position:absolute;
	top:152px;
	line-height:0px ; margin:0px ; padding:0px ;
}

.menu li a 
{
	display:block;
	float:left;
	height:32px;
	background: url("design2/bouton1.gif") left top no-repeat ;
	color:#FFFFFF;
	line-height: 25px ;
	text-decoration:none;
	font-family:arial, verdana, sans-serif;
	text-decoration:underline;
	padding:0 0 0 17px;
	text-align: center ;
}

.menu li a:hover, .menu li a:focus, .menu li a:active 
{
	color:#000000;
	background: url("design2/bouton2.gif") left top no-repeat ;
	font-family:arial, verdana, sans-serif;
}


Et le xhtml


<ul class="menu">
	<li><a>Accueil</a></li>
	<li><a>La socièté</a></li>
        <li><a>Condition général</a></li>
	<li><a>Palmares</a></li>
	<li><a>Contact</a></li>
</ul>


Si quelqu'un peu me venir en aide.
En vous remerciant.
Cordialement Tchupa.
Hello,

Est ce que tous tes onglets sont supposés avoir la même largeur ? Parce que je ne vois pas de largeur définie dans le css.

Si tu voulais juste rajouter un espace à droite du texte, je pense que tu devrais essayer de remplacer cette ligne :
padding:0 0 0 17px;

par celle ci :
padding:0 17px;

Modifié par Niaa (07 Jul 2009 - 18:09)
Je voulais dire : l'image de fond de tes liens est tronquée parce que tu n'as pas défini de largeur sur ces liens.

ton bouton1.gif doit bien avoir une largeur ?
tu devrais essayer de mettre un 
width:<cette largeur -17px>
dans ton css à la partie qui définit les liens
Modifié par Niaa (07 Jul 2009 - 18:25)
Oui je n'en ai pas mis vu que l'écriture n'est pas la même en longueur.
Si je mets celle de l'image comme largeur, tout les boutons auront la même largeur du coup non?
En effet, mais ton image sera entière. Ce n'est évidemment pas une obligation, mais j'imagine que la forme que tu veux donner à tes onglets est la suivante :

\____/\______/\____________/\____/

et non pas (comme actuellement) :

\_____ \_________ \__________ \__________/

dans ce cas, et si tu n'utilises qu'une seule image pour gérer le fond de tes onglets, ils doivent avoir la même taille. Sinon, je n'ai pas bien compris ton problème (ce qui est parfaitement possible aussi...)
Niaa a écrit :
En effet, mais ton image sera entière. Ce n'est évidemment pas une obligation, mais j'imagine que la forme que tu veux donner à tes onglets est la suivante :

\____/\______/\____________/\____/

et non pas (comme actuellement) :

\_____ \_________ \__________ \__________/

dans ce cas, et si tu n'utilises qu'une seule image pour gérer le fond de tes onglets, ils doivent avoir la même taille. Sinon, je n'ai pas bien compris ton problème (ce qui est parfaitement possible aussi...)



Effectivement je veux donné la forme que tu as interprété en premier, mais je voudrais que mes boutons respecte la largeur du texte et non celle de l'image.
En gros je voudrais que mon image s'adapte à la largeur du texte afin que se soit plus jolie.
tu peux utiliser une technique comme celle ci :

- mettre ton image en background:right dans ton élément <li>
- la mettre en background:left dans ton élément <a>
- mettre un padding-right:17px sur ton <li>

si le fond de ton image est transparente tu auras peut-être un problème de taille (les backgrounds vont se superposer et tu auras un seul coin apparent)

dans ce cas : tu crées une image de grande taille de cette forme :

\____________________________________ pour ton lien <a>

et une autre de petite taille de la forme :

__/ pour ton <li>

et tu les assembles comme je l'ai décrit plus tot (la largeur du padding-right est égal à la largeur de l'image 2)

je suis désolé de la pauvreté de ma mise en page, j'utilise une vieille carne au travail en ce moment et je n'ai pas de possibilité de faire plus. Si tu ne comprends vraiment pas, j'en suis navré et j'essayerai de passer ce soir pour te répondre dans de meilleures conditions
Modifié par Niaa (07 Jul 2009 - 19:00)
Non je n'ai pas tout saisie pour être honnête, j'avais trouvé un tutoriel sur un site mais je ne sais pas si je peux poster le lien ici , car je ne voudrais pas faire de pub pour cet autre site en question, dans ce fameux tutoriel il expliquer justement avec une méthode pour éviter ce genre de désagrément j'ai tester mais ça ne fonctionne pas, je pense que j'ai pas du l'adapter correctement à mon cas de figure.
J'ai tout repris a zéro et j'obtiens un résultat concluant.

http://img44.imageshack.us/img44/5481/pbrollover2.gif

Voici mon css


.menu 
{
	list-style:none;
	width:100%; 
	height:71px;
	margin:0;
	position:absolute;
	top:152px;
	left:0px;
	line-height:0px ; margin:0px ; padding:0px ;
} 

.menu li a 
{
	display:block;
	float:left;
	height:32px;
	line-height:32px;
	color:#fff;
	text-decoration:none;
	font-family:arial, verdana, sans-serif;
	text-align:center;
	font-size:14px;
	text-decoration:underline;
	background:url("design2/bouton1.gif");
	padding:0 0 0 9px;
	cursor:pointer;
}

.menu li b 
{
	background:url("design2/bouton1.gif") no-repeat right top;
}

.menu li a b 
{
	float:left;
	display:block;
	padding:0 14px 0 7px;
}

.menu li a:hover 
{
	color:#fff;
	text-decoration:none;
	background: url("design2/bouton2.gif");
}

.menu li a:hover b 
{
	background:url("design2/bouton2.gif") no-repeat right top;
}


Voici mon html


<ul class="menu">
			<li><a href=""><b>Accueil</b></a></li>
			<li><a href=""><b>La socièté</b></a></li>
			<li><a href=""><b>Condition général</b></a></li>
			<li><a href=""><b>Palmares</b></a></li>
			<li><a href=""><b>Contact</b></a></li>
</ul>


Voilà , maintenant je voudrais l'améliorer, tout d'abord je voudrais le centrer mais je n'y arrive pas Smiley bawling

Ensuite je voudrais savoir comment faire avec la propriété current c'est à dire que si la personne se rend dans la section société par exemple le bouton reste orange.
Sujet clos
Aller à