Autor Zpráva
Sabina
Profil
#1 · Zasláno: 13. 9. 2005, 10:43:06
Odpovědět Citovat
Zdravím všechny,
potřebovala bych prosím, poradit... http://hvezdaels.wz.cz/menu2.htm
Udělala jsem menu jako jeden obrázek... V tom obrázku je několik odkazů.. Každému odkazu jsem určila čtyři body a ty, když se spojí, tak jejich úsečky jsou "linky".... Ale asi jsem to vyřešila celkem blbě, poněvadž jakmile najedu myší mimo tyto úsečky, tak mi to ukazuje, že jsem jakoby "mimo" odkaz...
... jak by se to prosím, dalo jinak vyřešit?
habendorf
Profil
#2 · Zasláno: 13. 9. 2005, 11:18:42
Odpovědět Citovat
jak by se to prosím, dalo jinak vyřešit?

Menu udělat jako seznam (ul) a jednotlivé položky menu jako položky seznamu (li). Těm pak dát na pozadí obrázek.
DZer
Profil
#3 · Zasláno: 13. 9. 2005, 15:55:29
Odpovědět Citovat
udělaš jen prázdný odkaz a pak mu v css přiřadíš výšku a šířku a absolutní pozici,ale nejednoduší by bylo to poskladat z obráků...
Tin
Profil
#4 · Zasláno: 13. 9. 2005, 15:58:52
Odpovědět Citovat
Místo
_____
|_____|
máš areu definovanou jako
__
\/
/\
(chybné pořadí atributů)

použij obdélníkovou oblast:
<AREA shape=RECT coords="45, 1, 139, 27"

ad habendorf: ani nemusíš dělat seznam, stačilo by nastavit v CSS odkazy jako blokové prvky určité velikosti s obrázkem na pozadí

Pozn. máš v kódu strašně chyb (validátor ukazuje 21)
*</head>nějaký text <body>pokračování stránky
*barva se musí zapisovat #kodbarvy
*nekpřekřižuj tagy <td><p>..............</td></p>
*</AREA></AREA>
*<TABLE height=""
*<TD vAlign=center align=middle>
peta
Profil *
#5 · Zasláno: 13. 9. 2005, 18:47:24
Odpovědět Citovat
Sabina
proc to mas jako 1 obrazek? znam lepsi reseni. A vysledek je stejny, podobny, mozna lepsi.

<html>
<head>
<title>stenata</title>
<style><!--
.menu {width:60px;background:#000000}
.menu a {background:url("obrazek1.gif");color:#ffffff;
display:block}
.memu a:hover {background:url("obrazek2.gif");color:#ffffff}
--></style>
</head>

<body>

<div class="menu">
<a href="#">aaa<br /></a>
<a href="#">aaa<br /></a>
<a href="#">aaa<br /></a>
<a href="#">aaa<br /></a>
</div>

</body>
</html>
Radek Hrabůvka
Profil
#6 · Zasláno: 14. 9. 2005, 03:15:55
Odpovědět Citovat
Dva obrázky jsou zbytečné, stačí jeden "šikovný", navíc v tomhle případě je PNG datově třetinový oproti GIFu. Ukázka: http://www.volny.cz/teststranek/menu1
Nechte si zobrazit zdroj.
Sabina
Profil
#7 · Zasláno: 16. 9. 2005, 11:31:34
Odpovědět Citovat
habendorf..
.. kdysi jsem se o tenhle způsob snažila a nepochopila to ... a nějak nemám odvahu se k tomu vrátit a zjistit opět, že jsem stejně blbá :o)

Tin..
.. zcela logické ... jsem ťunťa :o/ ... jj, o těch chybách "vím" ... my amatéři je neřešíme za pochodu ... vám se to píše, že tam jsou chyby ... já jsem ráda, když to začne fungovat :o)))

peta..
.. poněvadž jsem jiný způsob nevěděla :o(

peta a Radek Hrabůvka...
... teď ještě to pochopit a budu spokojená ... díky moc .o)

... tedy moc moc díky všem :o) ... a já jdu dělat, že tomu rozumím a chápu to ... proč já si díky tomu počítači vždycky připadám jak totální blbec :o)))
peta
Profil *
#8 · Zasláno: 16. 9. 2005, 11:52:09
Odpovědět Citovat
Sabina
pochopit? Zkopiruj si cely ten html kod do souboru, pridej k nemu obrazek1.gif a obraze2.gif a vyzkousej.
To se nechape, to se jen okopiruje, to je nejlepsi zpusob tvorby www :)

On je lepsi zpusob se zmenou polohy obrazku (ala Radek Hrabůvka), ale nechtel jsem te tim zatezovat. Ma tam drobnou chybky, BR nejen, ze musi byt none, ale musi mit i line-height:0; protoze jinak mi neco podobneho delalo psi kusy u miniBB.

