[RESOLU]Probleme lors d'un changement de résolution

Question

Killaman

4 Apr 2007 à 16:54

Bonjour,

Je suis en train de concevoir un site internet pour un lycée agricole.

J'ai eu pour contrainte de créer un menu en javascript.
J'ai inclus ce menu à la gauche d'un autre bloc.

Sous Firefox et Internet Explorer, en 1024*768, voici les résultats :

[img=http://img62.imageshack.us/img62/6246/mozillaqn9.th.jpg]FIREFOX 1024*768
[img=http://img363.imageshack.us/img363/6519/ieej8.th.jpg]IE 1024*768

Mais lorsque je le teste sur une resolution plus basse, voici le problème auquel je suis confronté :

[img=http://img62.imageshack.us/img62/3918/ie2tu8.th.jpg]

J'ai constaté qu'en enlevant toutes les barres inutiles (celle de MSN, google, etc...) le menu se plaçait normalement, mais je ne vais pas demander aux personnes qui se connectent de supprimer toutes leurs barres inutiles Smiley sweatdrop

Je vous joins aussi le contenu de mon fichier CSS, la partie concernant le menu dont je vous parle est menuv:

body
{  
	background: url("images/fond.jpg") no-repeat fixed;
}

#page{
	width: 85%;
	margin: auto;
	border: 4px solid olive;
	border-style: outset;
	background : url("images/dégradé.jpg");
}
	

dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-weight: bold;
}

/* L'en-tête */

#en_tete
{
	width: 100%;
	height: 100px;
	background: url("images/banniere.jpg") no-repeat right;
	margin-bottom: 2%;
}


/* Le menu horizontal */

#menuh a {
	width: 20%; 
	height: 50px;
	float: left;
	display:block;
	text-align: center;
	text-decoration: none;
}


/* Le menu vertical*/

#menuv {
	margin-top: 5%;
	position: absolute;
	left: 8.5%;
	width: 12%;
	padding-top: 5%;
}

#menuv dt {
	cursor: pointer;
	line-height: 150%;
	text-align : middle;
	text-align: center;
}

#menuv dd {
	position: absolute;
	z-index: 100;
	left: 100%;
	margin-top: -18%;
	margin-left : -20%;
	width: 140%;
	border: 1px solid gray;	
}

#menuv ul {
	padding: 2px;
}

#menuv li {
	text-align: center;
	font-size: 85%;
	height: 2%;
	line-height: 150%;
}

#menuv li a, #menuv dt a {
	color: #000;
	text-decoration: none;
	display: block;
}


/* Le corps de la page */

#corps
{
	margin: 9% 0 1.5% 15%;
	padding: 0.5%; 
	border: 1px solid black;
}

#corps h1
{
   color: #FF0000;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
   height: 30px;
   background-image: url("images/titre.png");
   background-repeat: no-repeat;
   padding-left: 30px;
   color: #FF0000;
   text-align: left;
}


/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
	padding: 2%;
	text-align: center;
	color: #FF0000;
	border: 1px solid black;
}

J'ai aussi un CSS pour l'utilisation d'un navigateur IE :

#menuv {
	position: absolute;
	top: 35%;
	left: 8.5%;
	width: 12%;
	padding-top: 5%;
}

#corps
{
	margin: 0 0 1.5% 15%;
	padding: 0.5%; 
	border: 1px solid black;
}

