GTblog by Gianluca Turturro by Gianluca Turturro

Při formátování obsahu webu se mi přihodila situace, kterou jsem vyřešil celkem nestandardním řešením. O to řešení se s vámi nyní podělím.

Při přípravě wordpressového tématu pro můj nejnovější web, jsem potřeboval vyřešit, jak upravit odsazení netříděného seznamu <ul>, aby bylo vždy stejné, ať se nachází napravo od obrázku s pozicováním přes float nebo by se nacházel začátek onoho seznamu na normálním levém kraji stránky. Seznam se při nafloatování choval špatně, proto jsem jej floatovat nemohl.

Při nastavení margin-left nebo padding-left se sice odsadil seznam zleva, ale odsadil se “pod plovoucím objektem”. Takže sice byl odsazen od kraje stránky, nikoli ale od objektu.

Řešení tedy spočívá v relativním pozicování objektů <ul> a <li>.

Html kód tedy vypadá takto:

<div class="post">

 <p>
   <img class="alignleft" src="url-obrazku.jpg" />
   Nějaký úvodní text před seznamem.
 </p>

 <ul>
   <li>První prvek seznamu</li>
   <li>Druhý prvek seznamu</li>
   <li>Třetí prvek seznamu</li>
   <li>Čtvrtý prvek seznamu</li>
 </ul>

</div>

A CSS k tomu:

.alignleft { float:left; }
.post ul { position:relative }
.post li { position:relative; left:30px; }

Tímto způsobem je možné napozicovat odsazení seznamu (v tomto případě o 30 px) zleva. Seznam bude tak pozicován stejně jak vedle nafloatovaného prvku, tak vedle levého kraje dokumentu. Na výsledek se můžete podívat třeba právě na nových stránkách Sebamedu.

Filed under: Web
by Gianluca