28220 sujets

CSS et mise en forme, CSS3

Positionnement de bloc, une histoire de bottom

Bon je suis pas arrivé a faire un titre synthétique de mon pb ...

J'ai ca pour l'html :
<body>
	<div id="container">
		<div id="A"><p>Lorem ipsum et tout le reste...</p></div>
		<div id="B">
			B
		</div>
	</div>
</body>


et ca pour le css :
#container {
	width : 300px;
	height : 300px;
	border : 1px solid #000;
}

#B {
	width : 100px;
	height : 100px;
	background : #0ff;
}


Ce que je voudrai, c'est placer le div en bas du container.

Une idée Smiley smile ?

ps : faites pas gaffe a mon pseudo hein... Smiley sweatdrop
Modifié par benji_superstar (18 Apr 2006 - 21:45)
OK ok ok et deja merci Smiley smile

Moi qui pensais que c'etait aussi facile qu'un genre de "float : bottom" (je sais ca existe pas mais ca serai tellement pratique). Ce qui me gene la dedans c'est que je n'ai pas le droit de toucher au html Smiley ohwell (je m entraine sur le css zen garden Smiley smile )

Du coup je peux pas mettre le hack ie.
benji_superstar a écrit :
Ce que je voudrai, c'est placer le div en bas du container.

Il y aura du contenu dans ce conteneur, à part le div en question ?
Parce que sinon, un padding-top de 200px pour le conteneur et on n'en parle plus.
La solution pointée par gege71 marche peut-être également, si on l'adapte, à des blocs qui ne prennent pas toute la hauteur de la page. Mais si tu ne peux pas modifier le code HTML, il me semble que la seule solution restante est de positionner les blocs en question en absolu. Le deuxième bloc sera juste positionné 200px plus bas que le "conteneur" (qui ne sera plus un conteneur à proprement parler, mais on en donnera l'illusion, visuellement.

Par contre, je vois mal l'intérêt de bloquer la hauteur d'un bloc ayant un contenu plus ou moins variable. La hauteur donnée suffira peut-être à caser tout le contenu à une résolution ou taille de police donnée, mais dans d'autres situations tout foutra le camp.
Ta remarque est tout à fait pertinente. Ca résoud mon pb du coup Smiley smile

J'ai une question du meme style , a peu pres sur le meme sujet :
Dans le css zen garden on m impose un truc comme :


<div id="container">
<div id="title">TITRE</div>
<div id="comments">blablabla</div>
</div>


Ce que je veux ici, c est avoir mon title en bas et les comments en haut? C'est à dire inverser l ordre naturel des div... Une suggestion? (pas touche au html Smiley smile )
benji_superstar a écrit :
Ce que je veux ici, c est avoir mon title en bas et les comments en haut? C'est à dire inverser l ordre naturel des div... Une suggestion? (pas touche au html Smiley smile )

Sans connaître à l'avance la hauteur du bloc des commentaires, je ne pense pas. Parce que sinon tu aurais toujours pu utiliser le positionnement relatif.

#title {
	height: 40px;
	position: relative;
	top: 200px;
}
#comments {
	height: 200px;
	position: relative;
	top: -40px;
}

Un truc du genre.

Sinon je pensais aussi à l'utilisation des flottants... mais en vertical je ne vois pas trop comment bidouiller quelque chose.
Modérateur
bonjour,

sans changer l'ordre du html mais visuellement les inverser, il te suffit de ressortir une de ces balise du flux.

<div id="container">
<div id="title">TITRE</div>
<div id="comments">blablabla</div>
</div>


avec un css du genre :

#container {position:relative;
padding-bottom:la hauteur de #title;
}
#title {
position:absolute;
bottom:0;
left:0;
width:ne pas oublier de dimensionner ;
height:ne pas oublier de dimensionner ;
}

de cette façon tu place le titre en bas de son conteneur et en le sortant du flux, #comments prends sa place des le premier pixel de #container.

++
Modifié par gcyrillus (19 Apr 2006 - 22:50)
gcyrillus a écrit :
sans changer l'ordre du html mais visuellement les inverser, il te suffit de ressortir une de ces balise du flux.

Tu aurais un exemple qui marche, parce que je viens de tester et ça ne me donne rien de bon.
Le bloc positionné en absolu se met bien en bas à gauche... de la fenêtre, pas du bloc parent. Logique, vu que le positionnement en absolu le fait sortir du flux du bloc parent. Il n'y a que dans le cas où on n'indique aucune valeur de positionnement (pour top, right, bottom et left) que le bloc positionné en absolu vient se placer selon sa position dans le flux. Ce qui n'arrange guère nos affaires.
Je remet ma solution, certes limitée, mais que j'ai au moins réussi à faire marcher...

<html>
<head>
	<style type="text/css">
	#conteneur {
		margin: 50px;
		background: burlywood;
		padding: 10px;
	}
	#contenu1 {
		height: 100px;
		position: relative;
		bottom: -200px;
		background: blue;
	}	
	#contenu2 {
		height: 200px;
		position: relative;
		top: -100px;
		background: red;
	}
	</style>
</head>

<body>
	<div id="conteneur">
		<div id="contenu1">Premier</div>
		<div id="contenu2">Deuxième</div>
	</div>
</body>
</html>


Testé avec succès avec Firefox, Konqueror, Opera, IE Win 6 et IE Win 5.0
Sujet clos
Aller à