Autor Zpráva
Levoš
Profil
Dotaz ? Je povolené nadefinovat položce "li", zaoblené rohy. Využití třeba při tvorbě tlačítek.
Border-radius funguje pouze u "ul" . Položka „li“ při stejné šířce překryje, takže zaoblení "ul" není vidět.

<ul>
  <li>zaoblené rohy ?</li>
  <li>zaoblené rohy ?</li>
  <li>zaoblené rohy ?</li>
</ul>
Str4wberry
Profil
Je to povolené, ale pokud jde o odkazy, doporučuji stylovat přímo značku <a>.
margin
Profil *
A dotaz zní jak?
Dotaz je to, co končí otazníkem. Nevidím tu ani popis problému, nebo čeho chceš dosáhnout. Vidím akorát směsku pravdivých a nepravdivých tvrzení a kousek HTML kódu.
Levoš
Profil
Str4wberry:

Mám 5 tlačítek vedle sebe, ale něco tedy mám špatně, že se to nezobrazuje zaobleně ??? Díky za radu.

.tlac01                     {  margin: 0px; padding: 0px;  width: 555px; height: 34px; } 
.tlac01 li                  { float: left; list-style-type: none; font-family: Arial ;  cursor: pointer; margin-left: 1px; }
.tlac01 li a               { background-color: #FDFCC4;  color: #FFFFFF; height: 34px; width: 110px; font-size: 13px;
                                text-decoration: none; display: block; text-align: center; font-weight: bold ; }
.tlac01 li a:hover     { background-color: #0066AA;  }                        
.tlac01 ul li a           { border-radius: 5px;  }

<ul class="tlac01">
<li><a href="http://www.centrum.cz/" title="" target="_balnk">CENTRUM</span></a></li>
<li><a href="http://www.google.cz/" title="" target="_balnk">GOOGLE</span></a></li>
<li><a href="http://www.seznam.cz/" title="" target="_balnk">SEZNAM</span></a></li>
<li><a href="http://www.yahoo.com/" title="" target="_balnk">YAHOO</span></a></li>
<li><a href="http://www.portaly.cz/" title="" target="_balnk">PORTÁLY</span></a></li>
</ul>
Joker
Profil
Levoš:
Dotaz ?
Ne, je to řada oznamovacích vět.

ale něco tedy mám špatně
Uvnitř třídy .tlac01 není žádné <ul> (ona sama je <ul>), takže to poslední pravidlo se nemá na co aplikovat.
ninja
Profil
.tlac01 ul li a           { border-radius: 5px;  }

zbýrazněnou část "ul" vyhoďte a bude to fungovat. Nebo si to napište

ul.tlac01  li a           { border-radius: 5px;  }
jenikkozak
Profil
Levoš:
Mimo téma: V tom seznamu máš spany, které nikde nezačínají a máš překlep v klíčovém slově _blank, což může prohlížeč brát jako název okna a otevírat všechny odkazy stále do toho samého.
Levoš
Profil
ninja:
Odstranil jsem <ul> jak radíte a už se to zobrazuje, tak jak jsem chtěl. Moc děkuji.


Joker:
Moc tomu nerozumím. Myslel jsem si že to <ul> nebo cokoliv může být kdekoliv.
Je to někde podrobněji popsáno ? Doposud jsem to tedy asi pořád psal špatně.
Zápis
ul.tlac01 li a nebo tlac01 ul li a jsem vždy mylně pokládal za stejný. :(
Joker
Profil
Levoš:
Právěže ten zápis stejný není.
ul.tlac01 li a znamená: Prvek <a>, který je v <li>, který je v <ul> s třídou tlac01
.tlac01 ul li a znamená: Prvek <a> uvnitř <li>, který je v <ul>, který je v libovolném prvku s třídou tlac01

Tedy tomu prvnímu vyhoví např.: <ul class="tlac01"><li><a>toto</a></li></ul>
Zatímco druhému vyhoví např.: <div class="tlac01"><ul><li><a>toto</a></li></ul>
Levoš
Profil
Narazil jsem snad ještě na poslední jeden problém. Když budu chtít zaoblení jen a pouze u krajních tlačítek, tak si se zapisem nevím rady.
Použil jsem class i id. Ani jedno nefunguje ? Děkuji.

.tlac01                     {  margin: 0px; padding: 0px;  width: 555px; height: 34px; } 
.tlac01 li                  { float: left; list-style-type: none; font-family: Arial ;  cursor: pointer; margin-left: 1px; }
.tlac01 li a               { background-color: #FDFCC4;  color: #FFFFFF; height: 34px; width: 110px; font-size: 13px;
                                text-decoration: none; display: block; text-align: center; font-weight: bold ; }
.tlac01 li a:hover     { background-color: #0066AA;  } 


#tlac02 li a             { border-radius-topleft: 5px;  }
                       
.tlac03 li a           { border-radius-topright: 5px;  }

<ul class="tlac01">
<li id="tlac02"><a href="http://www.centrum.cz/" title="" target="_balnk">CENTRUM</span></a></li>
<li><a href="http://www.google.cz/" title="" target="_balnk">GOOGLE</span></a></li>
<li><a href="http://www.seznam.cz/" title="" target="_balnk">SEZNAM</span></a></li>
<li><a href="http://www.yahoo.com/" title="" target="_balnk">YAHOO</span></a></li>
<li class="tlac03"><a href="http://www.portaly.cz/" title="" target="_balnk">PORTÁLY</span></a></li>
</ul>
ninja
Profil
Levoš: Děláte stejnou chybu jako v prvním případě. Přeště te si ještě jednou co psal Joker. A trochu se základy CSS doučte, nic složitého to není.
margin
Profil *
Krom chyby, kterou zmínil ninja zápis pro zakulacení rohů máš chybně, zápis, nic, jako border-radius-topleft v CSS 3 specifikaci není.
Levoš
Profil
Asi by měl být zápis následujicí podle CSS3 : border-top-right-radius nebo border-radius: 5px 0px 0px 0px a pod....

To zaoblení jsem vyřešil zápisem:

li.tlac03 a         { border-radius: 5px 0px 0px 0px; }

Možná, že je nějaké ještě lepší rešení... ?

Moc všem děkuji za pomoc. Jsem rád, že jsem to s vaší pomocí vyřešil.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: