Bandeau large sur div de taille fixe

**bannik** · 03/12/2013, 15h49

Bonjour,

Je souhaite créer une page dont le texte et les image sont contenu dans une taille fixe. Cependant, tout au long de la page, il y a des bandeaux de couleur qui font toute la largeur de la page qui dépassent donc de la div conteneur.
j'ai tenté d'utiliser les position:absolute mais après le premier div ayant cette propriété, le div suivant se superpose à ce dernier.

Comment faire en sorte que le div suivant se positionne après le div en absolute?

Merci

**Torgar** · 03/12/2013, 16h01

Salut,

sans ton code ça va être dur de t'aider.

**bannik** · 03/12/2013, 16h48

C'est vrai.

Voici le 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
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
 
<!DOCTYPE html>
<html dir="ltr"  lang="fr" >
<head>
	<title> titre</title>
	<style type="text/css">
 
		.page_main {
			background-color: #FFFFFF;
			margin: 0 auto;
			width: 965px;
		}
		.bandeau_gris{
			left: 0px;
			height: 150px;
			position: absolute;
			background-color: #E6E6E6;
			width:100%;
			margin-top:15px;
		}
 
		.bandeau_haut{
			font-size: 26px;
			margin: 0 auto;
			width: 965px;
			font-weight:300;
		}
 
		.bandeau_bas{
			margin: 0 auto;
			text-align: center;
			width: 965px;
		}
	</style>
</head>
<body >
	<div class="page_main">
		<div class="bandeau_haut">
			<h1>bandeau haut</h1>
		</div>			
		<div class="bandeau_gris">			
			<h1>bandeau large</h1>
		</div>
		<div class="bandeau_bas">
			<h1>bandeau bas</h1>
		</div>
	</div>
</body>
</html>

**Torgar** · 03/12/2013, 16h59

C'est ça que tu veux ?

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
.page_main {
	background-color: #FFFFFF;
	margin: 0 auto;
	width: 100%;
}
.bandeau_gris{
	left: 0px;
	height: 150px;
	background-color: #E6E6E6;
	width:100%;
	margin-top:15px;
}
 
.bandeau_haut{
	font-size: 26px;
	margin: 0 auto;
	width: 965px;
	font-weight:300;
}
 
.bandeau_bas{
	margin: 0 auto;
	text-align: center;
	width: 965px;
}

Invité · 03/12/2013, 17h22

Bonjour,
=> http://codepen.io/jreaux62/pen/inrgf

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
.page_main {
	background-color: #FFFFFF;
}
.bandeau_haut, .bandeau_centre, .bandeau_bas{
	margin: 0 auto;
	width: 965px;
}
.bandeau_gris{
	background-color: #E6E6E6;
	margin-top:15px;
	padding:0 0 5px 0;
}
 
.bandeau_haut{
	font-size: 26px;
	font-weight:300;
}
 
.bandeau_bas{
	text-align: center;
}

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
<div class="page_main">
	<div class="bandeau_haut">
		<h1>bandeau haut</h1>
	</div>
	<div class="bandeau_gris">
		<div class="bandeau_centre">
			<h1>bandeau large 1</h1>
		</div>
	</div>
	<div class="bandeau_gris">
		<div class="bandeau_centre">
			<h1>bandeau large 2</h1>
		</div>
	</div>
	<div class="bandeau_bas">
		<h1>bandeau bas</h1>
	</div>
</div>

**bannik** · 03/12/2013, 19h29

Merci,
Ceci donne un bon rendu, la difficulté est que je souhaiterai que page_main garde la taille fixe. C'est le div qui sera présent sur toutes les pages. Il n'y arra que sur la page d'accueil que les div pourraient déborder.
Sinon j'ai la possibilité de gérer la classe css dans le code php mais j'aurrai préféré une universalité.

Bandeau large sur div de taille fixe [CSS 3]

CSS

Discussions similaires

Partager

Partager