28173 sujets

CSS et mise en forme, CSS3

Vertical-align: bottom [RÉSOLU]

Bonjour à tous,
Je suis en train de passer en html/css un menu, le modèle fourni étant un fichier photoshop.

upload/37-problememenu.jpg

Je n'arrive pas à aligner le text en bas de la cellule <span>. Le résultat doit être compatible tout navigateur...
Qui pourrait me dire comment faire svp?

html:

	<div id="menu">
		<hr />
		<p class="x0">Navegación:</p>
		<ul>
			<li><strong><span class="m1">Portada</span></strong></li>
			<li><a href="#" accesskey="2" title="Centro de negocio Retiro"><span class="m2">Centro de negocio Retiro</span></a></li>
			<li><a href="#" accesskey="3" title="Visita virtual"><span class="m3">Visita virtual</span></a></li>
			<li><a href="#" accesskey="4" title="Nuestros espacios"><span class="m4">Nuestros espacios</span></a></li>
			<li><a href="#" accesskey="5" title="Contactar"><span class="m5">Contactar</span></a></li>
		</ul>
		<hr />
	</div>


css:

	#menu ul {
		margin: 0 auto;
	}
		#menu li {
			float: left;
			border-left: 1px solid #B86900;
		}
			#menu li a {
				text-decoration: none;
				color: #F8E0BF;
			}
			#menu li strong {
				background: #B95200 url(/img/bg-menu-strong.gif) repeat-x bottom;
				color: #fff;
				display: block;
			}
				#menu li span {
					display: block;
					width: 135px;
					height: 89px;
					border-left: 1px solid #F08900;
					font-weight: bold;
					font-variant: small-caps;
					vertical-align: text-bottom;
				}
				#menu span.m1 {
					background: transparent url(/img/bg-menu-m1.gif) no-repeat top left;
				}
				#menu span.m2 {
					background: transparent url(/img/bg-menu-m2.gif) no-repeat top left;
				}
				#menu span.m3 {
					background: transparent url(/img/bg-menu-m3.gif) no-repeat top left;
				}
				#menu span.m4 {
					background: transparent url(/img/bg-menu-m4.gif) no-repeat top left;
				}
				#menu span.m5 {
					background: transparent url(/img/bg-menu-m5.gif) no-repeat top left;
				}

Modifié par brunob (12 May 2007 - 17:14)
Bonjour,

vertical-align fonctionne uniquement :
- pour le positionnement d'un élément en-ligne (par exemple une image) par rapport à la ligne de texte ;
- pour l'alignement vertical du contenu des cellules de tableau.

Vu l'absence de support de display: table-cell dans Internet Explorer, il faudra alors utiliser un tableau HTML (<table>). Et si jamais il y avait un doute : non, les tableaux ça n'est pas le mal. Smiley cligne

Pour un peu de culture générale des CSS, je signale tout de même que la propriété padding-top permet de ménager un retrait interne en haut d'un élément, par exemple pour laisser un peu de place pour l'affichage de tes images. Par contre, ça ne permettra pas d'avoir un alignement du texte en bas.
merci de ta réponse: je venais juste de mettre en place cette solution (padding-top) en attendant d'avoir mieux Smiley cligne

Il me semble avoir déjà résolu ce problème dans le cadre d'un ancien projet:
J'avais déjà utilisé le "display: table-cell" dont tu parles, mais en effet il fallait doubler le code pour gérer la compatibilité ie.
...Je n'arrive par contre pas à retrouver ces sources, je manque de temps et je crois de toute façon que je vais faire un AR client pour lui imposer cette modification plutot que de me casser le q

Si toutefois des personnes ont des infos sur cette problématique je suis prenneur.

a+
Modifié par brunob (10 May 2007 - 21:37)
Salut,

Pour une idée
<style type="text/css">
ul {
width: 300px;
list-style-type: none;
overflow: hidden;
}

li{
width: 100px;
height: 100px;
float: left;
position: relative;

}

li a{
position: absolute;
bottom: 0;
left:0;
display: block;
width: 100px;
text-align: center;
}

.m1{
background: lime;
}

.m2{
background: red;
}


</style>
	
</head><body>
<ul>
	<li class="m1"><a href="#" >Item1</a></li>
	<li class="m2"><a href="#" >Item2</a></li>
</ul>

</body>
Merci. Pas mal et intéressante ta solution!
Par contre le lien ne se fait que sur le texte hors faut que ca ressemble à un bouton...
Salut,

Peut être le code suivant te convient mieux
<style type="text/css">
ul {
width: 300px;
list-style-type: none;
overflow: hidden;
}

li{
margin-left: 3px;
float: left;
}

li a{
position: relative;
display: block;
width: 100px;
height: 100px;
}

li span{
position: relative;
display: block;
top: 80px;
line-height: 20px;
text-align: center;
}

.m1{
background: lime;
}

.m2{
background: red;
}


</style>
	
</head><body>
<ul>
	<li class="m1"><a href="#" ><span>Item1</span></a></li>
	<li class="m2"><a href="#" ><span>Item2</span></a></li>
</ul>

</body>
change le html.... le texte n'apparait pas entièrement...

<ul>
	<li class="m1"><a href="#" ><span>test avec un texte plus long</span></a></li>
	<li class="m2"><a href="#" ><span>Item2</span></a></li>
</ul>

Modifié par brunob (11 May 2007 - 15:45)
De rien,
Un poil de reflexion Smiley biggol 
li span{
position: relative;
display: block;
line-height: 20px;
text-align: center;

}

.m1{
background: lime;
}

.m2{
background: red;
}

.l1{
top: 80px;
}

.l2{
top: 60px;
}
</style>
	
</head><body>
<ul>
	<li class="m1"><a href="#" ><span class="l2">Lorem ipsum dolor sit amet</span></a></li>
	<li class="m2"><a href="#" ><span class="l1">Item2</span></a></li>
</ul>


Pour 3 lignes, je te laisse deviner !
Sujet clos
Aller à