Bonjour,
J’essaye désespérément de positionner et dimensionner mes éléments indépendamment de la taille de l'écran.

J'y arrive un peu, mais pas trop.

Voici la base du problème :
HTML
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
 
<!doctype html>
<html lang="fr">
 
	<head>
		<link rel="stylesheet" href="principale.css">
	</head>
 
	<body>
		<header>
 
			<div id="haut">
				<a href="lienfou.php"><div class="bouton">Clique ici</div></a>
				<a href="lienfou.php"><div class="bouton">Non ici</div></a>
				<a href="lienfou.php"><div class="bouton">Non ici</div></a>
 
				<a href="lienfou.php"><div class="bouton"></div>Non ici</a> <!--!damn!-->
			</div>
 
		</header>
 
		<div id="corpintro">
 
			<h1>TITRE</h1>
		<p>
			Lorem ipsum etc...
			<br />
			etc...
			<br/>
			etc...
		</p>
 
		</div>
		<!--Un bon gros espace sortis de nulepart-->
		<footer>
 
		<div id="bas">
			<a href="lienfou.php">Epona</a>
			<a href="lienfou.php">Ponyta</a>
			<a href="lienfou.php">Agro</a>
			<a href="lienfou.php">Poney perdu</a>
			<a href=".lienfou.php">Retrouvé</a>
		</div>
 
		</footer>
 
	</body>
 
</html>
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
 
@charset "UTF-8";
/*initialisation et prérequis____________________________________________________________*/
html /*ecran de 1920 px */
{ 
  margin:0;
  padding:0;
  background: url('../images/arriere_plan.jpg') repeat-y center top;
  background-size: 100%;
  overflow-y: scroll; /*force la scrollbar, passe le 1920 en 1903*/
}
body
{ 	
	position: relative;
	width:733px;/*la taille du fond d'ecran, mais pas bon*/
	margin-top: 13%;
	margin-left: auto; /*Ici c'est pas bon*/
	margin-right: auto;
	margin-bottom: 0;
}
/*centrage menu haut*/
#haut
{
	/*??*/
}
/*fin initialisation et prérequis_________________________________________________*/
/*menu haut_______________________________________________________________________*/
#haut a /*parametrage du texte*/
{
	text-decoration: none;
	color: #FFFFFF;
}
.bouton  /*4 bouttons légerement espacés*/ 
{
	float: left;
    width: 24.465240642%; /**/
    padding-top: 1%; /*permet le centrage vertical*/
    text-align: center;
 
	margin-right: 0.71301247733%; /*espace entre les bouttons*/
 
	background: linear-gradient( to top, rgba(255,255,255,0), rgba(61,61,61,65), rgba(25,25,25,100), rgba(61,61,61,35), rgba(255,255,255,0));
	border-radius: 10%;
}
#last .bouton /*bricolage de centrage dans l'entéte pour le dernier element*/
{
	margin-right: 0;
}
/*fin menu haut___________________________________________________________________*/
/*corp____________________________________________________________________________*/
#corpintro
{
	text-align: center;
	color: rgb(153,153,153);
	width: 100%;
	height: auto;
	background-color: rgb(00,00,51);
}
/*fin corp________________________________________________________________________*/
/*menu bas________________________________________________________________________*/
footer
{
 
}
#bas a
{
	background-color: rgb(187,187,187);
	float: left;
	width: 20%;
	text-align: center;
}
Je voudrais que ça ressemble à cela :
Nom : Schema_succin.png Affichages : 86 Taille : 29,8 Ko

Merci de votre aide