Discussion :

[Olivier Regnier]

Bonjour

Je souhaite réaliser un menu horizontal comme suit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

[Bisûnûrs]

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

(suppression du br)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 */
}

[Olivier Regnier]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Bisûnûrs]

Sémantiquement, c'est mieux.

Dans la déclaration :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

je rajouterais juste :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
#nav{
  ...Propriétés
}
#nav ul{
...etc

[Olivier Regnier]

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

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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
position : relative ;
top : -15px ; /*Positionnement relatif -15 px par rapport au haut du div #nav*/

[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

[onirisme]

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