Mise en page et résolutions
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 :
http://img15.hostingpics.net/thumbs/...4Sanstitre.png
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:
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:
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 !!
