Probleme CSS position absolue et autre

**alexmorel** · 28/02/2006, 03h26

Voilà je désire faire comme sur l image

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**titoumimi** · 28/02/2006, 08h28

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...

**alexmorel** · 03/03/2006, 11h31

J ai presque trouve

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

**tyx** · 03/03/2006, 12h14

Plop,

Je pense que tu te compliques la tâche.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

**alexmorel** · 03/03/2006, 12h31

le problème est exactement le meme si l image de gauche est plus bas le texte ne commence pas a gauche

**tyx** · 03/03/2006, 12h42

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 : >

Probleme CSS position absolue et autre

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager