Positionnement à l'intérieur d'un div

**fabrice91** · 12/08/2014, 11h00

Bonjour,

J'ai un petit souci de positionnement que je ne vois pas comment résoudre.
Je veux créer une page de présentation avec un élément qui sera répété plusieurs fois sur le même modèle.
Dans mon script j'ai une boucle, là dans le code html que je vous présente, j'ai mis seulement deux éléments l'un sur l'autre pour debugging.
De même la feuille css sera séparée lorsque le code sera complet.
La présentation ressemble à ceci :
Un bloc principal (main) contenant tout les éléments.
Un élément "type" répété plusieurs fois :
- 3 blocs left1, left2 et left3 sur une première "ligne". Je les ai mis côte à côte grâce au float:left
- en dessous, un bloc contenant du texte (toto, titi, tata etc) avec un "clear:both" à la fin pour supprimer le "float:left", en background jaune pour le debugging.
On voit bien que le premier bloc de texte (toto0, tutu0, titi0, tata0) disparaît derrière le deuxième bloc (vert) alors que je voudrais que le bloc (rouge) contenant ce texte adapte sa taille en fonction du contenu du bloc texte (toto, titi, tutu etc).
Je peux résoudre ce problème en fixant une hauteur au bloc texte (toto, titi, tutu etc) mais cette hauteur est variable, parfois j'ai 3 lignes de texte, parfois 6 lignes etc...Un "height: auto" ne résous pas le problème. Merci pour vos avis.

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
<body>
<div id='main'>
 
<div style='position:relative;width:800px;background-color:red'>
    <div style='float:left;width:100px'>
        <div>left1</div>
    </div>
    <div style='float:left;width:250px'>
        <div>left2</div>
        <div>left2.1</div>
        <div>left2.2</div>
    </div>
    <div style='float:left;width:400px'>
        <div>left3</div>
    </div>
 
    <div style='position:absolute;top:50px;background-color:yellow'>
        <div>toto0</div>
        <div>tutu0</div>
        <div>tata0</div>
        <div>titi1</div>
    </div>
    <div style='clear:both;'></div>
</div>
<div style='position:relative;width:800px;background-color:green'>
    <div style='float:left;width:100px'>
        <div>left1</div>
    </div>
    <div style='float:left;width:250px'>
        <div>left2</div>
        <div>left2.1</div>
        <div>left2.2</div>
        <div>left2.3</div>
    </div>
    <div style='float:left;width:400px'>
        <div>left3</div>
    </div>
 
    <div style='position:absolute;top:50px;background-color:yellow'>
        <div>toto1</div>
        <div>tutu1</div>
        <div>tata1</div>
    </div>
    <div style='clear:both;'></div>
</div>
 
</div>
</body>
</html>

**NoSmoking** · 26/08/2014, 16h23

Bonjour,
je trouve qu'il y a beaucoup trop de DIV dans ta construction et que tu uses et abuses des float:left.
Essaies en passant peut être par des display:inline-block; qui contrairement au float:left donneront de la "contenance" aux conteneurs.

PS : profites en pour déporter le style inline dans la partie STYLE du document.

**johnlobs** · 26/08/2014, 16h30

j'ai brièvement lu ce que tu dis je pense que la Class container pourra t'aider.
No smoking a raison évite ce que tu fait pour tes styles tu auras des problèmes d'affichage avec les différents navigateurs

**s0h3ck** · 26/08/2014, 19h37

Envoyé par NoSmoking

[...] il y a beaucoup trop de DIV dans ta construction et, [...], tu uses et abuses [...]

Et les balises sémantiques HTML5 ?

**fabrice91** · 28/08/2014, 14h36

Merci, je vais étudier ces différentes pistes.

**fabrice91** · 01/09/2014, 16h58

Une alternative bien plus propre en HTML5 et qui m'a l'air de tout à fait bien fonctionner !

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="test_html5.css" />
</head>
<body>
 
 
<section>
    <header>
        <pre>header</pre>
    </header>
    <article>
        <pre>Article1.1</pre>
        <pre>Article1.2</pre>
        <pre>Article1.3</pre>
        <pre>Article1.4</pre>
        <pre>Article1.4</pre>
        <pre>Article1.4</pre>
        <pre>Article1.4</pre>
        <pre>Article1.4</pre>
 
    </article>
    <article>
        <p>Article2.1</p>
        <p>Article2.2</p>
    </article>
    <article>
        <p>Article3.1</p>
        <p>Article3.2</p>
        <p>Article3.3</p>
    </article>
 
    <footer>
        <p>footer1</p>
        <p>footer2</p>
        <p>footer3</p>
    </footer>
</section>
 
 
</body>
</html>

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
20
21
22
23
section {
background-color: yellow ;
width: 1000px;
}
 
header {
background-color: red ;
width: 250px;
display:inline-block;
vertical-align: top;
}
 
article {
background-color: green ;
width: 150px ;
display:inline-block;
vertical-align: top;
}
 
footer {
background-color: orange ;
width :400px ;
}

J'ai plus qu'à ajouter des id pour différencier les articles car ils ne doivent pas tous avoir la même taille...

**s0h3ck** · 02/09/2014, 03h30

@fabrice91,

Première remarque, il y a du progrès.

Par contre, est-ce vraiment utile tous ces <pre> ?

Bonne continuité,
s0h3ck.

**fabrice91** · 02/09/2014, 12h04

Non en effet

J'ai mixé avec des <p> pour voir l'effet mais ce sera en fonction du texte dans chaque l'article. Comme j'aurai des phrases courtes et que je veux un retour à la ligne à chaque fois, je ne vais pas mettre une floppée de <br> non plus !
Les <p> font de trop grandes espaces autour des textes, à moins de les surcharger dans la mise en forme, donc il me faut de toutes façons un élément pour encadrer chaque item.