Problème lors de zoom d'une page [Résolu]

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

Kaamo · 30/11/2011, 09h06

Tu parles des éléments "input" ? a ma connaissance il n'est pas possible d'empêcher leur redimensionnement durant le zoom sur la page.

djrital42 · 06/12/2011, 15h47

Merci, du coup j'ai fais avec pour mon projet

29/11/2011, 10h15	#2
Ethyde Membre éclairé Inscription : février 2009 Messages : 308 Détails du profil Informations forums : Inscription : février 2009 Messages : 308 Points : 309 Points : 309	Bonjour, je risque un peu de passer pour une feignasse ( ) mais tu aurais pas plutôt un lien vers le site ?
	00

29/11/2011, 13h23	#3
djrital42 Futur Membre du Club Christophe Cayuela Étudiant Inscription : novembre 2011 Messages : 25 Détails du profil Informations personnelles : Nom : Christophe Cayuela Localisation : France, Loire (Rhône Alpes) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : novembre 2011 Messages : 25 Points : 16 Points : 16	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
	00

30/11/2011, 09h06	#4
Kaamo Membre éclairé Cyril Ingénieur développement logiciels Inscription : avril 2007 Messages : 205 Détails du profil Informations personnelles : Nom : Cyril Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Ingénieur développement logiciels Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : avril 2007 Messages : 205 Points : 367 Points : 367	Tu parles des éléments "input" ? a ma connaissance il n'est pas possible d'empêcher leur redimensionnement durant le zoom sur la page.
	00

06/12/2011, 15h47	#5
djrital42 Futur Membre du Club Christophe Cayuela Étudiant Inscription : novembre 2011 Messages : 25 Détails du profil Informations personnelles : Nom : Christophe Cayuela Localisation : France, Loire (Rhône Alpes) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : novembre 2011 Messages : 25 Points : 16 Points : 16	Merci, du coup j'ai fais avec pour mon projet
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email