comment placer des images en absolu dans un header

**ml1234** · 16/05/2009, 18h56

bonjour,
j'ai passé la journée aujourd'hui à essayer de placer trois objets dans un header.
je m'en suis finalement sorti avec les float et les marges mais je suis étonné que je n'en sois pas sorti avec les absolute.
en fait les absolute étaient relatifs au body et non au wrapper, donc je finissais par y arriver mais j'avais peur que cela dépende de l'écran
Pouvez-vous svp me dire comment dans mon header de 900x276, je peux placer facilement en absolu par rapport au header du wrapper un bandeau jpeg de 900x276, un logo gif de 151x160, une animation gif de 134x99 et une horloge (qui d'ailleurs m'énerve avec son texte "gratuit sur votre site")

je joins mon code de sauvetage :

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
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
 
* {margin:0 ; padding:0} 
 
body {
	text-align: center;
	margin: 0px;
	padding: 0px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-style: normal;
	color: #FFFFFF;
	background-color: #460401;
}
#header h1 {
	font-variant: small-caps;
	color: #FF3300;
}
#wrapper {
	background-color: #000000;
	text-align: left;
	width: 900px;
	margin-top: 25px;
	margin-right: auto;
	margin-bottom: 25px;
	margin-left: auto;
}
#header {
	margin: 0px;
	font-size: 24px;
	padding: 0px;
	height: 276px;
	background-image: url(../images/bandeau_pigeons.png);
	background-color: #FFFF00;
}
#header_clock {
	float: right;
	width: 150px;
	padding-top: 160px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#header_logo {
	width: 151px;
	float: left;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
}
#header_animation {
	margin-left: 200px;
	padding-top: 100px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 200px;
	margin-right: 200px;
	margin-top: 0px;
	margin-bottom: 0px;
}

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
22
23
24
 
<body>
	<div id="wrapper">
 
		<div id="header">
 
	      <div id="header_logo">     
            	<img src="../images/logo_pigeons.png" alt="MP" width="151" height="160" />           </div>
	      <!-- end of header_logo -->
 
           <div id="header_clock">
            	<SCRIPT Language="JavaScript" SRC="http://www.toutimages.com/horloge_flash/12.js"></SCRIPT>
             </div> <!-- end of header_clock -->
 
            <div id="header_animation">     
            	<img src="../images/animation_pigeons.gif" alt="MP" width="134" height="99" />            </div>
            <!-- end of header_logo -->
 
 
 
  	     </div>  
	  <!-- end of header -->
 
   	  <div id="maincontent">

merci d'avance

**Macmillenium** · 16/05/2009, 19h27

Bonjour et bienvenue

Envoyé par ml1234

en fait les absolute étaient relatifs au body et non au wrapper, donc je finissais par y arriver mais j'avais peur que cela dépende de l'écran

L'élément en absolute se réfère à son premier conteneur parent qui est lui même positionné (absolute, relative et fixed).
Si aucun de ses parents n'est positionné, il se réfère à l'élément racine <html>.

Envoyé par ml1234

Pouvez-vous svp me dire comment dans mon header de 900x276, je peux placer facilement en absolu par rapport au header du wrapper un bandeau jpeg de 900x276, un logo gif de 151x160, une animation gif de 134x99 et une horloge (qui d'ailleurs m'énerve avec son texte "gratuit sur votre site")

Il suffit donc de positionner ton header du wrapper en relative

**ml1234** · 17/05/2009, 10h21

génial, ça marche, merci !

le code css modifié :

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
* {margin:0 ; padding:0} 
 
body {
	text-align: center;
	margin: 0px;
	padding: 0px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-style: normal;
	color: #FFFFFF;
	background-color: #460401;
}
#header h1 {
	font-variant: small-caps;
	color: #FF3300;
}
#wrapper {
	background-color: #000000;
	text-align: left;
	width: 900px;
	margin-top: 25px;
	margin-right: auto;
	margin-bottom: 25px;
	margin-left: auto;
}
#header {
	margin: 0px;
	font-size: 24px;
	padding: 0px;
	height: 276px;
	background-image: url(../images/bandeau_mondialpigeons.png);
	background-color: #FFFF00;
	width: 900px;
	position: relative;
}
#header_clock {
	width: 150px;
	padding: 0px;
	height: 80px;
	position: absolute;
	left: 750px;
	top: 130px;
}
#header_logo {
	width: 151px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
	height: 160px;
	position: absolute;
	top: 5px;
	left: 0px;
}
#header_animation {
	margin: 0px;
	padding: 0px;
	height: 99px;
	width: 134px;
	position: absolute;
	left: 400px;
	top: 100px;
}

finis les padding et margin partout dans le header.

ici, seul mon bandeau/header est en relatif.
de façon générale, est-il préférable de mettre le wrapper de 900px en relatif et au lieu de jouer avec des marges et padding et des float left/right pour les colonnes,... de tout positionner en absolu ?

merci
Marc

**Macmillenium** · 17/05/2009, 16h41

Envoyé par ml1234

de façon générale, est-il préférable de mettre le wrapper de 900px en relatif et au lieu de jouer avec des marges et padding et des float left/right pour les colonnes,... de tout positionner en absolu ?

Je ne saurais pas te dire lequel des choix est le plus pertinent pour toi, il est recommandé de garder le maximum des éléments dans le flux normal, ce que float permet.
Cela n'empêche que les positionnements fixed et absolute sont bien pratiques dans certains cas de figures (menu dynamique, superposition d'éléments etc.) mais posent énormément de contraintes pour gérer une mise en page complexe.

comment placer des images en absolu dans un header

Positionnement en CSS

Discussions similaires

Partager

Partager