28172 sujets

CSS et mise en forme, CSS3

Mettre un lien en bas d'un div

Bonjour,

Je souhaite mettre un lien en bas d'un div comme dans l'exemple ci-dessous :

Savez vous comment procéder car je n'y arrive pas..


div.box_accueil{
	float:left;
	background:url(../images/box-wood.jpg) no-repeat top;
	width:292px;
	height:127px;
	margin:5px;
	padding:0px 5px;
	border: 0px solid #000;
}
div.box_accueil a.more{
	float:right;
	width:280px;
	position:absolute;
	margin:0px;
	right:0;
	padding:0px;
	bottom:0;
	color:#666666;
	bottom:20px;
	text-align:right;
	border: 1px solid #000;
}
upload/24475-probleme-c.jpg
Bonjour.
1ere chose.
Tu ne peux positionner un élément en position:absolute que par rapport à un élément en position: relative ou absolute.
Donc première réponse. Ajoute la position relative à ta div.

Ensuite en complément la propriété float: right sur le lien ne sert à rien puisque tu es en position absolue.
Je vois que tu as 2 valeurs pour bottom également.

Ajouter de la marge ou du padding à un élément en position absolue ne sert à rien. Si tu veux déplacer ton lien tu dois jouer avec les valeurs du positionnement.

D'autre par sache que la position: absolute est un peut comme le float. Et que donc il faut que tu clear l'élément suivant si tu ne veux pas foutre le bordel.
Modifié par joska (11 Jan 2011 - 16:49)
joska a écrit :


D'autre par sache que la position: absolute est un peut comme le float. Et que donc il faut que tu clear l'élément suivant si tu ne veux pas foutre le bordel.

heu pas vraiment.

il suffit dans ton cas de prevoir une marge interne basse au div, de façon a degager l'espace necessaire a ton lien positioné en absolu et qui n'interagis plus dans l'espace d'affichage avec les autres elements de ta page.

GC
Dans ton cas effectivement tu n'as pas besoin de clear puisque le conteneur à une taille fixe.

Tu peux effectivement ne pas clear si tes box occupent tous l'espaces disponible.
Mais tu prend un risque que ton design se décompose sur certaine résolution d'écran.
Il existe des techniques de clear en pur css donc pourquoi s'en privé.
Ce n'est pas pour rien si dans tous les frameworks css si il y a ce genre de code.

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}
merci pour votre aide voici le code modifier :

body.accueil div.box_accueil{
	position:relative;
	float:left;
	background:url(../images/box-wood.jpg) no-repeat top;
	width:292px;
	height:127px;
	margin:5px;
	padding:0px 5px;
	border: 0px solid #000;
}
body.accueil div.box_accueil a.more{
	width:280px;
	height:13px;
	position:absolute;
	right:10px;
	bottom:10px;
	color:#666666;
	text-align:right;
}
Sujet clos
Aller à