28173 sujets

CSS et mise en forme, CSS3

Probleme d'affichage de mon site

Bonjours à tous !
C'est après de vaines recherches que je m'adresse à la communauté Alsacréations.
Voici mon problème:
Je suis actuellement en train de construire une nouvelle version de mon site dont j'ai réalisé le designe sous Photoshop CS2.
J'utilise ensuite la fonction "Enregistrer pour le web" afin d'obtenir une page HTML "toute prête" avec un tableau contenant les differentes parties de mon images. Seulement voilà: malgré de nombreux essais, je n'arrive pas à ajuster l'image aux dimensions de l'ecran. J'ai pourtant essayé plusieurs solutions: CSS, pourcentages ... mais la manipulation est compliquée par le fait que une seule image soit divisée en de nombreuses parts.

Je vous colle le code HTML que j'obtiens, sans l'avoir modifié:

<html>
<head>
<title>news</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (news.psd) -->
<table id="Table_01" width="1024" height="769" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="8">
			<img src="images/index_01.jpg" width="13" height="768" alt=""></td>
		<td colspan="12">
			<img src="images/banner.jpg" width="994" height="140" alt=""></td>
		<td rowspan="8">
			<img src="images/index_03.jpg" width="17" height="768" alt=""></td>
	</tr>
	<tr>
		<td colspan="12">
			<img src="images/index_04.jpg" width="994" height="20" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/index_05.jpg" width="11" height="70" alt=""></td>
		<td>
			<a href="/news">
				<img src="images/news.jpg" width="190" height="40" border="0" alt=""></a></td>
		<td rowspan="2">
			<img src="images/index_07.jpg" width="8" height="70" alt=""></td>
		<td>
			<a href="/graphisme">
				<img src="images/graphisme.jpg" width="187" height="40" border="0" alt=""></a></td>
		<td rowspan="2">
			<img src="images/index_09.jpg" width="9" height="70" alt=""></td>
		<td>
			<a href="/audio">
				<img src="images/audio.jpg" width="184" height="40" border="0" alt=""></a></td>
		<td rowspan="2">
			<img src="images/index_11.jpg" width="9" height="70" alt=""></td>
		<td>
			<a href="/video">
				<img src="images/video.jpg" width="186" height="40" border="0" alt=""></a></td>
		<td rowspan="2">
			<img src="images/index_13.jpg" width="11" height="70" alt=""></td>
		<td>
			<a href="/video">
				<img src="images/video-15.jpg" width="192" height="40" border="0" alt=""></a></td>
		<td rowspan="4">
			<img src="images/index_15.jpg" width="7" height="562" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/index_16.jpg" width="190" height="30" alt=""></td>
		<td>
			<img src="images/index_17.jpg" width="187" height="30" alt=""></td>
		<td>
			<img src="images/index_18.jpg" width="184" height="30" alt=""></td>
		<td>
			<img src="images/index_19.jpg" width="186" height="30" alt=""></td>
		<td>
			<img src="images/index_20.jpg" width="192" height="30" alt=""></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="images/index_21.jpg" width="5" height="538" alt=""></td>
		<td colspan="10">
			<img src="images/contenu.jpg" width="982" height="474" alt=""></td>
	</tr>
	<tr>
		<td colspan="10">
			<img src="images/index_23.jpg" width="982" height="18" alt=""></td>
	</tr>
	<tr>
		<td colspan="11">
			<img src="images/footer.jpg" width="989" height="38" alt=""></td>
	</tr>
	<tr>
		<td colspan="11">
			<img src="images/index_25.jpg" width="989" height="8" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/espaceur.gif" width="13" height="1" alt=""></td>
		<td>
			<img src="images/espaceur.gif" width="5" height="1" alt=""></td>
		<td>
			<img src="images/espaceur.gif" width="6" height="1" alt=""></td>
		<td>
			<img src="images/espaceur.gif" width="190" height="1" alt=""></td>
		<td>
			<img src="images/espaceur.gif" width="8" height="1" alt=""></td>
		<td>
			<img src="images/espaceur.gif" width="187" height="1" alt=""></td>
		<td>
			<img src="images/espaceur.gif" width="9" height="1" alt=""></td>
		<td>
			<img src="images/espaceur.gif" width="184" height="1" alt=""></td>
		<td>
			<img src="images/espaceur.gif" width="9" height="1" alt=""></td>
		<td>
			<img src="images/espaceur.gif" width="186" height="1" alt=""></td>
		<td>
			<img src="images/espaceur.gif" width="11" height="1" alt=""></td>
		<td>
			<img src="images/espaceur.gif" width="192" height="1" alt=""></td>
		<td>
			<img src="images/espaceur.gif" width="7" height="1" alt=""></td>
		<td>
			<img src="images/espaceur.gif" width="17" height="1" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>


En espèrant que vous pourrez m'aider à résoudre ce problème.
Merci d'avance Smiley cligne
Modifié par High (27 Jul 2007 - 03:22)
Salut,

Je suis consterné par le code que tu nous proposes. Ce forum fait la promotion des standards du web et tu viens nous présenter un code qui est aux antipodes de ce que nous promouvons.
Je te la fais courte :
- pas de doctype ;
- la présentation complètement imbriquée avec le contenu ;
- des tableaux imbriqués pour faire le design ;
- une page complètement invisible pour ceux qui naviguent sans afficher les images (lignes bas débit) :
- utilisation d'attributs dépréciés...

Pas glop Smiley fache , c'est un comportement du siècle passé.
Bonjour,

Le fond du problème est contenu dans la phrase suivante:
High a écrit :
J'utilise ensuite la fonction "Enregistrer pour le web" afin d'obtenir une page HTML "toute prête" avec un tableau contenant les differentes parties de mon images.


Cette fonctionnalité produit une page figée, difficilement adaptable, et dont le comportement d'un navigateur à l'autre peut être aléatoire. Enfin, le résultat n'est bien sûr pas accessible, et généralement pas indexable par les moteurs de recherche.

Cette fonctionnalité est donc à éviter pour tout ce qui dépasse le cadre d'un site perso très modeste ou d'un site plaquette de trois pages.

Donc:
- on réalise sa maquette image (avec Photoshop ou autre logiciel), de préférence en ayant conscience des spécificités et contraintes du Web;
- on crée le contenu HTML, de préférence avec un éditeur de code;
- toujours avec un éditeur de code, on passe à la mise en forme via les CSS, on découpe les images si besoin, etc.

Un petit article à lire: Quelle démarche suivre pour intégrer une maquette en page HTML/CSS ?
Sujet clos
Aller à