Bloc d'image photoshop html

Question

soufi

12 Mar 2014 à 12:27

bonjour,
Je suis tout débutant en html et css donc je vais surement demander quelque chose de très facile mais je ne trouve pas ce que je veux sur internet.

voici mon problème:
J'ai crée un design sous photoshop, et je l'ai découpé en groupe d'images (pour diverses raisons qui se justifient).
Donc les images sont en postions absolues pour qu'elles reforment le design dans le navigateur avec une place précise.

Par contre je n'arrive pas à centrer ce groupe d'images pour mettre le design au centre. Ca parait bête, mais impossible
Voici mon code:

<html><head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

</head>
<body leftmargin="0" topmargin="0" bgcolor="#FFFFFF" marginheight="0" marginwidth="0">
<div id="monblocentier"></div> 
<div style="position:absolute; left:0px; top:0px; width:1280px; height:852px;">
	<div style="background-image:url(Untitled-1_01.jpg); position:absolute; left:0px; top:0px; width:1280px; height:6px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_02.jpg); position:absolute; left:0px; top:6px; width:12px; height:846px;" title="">
	</div>
	<a href="file:///private/var/folders/X-/X-rD774FEe0wfu3UZ+9FmU+++TI/-Tmp-/Cleanup%20At%20Startup/Save%20For%20Web%20AI/Untitled-1_003/accueil.html" target="_blank" style="cursor:hand">
		<div style="background-image:url(logo.jpg); position:absolute; left:12px; top:6px; width:273px; height:81px;" title="">
		</div></a>
	<div style="background-image:url(Untitled-1_04.jpg); position:absolute; left:285px; top:6px; width:995px; height:22px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_05.jpg); position:absolute; left:285px; top:28px; width:295px; height:2px;" title="">
	</div>
	<a href="file:///private/var/folders/X-/X-rD774FEe0wfu3UZ+9FmU+++TI/-Tmp-/Cleanup%20At%20Startup/Save%20For%20Web%20AI/Untitled-1_003/evenement.html" target="_blank" style="cursor:hand">
		<div style="background-image:url(evenementbuton.jpg); position:absolute; left:580px; top:28px; width:67px; height:56px;" title="">
		</div></a>
	<div style="background-image:url(Untitled-1_07.jpg); position:absolute; left:647px; top:28px; width:19px; height:126px;" title="">
	</div>
	<a href="file:///private/var/folders/X-/X-rD774FEe0wfu3UZ+9FmU+++TI/-Tmp-/Cleanup%20At%20Startup/Save%20For%20Web%20AI/Untitled-1_003/rendezvous.html" target="_blank" style="cursor:hand">
		<div style="background-image:url(rendezvousbuton.jpg); position:absolute; left:666px; top:28px; width:76px; height:56px;" title="">
		</div></a>
	<div style="background-image:url(Untitled-1_09.jpg); position:absolute; left:742px; top:28px; width:93px; height:1px;" title="">
	</div>
	<a href="file:///private/var/folders/X-/X-rD774FEe0wfu3UZ+9FmU+++TI/-Tmp-/Cleanup%20At%20Startup/Save%20For%20Web%20AI/Untitled-1_003/contacte.html" target="_blank" style="cursor:hand">
		<div style="background-image:url(contactebuton.jpg); position:absolute; left:835px; top:28px; width:57px; height:55px;" title="">
		</div></a>
	<div style="background-image:url(Untitled-1_11.jpg); position:absolute; left:892px; top:28px; width:27px; height:126px;" title="">
	</div>
	<a href="file:///private/var/folders/X-/X-rD774FEe0wfu3UZ+9FmU+++TI/-Tmp-/Cleanup%20At%20Startup/Save%20For%20Web%20AI/Untitled-1_003/liens.html" target="_blank" style="cursor:hand">
		<div style="background-image:url(liensbuton.jpg); position:absolute; left:919px; top:28px; width:43px; height:56px;" title="">
		</div></a>
	<div style="background-image:url(Untitled-1_13.jpg); position:absolute; left:962px; top:28px; width:318px; height:111px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_14.jpg); position:absolute; left:742px; top:29px; width:16px; height:125px;" title="">
	</div>
	<a href="file:///private/var/folders/X-/X-rD774FEe0wfu3UZ+9FmU+++TI/-Tmp-/Cleanup%20At%20Startup/Save%20For%20Web%20AI/Untitled-1_003/actions.html" target="_blank" style="cursor:hand">
		<div style="background-image:url(actionsbuton.jpg); position:absolute; left:758px; top:29px; width:49px; height:54px;" title="">
		</div></a>
	<div style="background-image:url(Untitled-1_16.jpg); position:absolute; left:807px; top:29px; width:28px; height:125px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_17.jpg); position:absolute; left:285px; top:30px; width:219px; height:124px;" title="">
	</div>
	<a href="file:///private/var/folders/X-/X-rD774FEe0wfu3UZ+9FmU+++TI/-Tmp-/Cleanup%20At%20Startup/Save%20For%20Web%20AI/Untitled-1_003/accueil.html" target="_blank" style="cursor:hand">
		<div style="background-image:url(accueilbutton.jpg); position:absolute; left:504px; top:30px; width:46px; height:55px;" title="">
		</div></a>
	<div style="background-image:url(Untitled-1_19.jpg); position:absolute; left:550px; top:30px; width:30px; height:124px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_20.jpg); position:absolute; left:758px; top:83px; width:49px; height:71px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_21.jpg); position:absolute; left:835px; top:83px; width:57px; height:71px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_22.jpg); position:absolute; left:580px; top:84px; width:67px; height:70px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_23.jpg); position:absolute; left:666px; top:84px; width:76px; height:70px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_24.jpg); position:absolute; left:919px; top:84px; width:43px; height:70px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_25.jpg); position:absolute; left:504px; top:85px; width:46px; height:69px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_26.jpg); position:absolute; left:12px; top:87px; width:273px; height:67px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_27.jpg); position:absolute; left:962px; top:139px; width:27px; height:15px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_28.jpg); position:absolute; left:989px; top:139px; width:291px; height:631px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_29.jpg); position:absolute; left:12px; top:154px; width:5px; height:651px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_30.jpg); position:absolute; left:17px; top:154px; width:959px; height:286px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_31.jpg); position:absolute; left:976px; top:154px; width:13px; height:698px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_32.jpg); position:absolute; left:17px; top:440px; width:959px; height:38px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_33.jpg); position:absolute; left:17px; top:478px; width:218px; height:272px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_34.jpg); position:absolute; left:235px; top:478px; width:34px; height:374px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_35.jpg); position:absolute; left:269px; top:478px; width:218px; height:272px; " title=""> 
		</div>
	<div style="background-image:url(Untitled-1_36.jpg); position:absolute; left:487px; top:478px; width:23px; height:374px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_37.jpg); position:absolute; left:510px; top:478px; width:218px; height:272px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_38.jpg); position:absolute; left:728px; top:478px; width:30px; height:374px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_39.jpg); position:absolute; left:758px; top:478px; width:218px; height:272px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_40.jpg); position:absolute; left:17px; top:750px; width:218px; height:55px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_41.jpg); position:absolute; left:269px; top:750px; width:218px; height:102px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_42.jpg); position:absolute; left:510px; top:750px; width:218px; height:102px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_43.jpg); position:absolute; left:758px; top:750px; width:218px; height:102px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_44.jpg); position:absolute; left:989px; top:770px; width:181px; height:36px;" title="">
	</div>
	<a href="file:///private/var/folders/X-/X-rD774FEe0wfu3UZ+9FmU+++TI/-Tmp-/Cleanup%20At%20Startup/Save%20For%20Web%20AI/Untitled-1_003/france.fr" target="_blank" style="cursor:hand">
		<div style="background-image:url(france.jpg); position:absolute; left:1170px; top:770px; width:98px; height:82px;" title="">
		</div></a>
	<div style="background-image:url(Untitled-1_46.jpg); position:absolute; left:1268px; top:770px; width:12px; height:36px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_47.jpg); position:absolute; left:12px; top:805px; width:1px; height:47px;" title="">
	</div>
	<div style="background-image:url(faceboock.jpg); position:absolute; left:13px; top:805px; width:49px; height:42px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_49.jpg); position:absolute; left:62px; top:805px; width:173px; height:5px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_50.jpg); position:absolute; left:989px; top:806px; width:181px; height:46px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_51.jpg); position:absolute; left:1268px; top:806px; width:12px; height:46px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_52.jpg); position:absolute; left:62px; top:810px; width:4px; height:42px;" title="">
	</div>
	<div style="background-image:url(lettre.jpg); position:absolute; left:66px; top:810px; width:39px; height:36px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_54.jpg); position:absolute; left:105px; top:810px; width:130px; height:42px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_55.jpg); position:absolute; left:66px; top:846px; width:39px; height:6px;" title="">
	</div>
	<div style="background-image:url(Untitled-1_56.jpg); position:absolute; left:13px; top:847px; width:49px; height:5px;" title="">
	</div>



