Bannière à hauteur proportionnelle

**Pixelon** · 07/08/2015, 22h09

Bonjour à tous !

Je suis sur un projet en html5 css3 depuis quelques temps déjà et je fais face à un problème que je n'arrive pas à résoudre :
Je veux que la bannière de mon site, qui est une image de 2000x500px (plus large que la majorité des écrans pour éviter qu'elle s'étire), prenne toute la largeur de la page, mais, que sa hauteur, augmente en conséquence, c'est à dire que l'image conserve tout de même son ratio original, c'est à dire 4:1.

Voici le code html correspondant :

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
<html>
	<head>
		<meta charset="utf-8" />
		<title>Bordershield</title>
		<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
		<link rel="icon" type="image/x-icon" href="favicon.ico" />
	</head>
	<body>
	<center>
		<header>
		<a href=page_daccueil.html style="display:block;width:100%;height:100%;"/>
		</header>
		<div id="bras" >
			<div id="menu" >
				<p><FONT face="Tahoma">
				<a href=page_daccueil.html class="surlignage"><FONT color="white">Accueil</FONT></a><br/>
				<a href=Synopsis.html class="surlignage"><FONT color="white">Synopsis</FONT></a><br/>
				<a href=Personnages.html class="surlignage"><FONT color="white">Personnages</FONT></a><br/>
				<a href=Monstres.html class="surlignage"><FONT color="white">Monstres</FONT></a><br/>
				<a href=Carte_du_monde.html class="surlignage"><FONT color="white">Carte du monde</FONT></a><br/>
				<a href=Histoire.html class="surlignage"><FONT color="white">L'Histoire</FONT></a><br/>
				<a href=Auteurs.html class="surlignage"><FONT color="white">Auteurs</FONT></a><br/>
				</FONT></p>
			</div>
			<div id="compteur" >
				<img src="http://services.supportduweb.com/cpt_global/91594-11.png" alt="Compteur Global" /></a>
			</div>
		</div>
		<div id="jambe">
			<div id="contenu">
				<center>
				<p><FONT size=4; face="Tahoma"; color=#E3C116>
				<FONT size=6><h1>Accueil</h1></FONT>
				Bordershield est un Roman de Daelia, en coopération avec Pixelon.<br/>
				Il est actuellement en cours, et nous divulguerons les informations à son propos au fur et à mesure de son écriture.<br/>
				</FONT></p>
				</center>
			</div>
			<div id="piedpage">
				<span style="background:rgba(120,120,120,0.7)"><FONT color="white">
				Cookie corporation
				</span></FONT>
			</div>
		</div>
	</center>
	</body>
</html>

et 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
76
77
html { 
  margin:0;
  padding:0;
  background: url(fond_body.jpg) no-repeat center fixed;
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}
body { 
	margin:auto;
	overflow:auto;
	max-width:1366px;
	min-width:900px;
	}
 
header {
	margin-left:20px;
	background:url(Banniere_site.jpg) no-repeat;
	background-size: 100% 100%;
	height:350px;
	overflow:auto;
	box-shadow: 3px 3px 3px black;
	}
 
a.surlignage:link {text-decoration:none;}
a.surlignage:visited {text-decoration:none;}
a.surlignage:hover {text-decoration:underline;}
 
a.pages{color:#E3C116;}
 
img.contour {border:2px solid black;}
 
#piedpage, #compteur, #partiegauche, #bras, #menu , header {
	margin:10px;
	}
 
/*Partie de gauche*/
#bras {
	width:200px;
	float:left;
	}
#menu {
	text-align:left;
	padding:10px;
	padding-left:30px;
	margin-top:0px;
	border:2px solid black;
	background-color: rgba(5,45,76,0.8);
	line-height:25px;
	box-shadow: 3px 3px 3px black;
	}
#compteur {
	margin-top:20px;
	padding:10px;
	border:2px solid black;
	background-color: rgba(5,45,76,0.8);
	box-shadow: 3px 3px 3px black;
	}
