Mise en page et résolutions

**ludocorpe** · 22/10/2013, 21h42

Bonjours, je travaille actuellement sur un site pour mon bts et je plante au niveau de la mise en page du design, j'aimerais avoir quelque chose qui ressemble à ça :

le problème c'est que sur cette capture les éléments semblent bien placés mais si je change de résolution d'écran le contenu ne reste pas au centre ("fixé" au background) et le background continue d'emplir la page ce qui rend très....moche ^^'

voilà le html d'une des pages :

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
<!DOCTYPE HTML>
<html>
	<head>
		<title>Baine</title>
		<meta name="" content="" charset="utf-8">
		<link rel="stylesheet" href="baine.css" />
		<!-- [if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif] -->
	</head>
	<body>
	<div id="container">
		<header>
			<img id="banniere" src="../images/banniere.png" />
		</header>
		<nav>
			<ul>
				<li><div class="navig"><a href="../index.html"><img src="../images/accueil.png"/></a></div></li>				
				<li><a href="../personnages.html"><img src="../images/personnages.png" alt="Accueil"/></a></li>
				<li><a href="../lieux.html"><img src="../images/lieux.png" alt="Accueil"/></a></li>
				<li><a href="../histoire.html"><img src="../images/histoire.png" alt="Accueil"/></a></li>
				<li><a href="../connexion.html"><img src="../images/connexion.png" alt="Accueil"/></a></li>
			</ul>
		</nav>
		<section>
			<article>
				<h1 align="center">Baine Sabot-de-sang</h1>
				<h2 align="center">Grand chef des Taurens</h2>
				<img src="images/baine.png" id="baine" alt="Baine"/>
				<img src="images/bgbaine.png" id="bg" alt="bg"/>
			</article>
			<article>
				<p>
					blablblabla</p>
			</article>
		</section>
		<footer>
				<br />
				<br />
			<a href="#container"><p align="center">En haut</p></a>
		</footer>
	</div>
	</body>
</html>

et son CSS :

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
body
{
	background: url('../images/background2.png');
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	background-size: 100%;
	cursor: url('images/curseur.cur'), pointer;
}
 
a
{
	cursor: url('images/curseurlink.cur'), pointer;
}
 
 
#container {
  min-height:100%;
  width:922px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -10px;
}
 
 
 
 
#banniere
{
	  width:922px;
	  margin-left: 2px;
}
 
p, h1, h2, h3, a, dd, u
{
	font-family: trebuchet MS;
	color: #dd734a;
}
 
#logo
{
	vertical-align: middle;
	width: 20%;
	margin-top: 10px;
	margin-left: 5px;
 
}
 
nav
{
	width:922px;
	margin-top: -20px;
}
 
 nav ul
{
	list-style-type: none;
	height: 75px;
}
 
nav li
{
	display: inline-block;
	margin-right: 20px;	
	padding-top: 25px;
 
}
 
#banniere
{
	  width:922px;
	  margin-left: 2px;
}
 
h3
{
	color: #dd734a;
	margin-left: 100px;
}
 
 
h1
{
	font-weight: bold;
	font-size: 30px;
 
}
 
article
{
	margin-left: 25px;
	margin-right: 25px;
	padding: 17px;
}
 
#baine
{
	margin-left: 450px;
	margin-top: -50px;
}
#bg
{
	margin-top: -300px;
}

je sais qu'il y a plein de petites erreurs mais ce que je cherche surtout à corriger pour l'instant c'est la mise en page et si je pouvais réussir à avoir une base correcte pour agencer mes élments ça serait super =) merci !!

**sk8matt** · 23/10/2013, 09h53

Bonjour,

Pour résoudre ton problème je te conseille de faire d'approfondir le "Web responsive" (Ce qui va permettre de recalculer la taille de tes élément en fonction de ta résolution d’écran.

Et tu peux également utilisé les "media queries" qui vont te permettre de charger des feuilles de style différentes en fonction de la résolution de l'écran.

Ce lien peut être utile : Les fondamentaux du Responsive Web Design.

Mise en page et résolutions

HTML

Vue hybride

Discussions similaires

Partager

Partager