18008 sujets

Questions générales et questions de débutants

Problème pour un menu html/css. Comment faire apparaître les images ?

Bonjours tout le monde Smiley smile

Je viens vous voir aujourd'hui car je dois faire le design d'un forum pour un collectif.
Jusqu'à maintenant je me dépatouiller mais là ça fait un moment que je galère...

Donc voila ce que j'ai sous Photoshop, ce que j'aimerais avoir en ligne..
http://d1.e-loader.net/7Ka0Vt52H4.jpg

Et voila ce que j'obtiens Smiley lol , et j'arrive pas à résoudre le délire ^^'
http://d14.e-loader.net/R0srFxJhgu.jpg

J'vous colle ce que j'ai fait:

Donc le html:
<div id="menu">
<li><a href="http://www.artbeat.fr" <img src="../theme/bouton/bouton_accueil.jpg" height="40" width="61" id="bouton_accueil" title="Accueil">Accueil</a></li>
<li><a href="http://forum.artbeat.fr" <img src="../theme/bouton/bouton_forum.jpg" height="40" width="61" id="bouton_forum" title="Forum">Forum</a></li>
<li><a href="http://artbeatcommunity.deviantart.com/" <img src="../theme/bouton/bouton_deviant.jpg" height="40" width="61" id="bouton_deviant" title="Deviant Art">Deviant Art</a></li>
<li><a href="http://www.artbeat.fr" <img src="../theme/bouton/bouton_artpacks.jpg" height="40" width="61" id="bouton_artpacks" title="Artpacks">Artpacks</a></li>
<li><a href="http://www.artbeat.fr" <img src="../theme/bouton/bouton_artistes.jpg" height="40" width="61" id="bouton_artistes" title="Artistes">Artistes</a></li>
<li><a href="http://www.artbeat.fr" <img src="../theme/bouton/bouton_contact.jpg" height="40" width="61" id="bouton_contact" title="Contact">Contact</a></li>
</ul>
</div>


Et le CSS:
#menu {
    height:40px;
    background-color: transparent;
}

#menu li {
 	background: none;
	display: block;
	float: left;
	margin: auto;
	padding: 0;
}

#bouton_accueil{ 
 background-image: url(bouton/bouton_accueil.jpg);}
 
 #bouton_forum{ 
 background-image: url(bouton/bouton_accueil.jpg);}
 
 #bouton_deviant{ 
 background-image: url(bouton/bouton_accueil.jpg);}
 
 #bouton_artpacks{ 
 background-image: url(bouton/bouton_accueil.jpg);}
 
 #bouton_artistes{ 
 background-image: url(bouton/bouton_accueil.jpg);}
 
 #bouton_contact{ 
 background-image: url(bouton/bouton_accueil.jpg);}
 
#menu ul li ul {
   background-color: #333333;
   display:none;
}
 
#menu ul li:hover ul {display:block;}
 
#menu li:hover ul li {
   float:none;
   border-top: 1px dotted #444444;
   background: #333333; 
}
#menu li:hover ul li a:hover {background: #444444; }
 
#menu li ul {position:absolute;}


J'ai essayé de mettre les images dans le html, dans le css,... mais ça ne fait rien. Smiley ohwell
Pourriez vous m'aidez s'il vous plait ? Smiley smile merci à vous
Modifié par Znoook (13 Mar 2011 - 18:39)
Administrateur
Bonjour et bienvenue,

