Aligner une image composée

**Deallyra** · 29/06/2007, 18h54

Bonjour,

J'ai un petit soucis... Un dernier petit soucis avant de mettre en ligne le site.
Un dessin vaut mieux qu'une longue explication...

et voilà le code HTML épuré:

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
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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang = "fr">
	<head> <!--Début En-tête-->
		<title>BORG___Le BTS en Alternance
		</title>
		<link rel = "stylesheet" type = "text/css" href = "Style/Feuille_De_Style.css" /> <!--Appel de la feuille de style-->
		<link rel = "shortcut icon" href = "Image/favicon.png"> <!--Lien pour Favicon-->
		<script type = "text/javascript" src = "Script/Script.js"></script> <!--Appel à la feuille des Scripts JS-->
		<meta http-equiv = "content-type" content = "text/html; charset=ISO-8559-1" /> <!--Rendre de manière lisible toute les caractères accentués et spéciaux-->
		<!--[if IE]>
			<style type="text/css"> 
				#banniere, #banniere2
				{
					float : left;
				}
			</style>
		<![endif]-->
	</head> <!--Fin En-tête-->
	<body class = "Public" onload = "fixIE()"> <!--Début Corps de la page-->
		<div id = "conteneur"> <!--Début du conteneur-->
			<div id = "top_header">
				<img src = "Image/title.gif" alt "Prenez l'espace d'un instant pour cibler vos projets d'entreprise" />
			</div>
			<div id = "header"> <!--Début de l'en-tête-->
				<div id = "banniere">  
					<div style = "float : left;">
						<a href = "index.php">
						<img src = "Image/Borg_Center.gif" alt = "Borg Center" />
						</a>
					</div>
					<div align = "center">
						<a href = "V_Presentation.php">
							<img id = "banner1" src = "Image/banner1.gif" alt = "Présentation de BORG CENTER" />
						</a>
					</div>
					<div align = "right">
						<a href = "V_Presentation.php">
							<img id = "banner2" src = "Image/banner2.gif" alt = "Présentation de BORG CENTER" align = "center"/>
						</a>
						<a href = "V_Contact.php">
							<img id = "banner3" src = "Image/banner3.gif" alt = "Contact" />
						</a>
					</div>
				</div> <!--Fin du logo-->
			</div> <!--Fin de l'en-tête-->
		</div>
	</body>
</html>

et voici le 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
75
 
***************************************
			All
***************************************/
 
* 
{
   margin : 0;
   padding : 0;
}
 
/***************************************
			Body
***************************************/
 
body  
{
	width : 100%;
	height : 100%;
	background-color : #0081FD;
	font : 100% Verdana, Arial, Helvetica, sans-serif;
	text-align : center;
	color : #000000;
}
 
/***************************************
			Container
***************************************/
 
#conteneur 
{
	background-color : #FFFFFF;
	position : absolute;
	top : 1% ;
	bottom : 1%;
	left : 3%;
	right : 3%;
	width : 94%;
	text-align : justify;
}
 
/***************************************
			Header
***************************************/
 
#conteneur #top_header 
{ 
	text-align : center;
}
 
#banniere img
{
	display : block;
}
 
 
#banner1
{
	margin-top : 0px;
	margin-left : 0px;
}
 
#banner2
{	
	float : left;
	margin-top : 0px;
	margin-left : 0px;
}
 
#banner3
{
	float : left;
	margin-top : 0px;
	margin-left : 0px; 
}

Je voudrais que l'image composée soit centrée... Mais je n'y arrive pas o_O
Normalement je devais upper le site ce soir mais mon maître de stage m'a remit cette image à la dernière minute... pensant que c'était faisable en un claquement de doigts...

Je vous remercie de toute aide que vous pourrez m'apporter.

Images :

=>banner1

=>banner2

=>banner3

=>Borg_Center

=>title

**Bisûnûrs** · 29/06/2007, 19h52

Tu connais la taille de tes images ou pas ?

Si oui englobe-les toutes dans un élément de type block qui prend pour largeur la largeur de ta bannière 1 (la plus grande).

**Deallyra** · 29/06/2007, 19h57

En effet je connais leur tailles...
ok, je met tout dans un div diplay:block; et je donne la taille de la somme de mes images...
je teste de suite

**Deallyra** · 29/06/2007, 20h11

je n'arrive pas à centrer le block... en fait, j'ai déjà eu ce problème lors de mes test.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
				<div id = "banniere">  
					<div>
						<a href = "index.php">
							<img src = "Image/Borg_Center.gif" alt = "Borg Center" border = "0" />
						</a>
					</div>
					<div id = "banner">
						<img id = "banner1" src = "Image/banner1.gif" alt "Présentation" />
						<img id = "banner2" src = "Image/banner2.gif" alt "Présentation" />
						<img id = "banner3" src = "Image/banner3.gif" alt "Contact" />
					</div>
				</div> <!--Fin du logo-->

et j'ai en 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
 
#conteneur #header #banniere div
{
	float : left;
}
 
#conteneur #header #banner
{
	display : block;
	width : 600px;
	height : 116px;
}
 
#conteneur #header #banner #banner1
{
	margin-top : 0px;
	margin-left : 0px;
}
 
#conteneur #header #banner #banner2
{	
	float : left;
	margin-top : -3px;
	margin-left : 0px;
}
 
#conteneur #header #banner #banner3
{
	float : left;
	margin-top : -2px;
	margin-left : 2px;
}

**Bisûnûrs** · 29/06/2007, 20h15

J'ai oublié de te préciser de mettre

Code :

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

margin:0 auto;

sur l'élément block en question ..

Code :

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

1
2
3
4
5
6
#conteneur #header #banner
{
	margin : 0 auto;
	width : 600px;
	height : 116px;
}

**Deallyra** · 29/06/2007, 21h06

Merci bisûnûrs mais mon block d'image n'est pas centré...
CSS Actuel

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
 
#conteneur #header #banniere div
{
	float : left;
}
 
#conteneur #header #banner
{
	display : block;
	margin : 0 auto;
	width : 600px;
	height : 116px;
}
 
#conteneur #header #banner #banner1
{
	margin-top : 0px;
	margin-left : 0px;
}
 
#conteneur #header #banner #banner2
{	
	float : left;
	margin-top : -3px;
	margin-left : 0px;
}
 
#conteneur #header #banner #banner3
{
	float : left;
	margin-top : -2px;
	margin-left : 2px;
}

Aligner une image composée

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager