J'ai une balise <a> dans un <li> pour faire un bouton carrᅵ.
<li> a une image de fond, centrï¿œe ou en haut.
<a> est ᅵ { width: 100%; height: 100%; } pour avoir le maximum de
surface de clic (pour mobiles) et contient un texte.
Comment aligner le texte du <a> en bas de sa surface ?
Merci
--
Stï¿œphane
Jeune Chambre Economique de Saintes *** http://www.jce-saintes.org
Agitateurs d'idï¿œes... accï¿œlï¿œrateurs de talents !
BTS Electrotechnique *** http://enselec.santonum.eu
on doit donc supposer/comprendre que ce LI est dimensionnᅵe en carrᅵ ?
> <a> est ᅵ { width: 100%; height: 100%; } pour avoir le maximum de
> surface de clic (pour mobiles) et contient un texte.
Soit ...
> Comment aligner le texte du <a> en bas de sa surface ?
Voilᅵ qui a l'air OK avec mes Fx, Opera, Safari :
ul { list-style: none; margin:0; padding:0; width:150px }
ul li { height: 150px;
position: relative;
background:url(../Image2.png) no-repeat top center #eee;
margin-top: 5px; }
li a { display: block; height: 100%; }
li a span { display: block;
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
}
<ul>
<li><a href="#A"><span>test 1</span></a>
<li><a href="#B"><span>test 2</span></a>
<li><a href="#C"><span>test 3</span></a>
</ul>
--
Stï¿œphane Moriaux avec/with iMac-intel
Ah oui le span dans le <a>...
Trop fort encore SAM !! MER-CI :-D
Et dis-donc, avec le développement de html5 et les Web-applis hors
ligne, le Javascript va renaître...
Du taf sur la planche !!
Sincères salutations
SAM a écrit :
> Le 14/01/11 12:16, Stéphane Santon a écrit :
>> Bonjour,
>>
>> J'ai une balise <a> dans un <li> pour faire un bouton carré.
>> <li> a une image de fond, centrée ou en haut.
>
> on doit donc supposer/comprendre que ce LI est dimensionnée en carré ?
>
>> <a> est à { width: 100%; height: 100%; } pour avoir le maximum de
>> surface de clic (pour mobiles) et contient un texte.
>
> Soit ...
>
>> Comment aligner le texte du <a> en bas de sa surface ?
>
> Voilà qui a l'air OK avec mes Fx, Opera, Safari :
>
>
> ul { list-style: none; margin:0; padding:0; width:150px }
> ul li { height: 150px;
> position: relative;
> background:url(../Image2.png) no-repeat top center #eee;
> margin-top: 5px; }
> li a { display: block; height: 100%; }
> li a span { display: block;
> width: 100%;
> text-align: center;
> position: absolute;
> bottom: 0;
> }
>
> <ul>
> <li><a href="#A"><span>test 1</span></a>
> <li><a href="#B"><span>test 2</span></a>
> <li><a href="#C"><span>test 3</span></a>
> </ul>
--
Stéphane
Jeune Chambre Economique de Saintes *** http://www.jce-saintes.org
Agitateurs d'idées... accélérateurs de talents !