Discussion :

[olivier57b]

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]

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]

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]

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

[olivier57b]

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]

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>