Création d'une liste avec un élément flèche

**Geo-x** · 29/06/2015, 09h38

Bonjour @tous.

Désolé pour le titre du sujet qui n'est peut-être pas très évocateur.

Dans l'idée, je souhaiterais faire une liste de choix pour l'utilisateur (<li>) et à droite de chacun de ces choix, je souhaiterais qu'il y ait une flèche, centré en hauteur et qui partirait vers la droite.

Pour cela, j'ai réalisé le code suivant dans ma partie HTML (oui j'ai lu sur un ofrum que pour avoir la flèche après il fallait la déclarer avant...) :

Code html :

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

1
2
3
4
5
6
<div id="theme">
	<ul class="localisation" id="loc">
		<li id="1"><span class = "fleche_avant">▶</span>1 - Carrefour</li>
		<li id="2"><span class = "fleche_avant">▶</span>2 - Mairie</li>
	</ul>
</div>

Et dans mon 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
34
35
.localisation {
	margin: 1px 0;
	padding: 0px 10px;
	font: 12px arial, sans-serif;
	background: #F2F2F2;
}
 
.localisation li {
	margin: 1px 0;
	padding: 10px 0px;
	list-style-type:none;
 
	border-color: purple;
	border-style: solid;
	border-width: 1px;
}
 
.fleche_avant{
	float: right;
	text-align: right;
	color: #666;
	font: 12px arial, sans-serif;
	vertical-align: middle;
	height:100%;
	position:relative;
}
 
#theme  {
    position: absolute;
    width: 300 px;
	margin: 10px 0 0 10px;
	background: #fff none repeat scroll 0 0;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

Le problème c'est que, si je met une bordure, ma flèche, ne prend pas toutes la hauteur du div dans lequel elle est contenu (à savoir "theme") et du coup, elle ne se centre pas complétement en hauteur, surtout si le contenu de mon li est sur deux lignes comme l'indique l'image suivante :

Nom : 2015-06-29_0931.png
Affichages : 1613
Taille : 1,7 Ko

Nom : 2015-06-29_0931.png
Affichages : 1613
Taille : 1,7 Ko

Avez-vous une idée de la solution à apporter ?

Geo-x

**www.diazis.com** · 29/06/2015, 14h07

Bonjour,

Le problème des éléments inline comme les spans c'est qu'ils ne sont alignés verticalement que par rapport à la hauteur de la ligne. En cas de débordement sur une seconde ligne d'une partie du texte la taille de la ligne restant la même les deux parties ne sont plus alignées.
Je propose plutôt d'utiliser des div en inline-block.
Ca donnerait cela (j'ai remis tes css inline pour la compréhension) :

Code html :

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
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body style="margin: 0; padding: 0">
    <div id="theme" style="position: absolute;width: 300 px;margin: 10px 0 0 10px;background: #fff none repeat scroll 0 0;border-radius: 4px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);">
      <ul class="localisation" id="loc" style="margin: 1px 0;	padding: 0px 10px;font: 12px arial, sans-serif;background: #F2F2F2;">
        <li id="1" style="margin: 1px 0;padding: 10px 0px;list-style-type:none;border-color: purple;border-style: solid;border-width: 1px;">
          <div style="display: inline-block; vertical-align: middle; width: 80px;">
            1 - Carrefour blabla
          </div>
          <div style="display: inline-block; vertical-align: middle;">
            <span class = "fleche_avant" style="text-align: right;color: #666;font: 12px arial, sans-serif;height:100%;position:relative;">▶</span>
          </div>
        </li>
      </ul>
    </div>
  </body>
</html>

Invité · 29/06/2015, 14h44

Bonjour,
oubliez les span et autres div...

Il faut utiliser dans ce cas la pseudo-classe :after !

Voir aussi :

@www. diazis.com
Le CSS inline est à éviter autant que possible. Donc, évite de le donner en exemple...

**www.diazis.com** · 29/06/2015, 16h06

Je dois dire que je ne vois pas le cheminement qui m'a amené à mettre le style in line. Claque méritée.

@jreaux62
Ton exemple montre bien l'utilisation de divs pour le centrage vertical ???
D'ailleurs je trouve mieux d'utiliser du inline-block que des positions absolute dans le cas de Geo-x.

Pour le :after comment tu l'utilises pour le problème de centrage vertical de Geo-x ?

Invité · 29/06/2015, 17h06

Comme ça :

http://codepen.io/jreaux62/pen/xGpJMK

Code html :

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

1
2
3
4
5
6
7
8
<nav id="theme">
	 <ol class="localisation" id="loc">
		  <li id="1">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</li>
		  <li id="2">Praesent mattis fringilla pharetra</li>
		  <li id="3">Tempus fugit</li>
		  <li id="4">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc sollicitudin libero ut dolor rhoncus vestibulum. Cras ac tellus felis. Cras ac odio sit amet tellus porta pellentesque at at erat. Donec pulvinar felis augue, non sollicitudin eros molestie dignissim. Aliquam sit amet dui a dui molestie dictum. Integer sed cursus sem, in porttitor ex. Pellentesque mollis et est eget dapibus</li>
	 </ol>
</nav>

Code css :

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
#theme  {
  width: 300px;
  margin: 10px 0 0 10px;
  background: #fff none repeat scroll 0 0;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.localisation {
  margin: 0; padding: 0;
  font: 12px arial, sans-serif;
  background: #F2F2F2;
  list-style:decimal inside none;
}
.localisation li {
  position:relative; /*important*/
  margin: 0;
  padding: 1px 15px 1px 1px;
  border: 1px solid purple;
}

Et la partie qui nous intéresse :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.localisation li:after {
  position:absolute; display:block; content:'';
  top:50%; margin-top:-6px; /*centrage vertical*/
  right:3px;
  /*triangle noir*/
  width: 0; height: 0;
  border-style: solid; border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #000000;
}
 
.localisation li:hover:after {
  margin-top:-8px; 
  border-style: solid; border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent red;
}

**www.diazis.com** · 29/06/2015, 17h19

effectivement mieux que les divs

Création d'une liste avec un élément flèche

CSS

Discussions similaires

Partager

Partager