[MAJ]le pixel d'alignement retourne à la ligne le flottant & conteneur obsolète

**timothyleary** · 03/08/2007, 15h05

Bonjour à tous !

Voir plus bas pour la MAJ du problème.

Ce problème est réglé :

Je rencontre un problème lors de la création de mon site perso,
je souhaite faire un double header, c'est à dire deux blocs juxtaposés,
j'insère alors une div float:right(#header1droite) dans mon header, tout marche bien, mais surprise, lorsque j'écrit dans mon header (#header1gauche), le flottant descend :'( ...
A l'aide !

Source :

HTML

Code html :

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

1
2
3
4
5
6
 
<div id="header1gauche">
Si j'écrit ici, #header1droite descend :'(
<div id="header1droite">
</div>
</div>

CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
 
#header1gauche {
width:1000px;
height:50px;
}
 
#header1droite {
	float:right;
	height:50px;
	width:170px;
}

**Bisûnûrs** · 03/08/2007, 15h09

Aie plutôt cette structure :

Code html :

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

1
2
3
4
<div id="head">
   <div id="head_gauche"></div>
   <div id="head_droit"></div>
</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
#head{
   width:1000px;
   height:50px;
}
#head_gauche{
   width:830px;
   height:50px;
   float:left;
}
#head_droit{
   height:50px;
   width:170px;
   float:left;
}

**timothyleary** · 03/08/2007, 15h43

Je te remercie pour ton aide Bisûnûrs,

Cependant, ça ne fonctionne pas, j'ai même testé la structure seul, et ça install le head droit en dessous.

Si tu peux maj !

Codement =)

Timtohy

**Bisûnûrs** · 03/08/2007, 15h49

Je n'ai pas de problème particulier avec le code que je t'ai donné.
Tu as un DOCTYPE ? Si non tu devrais en mettre un.

Exemple de code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr">
<head> 
   <title>Titre de la page</title>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <style>
   #head{
      width:1000px;
      height:50px;
   }
   #head_gauche{
      width:830px;
      height:50px;
      float:left;
      background:red;
   }
   #head_droit{
      height:50px;
      width:170px;
      float:left;
      background:blue;
   }
   </style>
</head>
<body>
<div id="head">
   <div id="head_gauche">Texte head gauche</div>
   <div id="head_droit">Texte head droit</div>
</div>
</body>
</html>

**timothyleary** · 03/08/2007, 15h54

Oups ! Désolé, dans mon code le doctype était là, c'était juste une histoire de pixels, et dans le code tout seul, j'ai bien manqué de le mettre !

Merci Beaucoup, sorry sorry j'ai parlé trop vite !

bonne continuation à l'équipe

**timothyleary** · 03/08/2007, 17h04

D'autres problèmes ...

Voilà, tout d'abord je souhaite que mon conteneur #site puisse être attribué d'un
width:60%;(ex) et que le site se redimenssionne corectement, là ça ne marche pas.

Ensuite, mes deux premier headers horizontaux ne sont pas aligné verticalement avec le reste des blocs, et si je rajoute le %age manquant (ou pixel) les flottants de droite de ces deux premier header retournent à la ligne.

Et pour finir, j'aimerais enlever le margin top de 4px attribué au header n°3, qui, s'il ne lui est pas attribué, se place de ces 4px en dessous du header horizontal n°2 (ce problème est le moins important, car au pire je laisse ce margin top, sous ie, le problème n'en ai pas un d'ailleur :S)

Source :

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
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<style type="text/css">@import url(style.css);</style>
</head>
<body>
<div id="site">
 
<div id="head">  
 
<div id="head_gauche">
gauche
</div>  
<div id="head_droit">
droit
</div> 
 
</div>
 
<div id="head2">  
 
<div id="head2_gauche">
2gauche
</div>  
<div id="head2_droit">
2droit
</div> 
 
</div>
 
<div id="head3">
h3
</div>
 
 
 
<div id="c">
<div class="conteneur">
<div class="menu">
Menu <br />
Menu <br />
Menu <br />
Menu <br />
Menu <br />
Menu <br />
Menu <br />
Menu <br />
</div>
<div class="menu">
Menu <br />
Menu <br />
Menu <br />
Menu <br />
</div>
 
<div class="menu">
Menu <br />
Menu <br />
Menu <br />
Menu <br />
</div>
 
</div>
<div class="conteneurr">
<div class="menu">
Menu <br />
Menu <br />
Menu <br />
Menu <br />
</div>
<div class="menu">
Menu <br />
Menu <br />
Menu <br />
Menu <br />
Menu <br />
Menu <br />
Menu <br />
Menu <br />
</div>
<div class="menu">
Menu <br />
Menu <br />
Menu <br />
Menu <br />
Menu <br />
Menu <br />
Menu <br />
Menu <br />
Menu <br />
Menu <br />
Menu <br />
Menu <br />
Menu <br />
Menu <br />
Menu <br />
Menu <br />
</div>
</div>
 
