Problème lors de zoom d'une page
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:
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:
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:
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.