</body></html>

Modifié par soufi (12 Mar 2014 - 12:32)

~~supprimé~~

12 Mar 2014 à 12:55

C'est quoi qui justifie un tel code ?
Ce n'est pas vraiment comme cela que j'ai l'habitude d'intégrer mes design, d'autant plus qu'avec le css3 on peut très bien se passé d'image.

Peut tu nous fournir une image de ta maquette. Et pense peut être à lire un tuto (pas trop vieux sinon tu va tomber sur des trucs avec des tableaux) sur l'intégration.

cordialement,
JB

soufi

12 Mar 2014 à 14:11

voici le lien de ma page en mode test
http://selah.asso.free.fr/

soufi

12 Mar 2014 à 14:17

j'ai peut être mal découper la page c'est pour ça y a trop d'image
Modifié par soufi (12 Mar 2014 - 14:23)

~~supprimé~~

12 Mar 2014 à 14:22

Tu utilise quoi comme logiciel pour créer ton site, on dirait un truc du style iweb ou autre au niveau du code.

Pour comprendre le problème, désactive les images sur ton nav et tu verra ce que voient les moteur de recherche quand il passe sur ton site: rien.

Le texte de tes images doit être du vrai texte pas une image. Il y a tout a revoir, la tu n'a qu'une maquette clicable. Il faut que tu code ton site pas que tu affiche en background des images.

