Forum PHP.pl > [XHTML] element blokowy w liniowym

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [XHTML] element blokowy w liniowym

Forum PHP.pl > Forum > Po stronie przeglądarki

krzychos7

21.01.2010, 22:29:43

Chciałbym zrobić element blokowy zawierający nagłówek, obrazek oraz paragraf, który funkcjonował by jak link.
Wiem że nie można używać elementów blokowych (jak <div>) wewnątrz elementów inline (jak <a>).
Próbowałem użyć zdarzenia onclick, do tego w CSS dodałem cursor: pointer. Co dało bardzo zbliżony efekt. Jednakże brakuje możliwości pod prawym przyciskiem wybrania otwarcia w nowym oknie/karcie oraz nie wyświetla się adres w pasku stanu.
Czy muszę naginać standard XHTML i wykorzystać <a> z display: block; czy istnieje jakieś inne rozwiązanie?

Pacio

22.01.2010, 00:18:20

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
<style type="text/css">
div {
	position: relative;
}
 
a {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: url(1px.gif) repeat; /* przezroczysty 1x1px gif */
	text-indent:-9999px;
}
</style>
 
</head>
<body>
 
<div>
	<h1>Lorem Ipsum is simply dummy</h1>
	<img src="img/obrazek.jpg" alt="" />
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
 
	<a href="link.html">ukryty tekst linka</a>
</div>
 
</body>
</html>
[HTML] pobierz, plaintext

krzychos7

23.01.2010, 22:05:07

Dzięki

, chyba najlepsze rozwiązanie jak ktoś zaproponował (na innych forach pytałem i tylko w kółko o onclick pisali... mimo iż właśnie pisałem że to mnie nie zadowala). Zasadniczo nie lubię używać przeźroczystych pikseli z gif ale tu akurat chyba nie ma lepszego rozwiązania. Preferuje sposoby pozwalające odwiedzającym stronę zaznaczyć tekst lecz tu akurat można z tego zrezygnować.

PS.
No i czar prysł, gryzie się to z efektami jQuery chyba, i to 100% przyjmuje na całą stronę zamiast tylko diva. Widocznie nie może się ot odnosić do modyfikowanych AJAXem elementów. Ale rozwiąże jednak to bardziej skomplikowanym sposobem, za pomocą JS właśnie funkcje zrobię która będzie wstawiała dynamicznie tag linku wokół obrazka takstu nagłówka i tekstu paragrafu danego DIVa przez co tam będzie działał prawoklik, zaś reszta DIVa będzie miała onclick. Może nie da to 100% tego co chce ale będzie się walidowało i działało.

ShadowD

23.01.2010, 23:29:05

<a> jest domyślnie elementem blokowym ale można to zmienić na np. blokowy! (display:block;)

Dzięki temu nie potrzebujesz w ogóle diva, a jego całe ostylowanie może przenieść na owy odnośnik.

Nie powinno się nakładać przezroczystych masek ani z onclick w tym przypadku...

krzychos7

24.01.2010, 22:15:36

Właśnie o tym mowa. Zasadniczo tak nie powinno się robić no i można ustawić <a> na block (pisałem o tym też w pierwszym poście) jednak mimo tego nie można umieszczać w nim elementów blokowych, tak jest na stronie W3C oraz każdy walidator wywala na tym błąd.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.