28172 sujets

CSS et mise en forme, CSS3

[Résolu] Menu Horizontal avec une image en background.

Bonsoir,

j'ai tenté de réaliser un menu horizontal, quelques fois j'utilise 
display:inline
ou bien 
float:left
, avec une image en fond afin de donner un effet bouton au lien du menu. Le problème c'est que l'image n'apparait pas complètement, et je ne sais pas comment faire pour qu'elle puisse apparaitre totalement. En effet, elle affiche le contenu nécessaire à l'affichage du texte. J'aimerai rajouter que lors de la réalisation d'un menu verticale cela ne pose aucun problème. l'image s'affiche correctement.

Voila le code HTML :


<ul>
<li><a href="">Accueil</a></li>
</ul>


Ensuite au niveau du CSS : 


a{
    background-image: url(menu.png);
}


En espérant que mon message respecte vos règles. Merci
Modifié par mln95400 (07 Jun 2012 - 21:10)
Salut,

Je comprends pas trop (voir pas du tout) ton problème...

min95400 a écrit :

j'ai tenté de réaliser un menu horizontal, quelques fois j'utilise

display:inline

ou bien

float:left

, avec une image en fond afin de donner un effet bouton au lien du menu


Quel rapport entre ton positionnement et l'image de fond?

min95400 a écrit :

Le problème c'est que l'image n'apparait pas complètement, et je ne sais pas comment faire pour qu'elle puisse apparaitre totalement


Présise stp... (lien ou screen ne serai pas du luxe)
Merci de m'avoir répondu voila ce que j'ai réalisé : 

<div id="menu">
<ul>
<li><a href="">Accueil</a></li>
<li><a href="">Accueil</a></li>
</ul>
</div>




li{
	list-style: none;
	display: inline;
}
a{
	text-decoration :none;
	background: url(bouton-noir.png) no-repeat;
	width: 150px;
	height: 50px;
	color: white;
	line-height: 50px;
        text-align: center;
        vertical-align: middle;	
}

Et voila l'image :
upload/45022-bouton-noi.png

Le problème c'est que l'image ne s'affiche pas complètement mais juste de quoi afficher le texte. étrange ou incompétence.
Modifié par mln95400 (07 Jun 2012 - 22:01)
C'est normale que ton texte définisse la taille si tu est dans un context inline (c'est sa fonction)


  li{
    display: block;
    float: left;
	list-style: none;
}
a{
  display: block;
	text-decoration :none;
	background: url(bouton-noir.png) no-repeat;
	width: 150px;
	height: 50px;
	color: white;
	line-height: 50px;
        text-align: center;
        vertical-align: middle;	
}


ton div est inutile, le ul peut faire office de conteneur
Modifié par JJK801 (07 Jun 2012 - 22:09)
ce n'est pas à ton lien de recevoir le background mais son conteneur li

De plus on ne spécifie pas de hauteur à un lien hormis son line-height


 li{
        display: block;
        float: left;
	list-style: none;
	width: 150px;
	height: 50px;
        background: url(bouton-noir.png) no-repeat;
}
a{

	text-decoration :none;
	color: white;
	line-height: 50px;
        text-align: center;
        vertical-align: middle;	
}
a écrit :
Pourquoi?


Son image n'est pas un sprite, elle mesure 150px sur 50px

les liens qui vont se centrer sur l'image de fond n'auront pas tous la même largeur

C'est pourquoi l'image est plus à sa place dans in li html
Ouai, mais qu'est ce qui pose problème de mettre un <a> en mode block avec une largeur et une hauteur?
merde on peut pas définir d’alignement vertical à des éléments inline ! Smiley biggol

Désolé, suis fatigué en c'moment

Faut que je sorte Smiley lol
Ouai, donc tu rempace height par line-height (et tu oublie au passage un texte sur plusieurs lignes), mais ça ne change pas que tu peut quand même placer ton image dans le lien (ce qui pour moi est plus logique, car l'image correspondant au bouton doit faire partie du bouton lui même
salut, définir un alignement vertical ne sert à rien sur du texte, si tu utilises line-height. Par contre, cela est indispensable sur une image.

Il faut mettre "display:block" sur le <a> sinon cela ne fonctionne pas.

Voici mon css et il fonctionne : 
* {
		margin				: 0;
		padding				: 0;
		border				: 0 none;
}

body {
		background-color	: grey;
}

ul {
		display				: block;
		margin				: 0 auto;
		width				: 850px;
		height				: 50px;
		list-style			: none;
}

ul li {
		display				: block;
		float				: left;
		margin				: 0 10px;
		width				: 150px;
		height				: inherit;
}

ul li a {
		background			: transparent url(bouton.png) no-repeat top left;
		display				: block;
		font-size			: 36px;
		text-align			: center;
		text-decoration		: none;
		line-height			: 50px;
		color				: white;
}
Sujet clos
Aller à