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é
Code :
- <html>
- <head>
- <title> Mon site - Accueil</title>
- <link rel = "stylesheet" type ="text/css" href = "moncss.css">
- </head>
- <body bgcolor="#01B1EC" hspace="0" leftmargin="0" rightmargin="0" bottommargin="0" topmargin="0" marginheight="0" marginwidth="0">
- <div id="entete" name="entete" align="center" hspace="0" leftmargin="0" rightmargin="0" bottommargin="0" topmargin="0" marginheight="0" marginwidth="0">
- <alt href="index.htm"><img name="img_entete" src="images/entete.jpg" alt="banniere" height="100" width="920"></img></a>
- </div>
- </body>
- <div id="nav" hspace="0" leftmargin="0" rightmargin="0" bottommargin="0" topmargin="0" marginheight="0" marginwidth="0" align="center">
- <ul>
- <li><a href="lien1.html">lien1</a></li>
- <li><a href="lien2.html">lien2</a></li>
- <li><a href="lien3.html">lien3</a></li>
- </ul>
- <br /><br />
- </div>
- <hr />
- <table width="50%">
- <tr>
- <td width="50%">
- <div id="accueil" width="50%" hspace="0" leftmargin="0" rightmargin="0" bottommargin="0" topmargin="0" marginheight="0" marginwidth="0" align="center">
- <img src="img1.jpg">
- </div>
- </td>
- <td width="45%">
- <div id="texte" width="45%" hspace="0" leftmargin="0" rightmargin="0" bottommargin="0" topmargin="0" marginheight="0" marginwidth="0" align="center">
- <p> </p>
- <p align="justify">
- <font color="#FFFFFF" size="4" face="Arial">
- 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 />
- </font><br>
- </p>
- <td width="5%">
- </td>
- </table>
- <hr />
- </html>
|
CSS
Code :
- #nav li {
- margin: 0;
- padding: 0;
- display: inline;
- }
- #nav li a:link, #nav li a:visited {
- display: block;
- float: left;
- height: 32px;
- width: 95px;
- line-height: 32px;
- text-decoration: none;
- text-align: center;
- background:#fff url(nav95.gif);
- padding: 0;
- }
- #nav li a:hover, #nav li a:active {
- background:#000 url(nav95.gif) 0 -32px;
- padding: 0;
- }
- A {
- color:blue;
- text-decoration:none;
- }
- A:hover {
- color:red;
- text-decoration:none;
- }
- #lien1 {
- background: url(img1.jpg) #01B1EC no-repeat;
- background-attachment: scroll;
- background-position : center center;
- }
- #lien2 {
- background: url(img2.jpg) #01B1EC no-repeat center center;
- }
- #lien3 {
- background: url(img3.jpg) #01B1EC no-repeat center center;
- }
|
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!
FORUM HardWare.fr
