5568 sujets

Sémantique web et HTML

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

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é


<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>&nbsp;</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

#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: iamge 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 Smiley decu
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!
Bonjour,

Je n'ai pas bien compris ce que tu veux faire (à part que ça me semble excessivement tarabiscoté, mais passons Smiley lol ), mais je tente à partir de ce que j'ai compris.

Faire une mise en page avec deux colonnes de hauteur égales, et utilisant le centrage vertical pour la colonne de gauche, ça n'est pas bien compliqué. Dans la pratique, on devra utiliser un tableau à cause des limitations d'Internet Explorer (pas de support de display: table-cell), du moins si on veut le même rendu avec ce navigateur.

Donc : on fait un tableau à deux cellules, au dessus on a un en-tête, dans la première cellule du tableau on a une image (balise <img>... et si, ça marche très bien avec IE, tu as dû faire une erreur quelque part, mais en tout cas c'est la marche à suivre).

Après, fixer l'image à un niveau donné de l'écran... ça complique beaucoup les choses. On pourrait sans doute utiliser position: fixed, mais :
1. ça ne sera pas compatible avec IE6 (par contre ça marche avec IE7) ;
2. combiner ça au centrage vertical par rapport à un élément donné, ça ne me semble pas possible... à voir.
Voilà, un test en combinant centrage vertical plus positionnement fixe :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css">
	div#global {
		width: 500px;
		margin: 0 auto;
	}
	div#entete {
		height: 200px;
		background: green;
	}
	table, td {
		padding: 0;
	}
	table#corps {
		width: 100%;
		border-collapse: collapse;
	}
	td#premier {
		width: 20%;
		background: #fec;
		vertical-align: middle;
	}
	td#premier div#image {
		position: fixed;
		margin-top: -50px;
		height: 100px;
		width: 100px;
		background: red;
	}
	td#deuxieme {
		width: 80%;
		height: 600px;
		background: #cfd;
		vertical-align: top;
	}
	</style>
</head>

<body>
<div id="global">
	<div id="entete"></div>
	<table id="corps" summary="">
		<td id="premier">
			<div id="image"></div>
		</td>
		<td id="deuxieme">
		Un max de contenu...
		</td>
	</table>
</div>
</body>
</html>

Ça marche avec tous les navigateurs récents (donc pas avec IE6, il faudra adapter via un commentaire conditionnel, par exemple pour basculer sur un positionnement statique), mais de toute façon le résultat n'est pas très intéressant : l'effet obtenu manque de lisibilité pour l'utilisateur, et si la hauteur de l'écran est trop faible ou si le hauteur du tableau est trop grande, l'élément en positionnement fixe peut être tronqué ou carrément invisible (car hors-champ).

Ce n'est tout de même pas ça que tu voulais faire, si ?
en fait je voulais faire en sorte que l'image reste fixe à l'écran mais pas dans le positionnement de la page du site! (ex: si le site fait 2000px de hauteur, que l'image suive jusqu'en bas du site)

j'ai testé ton test mais apparement ce n'est pas ce que je voulais Smiley bawling j'avais du mal exprimer mon problème (et j'espère que là c'est bon)

j'ai trouvé un code en dhtml et javascript mais il ne centre pas l'image où je veux et n'arrive pas à le modifier pour :s
dardadax a écrit :
en fait je voulais faire en sorte que l'image reste fixe à l'écran mais pas dans le positionnement de la page du site! (ex: si le site fait 2000px de hauteur, que l'image suive jusqu'en bas du site)

Hmm... rien compris. Smiley biggol
C'est quoi « le positionnement de la page du site » ?
Et « fixe à l'écran », c'est ce que j'ai fait avec le positionnement fixe, mais qui n'a pas l'air de convenir.
en fait l'image ne bougerait pas mais le reste de la page oui Smiley cligne je ne vois pas comment le dire sinon :s

c'est pas grave, j'ai changé d'architecture de site Smiley sweatdrop j'avais trop de problèmes dessus Smiley confused
Sujet clos
Aller à