CAŁY div jako odnośnik

pytanie zadane 4 kwietnia 2020 w HTML i CSS przez sopll Nowicjusz (170 p.)

<body>
	<div id="nav">
		<div id="menulewe">MENU</div>
		<div class="opcje2">Strona główna</div>
		<div class="opcje2">
			<a class="link" href="https://www.facebook.com/" target="_blank">Facebook</a>
		</div>
		<div class="opcje2">Przykład</div>
		<div class="opcje2">Kontakt</div>
		<div class="opcje2">Poradniki</div>
		<div class="opcje2">Galeria</div>
	</div>
</body>

Mamy takie o menu, w pliku .css jest odpowiednio wystylizowany znacznik

#nav

oraz klasę

.opcje2

Pytanie brzmi - jak zrobić tak, aby do tego facebooka przekierowywało nas klikając na obszar całego diva?

4 odpowiedzi

odpowiedź 4 kwietnia 2020 przez Greeenone Pasjonat (16,100 p.)

Może wrzucić CSS odpowiadający za całego nava? Aby caly div był klikalny, trzeba ustawić link tak aby wypełniał całego diva.

komentarz 4 kwietnia 2020 przez sopll Nowicjusz (170 p.)

Chodzi o to, aby w NAVie znajdowały się divy, które będą odpowiednio odsyłały do poszczególnych stron/podstron, a nie o to aby cały nav był kilkalny.

odpowiedź 4 kwietnia 2020 przez jerk0 Użytkownik (540 p.)

odpowiedź 6 kwietnia 2020 przez frostify Mądrala (5,640 p.)

Tak na marginesie - nie musisz tworzyć diva o nazwie nav, gdyż istnieje w pełni poprawny tag w htmlu o nazwie nav.

W html-u odnośnik oczywiście najprościej zrobić za pomocą tagu <a>.

Wystarczy całego diva wstawić wewnątrz <a> (jest to poprawna forma w html5, czyli powszechnie używanym), w ten sposób:

<nav>
<a href="adres url">
<div class="opcje2">
Przykład
</div>
</a>
</nav>

Jednak to, co napisałem podejrzewam, że nie rozwiąże twoich problemów, gdyż podany napis "przykład" nadal będzie miał niebieski kolor linku, kursor się na nim zmieni i będzie podkreślony, tak jak zwykły link.

Moim zdaniem najlepiej w ogóle usunąć diva, a samo <a> wystylizować, by wyświetlało się jak div.

Do tego potrzeba podmienić domyślne style dla <a>, a są to:

color: (wartość w zależności od przeglądarki);
text-decoration: underline;
cursor: auto (albo pointer)

Do tego musimy dodać dla <a> domyślne wartości diva, a jest to tylko: display: block, i nasz <a> wyświetla się jak zwykły div, a do tego oczywiście może działać jako link.

Na jakie wartości podmienić style dla <a> i przykład pokazuje tutaj:

https://codepen.io/frostify/pen/mdJNydb

odpowiedź 6 kwietnia 2020 przez 1234 Dyskutant (9,140 p.)

Ten odnośnik przenieś na całego diva zamiast tylko tekstu:

<body>
    <div id="nav">
        <div id="menulewe">MENU</div>
        <div class="opcje2">Strona główna</div>
        <a class="link" href="https://www.facebook.com/" target="_blank"><div class="opcje2">
            Facebook
        </div></a>
        <div class="opcje2">Przykład</div>
        <div class="opcje2">Kontakt</div>
        <div class="opcje2">Poradniki</div>
        <div class="opcje2">Galeria</div>
    </div>
</body>