Un menu en CSS avec images

Version imprimable

18/09/2007, 00h52
Olivier Regnier

Un menu en CSS avec images
Bonjour :)

Je souhaite réaliser un menu horizontal comme suit:
Code:

1 2 3 image image texte texte
En sachant que le même lien est affecté à l'image et au texte.

Le soucis, je n'arrive pas à aligner verticalement vers le bas le texte. Sa position de départ est en haut sur l'image. Je peux utiliser un padding-bottom mais du coup lorsque que je clique sur l'image, l'espace sous le texte est énorme.

Avez-vous des informations ou même un exemple ?

Merci :mrgreen:

Voici une façon de réaliser cela.
Bon y'en a d'autres mais celle là est r apide et simple à mettre en place.
Tu peux visualiser l'exemple ici : LIEN

HTML :

Code:

1
2
3
4
5
6
7
8
 
<div id="nav">
        <a href="#" ><img id="ico" src="img/tux.png"><br/>Menu1</a>
        <a href="#" ><img id="ico" src="img/stylesheet.png"><br/>Menu2</a>
        <a href="#" ><img id="ico" src="img/printer.png"><br/>Menu3</a>
        <a href="#" ><img id="ico" src="img/smserver.png"><br/>Menu4</a>
        <a href="#" ><img id="ico" src="img/Login.png"><br/>Menu5</a>
    </div>

J'ai inséré l'image devant le texte du lien et j'ai ajouté un <br/> pour passer à la ligne.

CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
#nav{
}
#nav a{
    display : block ;
    float : left ;
    width : 120px;
    height : 60px;
    background-color : #F5F5F5 ;
    padding-top : 5px ;
    padding-left : 8px ;
    padding-right : 8px ;
    margin-right : 2px ;
    border : solid thin #000000 ;
    text-align : center ;
    text-decoration : none ;
}
#nav a img {
    border-width : 0;
}

A toi de mettre en forme le css.
Si tu as besoin de + d'infos...

Pour aligner vers le bas le texte avec le code d'onirisme je modifierais deux ou trois trucs :

(suppression du br)

Code:

1
2
3
4
5
6
7
<div id="nav">
   <a href="#" ><img id="ico" src="img/tux.png" />Menu1</a>
   <a href="#" ><img id="ico" src="img/stylesheet.png" />Menu2</a>
   <a href="#" ><img id="ico" src="img/printer.png" />Menu3</a>
   <a href="#" ><img id="ico" src="img/smserver.png" />Menu4</a>
   <a href="#" ><img id="ico" src="img/Login.png" />Menu5</a>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#nav a{
   display : block ;
   float : left ;
   width : 120px;
   height : 60px;
   background-color : #F5F5F5 ;
   padding-top : 5px ;
   padding-left : 8px ;
   padding-right : 8px ;
   margin-right : 2px ;
   border : solid thin #000000 ;
   text-align : center ;
   text-decoration : none ;
   /* ajouts */
   line-height:60px; /* identique au height */
   overflow:hidden; /* correction bug IE6 qui utilise le height comme un min-height */
}
#nav a img {
   border-width : 0;
   /* ajouts */
   display:block; /* permet d'aller à la ligne sous l'image sans br */
   margin:0 auto; /* centre l'image */
}

Bonjour :)

Déjà merci pour le code ci-dessus. Il est vrai que le code est plus léger moi j'avais opté pour une liste.

Le code html:

Code:

1
2
3
4
5
6
7
 
    <ul>
      <li id="lien1"><a href="#">lien1</a></li>
      <li id="lien2"><a href="#">lien2</a></li>
      <li id="lien3"><a href="#">lien3</a></li>
      <li id="lien4"><a href="#">lien4</a></li>
   </ul>

Voici le code css:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
ul {
	list-style:none;
	padding:0;
	margin:0;
}
 
ul li { float:left; }
 
ul li a {
	display:block;
	height:20px;
	width:138px;
	padding-top:130px;
	text-align:center;
	text-decoration:none;
	color:#666
}
 
ul li a:hover {
    text-decoration:underline;
   }
 
li#whoami, #lien1, #lien2, #lien3 {
	background-repeat:no-repeat;
	width:128px;
	height:128px;
}
 
li#lien1 { background-image:url("img/image1.png"); }
li#lien2 { background-image:url("img/image2.png"); }
li#lien3 { background-image:url("img/image3.png"); }
li#lien4 { background-image:url("img/image4.png"); }

Qu'en pensez-vous ?

Merci :mrgreen:

18/09/2007, 18h38
Bisûnûrs

Sémantiquement, c'est mieux.

Dans la déclaration :

Code:

li#whoami, #lien1, #lien2, #lien3

je rajouterais juste :

Code:

background-position: top center;

Après, le choix de mettre les images en arrière-plan ou non, c'est au bon vouloir du développeur, je n'ai aucune préférence là-dessus.
18/09/2007, 18h39
onirisme
Bonsoir,

On ne peut pas trop se rendre compte du résultat sans les images mais le code est bon. Je ne peux pas tester sous IE mais je pense qu'il n'y aura pas de problèmes.

Fais juste attention à ne pas avoir d'autres balises <ul> ouy <li>
Mieux vaut encadré avec un div
Code:

1 2 3 4 5 6 #nav{ ...Propriétés } #nav ul{ ...etc
20/09/2007, 01h08
Olivier Regnier

Citation:

Envoyé par onirisme

Voici une façon de réaliser cela.
Bon y'en a d'autres mais celle là est r apide et simple à mettre en place.
Tu peux visualiser l'exemple ici : LIEN

Bonjour,

Merci pour toutes les informations :hola:

Si je me base sur l'exemple ci-dessus, est-il possible de placer l'image au dessus du menu, qu'une partie soit placée à l'extérieur et l'autre à l'intérieur ?

Heu :mouarf:
20/09/2007, 06h32
onirisme
Oui, c'est possible...HEU... Si j'ai bien compris...

Le lien : ICI

Les modifications du css :
Ajoute ceci dans le css .img
Code:

1 2 3 position : relative ; top : -15px ; /*Positionnement relatif -15 px par rapport au haut du div #nav*/
20/09/2007, 08h44
Olivier Regnier

Bonjour :)

C'est exactement ce que je cherche. Je me demande s'il est possible de réaliser ce même mécanisme avec une liste ? Autrement, je vais rester avec une div.

Merci :mrgreen:
20/09/2007, 09h19
onirisme

Ca fonctionne de la même façon avec une liste