Deux colonnes, éléments à la même hauteur

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Deux colonnes, éléments à la même hauteur

Combi_A_Vendre

Bonsoir à tous,

Pour une mise à page html, voici ce dont j'ai besoin :
- Mise en page sur deux colonnes.
- Colonne de droite : Du texte
- Colonne de gauche, des images.

Le problème : Je souhaite que la position des images se fasse par rapport au texte, c'est à dire que l'image reste en face du texte en relation.

Sachant que le div du texte a une largeur variable en fonction de la largeur du navigateur.

Quelqu'un sait comment faire ça sans sectionner le texte en plusieurs div?

Merci,
vw.

---------------
The best way to accelerate a computer running windows is at 9.8m.s-2

Publicité

fluminis

Code :

<html>
<head>
<style type="text/css">
div {
border:1px solid red;
width:50%;
}
p img {
border:1px solid green;
width:100px;
height:100px;
float:right;
}
p {
clear:right;
}
</style>
</head>
<body>
<div>
<p>
<img src="#" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
<img src="#" />
Maecenas purus neque, posuere id elementum vel,
</p>
<p>
<img src="#" />
Duis pharetra nisi a sem ultrices tincidunt.
</p>
<p>
<img src="#" />
Praesent a lectus libero. Phasellus non massa sodales
</p>
<br clear="right"/>
</div>
</html>

Message édité par fluminis le 06-12-2010 à 08:53:59

---------------
http://poemes.iceteapeche.com - http://www.simuland.net

Combi_A_Vendre

Merci fluminis, c'est nickel!
Juste un détail, te semble t'il possible de faire en sorte que le texte ne se glisse pas sous les photos? C'est à dire que le bord droit de la zone de texte s'arrête juste avant les images?
vw.

---------------
The best way to accelerate a computer running windows is at 9.8m.s-2

gatsu35

Blablaté par Harko

dans ce cas tu seras obligé de mettre le texte dans un div ou un élement de type inline, si tu omets de mettre des p

---------------
Blablaté par Harko

Combi_A_Vendre

Voilà, c'est bien le problème. Je dois contrôler la position d'une image qui est dans un div différent que celui du texte qui contrôle sa position.
J'arrive à m'en sortir a peu près en utilisant un positionnement en X supérieur à la largeur du div, mais ça me semble bancal.

vw.

---------------
The best way to accelerate a computer running windows is at 9.8m.s-2

fluminis

ton texte, il provient d'où ? tes images, elles proviennent d'où ?
Pourquoi ne peux-tu pas manipuler le texte comme bon te semble ?
D'où te vient cette limitation de ne pas sectionner le texte en plusieurs div ?

---------------
http://poemes.iceteapeche.com - http://www.simuland.net

fluminis

si tu as moyen de rajouter des marqueurs :

Code :

<html>
<head>
<style type="text/css">
.d {
border:1px solid red;
width:50%;
}
.text img {
border:1px solid green;
width:100px;
height:100px;
float:right;
}
.text {
clear:right;
}
div {
border:1px solid green;
margin-right:120px;
}
</style>
</head>
<body>
<div class="d">
<p class="text">
<img src="#" />
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</p>
<p class="text">
<img src="#" />
<div>
Maecenas purus neque, posuere id elementum vel,
</div>
</p>
<br clear="right"/>
</div>
</html>

Message édité par fluminis le 06-12-2010 à 14:01:00

---------------
http://poemes.iceteapeche.com - http://www.simuland.net

gatsu35

Blablaté par Harko

On ne mets pas des div dans un P, on ne peut mettre que des élément inline
il faut inverser les <div> et les <p> dans ce cas

---------------
Blablaté par Harko

Combi_A_Vendre

Tout est en html (pas de php ni de bdd).
J'ai pas envie de découper le texte en plusieurs div parce que ça fait de la mise en page supplémentaire.
Pour moi, l'idéal, est de mettre le texte en htlm, de rajouter des images, et qu'elles se placent automatiquement au bon endroit, sans se chevaucher et quelque soit la largeur de la fenêtre du navigateur.
Mais bon, si c'est trop galère, je ferai autrement.

Merci,
vw.

Message édité par Combi_A_Vendre le 06-12-2010 à 14:42:55

---------------
The best way to accelerate a computer running windows is at 9.8m.s-2

Combi_A_Vendre

Bon, si ça intéresse quelqu'un, j'ai réussi.
1- Le texte est à une marge de 155px du bord du div, comme ça j'ai la place de mettre l'image.
2- Les images sont dans des div float avec l'attribu clear:left. Comme ça, elles se glissent à gauche du texte les unes en dessous des autres sans se superposer

Code :

div.images {
float: left;
width: 150px;
text-align:justify;
font-size: 12px;
clear:left;
}
div.texte p,h2,h3{
padding-left:155px;
}

Code :

<div class="texte">
<P>Texte</P>
<div class="photo">
<img src="./images/image.jpg"><br>
Légende
</div>
<div class="photo">
<img src="./images/image2.jpg"><br>
Légende 2
</div>
<P>Autre texte</P>
</div>

vw.

Message édité par Combi_A_Vendre le 14-12-2010 à 12:52:07

---------------
The best way to accelerate a computer running windows is at 9.8m.s-2

FORUM HardWare.fr

Programmation

HTML/CSS

Deux colonnes, éléments à la même hauteur

Sujets relatifs
récupérer tout les élements d'un tree	[CSS] Réalisation d'un site trois colonnes flottantes dans Div
Aide vba : Comparer deux colonnes A et B et ajouter à B ce qu'il manqu	[SQL][Qt] Requet pour compter les colonnes ?
Maximum entre plusieurs colonnes	Problème linguistique : champs ou colonnes ?
faire une recherchev et sommer les colonnes sur un fichier excel avec	Acces aux elements d'une iframe
Comparaison de 2 colonnes dans 2 feuilles differentes	[Resolu] Bug avec éléments flottants sur mise en page
Plus de sujets relatifs à : Deux colonnes, éléments à la même hauteur

Page générée en 0.074 secondes