Votre question

[html] pbs: pour qu'une image suive le texte,affichage d'img

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
27 Juin 2007 14:31:57

Bonjour tout le monde!
J'ai un problème:

Dans mon site (non mis en ligne) j'ai une bannière, un menu en css, et je voudrais avoir le reste de la page comme suit:

image | text

La subtilité est la suivante: l'image à gauche doit être centrée sur l'ensemble de la page et ainsi, lorsque l'on descend dans le texte, elle doit suivre le défilement du texte pour toujours apparaitre au centre de l'espace qui lui est alloué

  1. <html>
  2.  
  3.  
  4. <head>
  5.  
  6.  
  7. <title> Mon site - Accueil</title>
  8.  
  9. <link rel = "stylesheet" type ="text/css" href = "moncss.css">
  10.  
  11.  
  12. </head>
  13.  
  14.  
  15. <body bgcolor="#01B1EC" hspace="0" leftmargin="0" rightmargin="0" bottommargin="0" topmargin="0" marginheight="0" marginwidth="0">
  16.  
  17. <div id="entete" name="entete" align="center" hspace="0" leftmargin="0" rightmargin="0" bottommargin="0" topmargin="0" marginheight="0" marginwidth="0">
  18. <alt href="index.htm"><img name="img_entete" src="images/entete.jpg" alt="banniere" height="100" width="920"></img></a>
  19. </div>
  20.  
  21. </body>
  22.  
  23.  
  24.  
  25. <div id="nav" hspace="0" leftmargin="0" rightmargin="0" bottommargin="0" topmargin="0" marginheight="0" marginwidth="0" align="center">
  26. <ul>
  27. <li><a href="lien1.html">lien1</a></li>
  28. <li><a href="lien2.html">lien2</a></li>
  29. <li><a href="lien3.html">lien3</a></li>
  30.  
  31. </ul>
  32. <br /><br />
  33. </div>
  34. <hr />
  35.  
  36. <table width="50%">
  37.  
  38. <tr>
  39. <td width="50%">
  40. <div id="accueil" width="50%" hspace="0" leftmargin="0" rightmargin="0" bottommargin="0" topmargin="0" marginheight="0" marginwidth="0" align="center">
  41. <img src="img1.jpg">
  42. </div>
  43. </td>
  44. <td width="45%">
  45. <div id="texte" width="45%" hspace="0" leftmargin="0" rightmargin="0" bottommargin="0" topmargin="0" marginheight="0" marginwidth="0" align="center">
  46. <p> </p>
  47. <p align="justify">
  48. <font color="#FFFFFF" size="4" face="Arial">
  49. un long texte<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />x<br />
  50. </font><br>
  51. </p>
  52. <td width="5%">
  53. </td>
  54.  
  55. </table>
  56. <hr />
  57.  
  58. </html>



CSS
  1. #nav li {
  2. margin: 0;
  3. padding: 0;
  4. display: inline;
  5. }
  6.  
  7. #nav li a:link, #nav li a:visited {
  8. display: block;
  9. float: left;
  10. height: 32px;
  11. width: 95px;
  12. line-height: 32px;
  13. text-decoration: none;
  14. text-align: center;
  15. background:#fff url(nav95.gif);
  16. padding: 0;
  17. }
  18.  
  19. #nav li a:hover, #nav li a:active {
  20. background:#000 url(nav95.gif) 0 -32px;
  21. padding: 0;
  22. }
  23.  
  24. A {
  25. color:blue;
  26. text-decoration:none;
  27. }
  28. A:hover {
  29. color:red;
  30. text-decoration:none;
  31. }
  32.  
  33. #lien1 {
  34. background: url(img1.jpg) #01B1EC no-repeat;
  35. background-attachment: scroll;
  36. background-position : center center;
  37. }
  38.  
  39. #lien2 {
  40. background: url(img2.jpg) #01B1EC no-repeat center center;
  41. }
  42.  
  43. #lien3 {
  44. background: url(img3.jpg) #01B1EC no-repeat center center;
  45. }


Donc en gros (quitte à me répéter)

l'utilisateur va vouloir lire tout le texte, et lorsqu'il utilisera la barre de défilement de son navigateur, l'image doit suivre!

J'ai tenté:

1/ un tableau 2 colonnes 1 ligne: image puis text
D'une part, IE refuse d'afficher l'image en fonction IMG ^^
Donc dans le css j'ai du passer un fond d'écran :( 
Secondo: je n'arrive pas à obtenir le défilement :s

2/ un double div (en gros je supprime le tableau et m'arrange, enfin j'ai tenté, de faire le même effet pour afficher l'image et n'avoir qu'un problème à résoudre)
Le hic? FF et IE cette fois-ci ensemble m'ont affichés seulement une partie du texte (en gros la premiere ligne de texte et autant pour l'image)

Si vous êtes dans le même cas que moi ou que vous avez eu le même problème, ou mieux encore si vous connaissez la solution, merci d'avance de laisser un message!

Autres pages sur : html pbs image suive texte affichage img

1 Juillet 2007 22:36:00

Yo!

La solution du double div+CSS est la bonne!
Il te faut à gauche de ton écran un bloc qui reste statique, et à droite un bloc auquel tu attaches une scrollbar.
Seulement le petit truc qui fait plaisir, c'est que les navigateurs ne réagissent pas pareil aux scrollbars dans les div lol.

Je te renvoie à la page : http://zonecss.free.fr/style_css/feuille_css_overflow_y...

overflow est la propriété qui gère les scrollbars dans les titres

En revanche, si tu ne veux pas de scrollingà l'intérieur-même de ta page, il te faut opter pour le JavaScript, car lui seul peut faire défiler de façon dynamique une image quand tu fais défiler la page.
20 Juillet 2007 10:23:31

ok merci pour ta réponse. Quand j'aurai le temps je regarderai (vu que j'ai changé d'architecture et que ce probleme n'est donc plus d'actualité)
Contenus similaires
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS