28172 sujets

CSS et mise en forme, CSS3

Vertical-align: bottom;

J'ai de la difficulté à faire fonctionner la propriété 'vertical-align: bottom;'

je site mon code

HTML

<div id="menu">
     <div id="nav_left"><a href="."><span style="color: #666666;">yourname</span><span style="color: #222222;">here</span>&nbsp;<span style="color: #666666;">photography</span></a></div>
    <div id="nav_right"><a href="#">about</a>&nbsp;&nbsp;&nbsp;<a href="#">contact</a></div>
    <div id="nav_center">text x y z</div>
</div>


CSS

#menu {
			height: 75px;
			font: 10px tahoma, verdana, helvetica, arial, sans-serif;
			font-weight: bold; /* normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900 */
			background: #99CCCC;
			margin-left: 25px;
			margin-right: 25px;
			color: #2a2a2a;

		}

#nav_left {
			text-align: left;
			float: left;
	
		}

		#nav_right {
			text-align: right;
			float: right;
		}

		#nav_center  {
			float: right;
	

		}



le div menu est de 75px de haut et je veux mettre mon text tout au bas - comment faire?

Merci
Je veux just savoir comment pour mettre le texte dans le bas au lieux qu'il soit dans le haut.


je pense que c'est pas la bonne propritété à utiliser.
Modérateur
bonjour,

pour la propriété , c'est oui et non pour le vertical-align:

Il ne s'applique qu'au cellule de tableau (vrai ou mise en forme avec display) ou les elements de type inline , l'un par rapport a l'autre.

alternative au tableau possible :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head><title>test-valign</title><style type='text/css'>#menu {
			height: 75px;
			font: 10px tahoma, verdana, helvetica, arial, sans-serif;
			font-weight: bold; /* normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900 */
			background: #99CCCC;
			margin-left: 25px;
			margin-right: 25px;
			color: #2a2a2a;
			display:table;
			width:95%;
		}
#nav_left {
			text-align: left;
			display:table-cell;
			vertical-align:bottom;
		}
		#nav_right {
			text-align: right;
			display:table-cell;
vertical-align:bottom;
		}
		#nav_center  {
			display:table-cell;
			vertical-align:bottom;
		}
 #nav_left ,#nav_center ,#nav_right  {
		width:33%;}
</style>
<!--[if IE]>
<style type="text/css">

#menu , #nav_left ,#nav_center ,#nav_right  , .align_ie{
display:inline;
zoom:1;
}

.align_ie {height:75px;width:0;}
</style>
<![endif]--></head>
<body>
<div id="menu">
<div id="nav_left"><a href="."><span style="color: #666666;">yourname</span><span style="color: #222222;">here</span>&nbsp;<span style="color: #666666;">photography</span></a></div>
    <div id="nav_center">text x y z</div>
    <div id="nav_right"><a href="#">about</a>&nbsp;&nbsp;&nbsp;<a href="#">contact</a></div>
<span class="align_ie"></span>
</div>
  </body>
</html>

(modif du flux et dimension appliqué)


FAQ http://forum.alsacreations.com/faq/faq-3-Comment-centrer-verticalement-un-element-.html
tentative d'explication et rappel des liens de la FAQ d'alsacréations. : http://yidille.free.fr/plux/valign/?2-complement-vertical-align

et demo avec la technique mise en oeuvre pour ton exemple (le span en plus pour IE) : http://gcyrillus.free.fr/essai/v-align-midlle-block-tous.html
Ou bien un simple padding-top de disons 55 ou 60px sur div#menu, ça peut le faire suivant le design à atteindre...
Merci les gars c'est exactement ce que je recherchais.

Mille fois merci, c'étais mon premier post sur le forum et je dois dire que le site est très bien fait.
Sujet clos
Aller à