Dotaz: CSS style pro opravdove profesionaly

[Jarrek]

Ahoj, najde se tady nejaky koder, ktery je tak dobrej (a to myslim smrtelne vazne), ktery dokaze dat v css temto odkazum pevnou sirku a vysku 20px; a zobrazi je vedle sebe v jednom radku a vycentruje je horizontalne na stred v DIVu "obal" ??

<div class="obal">

<ul>

<li><a href="#">1</a></li>

<li><a href="#">2</a></li>

<li><a href="#">3</a></li>

<li><a href="#">33</a></li>

<li><a href="#">44</a></li>

<li><a href="#">55</a></li>

</ul>

</div>

Jestli je tady fakt nekdo tak dobry, prosim o pomoc, uz opravdu nevim jak to udelat, zacinam mit pocit ze je to nemozne :(

predem diky za pomoc ;)

Odpovědi

[cronin]

Nie, nenajde. Pokial budu uzavrete v elemente li (list item), nebudu vedla seba v riadku. Problem je v html, s css nema nic spolocne. Mozno by slo predefinovat spravanie sa elementu li. Ale preco pouzivat polozky zoznamu, ked sa o polozky zoznamu nejedna?

[Karel Borkovec]

display: inline;

[Jarrek]

display: inline; ? myslim ze nevite co jste napsal :(

[Josef Kufner]

Ale ví. Když to nastavíš těm li, tak budou v řádku. A pokud obalujícímu ul dáš display: block; text-align: center; tak to bude i uprostřed. Ovšem je tu problém s nastavováním velikosti inline elementů.

[SKooDA]

Osobne mam radsi:

li {display: block; float: left; width: 200px; height: 20px; margin:0; padding:0}

a {display:block; width: 100%; height: 20px; text-align:center; line-height: 20px}

#cleaner {clear:both;}

a pod UL hodis nejaky cleaner, doufam ze jsem na nic nezapomel

[Josef Kufner]

Viz níže.

[Jarrek]

ahoj, netrvam na polozkach li, klidne to muze byt i takto, je mi to v celku jedno..

<div class="obal">

<a href="#">1</a>

<a href="#">1</a>

<a href="#">1</a>

<a href="#">1</a>

<a href="#">1</a>

</div>

[Vojtěch Horký]

Nestačilo by přihnout tohle nebo tohle?

[Jarrek]

nn, to nestaci, jelikoz tam je sirka dana pomoci padding a ja potrebuji zadat pevnou sirku, cili csechny a href... budou stejne vysoke i siroke..

[AraxoN]

Toto tu mi funguje vo FF 3.0.5:

<style type="text/css">
.obal {
    border: 1px solid red;
    text-align: center;
}
.obal UL {
    border: 1px solid green;
    display: inline;
    position: fixed;
    margin: 0px;
    padding: 0px;
    margin-left: -60px;
}
.obal LI {
    border: 1px solid blue;
    width: 20px;
    height: 20px;
    float: left;
    list-style-type: none;
}
</style>

S profesionalitou to ale nemá nič spoločné, Opera to nepoberie a Exploder tu našťastie nemám. Bordery sú tam samozrejme len na debug. Do ostrej prevádzky by som to nevypustil, v skutočnosti vlastne CSS nemám rád...

[steky]

Příloha:

• abc.html (610 bytů)

Jestli jsem to dobře pochopil, byla snaha o to, aby celé pole (20px na výšku a něco na šířku) bylo odkazem. V příloze je soubor, ve kterém je kód tak, aby toto fungovalo. Nejsou tam komentáře, dotazy můžeme řešit tady v diskuzi :) Kód je téměř totožný s tím, který uvedl AraxoN, nicméně některé položky jsem smazal a jiné doplnil. Ve Firefox 3.0.5 mi to fungovalo bezchybně.

[Jarrek]

tohle je zajimave, problem je ale v tom, ze nikdy nebudu vedet, kolik bude odkazu v tom menu, nekdy 3 a nekdy treba 20, proto to potrebuji vycentrovat. Cili pevna sirka toho ul asi nebude pravda..

[Josef Kufner]

Pak máš smůlu. Varianty jsou vesměs jen tyto dvě. Jedna s float: left a druhá s display: inline. Ta první má problém s velikostma odkazů, ta druhá s jejich vycentrováním. Takže si budeš muset vybrat, který z problémů ti vadí míň a nějak zamaskovat nedostatky.

Btw, tohle je celkem běžný problém řešený velmi často pro horizontální nabídky pod hlavičkou většiny stránek.

[steky]

To je také pravda :) Nicméně já osobně spíše stejně používám celé menu zarovnané vlevo a teprve obsah odkazů mám vycentrovaný.

[steky]

Ano, to máte pravdu. Proč jsem musel nastavit:

• margin: 0 auto;
• width:432px;

Protože jsem zatím nepřišel na to, jak obejít float: left; nastavený u LI. To je jediným problémem. Výsledné řešení také záleží na tom, v jakém projektu je toto menu použito. Podle toho pak lze zneužít vlastnosti okolních prvků.

[Filip Jirsák]

Stačí tomu ul nastavit margin-left a margin-right na auto, tím se to vycentruje. Pro MSIE je potřeba nějakou obezličku, asi nastavit nadřazenému prvku text-align na center;

[steky]

Auto margin jsem zkoušel a nic. Tenhle margin je totiž pro ul a ne pro li, které jsou plovoucí. Leda by tam byl ten cleaner, který je uvedený výše v diskuzi, ale to nemám u tohodle případu odzkoušeno.

[Filip Jirsák]

To je správně, že je margin pro ul, vždyť to chcete vycentrovat. Plovoucí li mi v tomto případě připadá nesmysl – tazatel nechtěl žádné plovoucí objekty, chtěl vše v jednom řádku, takže display: inline. Pokud objekty uvnitř li nemají požadovanou přirozenou šířku a výšku, pak inline-block, aby bylo možné jim nastavit i výšku a šířku.