Position & Résolution d'écran

Question

th3rid3r

23 Feb 2010 à 15:45

Bonjour à tous !

J'ai quelques soucis sur l'adaptation de mes sites avec les différentes résolutions d'écran présentes sur le marché.
Lors d'un zoom sur mes pages web, le contenu part en "vrille".
je vous présente ci dessous mon code HTML d'un site que je débute :

--------------------------------------------------------------------------


<!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>Les Savoyards Réunis</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Les Savoyards Réunis" href="design.css" />
   </head>
   
   
	<body>
	
	

	
	<div id="menu">
			<div class="zoom">
  	<a href="Acceuil.html"> <img src="SR_photo/aspi.jpg" ></a> <br/><br/>
	<a href="Acceuil.html"> <img src="SR_photo/vitre.jpg" ></a> <br/><br/>
	<a href="Acceuil.html"> <img src="SR_photo/tag.jpg" ></a> <br/><br/>
	<a href="Acceuil.html"> <img src="SR_photo/pigeon.jpg" ></a> <br/><br/>
	<a href="Acceuil.html"> <img src="SR_photo/cordiste.jpg" ></a> <br/><br/>
	<a href="Acceuil.html"> <img src="SR_photo/montagne.jpg" ></a> <br/><br/>
			</div>	
	</div>
	
	</body>
	
	
</html>

----------------------------------------------------------------------

Puis son CSS :


body
{
	background-color: black; 
	background-image: url("SR_photo/wall/wallpaper3.jpg");
	font-size: 20px;
   	background-repeat: no-repeat;
	widh : 100%;
	height: 100%;
	margin: 0 auto;
	padding: 0;





}

#menu

{
	
	position: fixe;
	margin-left: 10%;

	
}


.zoom 
{
  height:400px;
}

.zoom p 
{
  text-align:center;
}

.zoom img 
{
  width:60px;
  height:60px;
}

.zoom img:hover 
{
  width:80px;
  height:80px;
  border : 3px solid orange;
}

---------------------------------------------------------------------

J'ai déjà pu voir que ce sujet à été traité plusieurs fois, mais malgrés de nombreuses recherche et copier coller et des heures de réfléxion, sa ne marche toujours pas, j'ai mon menu qui part n'importe ou lors du zoom ainsi que mon fond d'écran non centré.

J'ai aussi un site terminé, que je viens de modifier avec que des % sur toutes les mesures et c'est pire que la mesure avec les PX!

Merci de votre aide.

Bonne journée
Modifié par th3rid3r (23 Feb 2010 - 19:31)

Corinne S.

23 Feb 2010 à 16:33

Bonjour et bienvenue parmi nous Smiley smile

En tant que modératrice, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

Corinne S.

23 Feb 2010 à 16:40

Quelques remarques :
- je conseillerais l'emploi d'une liste pour la mise en page du menu plutôt qu'une suite de <br />.
- est-il normal que tous les liens mènent à la même page ?
- l'image étant porteuse de sens, il faut penser à indiquer vers quelle page mène le lien qui la contient. Sans cela, si jamais les images sont inaccessibles, le menu est inutilisable.

<ul id="menu">
  <li><a href="#"> <img src="SR_photo/aspi.jpg" alt="ici la cible du lien" /></a></li>
  <li><a href="#"> <img src="SR_photo/vitre.jpg" alt="ici la cible du lien"></a></li>
  <li><a href="#"> <img src="SR_photo/tag.jpg" alt="ici la cible du lien"></a></li>
  <li><a href="#"> <img src="SR_photo/pigeon.jpg" alt="ici la cible du lien"></a></li>
  <li><a href="#"> <img src="SR_photo/cordiste.jpg" alt="ici la cible du lien"></a></li>
  <li><a href="#"> <img src="SR_photo/montagne.jpg" alt="ici la cible du lien"></a></li>
</ul>

th3rid3r

23 Feb 2010 à 19:39

Corinne S. a écrit :
Quelques remarques :
- je conseillerais l'emploi d'une liste pour la mise en page du menu plutôt qu'une suite de <br />.
- est-il normal que tous les liens mènent à la même page ?
- l'image étant porteuse de sens, il faut penser à indiquer vers quelle page mène le lien qui la contient. Sans cela, si jamais les images sont inaccessibles, le menu est inutilisable.
<ul id="menu">
  <li><a href="#"> <img src="SR_photo/aspi.jpg" alt="ici la cible du lien" /></a></li>
  <li><a href="#"> <img src="SR_photo/vitre.jpg" alt="ici la cible du lien"></a></li>
  <li><a href="#"> <img src="SR_photo/tag.jpg" alt="ici la cible du lien"></a></li>
  <li><a href="#"> <img src="SR_photo/pigeon.jpg" alt="ici la cible du lien"></a></li>
  <li><a href="#"> <img src="SR_photo/cordiste.jpg" alt="ici la cible du lien"></a></li>
  <li><a href="#"> <img src="SR_photo/montagne.jpg" alt="ici la cible du lien"></a></li>
