Se connecter avec
S'enregistrer | Connectez-vous

Besoin d'Aide CSS et html... Débutant

Dernière réponse : dans Programmation

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 (image sans aucun style ou image):


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?

Autres pages sur : besoin aide css html debutant

Lassé par la pub ? Créez un compte

Merci pour la réponse, mais je ne peux fait cela. Je dois absolument avoir le même lien pour l'image et la première ligne de texte. C'est une obligation que Shadowbox m'impose pour que ça gallerie ne soit pas dédoublé.

Alors voici le code que j'ai présentement:
Citation :
<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"> </td>
<td width="350" height="106" align="left" valign="middle">
<p><a class="option" title="Le Tube : Influence de l'é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&t..."><img src="images/videos/effet_ecran.jpg" alt="Vidéo" width="140" height="110" align="top" class="video" />Le Tube : Influence de l'écran sur le cerveau 1/4</a></p>
<p><a class="option" title="Le Tube : Influence de l'é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&t...">Le Tube : Influence de l'écran sur le cerveau 2/4</a></p>
<p><a class="option" title="Le Tube : Influence de l'é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&t...">Le Tube : Influence de l'écran sur le cerveau 3/4</a></p>
<p><a class="option" title="Le Tube : Influence de l'é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&t...">Le Tube : Influence de l'écran sur le cerveau 4/4</a></p> </td>
</tr>
</table>
</body>

le problème est que l'image flotante laisse une espace blanc que je ne veux pas avoir.

bonjour
je sais pas si j'ai bien compris. C'est du bricolage, mais essai çà:
  1. <style type="text/css">
  2. #texte {
  3. width: 500px;
  4. }
  5. #global {
  6. width: 500px;
  7. height: 300px;
  8.  
  9. }
  10. #videos {
  11. width: 140px;
  12. height: 200px;
  13. float: left;
  14. padding-top: 20px;
  15. }
  16. #menu {
  17. width: 360px;
  18. float: left;
  19. height: 200px;
  20. }
  21. .td {
  22. padding-left: 5px;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div id="texte">
  28. <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>
  29. </div>
  30. <div id="global">
  31. <div id="videos"><img src="images/videos/effet_ecran.jpg" width="140" height="140"alt="video" /></div>
  32. <div id="menu">
  33. <table width="99%" height="196" border="0">
  34. <tr>
  35. <td><a href="#" class="td">menu1</a></td>
  36. </tr>
  37. <tr>
  38. <td><a href="#" class="td">menu2</a></td>
  39. </tr>
  40. <tr>
  41. <td><a href="#" class="td">menu3</a></td>
  42. </tr>
  43. <tr>
  44. <td><a href="#" class="td">menu4</a></td>
  45. </tr>
  46. </table>
  47.  
  48. </div>
  49. </div>
  50. </div>
  51. </body>
  52. </html>

Merci pour la réponse, mais j'ai résolu le problème. La solution était tellement simple que je ne l'avais pas vu.

J'ai inséré une image float dans ma première balise <a>.

Comme ceci:
  1. <style type="text/css">
  2. .video {
  3. float:left;
  4. margin: 5px 15px 0 15px;
  5. width:140px;
  6. height:110px
  7. }
  8. </style>
  9.  
  10. <div style="border:solid; border-width:1px; border-color:#CCC">
  11. <a class="option" title="Le Tube : Influence de l'é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="<a 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" target="_blank">http://www.dailymotion.com/swf/video/xa7zi2?width=560&t...</a>">
  12. <img src="images/videos/effet_ecran.jpg" alt="Vidéo" width="140" height="110" align="top" class="video" />
  13. <p>Le Tube : Influence de l'écran sur le cerveau 1/4</p>
  14. </a>
  15. <p><a class="option" title="Le Tube : Influence de l'é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="<a 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" target="_blank">http://www.dailymotion.com/swf/video/xa7zzx?width=560&t...</a>">Le Tube : Influence de l'écran sur le cerveau 2/4</a></p>
  16. <p><a class="option" title="Le Tube : Influence de l'é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="<a 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" target="_blank">http://www.dailymotion.com/swf/video/xa809x?width=560&t...</a>">Le Tube : Influence de l'écran sur le cerveau 3/4</a></p>
  17. <p><a class="option" title="Le Tube : Influence de l'é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="<a 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" target="_blank">http://www.dailymotion.com/swf/video/xa80l4?width=560&t...</a>">Le Tube : Influence de l'écran sur le cerveau 4/4</a></p>
  18. </div>
Lassé par la pub ? Créez un compte
Tom's guide dans le monde