Comment fixer un element a un autre?

**Idleman** · 04/09/2007, 15h24

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 :

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
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

**trotters213** · 05/09/2007, 11h13

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.

**Idleman** · 05/09/2007, 17h30

Salut , merci pour ta reponse !!

Donc le code entier le voila :

code de la page html :

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
<!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 :

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
/* 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 ^^

**trotters213** · 06/09/2007, 10h08

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 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
<!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 :

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
/* 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.

**Idleman** · 06/09/2007, 15h29

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;

??

**trotters213** · 06/09/2007, 17h50

Envoyé par Idleman

C'est genial merci beaucoup tu est mon idole !

Chu un mec comme ça moi

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.

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 ?

Comment fixer un element a un autre?

CSS

Vue hybride

Discussions similaires

Partager

Partager