je réitère mon conseil, fait un petit tour par un tuto Smiley cligne

.

Sam_

12 Mar 2014 à 16:44

Bon, en l'occurrence, je suis d'accord avec les posts précédents ; au niveau du développement, ce n'est pas vraiment une bonne façon de procéder. Ça l'était peut-être encore il y a 10 ans, et encore, mais depuis il y a la possibilité de créer tout site avec du vrai texte (dans le code HTML, donc), les dégradés, les divers positionnements de blocs, etc., peuvent être gérés par le CSS3, donc c'est assez dommage de passer entièrement par photoshop pour créer ton site.

Sinon, si tu souhaite véritablement centrer tous tes blocs, entoure les d'un div avec, par exemple, une id précise (ex : <div id="bloc"> … </div>), et dans le fichier CSS, note :

html, body
{
width: 100%;
min-width: 000px  // Note : il faut remplacer ici les 000 par la valeur totale de la largeur de tes images
}
#bloc
{
margin: auto;
}

Modifié par Sam_ (12 Mar 2014 - 16:45)

kustolovic

Modérateur

12 Mar 2014 à 19:04

Sam_ a écrit :
Ça l'était peut-être encore il y a 10 ans, et encore, mais depuis il y a la possibilité de créer tout site avec du vrai texte (dans le code HTML, donc)

ça c'est la manière dont fonctionne le web depuis 25 ans (en théorie, et 20 ans en pratique Smiley langue

). Faire un site tout en image ça n'a jamais été une bonne pratique, et ça ne le sera jamais.

@souffi

Je te conseille d'apprendre les base de l'intégration web: notamment le positionnement en css

Lothindil

12 Mar 2014 à 22:29

Sinon au niveau de la découpe du site, j'y vois en tout et pour tout, 11 images obligatoires (le logo, 1 images/morceaux du menu/la feuille et la carte de France) et encore, on peut diminuer ça à 4 avec le logo, les morceaux de menu, la feuille et la carte de France et un tout petit usage des sprites css ^^

