ugrás a tartalomhoz

Kép, mint hivatkozás

kalikim · 2012. Jan. 24. (K), 15.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:
#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>
 
1

Csak elméletileg...

H.Z. v2 · 2012. Jan. 24. (K), 16.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), 16.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:

<a href="#" class="logo"></a>

a.logo {
text-decoration: none;
display: block;
width: 100px; /*amekkora a kép*/
height: 100px; /*amekkora a kép*/
background: url(picture.png) top left no-repeat;
}
a.logo:hover {
background-image: url(picture2.png);
}
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), 09.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:

#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;
}
.
.
.
a.logo,
a:visited .logo,
a:active .logo {
	text-decoration: none;  
	display: block;  
	width: 200px; 
	height: 70px; 
	background: url(images/pz_green.png) top left no-repeat;  
}
a.logo:hover { 
	background-image: url(images/pz_pink.png);  
}
.menu {
	list-style-type:none;
	margin:0;
	padding:0;
}
li
{
display:inline;
}
<div id="menu">
  	<ul class="menu">
	<li><a href="X" class="logo"></a></li>
	<li><a href="X">snowboard szerviz</a></li>
	<li><a href="X">síszerviz</a></li>
	<li><a href="X">snowboard oktatás</a></li>
    <li><a href="X">kapcsolat</a></li>
	</ul> 
	</div>
4

íme

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

Megoldások arra, hogy egy sorban legyenek:
1.:

li { display: inline-block; }
2.:

li { display: block; float: left; }
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), 11.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), 12.11
Azért annak van jelentősége, hogy display: block CSS tulajdonságot ad meg az elemnek.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>display: block|list-item</title>
    <style type="text/css">
        .list li {
            display: list-item;
        }
        .block li {
            display: block;
        }
    </style>
</head>
<body>
    <ul class="none">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
    <ul class="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
    <ul class="block">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</body>
</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), 12.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), 12.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), 12.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), 12.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), 13.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), 13.21
Mutass kódot és akkor könnyebben tudunk segíteni!
13

Kód

kalikim · 2012. Jan. 25. (Sze), 13.32

a,
a:visited,
a:active {
	color: #93DD02; 
	text-decoration: none;
}
a:hover {
	color: #FF0080; 
	text-decoration: none;
}
a.logo,
a:visited .logo,
a:active .logo {
	text-decoration: none;
	outline: none;
	display: block;  
	width: 200px; 
	height: 70px;
	background: url(images/pz_green.png) top left no-repeat;  
}
a.logo:hover { 
	background-image: url(images/pz_pink.png);  
}
ul { 
	overflow: hidden;
	margin:0;
	padding:0;
}
li { 
	display: block;
	float: left;
}
.style {
	font-size:18px;
	font-weight:bold;
	text-align: center;
	padding: 20px 0 0 10px;
}
<ul>
	<li><a href="X" class="logo"></a></li>
	<li class="style"><a href="X">snowboard szerviz</a></li>
	<li class="style"><a href="X">síszerviz</a></li>
	<li class="style"><a href="X">snowboard oktatás</a></li>
    <li class="style"><a href="X">kapcsolat</a></li>
	</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), 15.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), 20.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), 10.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.
a,
a:visited,
a:active {
	color: #93DD02; 
	text-decoration: none;
}
a:hover {
	color: #FF0080; 
	text-decoration: none;
}
a.logo,
a.logo:visited,
a.logo:active {
	text-decoration: none;
	outline: none;
	display: block;  
	width: 250px; 
	height: 70px;
	background: url(images/pz_green.png) top left no-repeat;  
}
a.logo:hover { 
	background-image: url(images/pz_pink.png);  
}
ul { 
	overflow: hidden;
	margin:0;
	padding:0;
}
li { 
	display: block;
	width: auto;
	height: auto;
	float: left;
}
.style {
	font-size:18px;
	font-weight:bold;
	text-align: center;
	width: 120px;
	padding: 15px 0 0 5px;
}
 .style1 {
	font-size:18px;
	font-weight:bold;
	text-align: center;
	width: 120px;
	padding: 25px 0 0 5px;
}

<ul>
	<li><a href="X" class="logo"></a></li>
	<li class="style"><a href="X">snowboard szerviz</a></li>
	<li class="style1"><a href="X">síszerviz</a></li>
	<li class="style"><a href="X">snowboard oktatás</a></li>
    <li class="style1"><a href="X">kapcsolat</a></li>
	</ul> 
17

Ezeket a problémákat most már

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

Megint

Pepita · 2012. Feb. 1. (Sze), 00.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.