ugrás a tartalomhoz

Kép, mint hivatkozás

kalikim · 2012. Jan. 24. (K), 16.51
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:
  1. #menu {  
  2.     width: 700px;  
  3.     height: 100px;  
  4. }  
  5. #menu a,  
  6. #menu a:visited,  
  7. #menu a:active {  
  8.     color: #93DD02;   
  9.     text-decoration: none;  
  10. }  
  11. #menu a:hover {  
  12.     color: #FF0080;   
  13.     text-decoration: none;  
  14. }  
  15. #menu a .img,  
  16. #menu a:visited .img,  
  17. #menu a:active .img {  
  18.     background:url(images/pz_green.png) no-repeat 0 0;  
  19.     text-decoration:none;  
  20. }  
  21. #menu a:hover .img {  
  22.     background:url(images/pz_pink.png) no-repeat 0 0;  
  23.     text-decoration:none;  
  24. }  
  1. <div id="menu">  
  2.   <table height="70">  
  3.   <tr>  
  4.     <td><a href="X"><img src="images/pz_green.png" /></a></td>  
  5.     <td><a class="table" href="X">link</a></td>  
  6.     <td><a class="table" href="X">link</a></td>  
  7.     <td><a class="table" href="X">link</a></td>  
  8.     <td><a class="table" href="X">link</a></td>  
  9.   </tr>  
  10. </table>  
  11.     </div>  
‹ AJAX form post JQuery hiba ›
 ■
1

Csak elméletileg...

H.Z. v2 · 2012. Jan. 24. (K), 17.05
... az az img biztosan kell az első td sorba?
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)
2

img - .img nem ugyanaz

Burnee · 2012. Jan. 24. (K), 17.19
Szia!

Kritikus hiba 1: Az img html taget img selectorral éred el. A .img selector 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. <a href="#" class="logo"></a>  
  1. a.logo {  
  2. text-decoration: none;  
  3. display: block;  
  4. width: 100px; /*amekkora a kép*/  
  5. height: 100px; /*amekkora a kép*/  
  6. background: url(picture.png) top left no-repeat;  
  7. }  
  8. a.logo:hover {  
  9. background-image: url(picture2.png);  
  10. }  
Egyéb hibák:
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!
3

Köszönöm a segítséget!

kalikim · 2012. Jan. 25. (Sze), 10.24
Nagyon köszönöm a segítséget és a tanácsokat. Sikerült megoldanom a logó problémát, bár lenne még ehhez kapcsolódóan egy kérdésem.
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:
  1. #menu {  
  2.     width: 700px;  
  3.     height: 100px;  
  4. }  
  5. #menu a,  
  6. #menu a:visited,  
  7. #menu a:active {  
  8.     color: #93DD02;   
  9.     text-decoration: none;  
  10. }  
  11. #menu a:hover {  
  12.     color: #FF0080;   
  13.     text-decoration: none;  
  14. }  
  15. .  
  16. .  
  17. .  
  18. a.logo,  
  19. a:visited .logo,  
  20. a:active .logo {  
  21.     text-decoration: none;    
  22.     display: block;    
  23.     width: 200px;   
  24.     height: 70px;   
  25.     background: url(images/pz_green.png) top left no-repeat;    
  26. }  
  27. a.logo:hover {   
  28.     background-image: url(images/pz_pink.png);    
  29. }  
  30. .menu {  
  31.     list-style-type:none;  
  32.     margin:0;  
  33.     padding:0;  
  34. }  
  35. li  
  36. {  
  37. display:inline;  
  38. }  
  1. <div id="menu">  
  2.     <ul class="menu">  
  3.     <li><a href="X" class="logo"></a></li>  
  4.     <li><a href="X">snowboard szerviz</a></li>  
  5.     <li><a href="X">síszerviz</a></li>  
  6.     <li><a href="X">snowboard oktatás</a></li>  
  7.     <li><a href="X">kapcsolat</a></li>  
  8.     </ul>   
  9.     </div>  
4

íme

Burnee · 2012. Jan. 25. (Sze), 12.52
Megoldás a szaggatott keretre:
a.logo { outline: none; };

