Texte décalé mais à la même hauteur

**olivier57b** · 18/10/2013, 17h31

bonjour

je suis plutôt débutant en HTML/CSS et j'ai une idée de présentation que je n'arrive pas à réaliser.

voici ce que je voudrais réaliser:

Crêpes suzettes

Le "plus" de Marie : + avec du grand Marnier c'est meilleur, ou

du rhum

voilà.Ce que je veux faire c'est ce qu'il y a à droite du + : un texte qui est à la hauteur de ce qu'il y a à gauche ("Le plus de Marie") , qui est décalé vers la droite, qui forme une sorte de "boîte"("du rhum à la rigueur" est aussi décalé).
Cette présentation (ce qu'il y a à droite du +) doit se répéter, donc j'ai pensé à une balise "span" ornée d'attributs du type display:inline, position:fixed...mais il y a toujours un problème.
Avez-vous une idée pour quelque chose qui marche?

merci

olivier

ps: j'ai du mal à décaler comme il faut le texte; "du rhum" doit être en dessous de "avec du...".

**Torgar** · 18/10/2013, 17h35

Je suis pas sûr de bien avoir tout compris mais un display: inline-block et un margin-left ne suffirait pas (sans position: fixed) ?

Mais comme je suis pas certain d'avoir compris la demande

**olivier57b** · 18/10/2013, 17h52

merci pour ta réponse rapide.
J'ai essayé, en ajoutant un "position:relative" et "top:-1em" mais tu vas voir sur la photo jointe que ça n'est pas totalement ça: il y a toujours un petit décalage vers le bas.
regardes la photo et tu verras de quoi je parle.
Dans mon éditeur HTML le texte à droite du "+" est à la bonne hauteur; pourtant, dans le rendu de firefox il y a un défaut.

**Torgar** · 18/10/2013, 17h54

Il est temps de nous montrer le code source de la page ainsi que le CSS.

**olivier57b** · 18/10/2013, 18h10

ok.

j'ai essayé de ne garder que le strict minimum:

code source:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div  id="GS_txt_colD">
        <div class="legende_greenbox"><b>ECONOMIE :</b></div>
        <hr class="legende_greenbox_pas_margin-top" />
        <ul style="margin-top:0px;margin-left:0px;padding-left:13px;margin-bottom:0px">
 
            <li class="liste_verte">
                Protection de la membrane d'étanchéité<br/>
                Le "plus" Greenskin :   <span class="decalage_droite"> +meilleure durée de vie (système naturellement anti-racines)<br/></span>    
            </li><br/>
            <li class="liste_verte">
                Isolation été/hiver<br/>
                Le "plus" Greenskin : <span class="decalage_droite">+ isolation renforcée grâce à la lame d'air</span>
            </li>

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
36
37
38
39
#GS_txt_colD {
    position:absolute;
    width:330px;
    height:493px;
    z-index:3;
    top: 34px;
    left: 120px;
}
 
#legende_greenbox {
    position:absolute;
    width:200px;
    height:261px;
    z-index:3;
    left: 266px;
    top: 359px;
    font-size: xx-small;
    color: #000;
    text-align: left;
}
 
.legende_greenbox_pas_margin-top {
    margin-top: 0px;
    color: #093;
    margin-bottom: 0px;
}
 
.liste_verte {
    list-style-type: disc;
    margin-left: 0px;
}
 
.decalage_droite {
    display: inline-block;
    position: relative;
    width: 200px;
    margin-left: 125px;
    top: -1em;
}

vous allez sûrement me dire que le code de ma page est pourri; en fait j'apprends au fur et à mesure que j'avance...

**JefReb** · 19/10/2013, 10h42

Bonjour
Le code me paraît une usine à gaz et bien compliqué.
sans avoir beaucoup cherché, est-ce que c'est cela que vous voulez:
http://codepen.io/JefReb/pen/xdaEf

code css:

Code :

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

1
2
3
4
5
6
#contenu { width:600px; height:auto; margin:0 auto;}
html, body 	{ margin:0; padding:0; height:100%; font-size:100%; font-weight:normal; }
 
 h1 { width:400px; font-size:90%; border-bottom: 2px solid green;}
 ul.espace li { margin:20px 0;}
 li > span { padding-left:50px; }

code html:

Code html :

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

1
2
3
4
5
6
7
8
9
<div id="contenu">
<h1>&Eacute;CONOMIE</h1>
<ul class="espace">
<li>Protection de la membrane d'étanchéité<br/>
    Le "plus" Greenskin :<span>+meilleure durée de vie (système naturellement anti-racines)</span></li>
<li>Isolation été/hiver<br/>
Le "plus" Greenskin : <span>+ isolation renforcée grâce à la lame d'air</span></li>
</ul>
</div>