soufi

14 Mar 2014 à 14:59

toujours le même problème
Modifié par soufi (14 Mar 2014 - 15:54)

~~supprimé~~

14 Mar 2014 à 15:29

Bon c'est un petit peu mieux, mais ce n'est toujours pas la manière "juste" de réaliser une intégration, fais un tuto, regarde des codes sources ...

soufi

14 Mar 2014 à 17:06

css

html, body
{
width: 100%;
 min-width: 1280px
}

#bloc
{
	width:1280px;
	  margin:0 auto

html

<html>
<head>
<title>index</title>
<link rel="stylesheet" href="sans.css" type="text/css" />

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">



</head>

<body>
<div id="bloc">
<div style="background-image:url(arrierepaln.jpg); position:absolute;top:0px; width:1280px; height:860px;">
	
<div style= "background-image:url(accueil.jpg); position:absolute;  left:504px; top:30px; width:46px; height:55px;" >
	</div>
<div style="background-image:url(evenement.jpg); position:absolute; left:580px; top:28px; width:67px; height:56px;" >
	</div>
<div style="background-image:url(actions.jpg); position:absolute;  left:758px; top:29px; width:49px; height:54px;" >
	</div>
<div style="background-image:url(rendezvous.jpg); position:absolute; left:666px; top:28px; width:76px; height:56px;" >
	</div>
<div style="background-image:url(contacte.jpg); position:absolute; left:835px; top:28px; width:57px; height:55px;" >
	</div>
<div style="background-image:url(liens.jpg); position:absolute;  left:919px; top:28px; width:43px; height:55px;" >
	</div>
<div style="background-image:url(vinci.jpg); position:absolute;  left:17px; top:154px; width:959px; height:286px;">
	</div>
<div style="background-image:url(noir.jpg); position:absolute; left:5px; top:486px; width:218px; height:320px;" >
	</div>

..........

</body>
</html>

sur l'ordi march tres bien (ff et safari) par contre on ligne ne marche pas

~~supprimé~~

14 Mar 2014 à 17:17

As tout les coups c'est un problème de lein avec tes nombreuses images. Mais encore une fois ce n'est pas la juste manière de faire donc => TUTO Smiley cligne

gc-nomade

14 Mar 2014 à 19:50

Bonsoir,

pour passer une maquette en document html et css, il te faut , bien sur la decouper, mais separer ce qui est contenu et deco.
En gros :
Le contenu , c'est du texte ou des images dans le HTML
la deco c'est des images de fond.
Ensuite, ta maquette est static, alors qu'une page web est vivante, autant avec l'utilisateur qu'avec la config du visiteur. Le positionnement absolu est alors un piège pour le débutant Smiley smile

Ton approche devrait être du genre :
A l'arrache : okay, ma maquette ressemble a ça et je repère déjà facilement plusieurs zone de contenu.
Je repère ce qui est deco et contenu ( ton logiciel devrait te permettre de montrer cacher en parti les élément qui compose ta maquette)
il te faut maintenant structurer/baliser un document pour recevoir le contenu et envisager ta feuille de style pour la mise en forme.

Toujours a l'arrache , et en me servant de tes images , tu devrait sortir un truc du genre : http://codepen.io/anon/pen/IryiG . Le principe est de produire une structure avec une mise en forme qui va accepter de recevoir des contenus sans voir la mise en page partir en sucette et aussi , capable de te restituer ton contenu sans aucune mise en forme ...

C'est un très gros raccourcie très incomplet, mais bon , si tu comprend que tu dois éviter le piège du positionnement absolu et mettre en forme du contenu, c'est un bon début Smiley smile

++

<edit>
Pour récupérer l'exemple en archive , click sur le bouton share puis export.zip. tu téléchargeras alors une archive avec le HTML et le CSS séparé que tu pourras éditer et retravailler sur ton pc.
le lien pour l'archive est http://codepen.io/anon/share/zip/IryiG
Modifié par gc-nomade (15 Mar 2014 - 12:58)

Sujet clos

CSS et mise en forme, CSS3

Bloc d'image photoshop html