Megoldások arra, hogy egy sorban legyenek:
1.:
  1. li { display: inline-block; }  
2.:
  1. li { display: block; float: left; }  
  2. ul { overflow: hidden }  
Az overflow: hidden azért kellhet, hogy legyen magassága az ul-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)
5

Csak egy apróság a 2-es

Hidvégi Gábor · 2012. Jan. 25. (Sze), 12.57
Csak egy apróság a 2-es ponthoz: mivel a <li> eleve blokk típusú elem, ezért nem kell neki display: block;-ot adni.
6

Van jelentősége

Poetro · 2012. Jan. 25. (Sze), 13.11
Azért annak van jelentősége, hogy display: block CSS tulajdonságot ad meg az elemnek.
  1. <!DOCTYPE HTML>  
  2. <html lang="en-US">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>display: block|list-item</title>  
  6.     <style type="text/css">  
  7.         .list li {  
  8.             display: list-item;  
  9.         }  
  10.         .block li {  
  11.             display: block;  
  12.         }  
  13.     </style>  
  14. </head>  
  15. <body>  
  16.     <ul class="none">  
  17.         <li>Item 1</li>  
  18.         <li>Item 2</li>  
  19.         <li>Item 3</li>  
  20.         <li>Item 4</li>  
  21.     </ul>  
  22.     <ul class="list">  
  23.         <li>Item 1</li>  
  24.         <li>Item 2</li>  
  25.         <li>Item 3</li>  
  26.         <li>Item 4</li>  
  27.     </ul>  
  28.     <ul class="block">  
  29.         <li>Item 1</li>  
  30.         <li>Item 2</li>  
  31.         <li>Item 3</li>  
  32.         <li>Item 4</li>  
  33.     </ul>  
  34. </body>  
  35. </html>  
Alapértelmezetten az LI elemek display értéke list-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.
9

Ha el szeretném tűntetni a

Hidvégi Gábor · 2012. Jan. 25. (Sze), 13.45
Ha el szeretném tűntetni a listaelem jelölőjét, akkor magának a listának szoktam a list-style-type stílusát none-ra állítani. Úgy gondolom, hogy ráadásul ez olcsóbb megoldás, mint ha minden <li>-re raknék display: block;-ot.
7

igazad van

Burnee · 2012. Jan. 25. (Sze), 13.14
Igazad van. Azért írtam, hogy látszódjon, nem inline kell. De Poetronak is igaza van, mert ha nem lenne megadva, a list-style-type: none, akkor ez már segítene.
8

a <li> eleve blokk típusú

kuka · 2012. Jan. 25. (Sze), 13.19
a <li> eleve blokk típusú elem
Ha az „eleve” itt úgy értendő, hogy amíg a levegőben van, akkor igaz. (Bár ez így minden elemre igaz.) De amint hozzáadod a DOM fához, beáll list-item-ra. Lásd Firebug Console ablakban:
>>> li=document.createElement('li')
<li>
>>> window.getComputedStyle(li).display
"block"
>>> document.body.appendChild(li)
<li>
>>> window.getComputedStyle(li).display
"list-item"
10

A display: list-item;-től is

Hidvégi Gábor · 2012. Jan. 25. (Sze), 13.46
A display: list-item;-től is blokk típusú elem marad az illető.
11

Az élezés mellé még egy wax réteg is jár! (ez nem vicc)

kalikim · 2012. Jan. 25. (Sze), 14.10
Nagyon köszönöm, sikerült.
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...
12

kódot

Burnee · 2012. Jan. 25. (Sze), 14.21
Mutass kódot és akkor könnyebben tudunk segíteni!
13

Kód