**olivier57b** · 19/10/2013, 12h23

Bonjour JefReb, c'est presque ça, mais il manque 2 choses:
- les 2 "+" doivent être l'un au dessus de l'autre, or dans votre code ils sont décalés
- si le texte après un "+" est très long, la 2ème ligne doit commencer en bas et (un peu) à droite du premier "+", c'est-à-dire sous le début de la première ligne.

olivier

**NoSmoking** · 19/10/2013, 14h55

Bonjour,

Bonjour JefReb, c'est presque ça, mais il manque 2 choses:

j'ai comme l'impression que tu es en position d'attente et que JefReb devrait y arriver, il gagne quoi ?

**olivier57b** · 19/10/2013, 15h04

ben le fait de me répondre pour quelque chose

... c'est le principe du forum en fait! maintenant je n'oblige personne et je ne compte pas dire "merci pour ta réponse", je l'ai déjà trop écrit...

**NoSmoking** · 19/10/2013, 17h08

Dans tes nombreux essais as tu essayé de mettre le + à la suite de Le "plus" Greenskin : ?

Si c'est cela que tu cherches à obtenir, voir image, alors un indice chez vous display:table-cell.

**olivier57b** · 19/10/2013, 19h03

oui ça m'a l'air très intéressant, je regarderai ce soir.

merci!

**JefReb** · 19/10/2013, 19h30

Merci à nosmocking, pour son display: table-cell qui me manquait.
puisqu'il faut aller jusqu'au bout, est-ce que ceci vous convient?
http://codepen.io/JefReb/pen/uaEfg
code CSS:

Code :

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

1
2
3
4
5
html, body 	{ margin:0; padding:0; height:100%; font-size:100%; font-weight:normal; }
#contenu { width:500px; height:auto; margin:0 auto;}
 h1 { width:500px; font-size:90%; border-bottom: 2px solid green;}
 ul.espace li { margin:20px 0; }
 li > span { display: table-cell; width:250px; }

code html

Code html :

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

1
2
3
4
5
6
7
8
9
<div id="contenu">
<h1>&Eacute;CONOMIE</h1>
<ul class="espace">
<li>Protection de la membrane d'étanchéité<br/>
    <span>Le "plus" Greenskin :</span><span>+meilleure durée de vie (système naturellement anti-racines)</span></li>
<li>Isolation été/hiver<br/>
<span>Le "plus" Greenskin : </span><span>+ isolation renforcée grâce à la lame d'air</span></li>
</ul>
</div>

Pour l'écartement entre les : et les + il faut chercher, mais cela ne doit pas être compliqué.

**rodolphebrd** · 19/10/2013, 19h32

Bonjour,

on peut jouer aussi avec un display:inline-block; :

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
<div id="contenu">
<h1>&Eacute;CONOMIE</h1>
<ul class="espace">
  <li>Protection de la membrane d'étanchéité
  <br> Le "plus" Greenskin :</li>
  <li>+</li> 
  <li> meilleure durée de vie (système naturellement anti-racines)</li>
</ul>
<ul>
   <li>Isolation été/hiver
  <br> Le "plus" Greenskin :</li>
  <li>+</li> 
  <li>isolation renforcée grâce à la lame d'air. isolation renforcée grâce à la lame d'air. isolation renforcée grâce à la lame d'air</li>
</ul>
</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
24
25
#contenu { width:700px; height:auto; margin:0 auto;}
html, body 	{ margin:0; padding:0; height:100%; font-size:100%; font-weight:normal; }
 
 h1 { 
  width:400px; font-size:90%; border-bottom: 2px solid green;}
 li {
  list-style: none;
  display: inline-block;
}
ul{
  position:relative;
}
li:first-of-type{
  width:300px;
}
li:nth-of-type(2) {
  width:20px;
 
}
li:last-of-type {
  width:300px;
  position: absolute;
  top:20px;
  right: 25px ;
}

http://codepen.io/anon/pen/ngwGu

**JefReb** · 19/10/2013, 19h51

Code :

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

Display:inline-block

, je n'y avais pas pensé.
J'ai cherché une autre solution. Il y en a plein pour ce cas:
http://codepen.io/JefReb/pen/FrtJn

en utilisant le pseudo-element last-child.
Code CSS

Code :

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

1
2
3
4
5
6
html, body 	{ margin:0; padding:0; height:100%; font-size:100%; font-weight:normal; }
#contenu { width:500px; height:auto; margin:0 auto;}
h1 { width:500px; font-size:90%; border-bottom: 2px solid green;}
ul.espace li { margin:20px 0; }
li > span { display: table-cell; width:150px; }
li > span:last-child  { width:250px; }

