| Autor | Zpráva | ||
|---|---|---|---|
| Levoš Profil |
#1 · Zasláno: 8. 1. 2013, 15:15:57
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 |
#2 · Zasláno: 8. 1. 2013, 15:24:46
Je to povolené, ale pokud jde o odkazy, doporučuji stylovat přímo značku
<a>.
|
||
| margin Profil * |
#3 · Zasláno: 8. 1. 2013, 15:29:57
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 |
#5 · Zasláno: 8. 1. 2013, 15:58:20
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 |
#6 · Zasláno: 8. 1. 2013, 15:58:29
.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 |
#7 · Zasláno: 8. 1. 2013, 16:10:32
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 |
#8 · Zasláno: 8. 1. 2013, 16:15:21 · Upravil/a: Levoš
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 |
#9 · Zasláno: 8. 1. 2013, 16:34:39
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 |
#11 · Zasláno: 8. 1. 2013, 16:58:05
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 * |
#12 · Zasláno: 8. 1. 2013, 17:11:42
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. |
||
|
Časová prodleva: 11 let
|
|||
0