Zvětšení aktivní plochy odkazu – CSS – Fórum – Programujte.com

Zdravím, mám menu vytvořené pomocí seznamu <ul><li>... Jak docílím toho, aby hypertextové odkazy měli aktivní oblast po celém tlačítku a ne jen na samotném textu?

#1 Pavelv
Neřeš velikost nav, ul, ani li. Jen hoď padding/velikost na 'a'... Já dělám menu vždy takto:

<nav>

	<ul>

		<li><a href="/">Home</a></li>
		<li><a href="/">Science</a></li>
		<li><a href="/">Wiki</a></li>

	</ul>
</nav>

...

nav li { list-style: none }

nav a
{
	padding: 20px;
	text-decoration: none;
	...
}

Anebo dám 'a' pevnou velikost a text nějak umístím - třeba centruji... (Ideál je mít rodiče inline-block, aby byli stejně velcí.)

#1 Pavelv 

CSS:

display:block;

#3 Kit
Díky, to je přesně ono. Ještě využiji vlákna. Mám nad sebou dva prvky: 

<div id="strip">
<img src="_pages/iq55.jpg" alt=" "/>
<p>popisek obrázku1
</div>

<div id="strip">
<img src="_pages/iq55.jpg" alt=" "/>
<p>popisek obrázku2
</div>

Jak je napozicuju do hotové stránky, aby byly nad sebou? Druhý prvek začíná na konci prvního textu, a potřebuji aby konec prvního prvku byl se spodkem obrázku. V css mám:

div#strip {
}

div#strip img {
float: left;
max-height:  150px;
max-width:  150px;
}

#4 Pavelv
Sice nevím přesně, co chceš, ale zkus si pohrát s tím "float:left", který takové věci dělá.

Připojen obrázek.

#5 Kit
Vytvořil jsem zjednodušený náhled jak to chci. Požaduji abych mohl do stránek vkládat obrázky o libovolné velikosti. Maximální velikost je dána parametrem max-width/height = 150px. To znamená aby element strip byl třeba 150+50px vysoký. To jsem nastavil přímo  

div#strip {
height: 200px;
}

Ovšem pokud vložím obrázek o velikosti 100px, bude tam moc velká mezera a já potřebuji aby se přizpůsobila zase na 100+50px

max-height?
padding, margin?

div#strip {margin:25px 0;}