Et toujours le même code html:

Code html :

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

1
2
3
4
5
6
7
8
9
<div id="contenu">
<h1>&Eacute;CONOMIE</h1>
<ul class="espace">
<li>Protection de la membrane d'étanchéité<br/>
    <span>Le "plus" Greenskin :</span><span>+meilleure durée de vie (système naturellement anti-racines)</span></li>
<li>Isolation été/hiver<br/>
<span>Le "plus" Greenskin : </span><span>+ isolation renforcée grâce à la lame d'air</span></li>
</ul>
</div>

**rodolphebrd** · 19/10/2013, 20h13

Envoyé par JefReb

en utilisant le pseudo-element last-child.

last:child est une pseudo-classe

Le souci (potentiel) avec ta méthode est d'aligner le texte après le + à moins de jouer avec un text-indent sur le premier SPAN.

**Candygirl** · 19/10/2013, 22h48

Un exemple avec des float:

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
20
<div  id="GS_txt_colD">
	<h1>ECONOMIE :</h1>
	<ul>
		<li>
			Protection de la membrane d'étanchéité
			<dl>
				<dt>Le "plus" Greenskin :</dt>
				<dd>meilleure durée de vie (système naturellement anti-racines)</dd>
			</dl>
		</li>
		<li>
			Isolation été/hiver
			<dl>
				<dt>Le "plus" Greenskin :</dt>
				<dd>isolation renforcée grâce à la lame d'air</dd>
				<dd>C'est super cool</dd>
			</dl>
		</li>
	</ul>
</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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
body {
    font:85% arial;
}
 
#GS_txt_colD {
    width:35em;
    font-size:0.8em;
}
 
 
#GS_txt_colD h1 {
    color:green;
    border-bottom:1px solid #000;
    font-size:1em;
}
 
#GS_txt_colD li {
    list-style-type: disc;
    clear:both;
}
 
#GS_txt_colD dt {
    width:30%;
    float:left;
} 
 
#GS_txt_colD dd {
    padding:0;
    margin-left:32%;
    padding-left:1em;
    text-indent: -1em;	
}
 
#GS_txt_colD dd:before {
    content:'+';
    width:1em;
    float:left;
}

**NoSmoking** · 20/10/2013, 18h23

dans les solutions proposées aucune avec une intégration du + dans la partie gauche, par exemple

Code html :

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

<span class="left">Le "plus" Greenskin : +</span>

**JefReb** · 21/10/2013, 09h43

oops oui pseudo-class et non pseudo element.
Par contre, il y a encore la simplicité d'utiliser les propriétés adjacentes avec

Code :

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

span+span et span+span+span

Voir le résultat dans http://codepen.io/JefReb/pen/GrJdL

Code CSS:

Code :

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

1
2
3
4
5
6
7
html, body 	{ margin:0; padding:0; height:100%; font-size:100%; font-weight:normal; }
#contenu       { width:500px; height:auto; margin:0 auto;}
h1             { width:500px; font-size:90%; border-bottom: 2px solid green;}
ul.espace li   { margin:20px 0; list-style: none; }
li > span      { display: table-cell; width:150px; }
span+span      { width:30px; text-align:right;}
span+span+span { width:250px; padding-left:10px; text-align:left;}

Code html

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
<div id="contenu">
<h1>&Eacute;CONOMIE</h1>
<ul class="espace">
<li>Protection de la membrane d'étanchéité<br/>
   <span>Le "plus" Greenskin : </span> 
   <span>+</span> 
   <span> meilleure durée de vie (système naturellement anti-racines)</span>
</li>
<li>Isolation été/hiver<br/>
  <span>Le "plus" Greenskin :  
  </span><span>+</span>
  <span> isolation renforcée grâce à la lame d'air</span></li>
</ul>
</div>

**olivier57b** · 22/10/2013, 22h09

bonjour

merci pour toutes vos solutions.
j'ai réussi en utilisant un display:table-cell, mais pour séparer le partie "le plus greenskin" et la partie "et encore" qui vient en dessous, j'ai ajouté un <br/>; verticalement j'ai ce que je voulais mais il y a un petit problème : il y a trop d'espace entre les 2 lignes, et il se trouve que dans cette page l'espace est compté et je dois supprimer cet espace vertical dû à <br/>; j'ai essayé de modifier les propriétés padding et margin à 0px pour l'attribut composé <br/> mais ça ne change rien.

avez-vous la solution?

oliver

**rodolphebrd** · 22/10/2013, 22h19

Montrez-nous votre code !!!!

Texte décalé mais à la même hauteur

Dimensionnement en CSS

Discussions similaires

Partager

Partager