Kép, mint hivatkozás
Sziasztok!
Az az igazság, hogy egy honlap szerkesztésébe fogtam és most elakadtam. Többször is csináltam már ehhez hasonlót, de most valamiért nem akar összejönni.
Tehát, egy képet szeretnék kitenni a menü mellé, hogy a tisztelt publikum, arra kattintva visszajuthasson a főoldalra. Viszont ezt oly módon szeretném megoldani, hogy normál állapotban egy másik kép legyen látható, mint mikor fölé húzzák a kurzort (a, a:visited, a:active, a:hover, stb.). Szerintetek mit rontottam el?
Válaszaitokat előre is köszönöm!
Üdvözlettel:
Tamás
U.i.: Jelenleg itt tartok:
■ Az az igazság, hogy egy honlap szerkesztésébe fogtam és most elakadtam. Többször is csináltam már ehhez hasonlót, de most valamiért nem akar összejönni.
Tehát, egy képet szeretnék kitenni a menü mellé, hogy a tisztelt publikum, arra kattintva visszajuthasson a főoldalra. Viszont ezt oly módon szeretném megoldani, hogy normál állapotban egy másik kép legyen látható, mint mikor fölé húzzák a kurzort (a, a:visited, a:active, a:hover, stb.). Szerintetek mit rontottam el?
Válaszaitokat előre is köszönöm!
Üdvözlettel:
Tamás
U.i.: Jelenleg itt tartok:
#menu {
width: 700px;
height: 100px;
}
#menu a,
#menu a:visited,
#menu a:active {
color: #93DD02;
text-decoration: none;
}
#menu a:hover {
color: #FF0080;
text-decoration: none;
}
#menu a .img,
#menu a:visited .img,
#menu a:active .img {
background:url(images/pz_green.png) no-repeat 0 0;
text-decoration:none;
}
#menu a:hover .img {
background:url(images/pz_pink.png) no-repeat 0 0;
text-decoration:none;
}<div id="menu">
<table height="70">
<tr>
<td><a href="X"><img src="images/pz_green.png" /></a></td>
<td><a class="table" href="X">link</a></td>
<td><a class="table" href="X">link</a></td>
<td><a class="table" href="X">link</a></td>
<td><a class="table" href="X">link</a></td>
</tr>
</table>
</div>
Csak elméletileg...
Szerintem ez kitakarja a backgroundot, így bármit csinálsz, mindig ez fog látszani.
(nem próbáltam ki, szóval még az is lehet, hogy tévedek)
img - .img nem ugyanaz
Kritikus hiba 1: Az
imghtml tagetimgselectorral éred el. A.imgselector az img css class-ú elemre mutat.Kritikus hiba 2: Az img-nek más a háttérképe és más a benne megjelenő kép. Amit az img tag src attribútumában adsz meg, azt nem tudod a backgroundjával felülírni.
Egy lehetséges megoldás:
1: Ha a képet a fenti módon adod meg, akkor a böngésző csak akkor fogja betölteni a másodikat, amikor az első hover esemény megtörténik, ezért érdemes egy képfile-ba belerakni a két képet és background-position tulajdonságot változtatni :hover eseményre.
2: Ne használj táblázatot ha nem muszáj. Inkább <ul>, <li> tagekkel valósítsd meg a menüt!
Köszönöm a segítséget!
Miután rákattintok a logóra, a kép körül egy vékony pontvonalas keret jelenik meg, pedig a tulajdonságok között ott van a /text-decoration: none;/, szerinted miért lehet ez?
Tanácsodat megfogadva a menüpontokat <ul> és <li> tag-ok közé tettem, viszont valamiért nem tudom rendesen megformázni. Azt szeretném elérni, hogy a menüpontok közvetlen a logó mellé kerüljenek, mivel most alatta vannak egy sorban. Hogyan lehetne ezt megoldani?
Most így áll a dolog:
íme
a.logo { outline: none; };Megoldások arra, hogy egy sorban legyenek:
1.:
overflow: hiddenazért kellhet, hogy legyen magassága azul-nek, így a távtartások jól működnek majd körülötte. Helyettesítheted clearfix-szel (google: "css clearfix"), illetve azzal is, hogy megadsz neki konkrét magasságot.Cserébe egy ingyen élezést kérek majd, ha vállaltok Armada lécet :)
(természetesen csak vicceltem)
Csak egy apróság a 2-es
Van jelentősége
display: blockCSS tulajdonságot ad meg az elemnek.LIelemek display értékelist-item, ezért is jelenik meg náluk többek között a lista elem jelző pont, szám, négyzet stb. Ha elveszed ezt a tulajdonságát, akkor elveszti a jelölőjét. Lásd a fenti példát.Ha el szeretném tűntetni a
igazad van
inlinekell. De Poetronak is igaza van, mert ha nem lenne megadva, alist-style-type: none, akkor ez már segítene.a <li> eleve blokk típusú
<li>
>>> window.getComputedStyle(li).display
"block"
>>> document.body.appendChild(li)
<li>
>>> window.getComputedStyle(li).display
"list-item"
A display: list-item;-től is
Az élezés mellé még egy wax réteg is jár! (ez nem vicc)
Tudom, hogy utálni fogtok, de még mindig lenne egy-két kérdésem. Viszont lehet, hogy egyszerűbb lenne, ha megmutatnám, hogy mit is szeretnék elérni. KÉP
Úgy akarnám kialakítani a menüpontokat, hogy a nagyjából egyforma távolságra legyenek egymástól. Megpróbáltam a blocknak egy szélességet adni, de valamiért nem akarja az igazságot. Aztán lehet, hogy rosszul indultam neki...
kódot
Kód
Hidegen hagyja
display: none, és avisibility: hiddenaz, ami érdekli.Mi a gond?
Az a.logo-s cuccokat kihagyhattad volna innen. Viszont abban látom ezt:
a:visited .logo, ami azt jelenti: "látogatott linken belül definiált logo osztályú elem". Biztosan ezt akartad ott? Nema.logo:visited?Ha azt szeretnéd, hogy a menük egyforma szélességűek legyenek, akkor:
display: block; width: valamennyi; height: akarmennyi;. Csak ekkor jobban határold be osztállyal vagy a helyével, mert fenti szelektoroddal közvetlenül hivatkozol minden linkre.Máskor lécci a kérdést/kérést egy comment-be írd, úgy könnyebb lenne rá válaszolni, mint fejben/másik lapon tartani a felét...
Köszönöm!
Nos, most ott tartok, hogy a block szélességét és magasságát auto-ra állítottam és különböző stílusokat adtam meg a menüpontoknak, hogy be tudjam állítani a magasságukat.
Hogy adjak meg külön osztályokat? Úgy mint például a logónál? (.logo, .link1, .link2, stb.) Erre gondolsz?
Jelenleg így néz ki. Kérlek nézzétek meg, hogy formailag jól van-e így. Előre is köszönöm.
Ezeket a problémákat most már
Megint
Gábornak igaza van: innen már illene önállósodnod. Olvass egy kis css doksit, főleg a szelektorokat ajánlom.