Discussion :

[leviathan516]

Bonjour a tous,

je suis en train de passer mon site au standart XHTML 1 strict. Mais malheureusement j'ai un leger problème de positionnement d'images.
en fait sur l'une de mes pages j'ai un contenu de texte positionné a gauche et a droite j'ai deux images l'une en dessous de l'autre. Avant je positionné tout ca avec un tableau et donc je pouvait facilement mettre une image en haut a droite du texte et l'autre image en bas a droite du texte avec un espace vide variable en fonction du texte.
Mais comme je n'utilise plus de tableau, j'arrive maintenant a positionné mes 2 images a droites avec un largeur fixe et mettre mon texte a gauche avec une largeur variable. Mais pour les images en fait je n'arrive plus a les positionner comme avant (avec un espace variable entre les deux en fonction de la longueur du texte de gauche)
voici mon code html:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div class="container">
	<div class="droite">
		<div class="image_leviathan_haut">
			<img src="../../Images/Leviathan/pentagramme_terre.gif" alt="pentacle" />
		</div>
		<div class="image_leviathan_haut">
			<img src="../../Images/Leviathan/pentagramme_terre2.gif" alt="pentacle" />
		</div>
	</div>
	<div class="text_leviathan">
		texte de longeur variable
	</div>
</div>

et le css:

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
 
.text_leviathan {
	margin-right: 263px;
}
.container {
	margin-bottom: 0;
	position: absolute;
}
.droite {
	right: 0px;
	position:absolute;
	width: 253px;
	margin-right: 10px;
	height: 100%;
}
.image_leviathan_haut {
	top: 0px;
}
.image_leviathan_bas {
	bottom: 0px;
	position: absolute;
}

si par hasard, vous ne comprendriez pas ce que je veux faire:
voila ma page avec les tableaux (donc je veux faire comme celle ci): http://dhost.info/leviathan666/Pages_web/leviathan.html
voal ma page en xhtml (donc celle a problème): http://dhost.info/leviathan666/Pages...leviathan.html

Merci d'avance pour vos precieux conseils

[Huntress]

hum faudrait jouer avec du margin-bottom sur ta classe image_leviathan_haut.

[henry4]

bsr

j'ai pas trop le temps mais regardes déjà ton code des deux images où tu as placé tes class identiques. "en haut"

à moins que j'ai pas bien vu?

Code :

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

1
2
3
4
5
6
7
<div class="droite">
			<div class="image_leviathan_haut">
			<img src="../../Images/Leviathan/pentagramme_terre.gif" alt="pentacle" />
			</div>
			<div class="image_leviathan_haut">
			<img src="../../Images/Leviathan/pentagramme_terre2.gif" alt="pentacle" />
			</div>

@ plus
henry

[leviathan516]

J'ai honte!

Merci j'avais la bonne solution et c'est juste une erreur de copier/coller.

Merci encore à vous deux de m'avoir répondu.