Comment fixer un element a un autre?

Version imprimable

bonjour ,
j'ai tenté réçamment de me mettre au css et ça ne me reussi pas mais je persiste .Je cherche a faire un menu extensible a l'infini verticalement afin de pouvoir mettre autant te texte que voulu , j'ai donc decoupé mon design en trois parties : le haut de la boite a texte que j'ai mis en image simple , le millieu de la boite que j'ai placé en tant que ligne qui se repete a l'infinis et le bas de la boite comme image simple .

Mais voila lorsque le millieu se repete et s'entend en longueur il empiette sur le bas de la boite qui lui reste fixe , je voulais savoir si il n'existe pas un moyen pour que le bas de la botie descende en même temps que le millieu afin de corriger le probleme .

voila le code css que j'ai mis pour le moment :
Code:

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 h2#debuttxt { position:absolute; top: 194px; left:327px; width: 641px ; height: 81px ; display: block ; background: url(images/img_03.jpg) no-repeat ; } /* balise div qui contient le texte central */ div#contenu { position:absolute; top: 257px; left:327px; width: 641px ; display: block ; background-image: url(images/img_04.jpg); background-repeat: repeat-y; text-align:center; } /* balise h2 qui contient l'image d'arriere plan du bas de la boite a texte */ h2#fintxt { position:absolute; top: 313px; left:327px; width: 641px ; height: 95px ; display: block ; background: url(images/img_05.jpg) no-repeat ; }
J'espere que quelqu'un trouvera la temp de me repondre , merci d'avance

05/09/2007, 11h13
trotters213

:salut:
Oui il faut sortir le bas de la boite du flux en utilisant un clear:both mais avec des position:absolute.
Tu pourrais nous montrer ton code HTML et CSS en entier afin que l'on voit comment on peut résoudre ton problème sans utiliser de position:absolute.

Salut , merci pour ta reponse !!

Donc le code entier le voila :

code de la page html :

Code:

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
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>sans titre</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div id="conteneur" >		
		<h1 id="header" name="header"></h1>
		<h2 id="fondonglets"></h2>
		<div id="debuttxt"></div>
 
 
 
		<div id="contenu">
		  <p>&nbsp;</p>
		  <p>&nbsp;</p>
 
  </div>
	  <div id="fintxt" name="fintxt"></div>
</div>
</body>
</html>

D'ailleur j'utilise des h2 ,h1 et div indifferament mais on m'a dit qu'il y avais une sorte de convenu genre les div uniquement pour les block les h1 pour les header etc.. bref si en meme temp tu pourrais verifier que je ne me sois pas planté au niveau du choix des balises je t'en serais d'autant plus reconnaissant

la page css :

Code:

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
/* CSS Document */
 
body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: #FFFFFF ;
}
/* div du conteneur global */
div#conteneur
{
 
	width: 641px ;
	margin: 0 auto ;
	text-align: left ;
	border: 0px ;
	background: #fff ;
}
/* balise h1 qui contient le header*/
h1#header
{ 
 
 
    position:absolute;
	top: 115px;
	left:327px;
	width: 641px ;
	height: 28px;
	display: block ;
	background: url(images/img_01.jpg) no-repeat ;
}
/* balise h2 qui contient l'image d'arrier plan des onglets */
h2#fondonglets
{
    position:absolute;
	top: 144px;
	left:327px;
	width: 641px ;
	height: 50px ;
	display: block ;
	background: url(images/img_02.jpg) no-repeat ;
 
}
/* balise h2 qui contient l'image d'arriere plan du haut de la boite a texte */
 
div#debuttxt
{
    position:absolute;
	top: 194px;
	left:327px;
	width: 641px ;
	height: 81px ;
	display: block ;
	background: url(images/img_03.jpg) no-repeat ;
 
}
 
 
/* balise div qui contient le texte central */
div#contenu
{
    position:absolute;
	top: 257px;
	left:327px;
	width: 641px ;
	display: block ;
	background-image: url(images/img_04.jpg);
	background-repeat: repeat-y;
	text-align:center;
 
}
 
 
/* balise h2 qui contient l'image d'arriere plan du bas de la boite a texte */
 
div#fintxt
{
    position:absolute;
	top: 313px;
	left:327px;
	width: 641px ;
	height: 95px ;
	display: block ;
	background: url(images/img_05.jpg) no-repeat ;
 
 
}

.

Sinon c'est quoi le problème avec le position:absolute ? j'ai mis ça pour bien caler les blocks entres eux mais si c'est pas bien je change ya pas de soucis ^^

Tu t'embête pour rien regarde le code suivi est 2 fois plus court et plus simple, valide XHTML et CSS et rendu identique :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>sans titre</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body> 
<div id="conteneur" >		
  <h1 id="header">header</h1>
  <h2 id="fondonglets">fondonglets</h2>
  <div id="debuttxt">debuttxt</div>  
  <div id="contenu">
    <p>contenu&nbsp;contenu</p>
    <p>contenu&nbsp;contenu</p>		  
  </div>
  <div id="fintxt">fintxt</div>
</div>
</body>
</html>

Code:

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
/* CSS Document */
*{
margin:0;
padding:0;
}
 