</ul>

Bonsoir,

Tout d'abord veuillez m'excuser pour ma mise en page car, je ne suis pas passé par la case "les règles du forum" ni les autres comme "nouveau sur le forum" etc, parcourant tout un tas de forum je vous avourais que lire cela à chaque fois, faut avoir la foie Smiley ravi

mais je suis en tord donc excusez moi ! je me corrigerais.

Sinon oui c'est normal que toutes les pages aillent vers la même page pour cause, je ne m'en occupe pas pour le moment. Je me concentre juste sur le problème de résolution qui m'ennuie pas mal.

Merci de votre aide.

Cordialement

hurluberlu

24 Feb 2010 à 14:37

Bonjour à tous, voilà, je suis entrain de créer mon portfolio, et là question de résolution est primordiale pour moi, néanmoins, je ne suis que novice en la matière et c'est la raison pour laquelle je vous demande de l'aide.
J'ai consulté pas mal de forums, sans pour autant poster de message mais juste pour voir si des gens avaint fonctionné comme moi, ma recherche n'ayant pas abouti..
Je voudrais donc tout simplement que mon site s'affiche correctement en fonction de la résoluton de l'utilisateur. J'ai vaguement compris qu'il fallait fonctionner avec des pourcentages en Largeur et hauteur, mais je suis un peu peaumé pour tout vous avouez. Je suis donc ici pour vous demandez votre avis, et, savoir, si je continue de créer mes pages ou si je recommence tout de suite, ce problème me turlupine, j'arrive à me coucher à 6h du mat sans rien avoir trouvé de ma journée... c'est dur !!
J'ai crer mon site avec des "div PA", certains m'ont dit d'utiliser des tableaux et d'insérer mes images ou texte dedans, et d'autres m'ont dit que celà n'aboutirait pas du tout, d'autres m'ont encore dit de garder mon code et d'insérer un javascript pour grandir les cellules en fonction de la résolution = je suis perdu !! Smiley decu

Je vous donne donc le code de mon acceuil, sachant que les autres pages de mon site sont construites de la même façon.
J'éspère que vous comprendrez mon problème, je vous remercie d'avance
Cordialement,
Hurluberlu.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>hurluberlu</title>

<style type="text/css">

</style>
</head>

<body>
<div align="center">
<div id="apDiv1"></div>
<div id="apDiv2"><a href="images/fourmi.png" rel="shadowbox" title="My Image"><img src="images/fourmiaccueil.jpg" width="1280" height="450" border="0"/></a></div>
<div id="apDiv3"><img src="images/hurluberlu.png" width="341" height="59" border="0"/></div>
<div id="apDiv4">hurluberlu<br />
Arthur Brucher
<br />
graphiste/webdesigner<br />
114, rue Bugeaud<br />
69006 Lyon<br />
France
</div>
<div id="apDiv5">T : +33(0)6 62 58 61 03<br />
E : <a class="lightGray" href="mailto:arthurbrucher@gmail.com" onFocus="this.blur()">arthurbrucher@gmail.com</a></div>
<div id="apDiv11"></div>
</div>
<div id="apDiv6"><a href="apropos.html" onFocus="this.blur()">A propos</a></div>
<div id="apDiv7"><a href="illustration.html" onFocus="this.blur()">Illustration</a></div>
<div id="apDiv8"><a href="print.html" onFocus="this.blur()">Print</a></div>
<div id="apDiv9"><a href="webdesign.html" onFocus="this.blur()">Webdesign</a></div>
<div id="apDiv10"><a href="http://www.pasdetalent.com" onFocus="this.blur()" target="_blank">Blog</a></div>
</div>
</body>
</html>

Heyoan

24 Feb 2010 à 14:59

Salut hurluberlu,

pour commencer merci de créer ton propre sujet.

Et au passage merci également de tenir compte de ce post de Corinne lorsque tu le feras. Smiley murf

hurluberlu

24 Feb 2010 à 15:10

oui désolé, je viens de m'en rendre compte, je créer un nouveau sujet.
Mes excuses, mais je suis debout depuis hier 12H, et je suis pressé de trouver une solution !!

th3rid3r

25 Feb 2010 à 23:18

Personne donc pour aider nos deux petites âmes perdu ? Smiley lol

EDIT : vu une réponse sur le topic de Hurluberlu
Modifié par th3rid3r (25 Feb 2010 - 23:22)

Sujet clos

Questions générales et questions de débutants

Position & Résolution d'écran