Menu horizontal

Fermé

Jacques - Modifié par Jacques le 4/12/2013 à 11:57
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 4 déc. 2013 à 15:07

Bonjour,

j'ai crée un menu horizontal comme suit:

<ul id="menu">
    <li>
         <img src="images/image1.jpg">
         <a href="#">Titre 1</a>
     </li>

      <li>
          <img src="images/image2.jpg">
          <a href="#">Titre 2</a>
       </li>

        <li>
            <img src="images/image3.jpg">
            <a href="#">Titre 3</a>
        </li>
</ul>

Du fait de mes images (ce sont des séparateurs), mes titres se placent en dessous de chaque séparateur et non pas dedans (entre 2 séparateurs).

Quelles sont donc les instructions CSS nécessaires pour disposer mes titres à cotés de mes séparateurs ?

En clair j'ai un menu comme celui-ci: http://images.webdesignbooth.com/horizontal-navigation-menus/a-stylish-navigation-menu.jpg
sauf que mes séparateurs ne sont pas des border mais des images.

Merci

A voir également:

Menu horizontal
Menu déroulant excel - Guide
Menu démarrer windows 11 - Guide
Canon quick menu - Télécharger - Utilitaires
Menu demarrer - Guide
Menu contextuel windows 11 - Guide

2 réponses

Réponse 1 / 2

AssassinTourist Messages postés 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 310
4 déc. 2013 à 11:57

Bonjour,
Tout dépend de la taille de tes images et de la largeur que tu fournis à ton menu pour être horizontal.

Jacques
4 déc. 2013 à 12:07

mes images (bordures) font 1px de large uniquement

AssassinTourist Messages postés 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 310
4 déc. 2013 à 12:33

Je parlais de la taille de ta page, de ton nav, de ton ul ou de tes li

Jacques
4 déc. 2013 à 12:38

Ah ok, alors mon menu est dans un conteur menu-top définit comme suit:

.menu-top{	
	width: 800px;
	height: 43px;
	vertical-align: top;
}

et voici pour le style du menu en lui même.

#menu {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-family: Arial;
	font-size: 14px;
}
#menu{
	border: 0px solid #d40203;
	margin: 0;
	padding: 0;
	float: left;
	width: 150px;
}

#menu{
	border: 0px solid #777777;
	padding: 10px;
	height: auto;
	text-align: left;
	display: block;
	color: #FFFFFF;
	text-decoration: none;
	color: #04519C;
}

AssassinTourist Messages postés 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 310
4 déc. 2013 à 12:54

Et tes images et ton texte passent dans un menu de 800 px ? Pour tester, agrandis-le pour voir ce que ça donne.

Jacques
4 déc. 2013 à 14:14

Oui ça passe. Même si j'agrandis le menu cela ne change rien. Le problème vient d'autre part visiblement

Réponse 2 / 2

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 4/12/2013 à 15:21

Bonjour

fais plutot ca

html

<div class="menu-top">
<ul>
<li>
<img src="images/image1.jpg">
<a href="#">Titre 1</a>
</li>

<li>
<img src="images/image2.jpg">
<a href="#">Titre 2</a>
</li>

<li>
<img src="images/image3.jpg">
<a href="#">Titre 3</a>
</li>
</ul>

</div>

déclare tes li comme cela

.menu-top li {}

tu fais un width à ton li (nombre de li dans le menu multiplié par leur width pas supérieur au width du menu-top )
tu mets ton li en display inline-block
tu peux y ajouter un peu de margin histoire que ce soit pas collé

et tu fais

.menu-top img {
width:le width des li;
border:0;
margin:0;
padding:0;
}

et pas de dimension d'image dans le html

les images ne seront jamais plus grandes que le li dans lequel elle sont
le texte meme chose

Un petit merci vaut mieux qu'une grande ignorance

Discussions similaires

les entrées et les sortées

mon ordi marque press the esc key for startup menu

Accéder au menu Advanced Bios PC portable HP

Déblocage du mode hôtel Philips 20HF5234/10

Discussions similaires

Newsletters