body{
margin:100px 0 0 0;
padding:0;
font:0.8em "Trebuchet MS", helvetica, sans-serif;
background-color:#fff;
}
 
/* div du conteneur global */
div#conteneur{
width:641px;
margin:0 auto;
text-align:left;
background-color:#f00;
}
 
/* balise h1 qui contient le header*/
h1#header{
height:28px;
background:url(images/img_01.jpg) no-repeat;
background-color:#0ff;
}
 
/* balise h2 qui contient l'image d'arrier plan des onglets */
h2#fondonglets{
height:50px;
background:url(images/img_02.jpg) no-repeat;
background-color:#ff0;
}
 
/* balise h2 qui contient l'image d'arriere plan du haut de la boite a texte */
div#debuttxt{
height:81px;
background:url(images/img_03.jpg) no-repeat;
background-color:#f0f;
}
 
/* balise div qui contient le texte central */
div#contenu{
background: #0f0 url(images/img_04.jpg) repeat-y fixed center; 
text-align:center;
}
 
/* balise h2 qui contient l'image d'arriere plan du bas de la boite a texte */
div#fintxt{
height:95px;
background:url(images/img_05.jpg) no-repeat;
background-color:#aaa;
}

Je t'ai mis une couleur à chaque div pour que tu les distingues bien. Dis moi si ça te convient.

Pour ce qui est des h1, h2, ... h6, ce sont des hiérarchisation de titre normalement avec h1 le titre le plus important et h6 le moins.

06/09/2007, 15h29
Idleman

C'est genial merci beaucoup tu est mon idole !

Meme si j'ai pas compris comment tu a fait pour fixer les blocs les un aux autre ni comment tu a fait pour resoudre mon probleme de menu extensible (le "repeat-y fixed center" y est pour qulque chose ?)

merci beaucoup je ne pensais pas qu'on puisse et qu'on veuille resoudre mon probleme aussi vite et aussi efficacement .

Edit: crotte je vien de voir qu'il y a un decalage d'un px sur la droite pour l'image de fond du design mais je ne vois pas comment remedier a ça, dois je faire un truc genre position:relative
left:1 px;

??
06/09/2007, 17h50
trotters213

Citation:

Envoyé par Idleman

C'est genial merci beaucoup tu est mon idole !

Chu un mec comme ça moi 8-) :mrgreen:

Citation:

Envoyé par Idleman

Meme si j'ai pas compris comment tu a fait pour fixer les blocs les un aux autre ni comment tu a fait pour resoudre mon probleme de menu extensible (le "repeat-y fixed center" y est pour qulque chose ?)

Les blocs se fixent tout seul, c'est automatique, ils se palcent les uns en dessous des autres tant que tu ne leur indique pas l'inverse. Idem pour le menu.

Citation:

Envoyé par Idleman

je vien de voir qu'il y a un decalage d'un px sur la droite pour l'image de fond du design mais je ne vois pas comment remedier a ça, dois je faire un truc genre position:relative
left:1 px;

??

Tu es sous quel navigateur (et quelle version) quand tu as ce problème ? il apparait dans quel div ?
06/09/2007, 18h35
Idleman

C'est quand meme la classe le CSS ya pas a dire ,
Je suis sous firefox la version ben heuh ... je vais encore passer pour le pire des boulet newbie décérébré mais ou est ce qu'on vois la version :D ?!!
C'est la div contenu:

pour te faire une idée :
http://img260.imageshack.us/img260/1...lagehx1.th.jpg

A noter que ce decalage aparais lors de la simulation sous macromedia mais je pense pas que ça change grand chose puisque le naviguateur est le meme .

J'ai aussi regardé l'image 4 qui est celle de la balise contenu et il n'y a pas de decalage par rapport au autres donc le probleme vien bien du code et pas de l'image.

Merci pour ton aide et ta patience (surtout avec le plus grand noob de la planete en css)

wali walou !!
07/09/2007, 11h22
trotters213
Citation:

Envoyé par Idleman

C'est quand meme la classe le CSS ya pas a dire ,
Je suis sous firefox la version ben heuh ... je vais encore passer pour le pire des boulet newbie décérébré mais ou est ce qu'on vois la version :D ?!!

:mrgreen: tu cliques sur le point d'interrogation dans la barre d'outils et tu vas sur "A propos de Mozilla Firefox".

Citation:

Envoyé par Idleman

C'est la div contenu:

A noter que ce decalage aparais lors de la simulation sous macromedia mais je pense pas que ça change grand chose puisque le naviguateur est le meme .

J'ai aussi regardé l'image 4 qui est celle de la balise contenu et il n'y a pas de decalage par rapport au autres donc le probleme vien bien du code et pas de l'image.

Evite de coder en mode design avec Dreamweaver parce que le code qu'il te pond n'est vraiment pas top.

Essaie de modifier ton style CSS du contenu pour mettre :
Code:

1 2 3 4 div#contenu{ background: #0f0 url(images/img_04.jpg) repeat-y; text-align:center; }
Si ça ne fonctionne toujours pas, envoie nous les images que tu utilises pour faire un vrai test mais ça me parait biarre tout de même.
07/09/2007, 20h16
Idleman

^^ ça marche avec ton nouveau code , merci beaucoup chef !!!