<div id="texte">
Bienvenue !
 
</div>
 
</div>
<div id="f">footer</div>
</div>
</body>
</html>

CSS

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
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 
 
body{
margin:0;
padding:0;
background-color:#aaaaaa;
}
div {
border: 1px solid yellow;
Background-Color:skyblue;
color:black;
}
 
#site {
border:none;
background:none;
margin: 0 auto;
}
 
#head{
   height:50px;
   border:none;
   background:none;
}
#head_gauche{
   width:70%;
   height:50px;
   float:left;
}
#head_droit{
   width:29.6%;
   height:50px;
   float:left;
}
 
#head2{
   height:50px;
   border:none;
   background:none;
}
#head2_gauche{
   width:70%;
   height:50px;
   float:left;
}
#head2_droit{
   width:29.6%;
   height:50px;
   float:left;
}
 
#head3 {
margin-top:4px;
height:29px;
padding:3px;
vertical-align : middle;
}
 
#c {
-display:inline-block; /* hack pour ie le - sert à définir la propriété uniquement pour ie */
overflow:auto;
}
 
#texte {
margin-left:178px;
margin-right:178px;
margin-bottom:10px;
margin-top:10px;
border:none;
background:none;
}
 
.conteneur {
float:left;
width:150px;
border:none;
background: none;
}
 
.conteneurr {
float:right;
width:150px;
margin-right:27px;
-margin-right:0px;
border:none;
background:none;
}
 
 
.menu{
width:150px;
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
background-color:forestgreen;
border-color : green;
}
 
#f {
height:30px;
text-align:center;
color:#AAAAAA;
}

**Bisûnûrs** · 03/08/2007, 17h24

Pour la taille de #site, je pense qu'il n'est pas bon de la mettre en ça génèrera plus de bugs qu'autre chose au redimensionnage. Je te conseille une taille fixe, genre 970px pour qu'elle rentre sur les écrans standards en 1024.

Ton deuxième problème vient du fait que tu mélanges % et px. Tes bordures sont en px alors que tes largeurs en %, ça fait très mauvais ménage, surtout sur ce genre de design. Je pense qu'il ne faut pas toujours chercher à tout faire redimensionnable à 100%.

**timothyleary** · 03/08/2007, 17h48

Envoyé par Bisûnûrs

Pour la taille de #site, je pense qu'il n'est pas bon de la mettre en ça génèrera plus de bugs qu'autre chose au redimensionnage. Je te conseille une taille fixe, genre 970px pour qu'elle rentre sur les écrans standards en 1024.

Ton deuxième problème vient du fait que tu mélanges % et px. Tes bordures sont en px alors que tes largeurs en %, ça fait très mauvais ménage, surtout sur ce genre de design. Je pense qu'il ne faut pas toujours chercher à tout faire redimensionnable à 100%.

Hooo cependant c'est très important pour le dévelopement de mon site que tout soit redimensionable via une div qui contient tout, ça marche parfaitement bien normalement !

Pour l'histoire des % et des pixels, le problème revient également avec des pixels, le but étant que je puisse enlever le bloc de droite et permettre au bloc de gauche de s'étendre sur toute la longueur si je le souhaite (d'ou la première utilisation d'uniquement deux div pour un header, et non 3 comme tu m'a permis de le faire marcher).

**Bisûnûrs** · 03/08/2007, 17h54

Envoyé par timothyleary

Pour l'histoire des % et des pixels, le problème revient également avec des pixels

Non, puisque tu veux que tes deux div head_gauche et head_droit fassent 100% à eux-deux de la largeur du conteneur head, cependant tu ne peux pas mettre 30% à head_droite, parce que 70% + 30% + 4px de bordure fait plus de 100%, alors que si tu utilises des px dans ton cas, tu peux ajuster la taille de head_gauche et droit pour que leur taille + 4x de bordure fasse bien les 100% du conteneur.

**timothyleary** · 03/08/2007, 18h07

Envoyé par Bisûnûrs

Non, puisque tu veux que tes deux div head_gauche et head_droit fassent 100% à eux-deux de la largeur du conteneur head, cependant tu ne peux pas mettre 30% à head_droite, parce que 70% + 30% + 4px de bordure fait plus de 100%, alors que si tu utilises des px dans ton cas, tu peux ajuster la taille de head_gauche et droit pour que leur taille + 4x de bordure fasse bien les 100% du conteneur.

biensûr, mais à ce moment là je suis obligé d'attribuer des width fixes en px aux autres blocs, et là je n'ai plus du tout d'extensibilité ...

Ce que je souhaite c'est qu'il n'y ai pas de width pour que tout soit extensible, et qu'en plus, le conteneur global puisse aussi jouer sur la taille du site, si on peut le faire en html je pense que c'est possible en CSS !

[MAJ]le pixel d'alignement retourne à la ligne le flottant & conteneur obsolète

Tableau en CSS

Discussions similaires

Partager

Partager