ton code HTML n'est pas valide, loin s'en faut :
- confusion dans les attributs destinés aux images et aux liens. Les attributs HTML width et height c'est pour les éléments HTML img, pas pour l'élément a (*)
- tu utilises une liste non ordonnée (c'est bien) mais il manque la balise ouvrante <ul> entre <div> et le premier <li> pour que l'élément ul et son contenu constituent un code correct. J'imagine que pas mal de navigateurs vont ouvrir automatiquement cet <ul> en rencontrant un <li> hors d'une liste mais compter là-dessus aujourd'hui et dans les siècles à venir c'est pas une bonne idée Smiley cligne

Tu peux t'inspirer du tuto de Thomas D. Créer des menus simples en CSS pour avoir une bonne base

(*) On peut dimensionner un élément HTML en CSS à l'aide d'instructions et plus précisément les propiétés width et height (et/ou min-width et/ou min-height) mais ce n'est pas du tout la même syntaxe ni au même endroit que ça se passe.
Par contre là comme tes liens a ont leur affichage par défaut de type en ligne (voir le tuto rendu en ligne et bloc de Raphael), les propriétés CSS width et height n'auront aucun effet ; la taille d'un lien par défaut c'est au plus juste ce qu'il faut pour accueillir son contenu ...
C'est pour ça que tu verras un a { display: block; } dans le tuto de Thomas D.
Modifié par Felipe (13 Mar 2011 - 19:31)
Ok, merci.

J'vais tenter le tutoriel. J'vous tiens au jus.
Modifié par Znoook (13 Mar 2011 - 19:49)
Bonsoir, je débute en xhtml/css mais il me semble que plusieurs choses clochent dans ton code :

- dans ton code html tu as créé des id correspondant à tes boutons (ex. id="bouton_accueil"), mais comme l'image est incluse dans le a href en tant que source, pas besoin de la remettre en background-image dans le css (double emploi)

- ensuite pour les "li" dans ton css, pas besoin non plus de les mettre en display:block, les " li " sont déjà des blocs et le float:left tout seul suffit à les positionner en ligne ;

voilà essaye déjà de supprimer les background-images de ton css pour voir ce que ça donne et enlève le display:block ; ensuite je ne pense pas que tes id "button..." soit vraiment utiles pour la mise en forme : à moins de vouloir faire des effets différents sur chaque bouttons au passage de la souris, tu devrais pouvoir simplement utiliser les propriété a:hover ou li:hover ;

ah oui et je viens de voir qu'il manque ta 1ère balise " ul " d'ouverture au début du html ;

voilà en espérant que cela puisse t'aider !
Administrateur
J'ai édité mon message précédent (ajout de texte à la fin du 1er item et du dernier § (*) )
Mais j'avais loupé ce qui suit donc bon, c'est à moitié nimp' pour width et height ...

tom2131 a écrit :
- dans ton code html tu as créé des id correspondant à tes boutons (ex. id=&quot;bouton_accueil&quot;), mais comme l'image est incluse dans le a href en tant que source, pas besoin de la remettre en background-image dans le css (double emploi)

Aaah mais j'avais pas vu <img (...) Smiley wingol parce que la balise ouvrante <a> n'est pas fermée ...
Le code n'est pas 
<li><a <img>texte</a></li>
mais 
<li><a><img>texte</a></li>

tom2131 a écrit :
- ensuite pour les &quot;li&quot; dans ton css, pas besoin non plus de les mettre en display:block, les &quot; li &quot; sont déjà des blocs et le float:left tout seul suffit à les positionner en ligne ;
Pour des images oui mais pour du texte ça permet de donner une dimension à chaque lien (avec l'instruction display: block;) tout en les alignant sur une même ligne (avec float: left;)
^^' c'est pas mon fort le dev, enfin dev... un bien grand mot pour ce que je fais Smiley lol

Donc merci à vous.
J'ai suivi le tuto, voila ce que ça donne pour l'instant, je pense que c'est plus propre. Mais j'arrive pas à afficher les images. --' Au fait, je les ai découpé bouton par bouton, vaut mieux que je fasse autrement ?

Bon voila les codes:
<ul id="menu_headbar"> 
    <li><a href="http://artbeat.fr/" id="bouton_accueil" title="Aller à l'accueil du site d'Art Beat">Accueil</a></li>  
   
    <li><a href="http://forum.artbeat.fr/index.php" id="bouton_forum" title="Visiter le forum Art Beat">Forum</a></li> 
   
    <li><a href="http://artbeatcommunity.deviantart.com/" id="bouton_deviant" title="Suivez Art Beat sur Deviant Art">Deviant Art</a></li> 
   
    <li><a href="http://artbeat.fr/" id="bouton_artpacks" title="Visionner nos Artpacks">Artpacks</a></li> 
    
    <li><a href="http://artbeat.fr/" id="bouton_artistes" title="Plus d'informations sur les artistes d'Art Beat ? C'est ici">Artistes</a></li>
    
    <li><a href="http://artbeat.fr/" id="bouton_contact" title="Contacter Art Beat par mail">Contact</a></li>
</ul>

#menu_headbar { 
    margin: 0 ; 
    padding: 0 ; 
    list-style: none ; 
    text-align: center ; 
    }

#menu_headbar li { 
    display: inline ; 
    ... 
    }
    
