[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;
}

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

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager