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 !!

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">
<!--
#apDiv1 {
	position:absolute;
	left:0px;
	top:0px;
	width:1280px;
	height:150px;
	z-index:1;
}
#apDiv2 {
	position:absolute;
	left:0px;
	top:150px;
	width:1280px;
	height:450px;
	z-index:2;
	background-color: #333333;
}
#apDiv3 {
	position:absolute;
	left:215px;
	top:38px;
	width:341px;
	height:59px;
	z-index:3;
}
#apDiv4 {
	position:absolute;
	left:680px;
	top:39px;
	width:190px;
	height:83px;
	z-index:4;
}
#apDiv5 {
	position:absolute;
	left:905px;
	top:39px;
	width:170px;
	height:35px;
	z-index:5;
}
#apDiv6 {
	position:absolute;
	left:224px;
	top:108px;
	width:60px;
	height:15px;
	z-index:6;
	border:0;
}
#apDiv7 {
	position:absolute;
	left:300px;
	top:108px;
	width:60px;
	height:15px;
	z-index:7;
}
#apDiv8 {
	position:absolute;
	left:386px;
	top:108px;
	width:60px;
	height:15px;
	z-index:8;
}
#apDiv9 {
	position:absolute;
	left:441px;
	top:108px;
	width:62px;
	height:15px;
	z-index:9;
}
#apDiv10 {
	position:absolute;
	left:528px;
	top:108px;
	width:36px;
	height:15px;
	z-index:10;
}
body,td,th {
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
}
a:link {
	color: #000;
	text-decoration: none;
}
a:visited {
	color: #000;
	text-decoration: none;
}
a:hover {
	color: #CCC;
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#apDiv4 {
	color: #C0C0C0;
}
#apDiv5 {
	color: #C0C0C0;
}
#apDiv11 {
	position:absolute;
	left:0px;
	top:0px;
	width:1280px;
	height:600px;
	z-index:0;
}
-->
</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>


Merci ! Smiley smile
Bonjour,

Très rapidement.

Les tableaux sont fait pour afficher des données tabulaires et non pour la mise en page.

Pour avoir un site correct quelque soit la résolution tu as 2 solutions :

- Fixer la largeur de ton site ( généralement pas plus de 995px environ )

- Faire un site dit "fluide" qui s'adapte a la largeur de l'écran

Le 2ème étant plus compliqué à mettre en place.

Dans les 2 cas tu as à ta disposition les gabarits HTML/CSS de la section Outils du site qui pourront te donner des pistes de départ.
Merci pour ta réponse rapide, mais je comprends pas bien le fait de fixer la largeur à 995 px ! Si je visite mon site sur un écran 21 pouces, le site ne prendra pas l'écran en totalité !
Bah 995px car la résolution minimal admise est 1024 en largeur ( faut compter la scrollbar, etc ).

De ce que j'ai compris de ta question, tu veux pouvoir "maitriser" la résolution. Et pour ça il y a pas 36 façon, soit tu fixe une largeur (comme Alsacreations par exemple), soit tu fait un design fluide qui peut s'etirer.

Regarde les gabarits que j'ai mis en lien et tu comprendras mon propos.
Modifié par Andromede (24 Feb 2010 - 15:49)
Bonjour,
hurluberlu a écrit :
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 !!
Tu peux oublier toutes ces bêtises, ce ne sont que des bidouille qui alourdiront ta page.

Pour ce qui et de design à largeur fixe, l'intérêt est qu'un site s'affichant sur l'intégralité d'un écran de 1600px de large rend très difficile la lecture de son contenu (s'il prend lui aussi tout l'espace). L'œil a plus facile à passer à la bonne ligne suivante si la ligne qu'il vient de finir n'est pas trop longue. La résolution de 995 a l'autre avantage de s'intégrer parfaitement avec une résolution en 1024 (la plus commune, actuellement, je pense), sans générer d'ascenseurs horizontal (particulièrement gênants).

Si tu souhaites avoir un site fluide (extensible) il te faudra effectivement utiliser des % (unique sur la largeur par contre, il est préférable de ne pas fixer la hauteur des éléments pour leur permettre de s'agrandir au besoin (plus de contenu, agrandissement des caractères par le visiteur...)).

Mon conseil serait de jeter un coup d'œil aux gabarits de Florent, ils te donneront des bases fiables et robuste pour la réalisation de ton site.
Merci pour vos renseignements, je comprends ce que vous me dîte, cependant j'ai vraiment du mal le mettre en pratique, je n'est pas l'esprit cartésien et je le regrette, je crois qu'il va me falloir de l'entraînement et encore beaucoup de nuits blanches, mais si c'est la clé du succès, alors ok.

Merci encore à tous, c'est super gentil ! Smiley smile