#bouton_accueil{  
 background-image: url(bouton/bouton_accueil.jpg);} 
  
#bouton_forum{  
 background-image: url(bouton/bouton_forum.jpg);} 
  
 #bouton_deviant{  
 background-image: url(bouton/bouton_deviant.jpg);} 
  
 #bouton_artpacks{  
 background-image: url(bouton/bouton_artpacks.jpg);} 
  
 #bouton_artistes{  
 background-image: url(bouton/bouton_artistes.jpg);} 
  
 #bouton_contact{  
 background-image: url(bouton/bouton_contact.jpg);}


Vous voyez des conneries encore ? ^^'
EDIT: D'après ce que j'ai compris vaut mieux se servir des "h1" que les "li a <im>..." ?
Modifié par Znoook (13 Mar 2011 - 20:08)
Bonjour,

Si j'étais toi, je commencerais par vérifier les chemins vers les images des boutons Smiley cligne !

Cordialement
Modifié par lddsoft (14 Mar 2011 - 10:05)
Yep, je m'embrouille abusé...
J'ai revu un peu le truc, y a du progrès:
l id="menu_horizontal">
    <li class="bouton_gauche"><a href="http://artbeat.fr/"> <img src="{T_THEME_PATH}/bouton/bouton_accueil.jpg" alt="accueil" title="Aller à l'accueil du site d'Art Beat"/>Accueil</a></li>  
   
    <li class="bouton_gauche"><a href="http://forum.artbeat.fr/index.php"> <img src="{T_THEME_PATH}/bouton/bouton_forum.jpg" title="Visiter le forum Art Beat" height="40" width="60" <>Forum</a></li> 
   
    <li class="bouton_gauche"><a href="http://artbeatcommunity.deviantart.com/"> <img src="{T_THEME_PATH}/bouton/bouton_deviant.jpg" alt="accueil" /> <title="Suivez Art Beat sur Deviant Art">Deviant Art</a></li> 
   
    <li class="bouton_gauche"><a href="http://artbeat.fr/"> <img src="{T_THEME_PATH}/bouton/bouton_artpacks.jpg" alt="accueil" /> <title="Visionner nos Artpacks">Artpacks</a></li> 
    
    <li class="bouton_gauche"><a href="http://artbeat.fr/"> <img src="{T_THEME_PATH}/bouton/bouton_artistes.jpg" alt="accueil" /> <title="Plus d'informations sur les artistes d'Art Beat ? C'est ici">Artistes</a></li>
    
    <li class="bouton_gauche"><a href="http://artbeat.fr/"> <img src="{T_THEME_PATH}/bouton/bouton_contact.jpg" alt="accueil" /> <title="Contacter Art Beat par mail">Contact</a></li>
</ul>

ul#menu_horizontal { 
width : 405px; 
height : 40px;
margin : 2em 0 0 0;
padding : 0;
background-color : transparent;
border : none;
list-style-type : none;        
}
 
