Position de mes zones de texte sur ma page

**Greg12345** · 17/07/2012, 19h08

Bonjour,

Sur mon site http://tinyurl.com/cnqthmx ,j'aimerais que chaque section (presentation, services, contact) ait une zone de texte (un rectangle blanc).

Cela fonctionne pour la première page (section "presentation")avec ce code:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
div.box1
{
position:absolute;
left:100px;
top:250px;
background-color: #FFF;
Color:#000;
width:600px;
height:300px;
padding:10px;
margin:0px;
}

Le problème est pour la section suivante.J'aimerais également une box à 250px du haut de la section, le problème est que du coup les 250px sont calculé à partir du haut du site, pas du haut de la section.

J'imagine que ça fonctionnerait en mettant top: hauteur de ma première section + 250px, mais il doit y avoir moyen de dire "je veux que c'est 250px soient calculés à partir du haut de ma 2eme section (section "services)?

Merci d'avance pour votre aide.

Gregory

Le code CSS du site:

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
body{
	font: 12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 400;
	color: white;
	-webkit-text-size-adjust: none;
}
 
 
#logo{
	position: fixed;
	top: 30px;
	left: 2%;
	}
 
/* Menu Buttons */
 
#menu{
    position: fixed;
	z-index: 2000;
	top: 30px;
	right: 2%;
}
 
	#menu a{
    display: inline-block;
	font-size: 12px;
	width: auto;
	padding-left:5px;
	padding-right:5px;
	height: 24px;
	color: #000;
	line-height: 24px;
	text-align: center;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	background: rgba(255,255,255,0.9);
	text-transform: uppercase;
}
#menu a:hover{
	background: #ddd;
	color: #000;
}
#menu a.current-menu,
#menu a.current-menu:hover{
	background: #000;
	color: #fff;
	cursor: default;
}
 
h1{
	font-size: 28px;
	font-weight: 500;
	line-height: 150%;
	margin: 0 0 10px 0;
}
 
h1 a{
	font-weight: 300;
}
 
@-webkit-keyframes fade-in {
	0% { opacity: 0; }
	80% { opacity: 0; }
	100% { opacity: 1; }
}
 
a{
	font-weight: 700;
	color: white;
	text-decoration: none;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
 
	a:hover{
		text-decoration: underline;
		cursor: pointer;
 
	}
 
	#presentation {
	height:1100px;
	width:100%;
	/* background:#afc9ff;*/
	padding-top:110px;
	left: 50px;
	}
 
#services {
	height:1100px;
	width:100%;
	background:#8aba56;
	padding-top:150px;
	}
 
#contact {
	height:1100px;
	width:100%;
	background:#9b70c0;
	padding-top:150px;
	}
 
div.box1
{
position:absolute;
left:100px;
top:250px;
background-color: #FFF;
Color:#000;
width:600px;
height:300px;
padding:10px;
margin:0px;
}
 
 
#footer{
	position: fixed;
	bottom: 0;
	color: #fff;
	left: 0;
	z-index: 999;
	width: 96%;
	padding: 30px 2%;
	text-align: right;
	}
 
#social{
		position: absolute;
		vertical-align:middle;
		left: 2%;
	}

**Muchos** · 17/07/2012, 22h03

Bonjour !

En remplaçant

Code :

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

1
2
3
4
5
6
7
 
div.box1 {
position:absolute;
left:100px;
top:250px;
margin:0px;
}

par

Code :

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

1
2
3
4
 
div.box1 {
margin-left: 100px;
margin-top: 250px;

et ainsi de suite, ça devrait le faire.

PS: Je ne crois pas qu'une tinyurl était très utile !
PPS : Merci de passer votre sujet résolu en résolu

**Greg12345** · 17/07/2012, 23h03

Merci Muchos.
J'ai essayé mais du coup les zones de textes (rectangles blancs) sont hyper basses (nettement + de 250px du haut de page).
Une idée du problème?
Le version avec ton code se trouve à cette adresse

J'ai changé le code comme ceci:

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
div.box1{
  margin-left: 100px;
margin-top: 250px;
  background-color: #FFF;
  color:#000;
  width:600px;
  height:300px;
  padding:10px;
}
 
div.box2{
margin-left: 100px;
margin-top: 250px;
  background-color: #FFF;
  color:#000;
  width:600px;
  height:300px;
  padding:10px;
}

Merci,