1. Tudásbázis
  2. Sminkek
  3. greenNblack - elsődleges menüpontokba szöveg helyett képek

greenNblack - elsődleges menüpontokba szöveg helyett képek

Beküldte gyuri2012 - 2008. augusztus 14. 10.08
gyuri2012 képe

A smink nem támogatja a image menu-t. (amúgy nem ismerem a modult)
A menüpontok nem nagyon fognak változni, úgyhogy egyedi képek, de:
Normál esetben egy-egy menüponthoz a kép háttere áttetsző (merthogy a fejléc háttere nem egyszínű) és változó szélességűek.
Meg kellene őrizni azt a remek tulajdonságát a rendszernek, hogyha rákatt egy menüpontra, akkor a menüpont háttere más színűre változik míg el nem mész a betöltött oldalról..., azaz nem megoldás hogy css-el hover másik kép a menüponthoz.

Szóval a menüpont szövege helyett kép legyen melynek áttetsző a háttere, a smink css-ében megadott menüponthoz tartozó háttérszínt pedig olyan szélességben alkalmazza, amilyen széles a kép.

Lehet nekem hangzik ez csak komplikáltnak így "reggel"
Hogy csinálnátok?

Fórum: 
Sminkek
gyuri2012 képe

Beküldte gyuri2012 - 2008. augusztus 14. 10.15

...az "amilyen széles a kép" dolgot az sem baj ha manuálisan kell menüpontonként beállítanom... Sőt tökéletes megoldás lenne végülis.

0
0
aboros képe

Beküldte aboros - 2008. augusztus 14. 12.22

ezt a css megoldást phark technikának hívják a "feltalálója" után. (van több ilyen "image replacement" technika is egyébként)
valójában olyan egyszerű, hogy azért nem jut eszébe az embernek. és ráadásul még képernyőolvasó-barát is.

szóval a lényeg kb az, hogy a menüpont szövegét jól eltoljuk jó messzire és egy háttérképet adunk még neki. így ott is lesz a szöveg, meg nem is. frankó.

valami ilyesmi css kéne:

.menu li a {
text-indent: -5000px;
background: url(valami-kep.png);
width: 150px;
height: 100px;
}

persze ha ez minden menüpontra más, akkor bonyolultabb a helyzet, de nem vészes. elemeket ugyanis lehet célozni bizonyos attribútumuk alapján is, tehát pl egy a teget, aminek a href attribútuma mondjuk az hogy /kezikonyv/forditas
<a href="/kezikonyv/forditas">Fordítás</a>

css -ből meg lehet célozni így:
a[href="/kezikonyv/forditas"] {
..
}

azt meg totál nem értem, hogy miért nem megoldás, hogy ccs -el más hover a menüponthoz? a drupal csomó class -t pakol a forrásba, nézd meg! azok elegendőek (néha még sok is), tehát lehet más a hover kép akkor ha egy menüpont .active, meg akkor is, ha nem az. ennél több kell?

0
0

-
clear: both;

gyuri2012 képe

Beküldte gyuri2012 - 2008. augusztus 15. 12.12

Köszönöm!
Próbálkoztam így, hosszú ideig azt hittem jó is, aztán megnéztem explorerben is..., amelyik menüpont fölé mentem, az elszaladt ötezerrel balra :) Valamit biztos rosszul csináltam...
Úgyhogy elkezdtem gányolni..., rengeteget. :\
A mostani változat viszont nagyjából ugyanúgy néz ki firefoxban és explorerben is..., majd még szépítgetem, de egy dologra nem bírok rájönni:

Firefoxban ha hover elsődleges menü egy pontja, akkor a többi menüpont lesüllyed néhány pixelt.
ill. talán az lesz magasabban, és emiatt lejjebb tolja az egészet.
Explorerben nem mozog.

Tudtok látatlanban valami ötletet írni arra, hogy ez miért lehet?
Már onnantól kezdve van, hogy van a hover-hez bármi, ill. mióta egy kép a link.

<div id="menuuu"
	  <table style="menug" width="100%" border="0">
  <tr>
 
    <td><a class="menum" href="/bemutatkoz&aacute;s"><img src="/sites/default/files/bemutatkozas.png" alt="BEMUTATKOZ&Aacute;S" width="204" height="40" /></a></td>
    <td><a class="menum" href="/h&iacute;rek"><img src="/sites/default/files/hirek.png" alt="H&Iacute;REK" width="82" height="40" /></a></td>
    <td><a class="menum" href="/esem&eacute;nyek"><img src="/sites/default/files/esemenyek.png" alt="ESEM&Eacute;NYEK" width="161" height="40" /></td>
 
    <td><a class="menum" href="/gal&eacute;ria"><img src="/sites/default/files/galeria.png" alt="GAL&Eacute;RIA" width="103" height="40" /></a></td>
    <td><a class="menum" href="/eredm&eacute;nyeink"><img src="/sites/default/files/eredmenyeink.png" alt="EREDM&Eacute;NYEINK" width="204" height="40" /></td>
    <td><a class="menum" href="/kapcsolat"><img src="/sites/default/files/kapcsolat.png" alt="KAPCSOLAT" width="145" height="40" /></td>
 
  </tr>
</table>
</div>
 
