ugrás a tartalomhoz

H1 tag tartalmának cseréje képre CSS-el

tiku I tikaszvince · 2006. Feb. 2. (Cs), 10.47
Sziasztok!
Aktuális munkám során belefutottam egy problémába (hát persze hogy IE).
Az aktuális oldal fej részében az oldal címét szeretném elhelyezni H1 tagban, úgy hogy a szövegre kattintva, a kezdőoldalra ugorjon a felhasználó. A csavar az egészben az, hogy a sima szöveget egy képpel szeretném helyettesíteni, ami ráadásul az :hover meg is változik.

Most így néz ki a kód

h1, h2, h3, h4 {
  font-family: sans-serif;
  font-weight: bold; }
#header {
  background: black; }
#header h1 span:hover { 
  background: url(headtext.png) 0px -64px no-repeat; }
#header h1 span {
  position: absolute; width: 503px; height: 64px;
  background: url(headtext.png) no-repeat; }
#header h1 a {
  color: white; }


<div id="header">
<h1><a href="index.html" title="Kezdőlap"><span>&nbsp;</span>Fejléc szöveg</a></h1>
</div>
A jelenlegi kód Firefox és Opera alatt gyönyörűen működik. Explorer pedig gyönyürűen megjeleníti a háttérképet, ugyanakkor az eredeti link aláhúzása a bal oldalon kb 15-20px szélességben "kilóg", plussz nem is kattintható a hivatkozás.

Hogy tudnám az Explorert rávenni, hogy kb valami hasonló legyen, mint ahogy a másik két bönégészőben?

TikuVoltam
‹ Fennmaradó helyet kitöltő div HTML webhelyen jelszóval védett oldal ›
 ■
1

:hover

Anonymous · 2006. Feb. 2. (Cs), 11.00
a :hover ie-ben csak 'a' elemre használható.

használd így:

#header h1 a:hover span { 
  background: url(headtext.png) 0px -64px no-repeat; }
#header h1 a span {
  position: absolute; width: 503px; height: 64px;
  background: url(headtext.png) no-repeat; }
gex

u.i: a link szerintem kattintható, csak nem kurzor nem változik meg.
5

a:hover

tiku I tikaszvince · 2006. Feb. 2. (Cs), 15.55
Köszi!
Az, hogy IE alatt csak az a elemnek van :hover tulajdonsága teljesen kiment a fejemből. (Mea culpa)

Annyi kiegészítést tettem még, hogy a #header h1 a span szabályhoz egy cursor: pointer; tulajdonságot hozzáfűztem.

Az hogy a képváltás is működik IEben - igaz hogy csak félig - csak hab a tortán. Azért csak félig, mert a visszaváltásról az esetek 90%-ban elfelejtkezik.

Már csak arra lennék kiváncsi, hogy miért kell a pointer-t megadni, amikor a span elem az a elemen belül helyezkedik el?

TikuVoltam
Ma is holnap fekszünk le, mint tegnap
6

vissza valtas

Jano · 2006. Feb. 2. (Cs), 16.13
Hogy vissza valtas is menjen, az a elemre is tegyel egy szabaly megvaltozast, pl betuszin. Igy nem felejti el a gyerekelemet se visszavaltani.
2

Biztos?

sajt · 2006. Feb. 2. (Cs), 11.47
En nem vagyok benne biztos, hogy h1-en belul lehet a, merthogy semmilyen elemet nem tartalmazhat. Magyarul, ennek egy a-nak kell lennie, de adhatsz neki osztalyt, vagy id-t. Raadasul, nem ertem, hogy miert kellene az aktualis cimre kattintva visszaugrani a fooldalra.

--
Ámon Tamás - http://amon.hu
3

semmilyet?

Anonymous · 2006. Feb. 2. (Cs), 12.16
h1 nem tartalmazhat span, em és egyáltalán semmilyen elemet?

gex
4

De igen...

Anonymous · 2006. Feb. 2. (Cs), 12.29
Tartalmazhat inline elemeket, tehat span es a elemeket is.
7

Már miért ne tartalmazhatná?

tiku I tikaszvince · 2006. Feb. 2. (Cs), 16.13
Soron belüli, illetve blokkszintű elemeket tartalmazhat.

forrás

nem ertem, hogy miert kellene az aktualis cimre kattintva visszaugrani a fooldalra.

Nem élrtem mit nem értesz :)
Szerintem, igenis szükség van a fejlécben egy, az oldal gyökeréhez mutató linkre. Pl.: a WL-fejlécében a logóra kattintva, hova fogsz kerülni?
Vagy csak nézd meg a saját oldaladat. Ott is ott figyel az oldal tetején a Drupal logó melett az Amon.hu felirat, ami szintén csak a főoldaladra mutató link, ami szintén egy H1 elemben figyel.

Ha szerinted ennek nincs értelme, akkor a saját oldaladon miért nem távolítod el azt a hivatkozást?

TikuVoltam
Ma is holnap fekszünk le, mint tegnap