| Autor | Zpráva | ||
|---|---|---|---|
| Idkfa Profil * |
#1 · Zasláno: 14. 12. 2009, 22:57:42
Dobrý den, Ahoj :)
Po asi roce se vracím k html, css atd.. a dělám web, přesněji něco jako hudební portál. Všechno šlape jak má, až na jednu věc a to jsou trojúhelníčky, které fungují jako hover odkazů v menu. Zkrátka jsem optimalizoval vzdálenost jednotlivých trojúhelníčků pro firefox a když jsem to otevřel v IE a Chromu, tak to bylo příliš posunuté doprava. Už jsem podával dotaz zde na foru do sekce javascript, myslel jsem že to vyřeším tak, že zjistím verzi prohlížeče a budu to formátovat podle toho jaký prohlížeč uživatel má, ale zjistil jsem, že to bude složité (tím myslím spíš na prostor a jednotlivou optimalizaci všech 7 trojúhelníků pro 3-4 prohlížeče), tak se radši ptám ještě zde, zda nemám spíš nějakou botu v CSS. Ještě to shrnu : Potřeboval bych, aby při najetí na jednotlivý link se uprostřed pod ním zobrazil trojúhelník a to ve všech prohlížečích, aby to nebylo posunuté. Příklad jsem umístil zde (je to jen samotné menu): http://buna.cz/music/test.html a css dokument http://buna.cz/music/test.css Doufám že někdo nemá ještě tmavší monitor než já, jsem si vědom toho že je to příliš tmavé, pokud by to byl velký problém, tak ten příklad ještě předělám :-) Děkuji předem za všechny odpovědi. |
||
| Camo Profil |
#2 · Zasláno: 15. 12. 2009, 10:01:12
Idkfa:
Je to spôsobené veľkosťou písma. Každý prehliadač ho zobrazuje inak. Ale riešenie nepoznám. To musí vyriešiť niekto lepší odo mňa. |
||
| Idkfa Profil * |
#3 · Zasláno: 15. 12. 2009, 14:49:09
Camo:
Aha, děkuji :) A myslíte že to má řešení ? Je třeba nějaký font který zobrazujou prohlížeče stejně, nebo existuje nějaký fígl ? |
||
| Camo Profil |
#4 · Zasláno: 15. 12. 2009, 17:43:13
To je celkom zložitá vec, ak nechcem, aby ma tu kameňovali za propagovanie tabuliek.
Tu totiž ide o to, aby sa tam zobrazoval ten trojuholník a to by bolo treba riešiť cez background a display v odkazoch. Lenže keď sa dá odkazom display:block, tak je problém to vycentrovať ak je šírka odkazov neznáma ako tu. Moja rada je: Dať menu do tabuľky a bunkám(odkazom) mastaviť v backgrounde ten trojuholník. Teda treba dať display:block a background odkazom, nie bunkám, aby hover fungoval. |
||
| panther Profil |
#5 · Zasláno: 15. 12. 2009, 19:57:23
Camo:
„Moja rada je:“ ne moc dobrá rada. Idkfa: pro tebe nejjednodušší bude udělat menu normálně. Tzn. začít seznamem <menu>, každou položku do <li>. V odkazu bude jakýkoliv řádkový element (třeba <span>). Při „menu a:hover span“ mu přidej na background ten trojúhelník. |
||
| Bubák Profil |
#6 · Zasláno: 15. 12. 2009, 20:34:50 · Upravil/a: Bubák
panther:
„V odkazu bude jakýkoliv řádkový element (třeba <span>)“ Proč? „Při ‚menu a:hover span‘ mu přidej na background ten trojúhelník.“ Jak uděláš, aby se šipka zobrazila přiměřeně daleko pod textem odkazu, nechápu. Ale pokud víš, sem s tím, může to být zajímavé řešení. Idkfa: Jde to třeba takto: http://teststranek.kvalitne.cz/menu7.3/ Ale jde "první nástřel", chce dát do <menu>, nebo <ul> a položky menu do <li>. Šlo by to udělat i jinak, dát řádkovým elementům rozměry, což vezme IE (je ve quirk režimu) a pro ostaní prohlížeče pomocí tabulkových hodnot display. |
||
| panther Profil |
#7 · Zasláno: 15. 12. 2009, 20:45:07 · Upravil/a: panther
Bubák:
„Proč?“ protože jsem si nevšiml, že odkaz nemá pozadí, proto jsem přidával pro šipku jeden element navíc. „Jak uděláš, aby se šipka zobrazila přiměřeně daleko pod textem odkazu“ výška položek i odkazu, až teď koukám, že jsem se podíval špatně. Hm, hm, špatně jsem uvedenou ukázku na první pohled přečetl. Příspěvek výše beru zpět. |
||
| Camo Profil |
#8 · Zasláno: 15. 12. 2009, 22:41:54 · Upravil/a: Camo
Bubák:
To riešenie vyzerá skvele. Ja som vychádzal z toho, že riadkovým elementom sa nedá nastaviť pozadie, resp. som myslel, že to je risk ,,out of standard,,. Tak ako to teda je? Dá sa nastavovať inline prvkom pozadie, či nie? Je to podporované? |
||
| Bubák Profil |
#9 · Zasláno: 16. 12. 2009, 07:54:01
Camo:
Inline elementu jde nastavit pozadí, ale nejdou mu nastavit rozměry. Já jsem inline elementy zvětšil deklarováním paddingu, pomocí dolního paddingu jsem dole získal prostor pro šipku (trojúhelník). |
||
| Idkfa Profil * |
#10 · Zasláno: 16. 12. 2009, 14:35:50
Super, díky moc za všechny odpovědi, zkusím to.
|
||
| Camo Profil |
#11 · Zasláno: 16. 12. 2009, 16:08:35
Bubák:
Vďaka moc za radu. |
||
| Idkfa Profil * |
#12 · Zasláno: 16. 12. 2009, 19:39:59
Tak jsem to udělal podle Bubákova příkladu, zdá se, že je to ve všech prohlížečích a rozlišeních v pohodě. Akorát ve FF byl ten padding zas cca. 21px a ve Chromu a IE 20px, tak jsem tam přidal overflow: hidden a ve FF je to zkrátka trošku menší, ale to ničemu nevadí, nikdo to nepozná. Vypadá to dobře :)
Je to kdyžtak umístěno tady www.buna.cz/music/test.html (ten JS na začátku jsem jen zapomněl smazat, ten tam samozřejmě být nemá), pokud byste měli ještě někdo čas, koukněte se na to, prosím, a řekněte mi zda se vám to zobrazuje také správně a jestli vidíte nějakou slabinu tohoto způsobu. Děkuji moc, obzvláště Bubákovi :-) |
||
|
Časová prodleva: 10 dní
|
|||
| Camo Profil |
#13 · Zasláno: 26. 12. 2009, 12:32:05 · Upravil/a: Camo
Potreboval by som čosi osvetliť, tak sa vraciem k tejto téme.
Bubák nám tu predviedol ako nastavovať pozadie a padding riadkovým elementom(odkazom). Ako som zistil v striktnom doctype to nefunguje. resp. u IE to nefunguje. Je to tak, alebo som zase niečo nepochopil? Používam totiž na str. CSS ,,white-space,, a to potrebuje strict. Zároveň tam potrebujem vycentrované a nastylované odkazy v jednom riadku. Ide len o padding. ak dám display:block neviem ich vycentrovať, ak nechám inline neviem im zase v IE nastaviť padding(najmä spodný, line-height to teda nerieši) |
||
| Bubák Profil |
#14 · Zasláno: 27. 12. 2009, 19:00:48 · Upravil/a: Bubák
Camo:
„Ako som zistil v striktnom doctype to nefunguje.“ Nechápu, co máš na mysli. Strictní !doctype nejsou jedinou možností, jak IE přepnout do standardního vykreslovacího režimu, !doctype použitý v ukázce http://teststranek.kvalitne.cz/menu7.3/ přepne všechny prohlížeče do standardního vykreslovacího režimu. Prosím o odkaz na živou ukázku. Ještě dodám, dal jsem pokusně odkazu white-space: pre; a vše (v IE7/8, upravený kód jsem jinde nezkoušel) fungovalo správně. |
||
|
Časová prodleva: 14 let
|
|||
0