Problème lors de zoom d'une page

**djrital42** · 28/11/2011, 21h30

Bonjour à tous,

Voici mon problème, pour un projet web, je dois créer un site web donc c'est ce que j'ai fait. Or quand je zoom sur la page d'Accueil les élément sort de mon cadre principal comment faire pour que cela n'arrive pas.

Voici mon 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!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">
<head>
<title>Le site Web de Christophe CAYUELA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<link rel="stylesheet" href="Accueil.css" type="text/css" media="all" />
</head>
<body>
 
<div id="container">
<div id="content">
<div id="titre">
Le Site Web de Christophe CAYUELA
</div>
<div id="menu">
	<ul>
		<li> <a href="Page_accueil.html" >Accueil</a> </li> 
		<li> <a href="CV.html">CV</a> </li> 
		<li> <a href="Ressources.html" >Ressources</a> </li>
	</ul>
</div>
 
<div id="presentation">
	<h1>Bienvenue sur mon site</h1>
 
       <p>
           Bonjour et bienvenue sur mon site.<br />
           Ce site a pour objectif de me présenter afin de trouver un stage de fin d'études.
       </p>
 
       <h2>Qui suis-je ?</h2>
       <p>
          Je suis un éudiant en 2ème année à Telecom Saint-Etienne.
       </p>
</div>
 
<div id="formulaire">
<p class="contact">Contact :</p><br />
<form method="post" action="http://jeremy.lardon.free.fr/displayForm.php" >
	<p>
	 <label for="name"><span class="requis">*</span>NOM Prénom :</label> <input type="text" name="name" id="name"/>
	</p>
	 <p>
	 <label for="email"><span class="requis">*</span>Email :</label> <input type="text" name="email" id="email"/>
	</p>
	 <p>
	 <label for="message"> Message :</label> <textarea name="message" id="message" rows="10" cols="50"></textarea>
	</p>
	<p class="etoile" >Tous les champs précédés d'une étoile <span class="requis">*</span> sont obligatoires.</p>
	<p class="envoyer"><input type="submit" value="Envoyer" /></p>
</form>
</div>
 
</div>
<div id="pied">
Copyright CAYUELA Christophe
</div>
 
</div>
 
</body>
</html>

Voici Mon CSS style (qui gère mes 3 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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
@charset "ISO-8859-1";/* CSS Document */
html{
	color:#000;
	background:#242424;
	font-size:15px;
	margin:0;
	padding:0;
	height:100%;
}
html, body {
    height: 100%;
}
#container{
	position:relative;
	width:70%;
	min-height: 100%;
	margin:auto;
	margin-top:20px;
	margin-bottom:20px;
	background:#1a3562;
	border-width:1px;
	border-color:white;
	border-style:solid;
}
#content{
	margin-bottom:20px;
	min-height:70%;
}
#titre {
	text-align:center;
	font-weight:bold;
	font-size:35px;
	height:70px;
 
}
#menu{
	text-align:center;
	border-top-style:solid;
	border-bottom-style:solid;
	border-top-width:5px;
	border-bottom-width:5px;
	border-top-color:blue;
	border-bottom-color:blue;
	padding-bottom:5px;
	background:#4971b7;
}
#menu ul li{
	display:inline;
	word-spacing: 10px;
}
#menu ul li a{
	font-weight:bold;
	font-size:25px;
	color:yellow;
	text-decoration: none;
}
#menu ul li a:hover, #menu ul li a:focus, #menu ul li a:active {
	text-decoration: underline;
}
#pied  {
	position: absolute;
	bottom: 0px;	
	margin:auto;
	text-align:center;
	border-top-style:solid;
	border-top-width:5px;
	border-top-color:blue;
}

Voici mon CSS accueil :

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
@charset "ISO-8859-1";/* CSS Document */
 
 
.requis
{
	color:red
}
#formulaire {
	margin-left:100px;
	margin-bottom:50px;
}
.etoile {
	margin-left:105px;;
}
.envoyer {
	margin-left:438px;
}
#formulaire textarea
{
    vertical-align:top;
}
#formulaire  input{
	vertical-align:middle;
	text-align:left;
}
#formulaire label {
	display: block;
	width:105px;
	float: left;
}
.contact
{
	font-weight:bolder;
	font-size:25px;
	text-decoration:underline;
	margin-left:-100px;
}
#presentation {
	font-size:15px;
}

Et par la même occasion, je n'arrive plus à étendre la bordure du haut du pied de page à toute la page comme j'ai fait pour menu et en dessous du titre.

Merci d'avance pour le temps que vous prendrez pour lire et pour me répondre.

**Ethyde** · 29/11/2011, 10h15

Bonjour,

je risque un peu de passer pour une feignasse (

) mais tu aurais pas plutôt un lien vers le site ?

**djrital42** · 29/11/2011, 13h23

Non je n'ai pas de lien pour le site mais je l'ai upload en fichier Rar avec les autres pages du site web, si cela peut t'aider. J'ai fait des modifications depuis hier mais j'ai toujours ce problème de zoom.

Lien upload en MU