Ve skutecnosti to funguje tak, ze je to normalni HTML, kde nemas nic. Na to nabalis CSS (jakpsatweb CSS), kterym pro kazdy A s class="menu" priradis nejake nove vzhledove vlastnosti
... radek v casti style: .menu a {...}
Konkretne ja tam mam obrazek pozadi (background), barvu textu (color), display:block, to znamena, ze premeni prvek na blok (vysvetlim pozdeji)

Aktivace udalosti myska nad odkazem A se v CSS pise jako a:hover . Znamena to, ze pokud se nad oblasti s odkazem pohne kurzor, provedou se zmeny vzhledu popsane v zavorce pro dany prvek.
ja tam mam, ze se ma zmenit pozadin na "obrazek2.gif" a barva na bilou #ffFFff (ta barva je ocividne nesmysl, protoze ji zmenim z bile na bilou)

Cili, kdyz zi zapamatujes, ze CSS (cast mezi style a /style) slouzi pro upravu vzhledu a budes to pouzivat na obarvovani a zmeny velikosti pisma (jakpsatweb -zalozka CSS-), tak to bohate staci

(nevim, jak to popsat, ale blok je prvek, ktery muze mit vysku a sirku a nic vedle nej uz nesmi byt // proti tomu, puvodni nastaveni na display:inline je prvek, ktery ma vysku jako pismeno a delku podle textu v nem)

(teoreticky jde aktivovat myska nad cimkoli TD:hover, prakticky IE tohle nezna, pouze lepsi www prohlizece)
Sabina
Profil
#9 · Zasláno: 16. 9. 2005, 12:26:22
Odpovědět Citovat
peta..
.. což o to, okopírovat to a přidat k tomu to, co já v tomto případě potřebuji, to umím, ale to mne neba ... já tomu chci rozumět = zásadní problém :o)))
... nejlepší odstavec byl ten čtvrtý - to znám, to už chápu :o)

... ale teoreticky toto na pochopení jde (ještě pár let a pokud nevyhodím comp z okna, tak to půjde :o) ) ... jen zítra si to už nebudu pamatovat a zase to budu kopírovat :o(
error414-
Profil *
#10 · Zasláno: 16. 9. 2005, 15:12:57
Odpovědět Citovat
Radek Hrabůvka:
To je moc dobre reseni, ja to drive resil pres z-index.



Sabina: Takove pocity mel kazdy a kdo rika ze ne tak lze.
peta
Profil *
#11 · Zasláno: 16. 9. 2005, 15:40:09
Odpovědět Citovat
error414-
jakpsatweb.cz - zdokolnaleni odkazu :)
Je mi znamo jiz delsi dobu

druhe reseni ne pouzit cerny okraj a pruhledny stred a menit barvu pozadi. a mas o polozivku mensi obrazek. ale musis pridat kolem okraje pro pripad, ze by nekdo menil velikost pisma ctrl +++ jak mam ve zvyku ve FF
Tin
Profil
#12 · Zasláno: 16. 9. 2005, 20:14:23
Odpovědět Citovat
Sabino: ty chyby většinou nevaděj, ale ta area, co jsem psal hned na začátku, je dost závažná, kvůli ní Ti to nefungovalo.
Ten chybějící křížek u barvy způsobí, že funguje pouze v prohlížeči IE
vAlign=center align=middle -> vAlign=middle align=center
ostaní jsou "jen" kosmetický

P.S. strašně rád vidim, že máš snahu tomu rozumět. Kopírování je dobrej způsob, jak se naučit nový věci - ale musí být snaha to i pochopit. Což tady je.

PPS. já se HTML věnuju jen asi rok a půl. A přece jen toho umim dost. Tak se uč a nebudeš muset nic házet z okna ;-) Ahoj
Sabina
Profil
#13 · Zasláno: 18. 9. 2005, 19:16:15
Odpovědět Citovat
error414-
... dík za "uklidnění" :o))

Tin
... jj, to jsem pochopila, že ta area je blbě a funguje to tak .o)
... křížek u barvy - to je tak, když má někdo jen IE - to jsem nevěděla :o/ (ale naštěstí většinou to píši)
... ta snaha tu (zatím) je, až nebudu mít už náladu to pořád nechápat, tak se na to vykašlu a pak budu už jen kopírovat :o)))
... proč máš v tom zdrojáku u barev jen tři "čísla" (či jak to mám nazvat)??
Tin
Profil
#14 · Zasláno: 18. 9. 2005, 19:37:45
Odpovědět Citovat
Protože zápis #xxyyzz je to samý jako #xyz

viz http://www.jakpsatweb.cz/barvy-zapis.html#setnactkovy
Časová prodleva: 19 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0