ul li a : le padding "saute" le LI pour aller chercher le UL ...

[bagou01]

Bonjour,
c'est un peu abstrait mais très simple comme problème (à expliquer, pas à résoudre)

J'ai une structure

<ul>
<li>
<a>
blabla

</a>
</li>
</ul>

avec le css suivant :

ul{
  height: 100%;

  margin: 0;
  padding: 0;
}

ul li{
  height: 25%;

  width: 100%;
}

a{
  display: block;
  float: right;
  height: 25%;
  padding-right: 2%;
  position: relative;
  width: 98%;
  padding-top:75%;
}

Le problème est que sur mon a, le padding de 75% explose complètement ma structure...
Je pensais que height:25% et padding-top:75% feraient la totalité du LI (75+25 = 100%) mais même déjà avec un padding de 10% je déborde en dessous du LI... donc il semble que le padding-top appliqué sur le a prend son pourcentage non pas du LI, mais du UL (qui lui fait 100%)...

je suis perplexe...

quelqu'un a une idée ?

[ghazal]

Re : ul li a : le padding "saute" le LI pour aller chercher le UL ...

Salut,
dans ces cas-là, et comme on ne connait la structure du reste de la page, tu peux t'aider d'un éditeur online.

J'ai repris exactement la typologie que tu donnes + un border coloré pour le li.

http://jsfiddle.net/ghazal/E4hn7/

Tu peux changer ce que tu veux dans le tableau de droite (les CSS).
Pour voir les changements, cliquer à chaque fois sur Run (en haut, à gauche).

Hope it helps.