kalikim · 2012. Jan. 25. (Sze), 14.32
  1. a,  
  2. a:visited,  
  3. a:active {  
  4.     color: #93DD02;   
  5.     text-decoration: none;  
  6. }  
  7. a:hover {  
  8.     color: #FF0080;   
  9.     text-decoration: none;  
  10. }  
  11. a.logo,  
  12. a:visited .logo,  
  13. a:active .logo {  
  14.     text-decoration: none;  
  15.     outline: none;  
  16.     display: block;    
  17.     width: 200px;   
  18.     height: 70px;  
  19.     background: url(images/pz_green.png) top left no-repeat;    
  20. }  
  21. a.logo:hover {   
  22.     background-image: url(images/pz_pink.png);    
  23. }  
  24. ul {   
  25.     overflow: hidden;  
  26.     margin:0;  
  27.     padding:0;  
  28. }  
  29. li {   
  30.     display: block;  
  31.     float: left;  
  32. }  
  33. .style {  
  34.     font-size:18px;  
  35.     font-weight:bold;  
  36.     text-align: center;  
  37.     padding: 20px 0 0 10px;  
  38. }  
  1. <ul>  
  2.     <li><a href="X" class="logo"></a></li>  
  3.     <li class="style"><a href="X">snowboard szerviz</a></li>  
  4.     <li class="style"><a href="X">síszerviz</a></li>  
  5.     <li class="style"><a href="X">snowboard oktatás</a></li>  
  6.     <li class="style"><a href="X">kapcsolat</a></li>  
  7.     </ul>   
Illetve az lenne a kérdésem, hogy mennyire jó az (mondjuk a google-ra nézve), ha így néz ki a css?
14

Hidegen hagyja

Poetro · 2012. Jan. 25. (Sze), 16.09
A Google-t leginkább hidegen hagyja a CSS, legfeljebb a display: none, és a visibility: hidden az, ami érdekli.
15

Mi a gond?

Pepita · 2012. Jan. 25. (Sze), 21.44
Annyira emlékszem az előző kommentből, hogy "egyforma távolságra" szeretnéd, de a linkelt képen úgy vannak.

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? Nem a.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...
16

Köszönöm!

kalikim · 2012. Jan. 26. (Cs), 11.56
A visitedre vonatkozóan, valóban úgy akartam, ahogy leírtad.
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.
  1. a,  
  2. a:visited,  
  3. a:active {  
  4.     color: #93DD02;   
  5.     text-decoration: none;  
  6. }  
  7. a:hover {  
  8.     color: #FF0080;   
  9.     text-decoration: none;  
  10. }  
  11. a.logo,  
  12. a.logo:visited,  
  13. a.logo:active {  
  14.     text-decoration: none;  
  15.     outline: none;  
  16.     display: block;    
  17.     width: 250px;   
  18.     height: 70px;  
  19.     background: url(images/pz_green.png) top left no-repeat;    
  20. }  
  21. a.logo:hover {   
  22.     background-image: url(images/pz_pink.png);    
  23. }  
  24. ul {   
  25.     overflow: hidden;  
  26.     margin:0;  
  27.     padding:0;  
  28. }  
  29. li {   
  30.     display: block;  
  31.     width: auto;  
  32.     height: auto;  
  33.     float: left;  
  34. }  
  35. .style {  
  36.     font-size:18px;  
  37.     font-weight:bold;  
  38.     text-align: center;  
  39.     width: 120px;  
  40.     padding: 15px 0 0 5px;  
  41. }  
  42.  .style1 {  
  43.     font-size:18px;  
  44.     font-weight:bold;  
  45.     text-align: center;  
  46.     width: 120px;  
  47.     padding: 25px 0 0 5px;  
  48. }  
  1. <ul>  
  2.     <li><a href="X" class="logo"></a></li>  
  3.     <li class="style"><a href="X">snowboard szerviz</a></li>  
  4.     <li class="style1"><a href="X">síszerviz</a></li>  
  5.     <li class="style"><a href="X">snowboard oktatás</a></li>  
  6.     <li class="style1"><a href="X">kapcsolat</a></li>  
  7.     </ul>   
17

Ezeket a problémákat most már

Hidvégi Gábor · 2012. Jan. 26. (Cs), 13.14
Ezeket a problémákat most már neked kéne megoldani önállóan.
18

Megint

Pepita · 2012. Feb. 1. (Sze), 01.33
Itt viszont az ul és li elemekből szelektáltad az összeset. Mi lesz, ha a tartalomban lesz egy lista?

Gábornak igaza van: innen már illene önállósodnod. Olvass egy kis css doksit, főleg a szelektorokat ajánlom.