Tom's Guide > Forum > Programmation > [html] pbs: pour qu'une image suive le texte,affichage d'img

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

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

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !

Créer un nouveau sujet Répondre

Bas de page Chercher dans ce sujet

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!

Répondre

Inscrivez-vous ou connectez-vous pour masquer ceci.

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/f [...] low_y.html

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.

Répondre à demo_jouable

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é)

Répondre à dardadax

Créer un nouveau sujet Répondre

Tom's Guide > Forum > Programmation > [html] pbs: pour qu'une image suive le texte,affichage d'img

Aller à :

Aide |
Règles du forum

Il y a 271 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Page générée en 0,427 secondes

Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler

Liens