Enfin, voici la page HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>Lycée Saint Joseph de Cluny</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
		
		<!-- Commentaire conditionnel -->
		
		<!--[if IE]>
			<link rel="stylesheet" type="text/css" title="CSS IE" href="IE.css"/>
		 <![endif]-->
	  
		<script type="text/javascript">
			window.onload=montre;
			function montre(id) {
				var d = document.getElementById(id);
				for (var i = 1; i<=10; i++) {
					if (document.getElementById('smenu'+i)) {
						document.getElementById('smenu'+i).style.display='none';
					}
				}
				if (d) {
					d.style.display='block';
				}
			}
		</script>
	</head>

	<body>
		<div id="page">

			<!-- L'en-tête -->

			<div id="en_tete">
	           <!-- Le contenu est compris dans le CSS, qui est plus simple à modifier que le fichier index -->
			</div>
		   
			<!-- Le menu horizontal-->
			<div id="menuh">
				<dl>
					<dt><a href="Calendrier.php"><img src="images/calendrier.png" border=0 alt ="Calendrier" title="Calendrier"></a></dt>
					<dt><a href="Administration.php"><img src="images/Hotesse.gif" border=0 alt="Administration" title="Administration"></a></dt>
					<dt><a href="NousEcrire.php"><img src="images/arobas.gif" border=0 alt="Nous écrire" title="Nous écrire"></a></dt>
					<dt><a href="Acces.php"><img src="images/Plan.gif" border=0 alt="Accès au lycée" title="Accès au lycée"></a></dt>
					<dt><a href="AdminPage.php"><img src="images/outils.png" border=0 alt="Administration du site" title="Administration du site"></a></dt>
				</dl>
			</div>

	       <!-- Le menu vertical -->

			<div id="menuv">
				<dl>
					<dt><a href="index.html">Accueil</a></dt>
				
					<dt><a href="Nouveautés.php">Nouveautés</a></dt>
				
					<dt><a href="Tarifs.php">Tarifs</a></dt>
					
					<dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"><a href="contact.php">Contacts</dt>
						<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
							<ul>
								<li><a href="Administration.php">Administration</a></li>
								<li><a href="NousEcrire.php">Nous écrire</a></li>
								<li><a href="Acces.php">Accès au lycée</a></li>
								<li><a href="Transport.php">Transports</a></li>
								<li><a href="Partenaires.php">Entreprises partenaires</a></li>
								<li><a href="Anciens.php">Anciens élèves</a></li>
							</ul>

						</dd>	

					<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"><a href="formations.php">Formations</a></dt>
						<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
							<ul>
								<li><a href="formations.php#4eme">4ème agricole</a></li>
								<li><a href="formations.php#3eme">3ème agricole</a></li>
								<li><a href="formations.php#Vente">BEPA Vente de produits frais</a></li>
								<li><a href="formations.php#Personnes">BEPA Service aux personnes
								</a></li>
								<li><a href="formations.php#Rural">Bac Pro Service en milieu rural</a></li>
							</ul>
						</dd>

					<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();"><a href="Présentation">Vie au lycée</a></dt>
						<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
							<ul>
								<li><a href="Calendrier.php">Calendrier</a></li>
								<li><a href="CDI.php">C.D.I</a></li>
								<li><a href="Reglement.php">Règlement intérieur</a></li>
							</ul>
						</dd>
					
					<dt><a href="WriteWM.php">Ecrire au webmaster</a></dt>
				</dl>
			</div>

	       <!-- Le corps -->

	       <div id="corps">
	           <h1>CONTENU DU SITE</h1>
	       
	           <p>
	               <h2>QUOI ?</h2>
	               Site du Lycée Saint Joseph de Cluny
	           </p>
	       
	           <h2>A QUI ?</h2>   
	           <p>
				   POUR TOUS LES JEUNES SOUHAITANT INTEGRER UN LYCEE 
	           </p>
	       </div>

	       <!-- Le pied de page -->

	       <div id="pied_de_page">
	           <p>Copyright "Guillaume" 2007, tous droits réservés</p>
	       </div>
		</div>
   </body>
</html>

Je pense que l'erreur vient de la position absolute du menuv, mais sans ça, le corps se place sous le menu...

Quelqu'un pourrait-il m'aider, s'il vous plait ?

Cordialement,
Guillaume
Modifié par Killaman (04 Apr 2007 - 16:56)

ghost

5 Apr 2007 à 00:53

Bonjour,

En lui même, le positionnement absolute ne pose pas vraiment de problème, je pense que tu ne devais pas positionner (top, left ...) tes blocs en absolute en % et que les variations viennent de là. Préfére les px.

D'une manière générale sauf pour des blocs conteneurs, type un bloc englobant toute ta page, évite les dimensions en %, c'est toujours (souvent) casse gueule.

Killaman

5 Apr 2007 à 09:52

Je sais pas, c'est mon prof de web qui nous a conseillé de tout mettre en % pour l'adaptabilité... Il nous a dit que mettre en em aussi était très pratique, mais ça m'embete de rechercher le nombre d'em à chaque fois...

Et si je regle le postionnement en pixel, il n'y a pas un risque qu'il se positionne mal en cas de changement de résolution ?

Et pourquoi lorsque je supprime ces fameuses barres inutiles (oui oui, vous les connaissez toutes...) le menu se décale ? Je croyais que l'absolute avait pour coordonnée (0,0) au niveau du coin supérieur gauche de la fenêtre d'affichage (enfin, celle où on voit le site, en dessous des barres quoi...)

Donc, même si je touche au barres, le menu ne devrait pas changer ?!?

Raphael

Administrateur

5 Apr 2007 à 10:02

Killaman a écrit :
Je sais pas, c'est mon prof de web qui nous a conseillé de tout mettre en % pour l'adaptabilité... Il nous a dit que mettre en em aussi était très pratique, mais ça m'embete de rechercher le nombre d'em à chaque fois...

Hello,

Tout mettre en pourcentage n'est pas une bonne idée en effet.
L'important est que le la page, dans sa globalite (et non chaque bloc) puisse s'adapter à toutes les résolutions.

Petit exemple, le site dédié au livre CSS2 : le design s'adapte sans problème à toutes les résolutions et il est possible d'agrandir sans problème la taille du texte.
Pourtant en y regardant de plus près, aucun bloc n'est en pourcentage :
- les blocs latéraux (menu gauche et post-it droite) sont de taille fixe en px et collés aux bords
- la partie centrale est fluide : elle n'a aucune largeur définie donc occupe automatiquement toute la place restante.

Je propose de relire le tutoriel "faire un site pour toutes les résolutions".

Killaman

5 Apr 2007 à 11:09

D'accord, je vais y jeter un coup d'oeil.

Vraiment merci pour votre aide, et aussi pour ce site qui est très pratique pour qui souhaite programmer en toute simplicité !

Guillaume
Modifié par Killaman (05 Apr 2007 - 11:09)

Sujet clos

CSS et mise en forme, CSS3

[RESOLU]Probleme lors d'un changement de résolution