ul#menu_horizontal li {
padding : 0 0.5em;  
line-height : 40px;
display : inline;
}
 
ul#menu_horizontal li.bouton_gauche {
float : left;
border-right : none; 
font-size : 0px;
}
 
ul#menu_horizontal a {
color : transparent;
text-decoration : none;
padding : 0 0.5em; ;    
}


ça serait presque bon si c'était aligné... et un peu plus sur la droite.
http://d15.e-loader.net/QDH1kc2cyk.jpg
Modifié par Znoook (14 Mar 2011 - 11:24)
En effet ^^'

Je pense que ça va mieux comme ça:
<ul id="menu_horizontal">
    <li class="bouton_gauche"><a href="http://artbeat.fr/"> <img src="{T_THEME_PATH}/bouton/bouton_accueil.jpg" title="Aller à l'accueil du site d'Art Beat"/>Accueil</a></li>  
   
    <li class="bouton_gauche"><a href="http://forum.artbeat.fr/index.php"> <img src="{T_THEME_PATH}/bouton/bouton_forum.jpg" title="Visiter le forum Art Beat"/>Forum</a></li> 
   
    <li class="bouton_gauche"><a href="http://artbeatcommunity.deviantart.com/"> <img src="{T_THEME_PATH}/bouton/bouton_deviant.jpg" title="Suivez Art Beat sur Deviant Art"/>Deviant Art</a></li> 
   
    <li class="bouton_gauche"><a href="http://artbeat.fr/"> <img src="{T_THEME_PATH}/bouton/bouton_artpacks.jpg" title="Visionner nos Artpacks"/>Artpacks</a></li> 
    
    <li class="bouton_gauche"><a href="http://artbeat.fr/"> <img src="{T_THEME_PATH}/bouton/bouton_artistes.jpg" title="Plus d'informations sur les artistes d'Art Beat ? C'est ici"/>Artistes</a></li>
    
    <li class="bouton_gauche"><a href="http://artbeat.fr/"> <img src="{T_THEME_PATH}/bouton/bouton_contact.jpg" title="Contacter Art Beat par mail"/>Contact</a></li>
</ul>
Dans la CSS du menu, pour ul#menu_horizontal:
- adapter la valeur de width,
- ajouter float:right;

Pour les images, ajouter les attributs alt.
Ok, je pensais pas quel alt c'était important. J'viens de me renseigner apparemment ça sert au cas où l'image n'est plus dispo pour avoir un texte à la place.

Sinon pour le css j'avais essayé ce que tu m'a dit, mais ça ne marche pas mieux.
La largeur de toutes les images ensemble fait 405px.

J'ai essayé ça:
ul#menu_horizontal { 
margin : 2em 0 0 0;
padding : 0;
background-color : transparent;
border : none;
list-style-type : none;   
float:right;
width: 405px; 
}

J'ai essayé padding, margin,... rien ne marche. à droite ça semble bloqué avant la fin, après le bouton contact quoi, et quand je fais ça, ça rend ça:
http://d4.e-loader.net/56yyG84ZTF.jpg


Ce que je fais c'est pour un template phpbb.
En gros le bout d'html que je vous ai fait voir je l'ai inclué avec un Include header.html:
			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<!--<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p> -->
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			
<!-- INCLUDE header.html -->

			</div>

Le problème vient peut être d'ici. Mais le truc c'est que je peux régler grand chose sur le include header en css.
C'est dommage de ne pas disposer de plus de code. Aurais-tu quelque chose en ligne pour qu'on puisse étudier l'architecture de la page?
Bonjour,

Sous Firefox 3.6.15, tous les boutons du menu sont dans le même alignement, mais sous IE8, le dernier bouton revient à la ligne.
Tu devrais essayer ceci:
dans le fichier style.php, pour #site-description, augmenter un peu la valeur de width qui est actuellement de 70%.

Cordialement
Sujet clos
Aller à