Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Alignement verticial de texte

0 views
Skip to first unread message

Stéphane Santon

unread,
Jan 14, 2011, 6:16:09 AM1/14/11
to
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.

<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


SAM

unread,
Jan 17, 2011, 3:57:09 AM1/17/11
to
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 Moriaux avec/with iMac-intel

Stéphane Santon

unread,
Jan 17, 2011, 9:02:02 AM1/17/11
to
Bonjour,

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 !

0 new messages