Probleme CSS position absolue et autre

Version imprimable

28/02/2006, 03h26
alexmorel

Probleme CSS position absolue et autre
Voilà je désire faire comme sur l image

http://www.tapisgeiser.ch/exemple.JPG

:evil: Mais le problème c'est la dernière image ne se voit pas et le texte ne continue pas a droite au bout de la première image

mon css
Code:

1 2 3 4 5 6 7 8 9 10 11 .imgdroite { float: right; margin : 1em; } .imggauche { clear:both; float: left; margin : 1em; }
:!: Le tout est dans une cellule d'une table <td><td>

Aidez moi SVP, merci d'avance
28/02/2006, 08h28
titoumimi

j'aurait tendance à dire que ce n'est pas possible, puisque les floats te "créent" deux blocs horizontaux, tu ne peux pas afficher ton texte en Z...

J ai presque trouve

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
echo '<div class="conteneur">';
 
echo '<div class="bloc1">';
echo '<img width="150" src="../scripts/img_prod.php?pk='.$database->colonne['pk_produits'].'&img=1">';
echo '</div>'; 
 
echo '<div class="bloc2" height="10">';
echo '<img  width="150" src="../scripts/img_prod.php?pk='.$database->colonne['pk_produits'].'&img=2">';
 
echo '</div>'; 	
echo $texte;
 
 
echo '</div>';

et le ccs

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
.bloc1 {
		float: right;
		margin: 1em;
 
 
}
.bloc2 {
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
	padding-top: 300px;
}
.conteneur {
overflow: visible;
}

Le resultat
http://www.tapisgeiser.ch/prob2.JPG

:twisted: Il me manque comment aligne le texte en haut a gauche au debut

Plop,

Je pense que tu te compliques la tâche.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<!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" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr-FR" />
 
		<style type="text/css">
		div#content { margin: 0 auto;  width: 500px ; text-align: justify ; }
		img.imgRight { float: right ; border: 1px solid #000 ; display: inline; margin: 10px ; }
		img.imgLeft { float: left ; border: 1px solid #000 ; display: inline; margin: 10px ; }
		</style>
	</head>
 
	<body>
		<div id="content">
			<p>
				<img src="#" width="100" height="100" class="imgRight" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed gravida. Donec convallis blandit mauris. Quisque ante ipsum, pulvinar quis, elementum semper, adipiscing nec, lorem. Nunc nibh magna, sagittis at, accumsan eget, semper iaculis, lacus. Phasellus ut lectus. Nulla vel sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam neque diam, rhoncus et, bibendum sit amet, consectetuer in, nunc. Donec sem. Maecenas feugiat mauris ac mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
				<img src="#" width="100" height="100" class="imgLeft" />Fusce molestie leo. Morbi nonummy facilisis velit. Vivamus eros lacus, condimentum et, tincidunt at, consectetuer sit amet, nibh. In at mauris quis erat ullamcorper dapibus. Praesent auctor, purus sollicitudin feugiat auctor, lectus purus consectetuer lacus, id congue ligula tellus ut quam. Phasellus ligula. Integer tempor euismod augue. Sed adipiscing felis vel augue. Donec sed risus.
			</p>
		</div>
	</body>
 
</html>

Cela te convient?

03/03/2006, 12h31
alexmorel

le problème est exactement le meme si l image de gauche est plus bas le texte ne commence pas a gauche
03/03/2006, 12h42
tyx

Ce que tu souhaites c'est un comportement d'un média paginé, ce qu'un écran n'est pas.

Tu dois donc positionner tes images pour simuler ce que tu veux mais tu ne pourras pas l'obtenir aussi proprement que tu le souhaites.

Faut pas se chercher des problèmes là ou il n'y en a pas : >