/*Partie centrale*/
#jambe {
	overflow:auto;
	}
#contenu {
	padding:50px;
	margin-right:10px;
	margin-top:10px;
	min-height:134px;
	text-align:left;
	line-height:20px;
	border:2px solid black;
	background-color: rgba(5,45,76,0.8);
	box-shadow: 3px 3px 3px black;
	}
#piedpage {
	margin-left:0px;
	text-align:center;
	overflow:auto;
	}

Dans le code ci-dessus, le header s'adapte déjà à la largeur de la page, mais la hauteur est fixe.
J'ai déjà pensé à mettre une hauteur en pourcentages pour donner l'impression que le ratio est conservé, mais le header devient alors invisible. (je pense qu'il prends la hauteur de 0px)
Voilà, j'ai pas mal essayé, de plusieurs façons, et je n'y parviens toujours pas, maintenant si quelqu'un de plus expérimenté que moi pourrait m'aider sans trop de difficultés, je lui en serai fortement reconnaissant !

Merci d'avance à ceux qui s'y pencheront !

Invité · 10/08/2015, 10h51

Bonjour,

Code html :

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

1
2
3
		<header>
		<a href=page_daccueil.html style="display:block;width:100%;height:100%;"/>
		</header>

Où as-tu pu aller pêcher cette syntaxe pour une balise <a> ?

1/ Pour ta question : une solution simple consiste à créer une image .png transparente (vide.png), aux dimensions de ta bannière.
Puis :

Code html :

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

1
2
3
		<header>
		<a href="page_daccueil.html" style="display:block;width:100%;"><img src="./vide.png" alt="" /></a>
		</header>

Sinon, mets cette bannière directement dans le code (à la place de vide.png), puisque, apparemment, il n'y a rien d'autre dans le <header> !

2/ N'oublie pas les double-quotes :

Code html :

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

<a href="page_daccueil.html" .....>

3/ Pour ton MENU :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
		<div id="menu" >
				<p><FONT face="Tahoma">
				<a href=page_daccueil.html class="surlignage"><FONT color="white">Accueil</FONT></a><br/>
				<a href=Synopsis.html class="surlignage"><FONT color="white">Synopsis</FONT></a><br/>
				<a href=Personnages.html class="surlignage"><FONT color="white">Personnages</FONT></a><br/>
				<a href=Monstres.html class="surlignage"><FONT color="white">Monstres</FONT></a><br/>
				<a href=Carte_du_monde.html class="surlignage"><FONT color="white">Carte du monde</FONT></a><br/>
				<a href=Histoire.html class="surlignage"><FONT color="white">L'Histoire</FONT></a><br/>
				<a href=Auteurs.html class="surlignage"><FONT color="white">Auteurs</FONT></a><br/>
				</FONT></p>
			</div>

<FONT face="Tahoma">, <FONT color="white"> sont obsolètes ! On peut facilement définir la font et couleur en CSS.
en HTML5, on utilise la balise <nav> pour les menus, ainsi que les balises de "listes à puces" <ul><li>.
class="surlignage" n'est pas utile : on peut définir le style des balises <a> du menu avec #menu li a {...} #menu li a:hover {...}.

Ce qui donne :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
			<nav id="menu" >
				<ul>
					<li><a href="page_daccueil.html">Accueil</a></li>
					<li><a href="Synopsis.html">Synopsis</a>
					<li><a href="Personnages.html">Personnages</a></li>
					<li><a href="Monstres.html">Monstres</a></li>
					<li><a href="Carte_du_monde.html">Carte du monde</a></li>
					<li><a href="Histoire.html">L'Histoire</a></li>
					<li><a href="Auteurs.html">Auteurs</a></li>
				</ul>
			</nav>

Bannière à hauteur proportionnelle

HTML

Vue hybride

Discussions similaires

Partager

Partager