18041 sujets

Questions générales et questions de débutants

[Résolu] Comment positionner les éléments en CSS ?

Bonjour,

Ma question porte sur le tutoriel Comment positionner les éléments en CSS ? dont voici un extrait avec l'exemple d'une image alignée à droite d'un texte :
a écrit :
Partie HTML :
<div class="conteneur">
<img class="image" src="..." alt="" />
<p>bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla ...</p>
</div>

Et la CSS correspondante :
.conteneur {
width: 40%;
background-color: yellow;
}
.image {
float: right;
}


Je souhaiterais allonger le bloc "image" (qui appartient au bloc "conteneur") vers le bas jusqu'à ce qu'il s'arrête là où le bloc "conteneur" se termine. Un peu comme s'il s'agissait d'une colonne.

Mais je voudrais obtenir ce résultat sans modifier le balisage et sans attribuer au bloc "conteneur" une marge du style:
margin-right: (nb de pixels de la largeur du bloc "image")px


Merci pour vos lumières,
Dendicus
Modifié par Dendicus (30 Sep 2008 - 19:34)
Bonjour Dendicus,

Je ne suis pas très sûr de comprendre où tu veux en venir...

Si ton image doit se répéter dans l'axe des ordonnées (y) (ou "s'alonger vers le bas"), il s'agit, a priori, d'un effet décoratif...ton image devrait donc se trouver dans ta feuille de styles, en image de fond de ton conteneur par exemple, répétée sur l'axe des y, et positionnée comme tu le souhaites (top right dans ton exemple) de sorte que tu obtiennes cet effet de "colonne" qui s'alongera naturellement jusqu'en bas du conteneur.

Si nous reprenons l'exemple du tutoriel:
1- créer une image (100*10 par exemple - couleur et dimensions à ta convenance évidement)
2- le css :

.conteneur {
width: 40%;
background: yellow url(red.gif) repeat-y top right;
}

3-html :

	<div class="conteneur">
		<h3>Thème du mois : La Couleur Rose</h3>
			<p><strong>Quelle belle couleur que le rose, n'est-ce pas ? <br />
			Faites nous voir la vie en rose, faites-nous rêver !</strong>
			</p>
			<p>Les dates à retenir :</p>
				<ul>
					<li>Participation : du <strong>6  septembre  2008</strong> au <strong>25  septembre  2008 à midi</strong></li>
					<li>Date de début des votes : <strong>25  septembre  2008 à midi</strong></li>
					<li>Date de fin des votes et du concours septembre  2008 : <strong>30  septembre  2008 à midi</strong></li>
				</ul>
	</div>

(hs : voter pour les différentes participations.)

L'image rouge devrait normalement s'alonger jusqu'au bas du conteneur (cela tombe bien c'est ce que nous voulions faire Smiley lol ) et cela, même si tu rajoutes du contenu...pratique, non ?

Il faudra sans doute définir une marge interne à droite si tu ne souhaites pas que ton texte "déborde" sur "l'image rouge" ou te touner du coté des colonnes factices décrites dans ces articles sur pompage par exemple ou chez l'ami Florent. Smiley cligne

En espérant que cela réponde à ta problèmatique, dans le cas contraire, n'hésites pas à repréciser les choses Smiley smile

Cdt,
Sylvain
bonjour

si tu veux éviter que le texte ne vienne en dessous de l'image je ne vois pas comment faire sans changer le balisage

tu pourrait mettre ton image dans une boite <div> et ce serait à cette boite que tu attribuerai le float:right; (avec peut être un "&nbsp;" en dessous de l'image)


Partie HTML :
<div class="conteneur">
<div id="image"><img class="image" src="..." alt="" /></div>
<p>bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla ...</p>
</div>

Et la CSS correspondante :
.conteneur {
width: 40%;
background-color: yellow;
}
div#image {
float: right;
}




j'ai rien dit .... marche pas
Modifié par scott54 (30 Sep 2008 - 19:35)
Merci pour l'aide. Effectivement je vais devoir changer un peu le balisage... et là ça va devrait aller.
voila un résultat qui semble s'approcher de ce que tu cherche



<style>

.conteneur {

width: 40%;

background-color: yellow;

}

div#image {

float: right;
margin-bottom: 100%;


}

</style>
</head>

<body>
<div class="conteneur">

<div id="image"><img class="image" src="img/fond02.png" alt="" /><p>&nbsp; <br /></p></div>

<p>bla bla bla bla bla bla bla bla blbla bla bla bla bla bla bla bla bla bla

blabla bla bla bla bla bla bla bla bla bla

blabla bla bla bla bla bla bla bla bla bla

blabla bla bla bla bla bla bla bla bla bla

blabla bla bla bla bla bla bla bla bla bla

blabla bla bla bla bla bla bla bla bla bla

blabla bla bla bla bla bla bla bla bla bla

blabla bla bla bla bla bla bla bla bla bla

blabla bla bla bla bla bla bla bla bla bla

blabla bla bla bla bla bla bla bla bla bla

blablala bla bla bla bla bla

blabla bla bla bla bla bla bla bla bla bla

blablala bla bla bla bla bla

blabla bla bla bla bla bla bla bla bla bla

blablala bla bla bla bla bla

blabla bla bla bla bla bla bla bla bla bla

blablala bla bla bla bla bla

blabla bla bla bla bla bla bla bla bla bla

blabla bla bla bla bla bla bla bla bla bla

blabla bla bla bla bla bla bla bla bla bla

blaa bla

bla bla bla bla bla bla bla bla bla bla ...</p>

</div>











</body>
</html>




le " <p>&nbsp; <br /></p> " c'est pour éviter que la dernière ligne ne glisse en dessous de la boite image mais ça marche pas terrible dans firefox3
Modifié par scott54 (30 Sep 2008 - 19:43)
Sujet clos
Aller à