28173 sujets

CSS et mise en forme, CSS3

Alignement vertical dans une boîte

Bonjour, je me casse la tête à aligner une ligne de texte en bas et à droite d'une boîte <div>. Et ce texte est lui-même dans une boîte <h1>.
J'ai beau attribuer une position bottom à ma boîte #texte, rien n'y fait elle reste en haut.
La question est : est-ce qu'il faut intervenir sur la boîte #texte ou la boîte #conteneur ?


Le code CSS :
#texte {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #000000;
position: relative;
text-align: right;
}
#conteneur {
background-color: #6699CC;
height: 120px;
width: 250px;
}

Merci.
Salut.

Peux-tu modifier ton message pour mettre le code entre les balises appropriées ([ code] & [ /code] sans les espaces), comme demandé dans les règles du forum ?

Pour positionner ton titre h1 en bas à droite de son conteneur, tu peux utiliser le positionnement absolu : 
#conteneur {
   position: relative;
}
#conteneur #texte {
   position: absolute;
   bottom: 0;
   right: 0;
}
en supposant que l'id "texte" est appliqué au h1.

Edit: "bottom" n'a d'effet que si tu positionnes l'élément. Smiley cligne
Modifié par Thomas D. (19 Jan 2007 - 15:56)
Cela ne fonctionne pas.
En fait, par rapport à la photo (jointe) je veux la ligne en bas et à droite de la boîte bleue tout simplement.


#texte {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	position: relative;
	left: 0px;
	top: 0px;
	}
	
#conteneur {
	background-color: #6699CC;
	height: 120px;
	width: 250px;
}


upload/3601-Align.gif
renato a écrit :
Cela ne fonctionne pas
Et pourtant ça devrait marcher, si tu as utilisé le même code que moi :
#texte {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	position: absolute;
	bottom: 0;
	right: 0;
	}
#conteneur {
       position: relative;
	background-color: #6699CC;
	height: 120px;
	width: 250px;
}


PS : tu peux éditer ton premier message pour ajouter le BBcode.
Ok ça fonctionne, en fait je me plante dans les notions de :
- position relative
- position absolute.
Si on développe un peu moi je pensais que la boîte <div> avait un positionnement absolu par rapport à la boîte <body> et que la boîte #texte avait un positionnement relatif par rapport à <div>.
Peux-tu m'éclairer là-dessus (même si c'est Vendredi) ?
Encore merci.

#texte {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	[b]position: absolute;[/b]
	bottom: 0;
	right: 0;
	}
#conteneur {
       [b]position: relative;[/b]
	background-color: #6699CC;
	height: 120px;
	width: 250px;
}
C'est assez délicat à expliquer rapidement.

En très accéléré :

* la position par défaut des éléments est "static" : ils se placent dans le flux de la page, leur position dépend de leur place dans le code html.

* la position "relative" permet de décaler les éléments par rapport à la place qu'ils occupent normalement dans le flux de la page.

* la position absolue, qui nous intéresse dans ce cas-ci, permet de positionner un élément par rapport aux limites de son plus proche parent positionné (c-à-d dont la valeur de "position" est différente de "static").

Donc, pour placer ton texte en bas à droite du div, j'ai :

1. positionné le conteneur avec "position: relative". Mais comme je n'ai pas spécifié de décalage (avec les propriétés top, left, bottom ou right), il n'a pas bougé de sa place

2. j'ai positionné le titre en absolu, en bas à droite de son parent le plus proche positionné, qui est maintenant le div #conteneur.

Un peu de lecture pour en savoir plus ...
Ok merci pour tes conseils.
J'ai fait le tour des positions dans une boîte (sur tes conseils) mais je cale maintenant et pour finir pour mettre le texte au milieu de la boîte.
A +
Bonjour, je cale toujours pour aligner un bloc texte "au milieu vertical et horizontal" dans un autre bloc.

[b]#texte [/b]{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	position: absolute;
	top: 0px;
	left: 0px;
	}
[b]#conteneur[/b] {
       position: relative;
	background-color: #6699CC;
	height: 120px;
	width: 250px;
}

A +
Sujet clos
Aller à