Autor Zpráva
aRtFULL
Profil *
Zdravim,
pred par dny jsem na internetu nalezl skvele vysouvaci menu, ktere funguje pouze s pomoci CSS a seznamu UL, LI.
Menu je opravdu skvele a tak jsem jej take pouzil, ale pri tom, kdyz jsem jej predelaval pro me potreby do jineho grafickeho vzhledu a pridaval dalsi polozky jsem narazil na celkem dost kuriozni problem.

Kdyz se pokusim pridat vice polozek v hlavni nabidce, od ktere se smerem dolu po najeti kurzoru otevre submenu, tak se mi napriklad delsi nazvy zalomi pod sebe, coz jsem vyresil pridanim znaku   mezi delsi nazvy.

Tim se to sice vyresilo, ale menu se jakoby do sebe scvrklo a prekryva se.
Jednoduse receno nemuzu prijit na zpusob, jak mezi jednotlivymi polozkami v menu udelat dostatecnou mezeru, aby se neprekryvali.

V IE se menu polozky dokonce zarovnaji pod sebe a ve FF se polozky prave prekryvaji a nelze mezi nimi udelat mezera.

Menu naleznete na zkusebni adrese : MENU

CSS ja osobne jakz takz zvladam, ale uz si s timhle hraju asi den vkuse a proste nemuzu na to prijit. Zkousel jsem samozrejme i nastaveni pevne sirky WIDTH a take samozrejme i MARGIN, ale nic nepomohlo. Proto si myslim, ze se jedna o dost kuriozni pripad.

Predem dekuji za vsechny dalsi prispevky a rady.

:) :S :S :S
Gappa
Profil
No, jelikož je tam <ul> jako inline, tak mu width moc nastavit nepůjde :-)
Řešením by bylo nastavit

.menu ul li {margin-left: 20px}


Jenže tohle to menu divně roztáhne bůhvíkam :) S horizontálním menu jsem si ještě moc nehrál, tak nevim, jak to správně udělat :)
aRtFULL
Profil *
No to jsem uz take zkousel a ani se to nehne, je to asi zacarovane :o)
Gappa
Profil
právě tady je problém, že IE neumí display: inline-block, ten se chová jako block (dá se mu nastavit šířka, délka), ale nemá automaticky 100% width a ani řádkový zlom. Jinak by to šlo vcelku lehce :)
Zahon
Profil
Zkusil bych místo &nbsp dát css vlastnost white-space: nowrap; zakáže to zalomení textu na další řádek.. jestli to před &nbsp neblblo, toto by mohlo pomoct, ale marně přemýšlím kde je zkutečná příčina...
aRtFULL
Profil *
Na to jsem pouzil hack _display: inline-block;
nepohne se to a nepohne.... Jestli tomuhle nekdo prijde nekdy na kloub, tak ho navrhnu na Nobelovku :o)
Ja uz vyzkousel stovky moznosti, ale proste nic nepomuze .o(
aRtFULL
Profil *
Zkusil bych místo &nbsp dát css vlastnost white-space: nowrap; zakáže to zalomení textu na další řádek..

Take jsem zkousel... nic nic nic nic... zacarovany kruh .o)
mata
Profil
a proč je tam menu jako inline? co kdyby se mu nastavilo block (resp. to má nastaveno implicitně) a dalo mu float: left? pak by mu šlo nastavit i width
aRtFULL
Profil *
Take jsem zkousel, nic se nezmenilo :o(
Zahon
Profil
Dobrá, rozhodl jsem se, že tomu přijdu na kloub a mám několik dotazů..
za a) co dělají v tom menu sakra ty divy???
Za b) co je jako tohle:
.menu li {
top: expression(isNaN(this.js)?(this.js=1,this.onmouseover=new Function("this.className='hover'"), this.onmouseout =new Function("this.className=''")): 0);
} - v životě jsem to neviděl.. oni snad funguje v CSS JavaScript???
Jsem velmi zvědavý na odpovědi...
Radek Hrabůvka
Profil
oni snad funguje v CSS JavaScript??? Ano, ale jen u Microsoftu. Programátoři Microsoftu zavedli speciální CSS hodnoty expression(výraz), kde "výraz" je vyhodnocen pomocí JavaScriptu a jeho výsledek je použit jako hodnota pro danou vlastnost.
Zahon
Profil
Radek Hrabůvka
aha.. :-) takže pro všechny "rozumné prohlížeče" je mi to asi tak k ničemu. Díky, zase jsem o malinko chytřejší...
aRtFULL
Takže teď mě ještě ke všemu zajímá, proč to používáš... nějak to nechápu. ;-)
Radek Hrabůvka
Profil
IE 6 umí hover jenpro tag "a", s atibutem "href", moderní prohlížeče umí hover u i u ostatních tagů. Pomocí JS se dá IE "naučit" některé CSS vlastnosti, které neumí.
Chamurappi
Profil
Reaguji na Gappu:
právě tady je problém, že IE neumí display: inline-block
Pokud vím, tak to byl zrovna Explorer, kdo přišel s touto hodnotou display.
aRtFULL
Profil *
Za b) co je jako tohle:
.menu li {
top: expression(isNaN(this.js)?(this.js=1,this.onmouseover=new Function("this.className='hover'"), this.onmouseout =new Function("this.className=''")): 0);
} - v životě jsem to neviděl.. oni snad funguje v CSS JavaScript???


