Sziasztok,
a menüsávban szereplő szövegeket szeretném lecserélni képekre.
Találtam egy leírást hozzá, de nekem vmiért nem működött.
Létrehoztam a menüpontokat az új Menü szerkesztővel majd pedig beírtam a .css fájlba a menüpontok ID számát, illetve az ikonok elérését.
És hogy nem működött, mi volt az eredmény amit kaptál? minusz text-indent-et is adtál azoknak az osztályoknak?
Az volt a gond vele, hogy a sablon nem támogatta az egyéni menüket, ez valahogy elkerülte a figyelmem.
Ehhez hasonló menüt szeretnék csinálni, minden egyes menüponthoz más színt társítani, de nem tudom hogyan lehetne a színeket társítani a menünevek azonosítójához .css-ben.
Elvileg minden menüpont kap egy “cat-item” vagy “page_item” css osztályt. Azzal szerintem meg lehet formázni simán. Csak ki kell nézni, hogy melyik menüponté melyik.
Sziasztok!
Ezt én is el szeretném érni. Először annyit mondjatok meg légyszi, hogy plugin nélkül el lehet-e érni. Ha igen, akkor jövök az eddig öszszedett gondolataimmal, ha nem akkor csak simán széttanulmányoztam a functionst és a headert:) bár hozzá kell tennem nem vagyok nagyon otthon php-ban:S Ãgy fél4kor meg tényleg csak annyi, hogy plugin nélkül ti hozzá fognátok-e avagy sem:)? (tanács, tanulmány, link, bármi jöhet)
najó csak fel kell tennem a konkrét kérdést is:)
Miért van az, hogy forrásban a menüpontok 'page_item page_item-2', 'page_item page_item-4', … ésatöbbiként vannak feltűntetve, de nem tudom hozzájuk rendelni a backgroundot? Látom én, h ott van a 'current_page_item > a' azt meg csak sejtem, hogy ez php-ra vonatkozik, de lehet, hogy vmi elkerülte a figyelmemet. Azt is néztem, hogy functionsben van az megoldva, hogy kettessével lépkedjenek fefelé a page_id-k (amit már megint csak nem értek miért, de az egyelőre magasabb hatáskörbe tartozik:), sőt lehet, hogy hülyeséget is beszélek:)). Tehát ebből kifolyólag adódna, hogy nem tudok képet rendelni a menüpotkohoz, mert nincsenek előre meghatározva az osztályok?
Legközelebb kipihenten írok:)…
Az első kérdés, hogy hogyan próbáltad hozzárendelni a hátteret?
A “kettesével lépkedés” szerintem inkább azt csinálhatja, hogy páros, páratlan azonosítójúakat különbözteti meg. Legalábbis annak lenne értelme.
Nézd meg a kimeneti kódot amúgy egy böngészőben (lehet, hogy ezt írtad az elején, nem volt teljesen világos), és ha ott van a menü elemeknél “page_item”, vagy “cat_item” osztály, akkor azt tudnod kell formázni css-ből. Csak jó helyre kell beírni.
(a projekt:link
ie7 alatt frankón szar, a többi alatt műkszik, kivétel chrome, nem jelenik meg a :hover a galéria pontnál. A meg nem jelenő fejléc más tészta)
Leírtad így szimplán a ‘page_item’-et és bevillant egy helyes opció, eddig ugyanis így hivatkoztam a menü elemeire:
Code:
.page-item page-item-6 {
width:100px;
height:75px;
background-image:url(images/termekeink.png);
}
.page-item page-item-8 {
width:100px;
height:75px;
background-image:url(images/galeria.png);
}
És ez a helyes:
Code:
.page-item-6 {
width:100px;
height:75px;
background-image:url(images/termekeink.png);
}
.page-item-8 {
width:100px;
height:75px;
background-image:url(images/galeria.png);
}
És még most sem tudom, hogy helyes-e így hivatkozni css-ben (itt a szóközök zavarnak be). A valid meg be van halva:((( (valószínűleg egyébként freeweb miatt, bár nem szokott nagyon ilyet játszani) ->
htmlnél:"500 Can't connect to sajátdomain.fw.hu:80 (connect: timeout)"
cssnél:"Unable to contact target server sajátdomain.fw.hu:80 after 3 tries."
A lényeg, hogy most a ':hover' és ':active' tulajdonságokra mentem rá.
Én ezt így oldottam meg:
Először is cím helyett ' '-t kapott mindegyik. (Csak így tudtam megjátszani, pedig már itt vérzik a dolog: SEO, content címeket így buktam, arról nem beszélve, hogy egyébként is irritál.)
100x75-ös menüelemiem vannak, tehát:
Code:
.page-item-2 {
width:100px;
height:75px;
background-image:url(images/cegunkrol.png);
background-repeat:no-repeat;
}
.page-item-4 {
width:100px;
height:75px;
background-image:url(images/termekeink.png);
background-repeat:no-repeat;
}
...
:hover tulajdonságoknál a lista elemit is piszkálgattam egy kicsit:
Code:
#access li:hover > a,
#access ul ul:hover > a {
width:100px;
height:55px;
padding:0 100px 55px 0;
background-repeat:no-repeat;
}
majd ugyebár maga a :hover megadása:
Code:
.page-item-2 a:hover {
width:100px;
height:75px;
background-image:url(images/hover/cegunkrol.png);
}
.page-item-4 a:hover {
width:100px;
height:75px;
background-image:url(images/hover/termekeink.png);
}
...
Azért írtam ezt le, hogy légyszi mondjatok rá vmit, van-e sokkal egyszerűbb megoldás, jó amit összehoztam, vagy bármi ami kritika.
Egyébként 3 dologra is kíváncsi volnék még. A legfelső .css miért nem működött, teljes ki van zárva a szóköz ilyenkor? (Legjobb tudomásom szerint nem)
Az :active tulajdonságnak ugyanígy kéne működnie, mint a hovernek? Csak mert nem jött össze:):S.
A harmadikat elfelejtettem, majd később vissza jövök vele:)...
…ja igen, hogy az üres címekkel mit lehetne kezdeni? Próbáltam pár 'display:block'-ot elhelyezni 'text-indent:-9999px'-lel, de egyik sem jött be.:S
No, akkor megpróbálok sorba menni.
Az első (ez: “.page-item page-item-6”) azért nem ment, mert szintaktikailag értelmetlen. Ebből csak az elsőt értelmezi osztályként a pont miatt, a másodikat már szelektorként kezelné, de nem az, ezért nem tud vele mit kezdeni. És persze “invaliddá” is teszi. A lényeg, hogy lehet szóközt használni, de minden elemnél definiálni kell, hogy osztályról, vagy ID-ről van-e szó, mert különben nem tud vele mit kezdeni.
A lista elemeknél én vigyáznék a “>” szelektor használatával, mert így a formázás az összes listán belüli hivatkozásra érvényes lesz, a gyermek elemekre is. Ha ott akarsz valami megkülönböztetést, akkor ezt inkább ne használd.
A :hover-nél szükségtelen újra megadni a magasságot, szélességet, ha azt egyszer már definiáltad. Emellett én még ajánlanám a sprite-ok használatát a hover-nél. Gyorsabb a betöltés, és csak egy kép kell hozzá. Itt van egy-két tutorial erről.
Az :active tulajdoságot én elég ritkán használom, de ettől függetlenül ugyanúgy működnie kéne, mint a :hover-nek, csak persze más esetben.
A display: block-al nem tudom mit szerettél volna eléreni, az csak annyit csinál, hogy block elemként jeleníti meg, mint a bekezdéseket, vagy a címeket. Display:none-al elrejtheted, de nem leszel előrébb, mert a rejtett szövegeket ugyanúgy nem komázzák a keresőmotorok. Erre nincs igazából jó meg oldás, vagy ottmarad és idegesít, vagy eltünteted, és eltűröd a negatív SEO hatást, vagy az invalid kódot.
Asszem nem maradt ki semmi.
A CSS Sprites megoldásnál a text-indent működik és a SEO is megmarad! Mindenképp ezt a módszert használd.
Quote:
Az első (ez: ".page-item page-item-6") azért nem ment, mert szintaktikailag értelmetlen. Ebből csak az elsőt értelmezi osztályként a pont miatt, a másodikat már szelektorként kezelné, de nem az, ezért nem tud vele mit kezdeni.
Köszönöm, mostmár ezt is tudom!
Quote:
A lista elemeknél én vigyáznék a ">" szelektor használatával, mert így a formázás az összes listán belüli hivatkozásra érvényes lesz, a gyermek elemekre is. Ha ott akarsz valami megkülönböztetést, akkor ezt inkább ne használd.
Lassan, ahogy nézegetem a twentytent, egyre inkább jövök rá, hogy szerintem szükségtelenül van szétbonyolítva a css. Ha még nem hotatok létre ilyen topicot, lehet beindítok majd egyet 'twentyten vélemények' néven v vmi hasonló...na de ez itt már off. A lényeg h a twentyten használja így, én csak a tuljdonságokat írtam át.
Quote:
A :hover-nél szükségtelen újra megadni a magasságot, szélességet, ha azt egyszer már definiáltad.
Igazigaz!:)
Quote:
Emellett én még ajánlanám a sprite-ok használatát a hover-nél. Gyorsabb a betöltés, és csak egy kép kell hozzá.
Ezen itt a kattintható elemeket spriteokkal készítettem, szóval menni fog, de először szeretném fullosan elkészíteni ezt a menüt...
Quote:
Az :active tulajdoságot én elég ritkán használom, de ettől függetlenül ugyanúgy működnie kéne, mint a :hover-nek, csak persze más esetben.
Nem tudom mi lelte az :active tulajdonsáhot:). Csak akkor jelenik meg, ha éppen kattintok az egérrel, nem pedig mikor aktív a menüpont.:(
Quote:
A display: block-al nem tudom mit szerettél volna eléreni, az csak annyit csinál, hogy block elemként jeleníti meg, mint a bekezdéseket, vagy a címeket. Display:none-al elrejtheted, de nem leszel előrébb, mert a rejtett szövegeket ugyanúgy nem komázzák a keresőmotorok. Erre nincs igazából jó meg oldás, vagy ottmarad és idegesít, vagy eltünteted, és eltűröd a negatív SEO hatást, vagy az invalid kódot.
->
Quote:
A CSS Sprites megoldásnál a text-indent működik és a SEO is megmarad! Mindenképp ezt a módszert használd.
Okéoké dehogy?:D Na rámegyek még erre a témára, legalább tudom, hogy működnie kell.
Eddig is köszönöm a váaszokat és a segítséget, de valószínűleg jövök még:)))