Positionnement relative ABSOLUE

**aikinhdo** · 16/05/2008, 18h33

Bonjour,

J'essaie de comprendre le CSS, j'ai voulu faire des positions absolus pour mais cela ne marche pas.
C'est un example que j'ai trouvé et un peu modifier pour comprendre.

Je n'arrive pas à faire en sorte que ma colonne 3 soit collé à droite.
Et que la colonne 2 prenne toute la largeur.

Feuille 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
 
html {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	}
body {
	margin: 0px;
	padding: 0px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 0.9em;
	height: 100%;
	width: 100%;
	background-image: url(water.png);
	background-repeat: repeat-x;
	background-position: top;
	background-color: #F0ECD6;
	border: solid 2px red; 
	}
 
 
#container {
	width: 700px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	z-index: 4;
	position: relative;
	border: solid 10px black; 
	}
#intro {
	margin-top: 0px;
	padding-top: 130px;
	border: solid 8px pink; 
	}
#pageHeader h1 {
	/*background-image: url(title.png);*/
	height: 195px;
	width: 290px;
	background-repeat: no-repeat;
	margin-top: 0px;
	position: absolute;
	border: solid 2px grey; 
	}
 
#pageHeader h11 {
	/*background-image: url(title.png);*/
	height: 195px;
	background-repeat: no-repeat;
	margin-top: 0px;
	margin-left: 294px;
	position: relative;
	border: solid 2px grey; 
	}
 
#pageHeader h111 {
	/*background-image: url(title.png);*/
	height: 195px;
	width: 290px;
	background-repeat: no-repeat;
	top: 0px;
	right: 1%;
	position: absolute;
	border: solid 2px grey; 
	}
 
 
#pageHeader {
	z-index: 5;
	margin-top: -130px;
	position: absolute;
 
}

Code 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
 
<body id="css-zen-garden">
 
<div id="container">
	<div id="intro">
		<div id="pageHeader">
			<h1><span>colonne H1</span></h1>
			<h11><span>colonne H2</span></h11>
				<h111><span>colonne H3</span></h111>
			<h2><span>The Beauty of <acronym title="Cascading Style Sheets">CSS</acronym> Design</span></h2>
		</div>
	</div>
 
 
</div>
 
</body>
</html>

Merci pour votre aide

**Erwan31** · 16/05/2008, 20h21

Code :

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

1
2
<h11><span>colonne H2</span></h11>
				<h111><span>colonne H3</span></h111>

H111 pas mal

Pour info, les titres s'arrêtent au H6.
Aurais tu une page en ligne qu'on visualise ton problème?

Positionnement relative ABSOLUE

Positionnement en CSS

Discussions similaires

Partager

Partager