To je misto toho, abych odkazoval na externi soubor hover.itc a takhle se to da bravurne vyresit v CSS pouzitim "expression" od Microsoftu. Tohle ale nijak menu neovlivnuje... kdyz to tam nebude, tak menu ale nepojede.
Jinac stale vidim v tom menu zahadu, proc to nelze roztahnout :o(
aRtFULL
Profil *
_display: inline-block;

podtrzitko je css hack, vlastnost funguje jen v IE. Proste floatovani je v IE cele zabugovane a je nutne zmenit display:block na CSS3 displa:inline-block.
aRtFULL
Profil *
Tak nikdo neví teda jak to vyresit? .o(
Zahon
Profil
A co ty divy? Podle mě to teda kazej ty divy. Jsou tam na nic.
aRtFULL
Profil
A co ty divy? Podle mě to teda kazej ty divy. Jsou tam na nic.

No ty tam byt "musi" ale kdyz se daji pryc, trosku se to v CSS upravi, tak to nic nevyresi (vyzkouseno) .o(
tiso
Profil
..tak ich daj preč, nebude Ti to fungovať,ale aspoň to bude technicky v poriadku... :-)
Leo
Profil
"A co ty divy? Podle mě to teda kazej ty divy."
"No ty tam byt "musi"

Proc by musely, u menu vystavite s ul, li, a. Leo
aRtFULL
Profil
"A co ty divy? Podle mě to teda kazej ty divy."
"No ty tam byt "musi"

Proc by musely, u menu vystavite s ul, li, a


Ok, ale s tim se nic nevyresi, potrebuji pouze nastavit sirku, ktera zahadne nastavit nejde a temi divy to nebude .o)
Leo
Profil
Nejak jsem z cele debaty nepochopil, co vlastne resite. Ve FF vypada menu stejne jako v IE. Leo
aRtFULL
Profil
Nejak jsem z cele debaty nepochopil, co vlastne resite. Ve FF vypada menu stejne jako v IE. Leo

Resime to, jak nastavit hlavnim polozkam menu nahore vlastni sirku, protoze mezi mini nejde udelat zadna vetsi mezera.
habendorf
Profil
Resime to, jak nastavit hlavnim polozkam menu nahore vlastni sirku, protoze mezi mini nejde udelat zadna vetsi mezera.

Nevím proč by to nemělo jít. Šířka se nastavuje pomocí width, položky budou mít display:block a float:left.
Ani nevím, proč by tento příklad měl být nějak kuriozní, je to naprosto normální běžné menu.
Leo
Profil
"je to naprosto normální běžné menu"

Nejak tak. Leo
aRtFULL
Profil
Resime to, jak nastavit hlavnim polozkam menu nahore vlastni sirku, protoze mezi mini nejde udelat zadna vetsi mezera.

Nevím proč by to nemělo jít. Šířka se nastavuje pomocí width, položky budou mít display:block a float:left.
Ani nevím, proč by tento příklad měl být nějak kuriozní, je to naprosto normální běžné menu.


No ano, mas pravdu, tem polozkam jsem nastavil :

.menu div {
display: block;
float: left;
width: 100px;
}

Ale polozky se roztahly pouze v IE, to vim, ale ve FF se to roztahle, ale ne od sebe, ale pres sebe, protoze se ve FF cele menu chova, jakoby melo nastavene pevnou sirku.
Leo
Profil
Rekl bych, ze cely CSS kuriozni priklad je jen preplacany a neprehledny, nic vic. Zacnete od nuly, s logikou a cistou hlavou, Leo
aRtFULL
Profil
Rekl bych, ze cely CSS kuriozni priklad je jen preplacany a neprehledny, nic vic. Zacnete od nuly, s logikou a cistou hlavou, Leo


Zacal jsem... dopadl jsem stejne... jel jsem od zacatku, nevim.... proste tam to je uhozene neco s tim hover v javascriptu... asi
Toto téma je uzamčeno. Odpověď nelze zaslat.