[CSS] "Podswietlanie" calego diva Opcje

[uglukha]

witam,
czy sie da w samym css, bez zadnych java scriptow, podswietlic calego diva, i zeby cala powierzchnia tego diva byla linkiem? Przez podswietlenie rozumiem np. zmiane koloru tla diva, i jesli tak, to jak to zrobic? czego szukac w google itp? (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) jesli nie przez samego css to jak to ugryzc?

tu tak schematycznie o co chodzi

nie aktywny:
(IMG:http://img372.imageshack.us/img372/4410/01uz5.gif)

po najechaniu mysza:
(IMG:http://img79.imageshack.us/img79/9702/02bw1.gif)

w jednym divie, text + 2 obrazki

z gory dzieki za odp
pozdrawiam

[kbsucha]

Dac sie da, ale "niektore" przegladarki tego nie wyswietlaja. Najlatwiej to chyba zalatwic JS.

http://www.littleblueplane.com/test/hoverdivtest.html
tu masz dzialajacy przyklad.

Pozdr

Ten post edytował kbsucha 27.05.2008, 19:10:56

[l0ud]

Podświetlić się da (tak jak poprzednik napisał) ale nie obsługuje tego IE6.

Co do wykorzystania całej powierzchni jako odnośnika, raczej nie ma takiej możliwości. Przynajmniej ja zawsze do tego celu używałem JS.

[uglukha]

Dac sie da, ale "niektore" przegladarki tego nie wyswietlaja. Najlatwiej to chyba zalatwic JS.

http://www.littleblueplane.com/test/hoverdivtest.html
tu masz dzialajacy przyklad.

Pozdr

o dzieki za linka, dziala w firefoxie i w ie6 ten przyklad, gdzie moze nie dzialac?
swietne, malo kodu, brak js, o to mi chodzilo. jakie sa przeciwskazania uzycia tego?

Co do wykorzystania całej powierzchni jako odnośnika, raczej nie ma takiej możliwości. Przynajmniej ja zawsze do tego celu używałem JS.

wystarczy zeby obrazki i text byli klikalne, chce poprostu zeby bylo widoczne ze obrazki i tekst prowadza w to samo miejsce, i mysle ze podswietlajace sie tlo wystarczajaco bedzie o tym informowac uzytkownika

[l0ud]

Przykład działa w IE6, bo zawiera dołączonego hacka do niego. Tak więc i tak po części musisz użyć JS (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
http://www.littleblueplane.com/test/csshover.htc

[uglukha]

Przykład działa w IE6, bo zawiera dołączonego hacka do niego. Tak więc i tak po części musisz użyć JS (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
http://www.littleblueplane.com/test/csshover.htc

ah, w ogóle tego nie zauwazylem ;/

czyli nie ma mozliwosci bez JS ;/
ie6 obsluge musze miec

[l0ud]

No już na takie użycie JS można sobie pozwolić. Przypadki gdy ktoś używa IE6 bez włączonej obsługi JS są raczej znikome (osoba prawdopodobnie nie potrafiłaby jej wyłączyć), a w lepszych przeglądarkach skrypt się po prostu nie wczyta (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) (instrukcja warunkowa)

[uglukha]

w sumie racja, dzieki za pomoc

anyway, napisalem w ogole przez u? to chyba nie mozliwe, o co chodzi z ta czerwona literka?

// ostatni sprawiedliwy stoi na straży (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) jak zauważę gdzieś w postach jakieś "kfiatki", to je poprawiam - takie zboczenie (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
// batman

[woj_tas]

A nie można tego poprosru wrzucić do "a"

Html:

[HTML] pobierz, plaintext 
<a href="/" title="">
  <span>Lorem ipsum</span>
  <img src="rys.png" alt="" />
</a>
[HTML] pobierz, plaintext 

Przykładowe ostylowanie:

[HTML] pobierz, plaintext 
a {display:block;height:170px;width:460px;padding:10px;}
a span {display:block;width:300px;float:left;text-align:justify;}
a img {margin:10px 0 0 20px;float:left;}
a:hover {background:red;}
[HTML] pobierz, plaintext 

[Shili]

@up
Jeśli to nie jest linkiem, to jest to bardzo nieładne rozwiązanie, w dodatku niesemantyczne. Chociaż zapewne zdecydowanie najprostsze (co pewnie jakoś tam za nim przemawia ;), ale w przypadku choćby umieszczania w środku elementów blokowych będzie składniowo niepoprawne.

csshover.htc również moim zdaniem jest najlepszy. Mimo że to js.

[uglukha]

A nie można tego poprosru wrzucić do "a"

Html:

[HTML] pobierz, plaintext 
<a href="/" title="">
  <span>Lorem ipsum</span>
  <img src="rys.png" alt="" />
</a>
[HTML] pobierz, plaintext 

Przykładowe ostylowanie:

[HTML] pobierz, plaintext 
a {display:block;height:170px;width:460px;padding:10px;}
a span {display:block;width:300px;float:left;text-align:justify;}
a img {margin:10px 0 0 20px;float:left;}
a:hover {background:red;}
[HTML] pobierz, plaintext 

nie wiem, juz dzis nie mysle, jutro odpowiem (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

// ostatni sprawiedliwy stoi na straży winksmiley.jpg jak zauważę gdzieś w postach jakieś "kfiatki", to je poprawiam - takie zboczenie winksmiley.jpg
// batman

omg, czyli napisalem w ogole przez u naprawde? heheh, naprawde musze isc spac juz w takim razie (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

[woj_tas]

...i zeby cala powierzchnia tego diva byla linkiem?

Jeśli to nie jest linkiem, to jest to bardzo nieładne rozwiązanie, w dodatku niesemantyczne.

To ma być link

ale w przypadku choćby umieszczania w środku elementów blokowych będzie składniowo niepoprawne.

Ale w przedstawionym przeze mnie przykładzie nie ma elemntów blokowych.

[Shili]

To ma być link

To rób w a nie w divie, jak proponowano (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) Nie doczytałam dokładnie, faktycznie (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Ale w przedstawionym przeze mnie przykładzie nie ma elemntów blokowych.

Ale tego wbrew pozorom nie da się stwierdzić na podstawie zdjęcia, zwłaszcza w dobie zagnieżdżania divów itd ^^

Ten post edytował Shili 27.05.2008, 21:28:07

[Black-Berry]

Nie bój się tak tych jscriptów. Nie musi być tak tragicznie trudno. To tylko 3 linjki a pójdzie w każdej przeglądarce.

[HTML] pobierz, plaintext 
<div onmouseover="this.style.backgroundColor='#ff0000'" onmouseout="this.style.backgroundColor='#ffffff'" onmousedown="location='http://www.onet.pl'">click me</div>
[HTML] pobierz, plaintext 

Ten post edytował Black-Berry 20.08.2008, 22:36:23