18041 sujets

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

Mise en page d'une image avec liens...

Bonjour à tous,
J'aurais besoin d'un peu d'aide. Dans mes balises html j'aimerais être capable de mettre en page une image suivi de quatres liens à ça droite. Jusque là j'ai aucun problème. Mais ce que je ne suis pas capable de faire c'est d'inclure le premier lien, des quatre lien à droite de l'image, avec l'image de gauche. Je ne sais pas si vous me suivé.

Une image vos milles mots, alors voici à quoi j'aimerais que ça ressemble (exemple sans aucun style ou image):
http://data.imagup.com/5/1107547512.GIF
Je pensais à une image en relatif avec comme point d'encrage le premier lien ou proche de celui-ci avec une balise div je crois. J'ai déjà fais cela, mais je ne sais plus comment.
Quelqu'un à une idée?
Modifié par Alex1982 (20 Dec 2010 - 21:55)
Chose à mentionner: Shadowbox m'oblige à avoir le même lien pour l'image et la première ligne de texte. Sinon, la gallerie se dédouble.

Alors voici le code que j'ai présentement:
<style type="text/css"> 
.video { 
width:140px; 
height:110px; 
position: relative; 
left: -170px; 
top: 0px; 
} 
</style> 
</head> 

<body> 
<table width="550" border="0" cellspacing="0" cellpadding="5"> 
<tr> 
<td height="49" colspan="2"><p>J'aimerais vous faire part d'un documentaire exceptionnel et indépendant sur l'effet des écrans sur la santé. À voir absolument et en entier. À vous de vous faire votre propre opinion. Personnellement, j'ai changé pour la projection !!</p></td> 
</tr> 
<tr> 
<td width="200" align="left" valign="middle">&nbsp;</td> 
<td width="350" height="106" align="left" valign="middle"> 
<p><a class="option" title="Le Tube : Influence de l'&eacute;cran sur le cerveau 1/4" rel="shadowbox[Effet_ecran];player=swf;width=560;height=420;options={continuous:true,flashParams:{allowFullScreen:true,allowscriptaccess:always}}" href="http://www.dailymotion.com/swf/video/xa7zi2?width=560&theme=default&foreground=%23F7FFFD&highlight=%23FFC300&background=%23171D1B&autoPlay=1&start=&animatedTitle=&iframe=0&additionalInfos=0&hideInfos=0"><img src="images/videos/effet_ecran.jpg" alt="Vidéo" width="140" height="110" align="top" class="video" />Le Tube : Influence de l'&eacute;cran sur le cerveau 1/4</a></p> 
<p><a class="option" title="Le Tube : Influence de l'&eacute;cran sur le cerveau 2/4" rel="shadowbox[Effet_ecran];player=swf;width=560;height=420;options={continuous:true,flashParams:{allowFullScreen:true,allowscriptaccess:always}}" href="http://www.dailymotion.com/swf/video/xa7zzx?width=560&theme=default&foreground=%23F7FFFD&highlight=%23FFC300&background=%23171D1B&autoPlay=1&start=&animatedTitle=&iframe=0&additionalInfos=0&hideInfos=0">Le Tube : Influence de l'&eacute;cran sur le cerveau 2/4</a></p> 
<p><a class="option" title="Le Tube : Influence de l'&eacute;cran sur le cerveau 3/4" rel="shadowbox[Effet_ecran];player=swf;width=560;height=420;options={continuous:true,flashParams:{allowFullScreen:true,allowscriptaccess:always}}" href="http://www.dailymotion.com/swf/video/xa809x?width=560&theme=default&foreground=%23F7FFFD&highlight=%23FFC300&background=%23171D1B&autoPlay=1&start=&animatedTitle=&iframe=0&additionalInfos=0&hideInfos=0">Le Tube : Influence de l'&eacute;cran sur le cerveau 3/4</a></p> 
<p><a class="option" title="Le Tube : Influence de l'&eacute;cran sur le cerveau 4/4" rel="shadowbox[Effet_ecran];player=swf;width=560;height=420;options={continuous:true,flashParams:{allowFullScreen:true,allowscriptaccess:always}}" href="http://www.dailymotion.com/swf/video/xa80l4?width=560&theme=default&foreground=%23F7FFFD&highlight=%23FFC300&background=%23171D1B&autoPlay=1&start=&animatedTitle=&iframe=0&additionalInfos=0&hideInfos=0">Le Tube : Influence de l'&eacute;cran sur le cerveau 4/4</a></p> </td> 
</tr> 
</table> 
</body>


Le problème ici c'est que l'image flottante laisse un espace blanc que je ne pas avoir.
Comment résoudre ce problème?
Modifié par Laurie-Anne (21 Dec 2010 - 08:24)
Bonjour,

Sans vouloir t'offenser, ton code est ce que l'on appelle généralement de la bouillie... Il est très difficile à lire et pas "propre".

Je pense que le plus simple serait de te concentrer sur la mise en page sans shadowbox, puis d'intégrer la chose.

