vertical align dans un div

22 janv. 2007, 13:46

Bonjour,

Voilà j'ai deux div simple :

<div>Contenu etc....<div>BAS</div></div>

Je souhaite que BAS soit afficher tout en bas du div c'est à dire un alignement vertical en bas

Comment faire ?

22 janv. 2007, 14:55

Utilise un positionnement :

Code : Tout sélectionner

<div id="bloccontenant">
    <p>Paragraphe normal dans le bloc contenant</p>
    <div id="piedbloc">Texte du pied de bloc</div>
</div>

À partir de là, dans ta feuille de style, mets ceci (ajuste les détails selon tes besoins) :

Code : Tout sélectionner

#bloccontenant {
    position: relative;
    height: 300px;
    border: 1px solid #999;
}
#piedbloc {
    position: absolute;
    left: 0;
    bottom: 0;
    border: 1px solid #99f
}

22 janv. 2007, 17:49

Merci mais en fait je vais donner mon code en entier car là je n'arrive pas à utiliser ta réponse :

Code : Tout sélectionner

.diz {
height: 100%;
text-align:center;
}
.contenu 
{
background-image:url(imagedesign.gif);
width:500px;
margin:auto;
padding:auto;
text-align:center;
height:100%;
}

<div class="diz">
  <div class="contenu">
Contenu affiché ici....
      </div>
</div>

Il faut donc que là en bas de page soit affiché un texte

22 janv. 2007, 18:03

Remplace dans tes classes et dans ton html les noms de "diz" par "bloccontenant" et "contenu" par "piedbloc". Ajoutes les attributs de Cyrano en enlevant ceux qui ne t'interessent pas (genre border et height) et tu verras que tu arriveras très bien à t'en sortir tout seul

Pour information en css :

.nomClasse => permet de définir une nouvelle classe que tu appliqueras aux éléments de ton choix
#nomClasse => permet de définir une nouvelle classe qui sera automatiquement appliquée à l'élément dont l'id est "nomClasse"

23 janv. 2007, 08:38

Ah c'est bon j'ai réussi, en fait j'avais pas mis position: relative je pensais pas que c'étais aussi important

23 janv. 2007, 09:46

Un élément positionné en "absolute" le sera toujours par rapport au premier élément parent positionné, et ce sera par rapport à <body> s'ilo n'y en a aucun. Donc un <div> positionné en "absolute" contenu dans un autre <div> positionné lui-même en "relative" sera positionné par rapport à ce <div> parent dans l'arbre DOM.

CQFD...

23 janv. 2007, 13:02

Et sinon (je sais, je squatte honteusement un topic

) concretement, quel est l'intéret du vertical-align ? j'ai essayé d'en coller dans des cellules, des div, des images etc. sans y trouver aucun résultat probant...

Dans le même genre, je cherche une équivalence css au align="absmiddle" des images ?

23 janv. 2007, 19:01

Moi j'utilise justement vertical align pour remplacer "absmiddle", voilà un exemple de code :

Code : Tout sélectionner

.v {
vertical-align:middle;
}

<span class="v">TEXTE</span><img src="image.jpg" class="v">

23 janv. 2007, 22:32

Ryle,

Y'a un intérêt entre autre si tu veux aligner (ici vers le haut) du texte dans deux cellules d'un tableau qui n'ont pas la même hauteur:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>

<body>
<table><tr><td style="vertical-align:top">toto</td><td>titi <br />tutu</td></tr></table>
</body>
</html>

EDIT Et pour les images j'ai rien trouvé de mieux pour l'instant que la solution de Bins007 ci-dessus.

vertical align dans un div

Qui est en ligne