Superposition de <body>'s

**Arc'ad** · 02/05/2012, 18h34

Envoyé par jreaux62

lol, oui : testé sur Firefox, Opera, Safari et Chrome

Pas sur IE8

Bon courage !

Bonjour, suite à une discussion, je reprends TOUT le code de mon site.

Et je suis en train de galérer mais d'une manière folle.

- J'ai un fond qui prend toute la page (que je n'arrive à paramétrer qu'en X ou Y, pas les deux à la fois (XetY) : on va l'appeler trame.png

- Puis, à partir de 12px du haut de la page, j'ai un header anthracite qui prend toute la LARGEUR de la page : on va l'appeler bandeaunoir.png

- Sur ce bandeaunoir, je veux coller un supportlogo.png en plein milieu.

- Enfin, sur ce support_logo.png, je veux coller mon logo

En gros, comme sur ce que j'ai en ligne : http://www.arc-ad.com

En pièce jointe, les fichiers du site... si quelqu'un a une idée de comment me sortir de la panade...

**Arc'ad** · 02/05/2012, 18h39

(suis con, j'ai oublié de parler de mon souci moi...)

Bah en fait, y a rien qui ne se superpose correctement et comme souhaité.

La trame me peint juste le milieu.
Le bandeau, ça va il est juste bien.
Le support de logo n'apparait pas.
Et le logo ça va.

1 problème sur deux réglé, c'est déjà ça

(vais laver des casseroles, ça me changera les idées. Trop de code tue le codeur (en herbe)

)

Invité · 02/05/2012, 18h51

Ce tuto est quant à lui toujours d'actualité !
=> Div et CSS : une mise en page rapide et facile

Démarre la création des blocs simples, les uns après les autres.

Pour centrer horizontalement l'ensemble :

Code html :

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

1
2
3
4
5
<body>
<div id="centrage">
	<!-- autres <div>... -->
</div>
</body>

et le CSS :

Code css :

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

1
2
3
4
#centrage {
	width:1000px;
	margin:0 auto;
}

**Arc'ad** · 02/05/2012, 19h28

Bon, mes casseroles sont propres

Mais ton tuto, ça fait bien 28 fois que je le lis, je crois que je vais bientôt pouvoir le réciter par coeur

Mais bon, on peut lire et ne pas comprendre ce qu'on lit sans même s'en rendre compte. Bref, point de philo ici.

Mes casseroles sont propres et je viens de m'apercevoir que le code est foireux (en raison de la fatigue).

-> STAND BY <-

**Arc'ad** · 02/05/2012, 19h40

OK ! M'en suis sorti en intervertissant deux div entre elles.

Maintenant, mon souci, c'est que j'ai un tramé anthracite sur toute les divs de dessous O_o!

[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
/*first body*/
* 	{ margin:8px auto 15px auto ; padding:0; border:0;
/*	background-image:url("../WEFiles/Image/Skin/trame.png");
	background-repeat:repeat;
	background-position:top center;*/
	background-image:url("../WEFiles/Image/Skin/bandeaunoir.png");
	background-repeat:repeat-x;
	overflow:hidden;
	width:100%;
	height:100%;
}
 
/*second body*/
html,body 	{
	width:100%;
	height:100%;
	/*background-color: #666;*/
	/*height:550px;*/
/*	background-image:url("../WEFiles/Image/Skin/bandeaunoir.png");
	background-repeat:repeat-x;
	overflow:hiden; */
	background-image:url("../WEFiles/Image/Skin/trame.png");
	background-repeat:repeat;
	background-position:top center;
	overflow:hidden;
 
}
 
#centrage {
	width:100%;
	margin:0 auto 15px auto;
	overflow:visible;
 
}
 
 
 
/* zone noire top*/
#chapeauheader {
	width:100%;
	height:auto;
	background-image:url("../WEFiles/Image/Skin/supportlogo.png");
 
}
/* zone noire top*/
 
 
CA DEVIENT TOUT NOIR A PARTIR D'ICI !!!
 
#header 	{ position:relative; clear:both; margin:0 auto; width:814px; height:150px; }

[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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
<head>
<meta name="ARC'AD/Sébastien STELTZLEN" />
<title>OneFrame</title>
<script type="text/javascript"></script>
<script type="text/javascript" src="../WEFiles/Client/jQuery/jquery.core.js"></script>
<script type="text/javascript" src="../WEFiles/Client/Json.js"></script>
<script type="text/javascript" src="../WEFiles/Client/OpenElement.js"></script>
<link id="style" rel="stylesheet" type="text/css" href="style.css" />
</head>
<body><div id="chapeauheader">
 
<div id="centrage">
 
 <div id="header">
	<!-- div du logo--><div id="headerlogo"><a href="http://www.arc-ad.com"><img src="logo.png" alt="" width="129%" style="height:100%; width:500px;" /></a></div><!-- div du logo-->
</div>
 
 
CA DEVIENT TOUT NOIR A PARTIR D'ICI !!!
<div id="menutop">
 
	        <div id="banderouge">ANIMATION
</div>
</div>
 
 
 
<div id="globalcontent">
	<div id="menu-gauche">
		[...]
	</div>
	<div id="contenu-main">
		[...]
	</div>
</div>
<div id="footer">
	[...]
</div>
 
 
 
 
</div>
</div>
</body>
</html>

Invité · 02/05/2012, 19h50

Mettre le CSS, c'est bien.
Mettre aussi le code html associé, c'est mieux.

Superposition de <body>'s

CSS

Vue hybride

Discussions similaires

Partager

Partager