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

Marsh Posté le 27-06-2007 à 14:35:38

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!

Marsh Posté le 27-06-2007 à 14:35:38

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed

Name *

Email *

URL

Message *