Ensuite, le tableau n'est absolument pas justifié dans ton design, il y a moyen de faire sans et, du même coup, d'alléger le code.

En gros, tu devrais avoir un code HTML du genre : 
<p>J'aimerais vous faire part de...</p>
<div>
<img>
<ul>
<li>Lien 1</li>
<li>Lien 2</li>
<li>Lien 3</li>
<li>Lien 4</li>
</ul>
</div>

En faisant flotter l'image ce devrait fonctionner. Le div est uniquement présent pour la bordure, si la bordure n'est pas nécessaire, le div non plus.
Merci pour ta réponse. La solution était tellement simple que je ne l'avais pas trouvé. Smiley confused J'ai inclu une image float avec la première ligne de texte dans la balise <a>

Voici ce que ça donne maintenant:
http://data.imagup.com/6/1107620022.jpg

Alors, maintenant j'ai un autre problème que je ne comprend pas dutout. La première cellule de mon tableau laisse un espace blanc dans le bas de la première image. Voici le code:

<table width="550" height="1" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td height="19" colspan="3">
			<img src="images/info_bulle_01.jpg" width="550" height="19" alt="MOT DU PR&#201;SIDENT"></td>
	</tr>
	<tr>
		<td height="1" style="background-repeat:repeat-y; background-image:url(images/info_bulle_02.jpg)">
			<img src="images/info_bulle_02.jpg" width="10" height="1" alt=""></td>
		<td width="526" height="1" bgcolor="#96BF3D"><p>J'aimerais vous faire part d'un documentaire exceptionnel et indépendant sur l'effet des écrans sur la santé. À voir absolument et en entier. À vous de vous faire votre propre opinion. Personnellement, j'ai changé pour la projection !!</p></td>
		<td height="1" style="background-repeat:repeat-y; background-image:url(images/info_bulle_04.jpg)">
			<img src="images/info_bulle_04.jpg" width="14" height="1" alt=""></td>
	</tr>
	<tr>
		<td height="40" colspan="3">
			<img src="images/info_bulle_05.jpg" width="550" height="40" alt=""></td>
	</tr>
</table>
<div style="border:solid; border-width:1px; border-color:#CCC"> 
<a class="option" title="Le Tube : Influence de l'&eacute;cran sur le cerveau 1/4" rel="shadowbox[Effet_ecran];player=swf;width=560;height=420;options={continuous:true,flashParams:{allowFullScreen:true,allowscriptaccess:always}}" href="http://www.dailymotion.com/swf/video/xa7zi2?width=560&theme=default&foreground=%23F7FFFD&highlight=%23FFC300&background=%23171D1B&autoPlay=1&start=&animatedTitle=&iframe=0&additionalInfos=0&hideInfos=0">
<img src="images/videos/effet_ecran.jpg" alt="Vidéo" width="140" height="110" align="top" class="video" />  
<p>Le Tube : Influence de l'&eacute;cran sur le cerveau 1/4</p> 
</a>
<p><a class="option" title="Le Tube : Influence de l'&eacute;cran sur le cerveau 2/4" rel="shadowbox[Effet_ecran];player=swf;width=560;height=420;options={continuous:true,flashParams:{allowFullScreen:true,allowscriptaccess:always}}" href="http://www.dailymotion.com/swf/video/xa7zzx?width=560&theme=default&foreground=%23F7FFFD&highlight=%23FFC300&background=%23171D1B&autoPlay=1&start=&animatedTitle=&iframe=0&additionalInfos=0&hideInfos=0">Le Tube : Influence de l'&eacute;cran sur le cerveau 2/4</a></p> 
<p><a class="option" title="Le Tube : Influence de l'&eacute;cran sur le cerveau 3/4" rel="shadowbox[Effet_ecran];player=swf;width=560;height=420;options={continuous:true,flashParams:{allowFullScreen:true,allowscriptaccess:always}}" href="http://www.dailymotion.com/swf/video/xa809x?width=560&theme=default&foreground=%23F7FFFD&highlight=%23FFC300&background=%23171D1B&autoPlay=1&start=&animatedTitle=&iframe=0&additionalInfos=0&hideInfos=0">Le Tube : Influence de l'&eacute;cran sur le cerveau 3/4</a></p> 
<p><a class="option" title="Le Tube : Influence de l'&eacute;cran sur le cerveau 4/4" rel="shadowbox[Effet_ecran];player=swf;width=560;height=420;options={continuous:true,flashParams:{allowFullScreen:true,allowscriptaccess:always}}" href="http://www.dailymotion.com/swf/video/xa80l4?width=560&theme=default&foreground=%23F7FFFD&highlight=%23FFC300&background=%23171D1B&autoPlay=1&start=&animatedTitle=&iframe=0&additionalInfos=0&hideInfos=0">Le Tube : Influence de l'&eacute;cran sur le cerveau 4/4</a></p> 
</div>

Modifié par Alex1982 (21 Dec 2010 - 17:31)
J'ai finalement trouvé la solution à mon dernier problème. J'ai inséré un vertical-align:bottom à mon image
Sujet clos
Aller à