#menuuu {
	position: absolute;
	z-index: 5000000;
	left: 30px;
	top: 108px;
	}
 
.menu a: table {
	background:#009900;
	}
 
a.menum:hover, a.menum:active {
	background: url(/sites/default/files/hattermenu.png) repeat;
 
	font-size:43px;
 
	}

Mivel most táblázat, /sites/default/files/hattermenu.png helyett, ami amúgy 40 pixel magas jó lenne ha a cella háttere lenne simán egyszínű ha hover, csak ezt nem sikerült megcsinálnom.
Hogyan lehet ilyet?

0
0
nevergone képe

Beküldte nevergone - 2008. augusztus 15. 12.13

&Eacute;

Világ ereje, ilyeneket tíz évvel ezelőtt irogattak a HTML fájlba (és akkor sem volt értelme, lásd "kalapos ű", és "hullámos ő"), azóta viszont UTF-8 -ba kellene menteni, mert az mindenkinek jó, nem véletlenül használja a Drupal is, többek közt.
Szóval amit írtál, azt most felejtsd el!

0
0

Választ szeretnél? - Új kérdés, új téma - Tesztoldal - Trollkezelés - Frissítés

gyuri2012 képe

Beküldte gyuri2012 - 2008. augusztus 15. 12.32

Kösz! :)
Majd átírom...
A többire ötleted?

Szerintem azért, mert a szövegnek csinál hátteret nem a táblázat cellájának, a szöveg meg megemelkedik ha hover...., de hogy miért...
Ill. hogy kellene a cellának háttérszínt adni hover... :)

0
0
gyuri2012 képe

Beküldte gyuri2012 - 2008. augusztus 15. 13.33

"azt meg totál nem értem, hogy miért nem megoldás, hogy ccs -el más hover a menüponthoz?"

Így ha fölé megyek akkor változik a háttérszíne.
Viszont eddig ha föle mentem változott, és ha rákattintottam... olyan maradt mint amilyenre változott. Amíg a menü által linkelt oldal volt a képben.
Ez egy jó dolog volt, amit meg akartam volna őrizni.
css-el nem lehet ilyet nem?!

0
0
crt képe

Beküldte crt - 2008. augusztus 15. 14.00

Szia.

Az active class alapján miért nem jó a css megváltoztatása?

Üdv: Zoli

0
0
gyuri2012 képe

Beküldte gyuri2012 - 2008. augusztus 15. 17.52

Igazatok lehet... jó lenne.
Csak nem jól használom.

.menum:hover {
	 DISPLAY: block;
    COLOR: #977F65;
    BACKGROUND-COLOR: #977F65;
    TEXT-DECORATION: none;
 
	}

ez működik.
 
.menum:active {
	 DISPLAY: block;
    COLOR: #977F65;
    BACKGROUND-COLOR: #977F65;
    TEXT-DECORATION: none;
 
	}

Ez miért nem?
Korábban bemásoltam a táblázatot, amire használnám.
0
0
crt képe

Beküldte crt - 2008. augusztus 15. 18.45

Mert összekevered az :active pseudo-class-t a drupal által hozzáadott osztállyal. Így próbáld:

.menum .active {
  display: block;
  color: #977F65;
  background-color: #977F65;
  text-decoration: none;
}

Üdv: Zoli

0
0
gyuri2012 képe

Beküldte gyuri2012 - 2008. augusztus 27. 08.15

Köszönöm!
Ennek az oldalnak ( www.kulcsiturul.hu ) a létrehozásában segítettetek az elmúlt napokban, hetekben.
Időn nagyon nem volt rá, még messze nincs kész, de megnyitottam már, mivel versenykiírás...

Az active dolgot nem sikerült megcsinálnom (elsődleges menü, hover működik). Bár nem is nagyon foglalkoztam már vele azután hogy írtad..., (elvileg benne van a css-ben, amit írtál) de lassan elfogynak a fontosabb dolgok, és nekiállok újra.
Íjászversenyünkre gyertek ha van kedvetek egyet kirándulni..., ill. érdekel benneteket a dolog..., elvileg íjászatot inkább egy edzésünkön lenne alkalma kipróbálnia az érdeklődőknek mint a versenyen..., de ha megkerestek a versenyen, sort kerítünk rá...

0
0
crt képe

Beküldte crt - 2008. augusztus 27. 09.35

Megnéztem az oldalt, a css-ben a .menum osztályt cseréld le .links-re:

.links .active {
  display: block;
  color: #977F65;
  background-color: #977F65;
  text-decoration: none;
}

A láblécben lévő menünél látni fogod az eredményt, a fejlécben nem, mert ott saját táblázatos menüt használsz. Ott ezek a lehetőségek:
- Az oldal betöltésekor az args() függvénnyel megvizsgálod, hogy melyik menüben vagy és ahhoz hozzáadod az 'active' osztályt.
- Nem saját menüvel oldod meg, hanem a drupal menürendszerén keresztül mint az alsó esetén, a kívánt kinézetet pedig css-el valósítod meg.
- A többi a fentiek kombinációja, vagy egy kis modullal, vagy egy hook_theme() függvénnyel a template.php fájlban (az első kettő egyszerűbb).

Üdv: Zoli

0
0