CSS - Div jako href

Question

Witam, chciałbym wiedzieć w jaki sposób sprawić aby cały div który zawiera inne divy był odnośnikiem do innej strony nie tracąc przy tym swoich stylów. Po wrzuceniu diva w tagi <a href="#"></a> znika cały styl. Próbowałem też ostylować sam znacznik a dając

.box_a{
       display: block; 
       width: 30%;
       height: 40%;
}

Jednak nic to nie dało

Mój kod:

<a href="#" class="box_a"> 
      <div class="art_box">
             <div class="box_desc">
                     <span class="box_tit">Tekst</span>
                     <span class="box_txt">Tekst</span>
                     <div class="box_info">
                            <span class="box_cat"><a class="box_b" href="#">Odnośnik</a></span>
                            <span class="box_date">Tekst</span>
                     </div>
             </div>
       </div>
</a>

Sam CSS do tych divów i spanów chyba nie jest wymagany, w razie czego podam

Z góry dziękuję za pomoc!

Answer 1

Po pierwsze: anchory nie mogą być zagnieżdżane wewnątrz siebie.

Content model:

Transparent, but there must be no interactive content descendant, a element descendant, or descendant with the tabindex attribute specified.

Więc usuń wewnętrzny element <a class="box_b" href="#">Odnośnik</a>. Niech tekst "Odnośnik" będzie wewnątrz <span>a.

Jeśli chcesz, aby elementy wewnątrz anchora zachowały swoje style, to ustaw elementowi .art_box styl all z wartością initial i dalej styluj go wedle potrzeb.

Comments

Jednakże zależy mi na tym aby na jednym odnośniku znajdował się drugi. Czy jeżeli zastosuję funkcje JS onclick() na divie przekierowującą mnie do podstrony, a zostawię w środku tego anchora to czy wszystko będzie się zgadzać?

---

W jakim celu chcesz mieć zagnieżdżony odnośnik?

---

Czysto wizualnym. Sam całościowy div ma być odnośnikiem do strony, a anchor w środku ma być odnośnikiem do kategorii danego wpisu

Coś podobnego do sekcji aktualności ze strony https://jarock.pl/

---

Nie za bardzo sobie wyobrażam, jak taki "dwu warstwowy" link miałby wyglądać. Jeśli chcesz wizualnie umieścić link w linku, to możesz ten drugi przesunąć pozycjonowaniem do wnętrza tego pierwszego - ale nich one w strukturze nie będą w sobie zagnieżdżone.

---

Okej faktycznie dobrze wiedzieć że nie można zagnieżdżać linków, a pozycjonowanie to dobre wyjście. Lecz czas wrócić do głównego tematu. All:initial na .art_box wcale nie eliminuje problemu

.art_box{
    all: initial;
    width: 30%;
    height: 40%;
    background-color: #fff;
    margin-bottom: 5vh;
    border: 5px solid #ff6a6a;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    background-image: url(https://a.allegroimg.com/s1024/0cdf5f/361e4e234583b247cf17960e9d0e);
    background-size: 100%;
    background-position: center;
    transition: 0.5s ease-in-out;
    color: #fff;
}   

.box_desc{
    width: 100%;
    height: 35%;
    position: relative;
    top: 65%;
    background: transparent;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(51,51,51,1) 80%, rgba(255,255,255,0) 100%);
    display: flex;
    flex-direction: column;
    font-family: 'PT Sans', sans-serif;
}

.box_tit{
    width: 100%;
    height: 35%;
    font-family: 'Sansita Swashed', cursive;
    font-size: 20px;
    padding: 7px;
    box-sizing: border-box;
    text-shadow: 3px 3px 5px #000000;
}

.box_txt{
    width: 100%;
    height: 30%;
    padding: 7px;
    box-sizing: border-box;
}

.box_info{
    width: 100%;
    height: 25%;
    display: flex;
    flex-direction: row;
    padding: 7px;
    box-sizing: border-box;
}

.box_cat, .box_date{
    width: 50%;
    height: 100%;
    text-align: center;
}

 <a href="#" class="box_a">
    <div class="art_box">
         <div class="box_desc">
              <span class="box_tit">Tytuł</span>
              <span class="box_txt">Opis</span>
              <div class="box_info">
                  <span class="box_cat">Kategoria</span>
                  <span class="box_date">Data</span>
              </div>
         </div>
   </div>
</a>

Nie działa sam styl .art_box a divy czy spany zagnieżdżone w .art_box już normalnie wczytują style

---

Jak to wygląda: https://imgur.com/68j9pUJ

Jak to powinno wyglądać: https://imgur.com/lrEI8PN

---

Ustaw elementowi .art_box styl display: block oraz wysokość w px.

---

Działa :D

Dziękuję za pomoc i za dodatkowe rady ;)

---

P.S. Użycie all może być trochę overkillem. Powinno wystarczyć usunięcie/nadpisanie tych styli dla .art_box, które parent link ma przez przeglądarkę ustawione jako domyślne, czyli text-decoration i color. Przy czym przeglądarki na różnych silnikach ustawiają dodatkowe style używając specyficznych selektorów, jak np. w Chromium jest :-webkit-any-link. Możesz samemu zresetować te style, albo użyć wspomnianego all. Wadą tego drugiego jest reset wszystkich styli danego elementu - więc np. <div> traci styl display: block i trzeba go ustawić ręcznie.

---

Natknąłem się na CSS'ową wartość revert, która w połączeniu z all może być lepsza (w tym przypadku) od użycia all z wartością initial, ponieważ revert przywróci style do tych domyślnych w przeglądarce, a nie do tych zdefiniowanych w specyfikacji:

The revert keyword is different from and should not be confused with initial, which uses the initial value defined on a per-property basis by the CSS specifications. In contrast, user-agent stylesheets set default values on the basis of CSS selectors.

Answer 2

Cześć,

Nie jestem pewien czy dokładnie o to ci chodzi, ale czy próbowałeś dodać taką linijkę kodu?

a{
text-decoration: none;
}

Taki zapis pozwala usunąć "dekoracje" hiperłącza i może ci pomoże 

Pozdrawiam

Comments

Tak, mam ogólnie w kodzie zdefiniowane dla każdego a następujący kod

a{
text-decoration: none;
color: transparent;
}

Niestety nie likwiduje to mojego problemu

Answer 3

Czy chodzi Tobie o tego div-a ?

<div class="art_box">
    . . .
    . . .
</div>

jeżeli tak to możesz za pomocą js-a zrobić "klika" na tego div-a. 

const art_box_href = document.querySelector('.art_box');
art_box_href.addEventListener('click', () => {
  //console.info(art_box_href.dataset.href);
  document.location.href = art_box_href.dataset.href;  
})

pełny, przykładowy kod 

<style>
.art_box {
  display: block; 
  width: 30%;
  height: 40%;
  cursor: pointer;
}
.art_box:hover {
  color: green;
}
</style>
<body>
 
<div class="art_box" data-href="moj_link">
  <div class="box_desc">
    <span class="box_tit">Tekst</span>
    <span class="box_txt">Tekst</span>
    <div class="box_info">
      <span class="box_cat"><a class="box_b" href="#">Odnośnik</a></span>
      <span class="box_date">Tekst</span>
    </div>
  </div>
</div>
 
 
<script>
const art_box_href = document.querySelector('.art_box');
art_box_href.addEventListener('click', () => {
  //console.info(art_box_href.dataset.href);
  document.location.href = art_box_href.dataset.href;  
})
</script>
</body>

[Edit]

<div class="art_box">
 . . .
      <span class="box_cat"><a class="box_b" href=https://forum.pasja-informatyki.pl/512023/css-div-jako-href">Odnośnik</a></span>
      <span class="box_date">Tekst</span>
    </div>
  </div>
</div>

<script>
const art_box_href = document.querySelector(".art_box");

art_box_href.addEventListener('click', () => {
    //console.info(art_box_href.dataset.href);
  let a_inside = art_box_href.querySelector("a");
  a_inside.click();
})
</script>

 

Comments

Tak chodzi o tego diva, też myślałem nad użyciem JSa lecz na razie zajmuję się tylko stroną wizualną, sam div ma reprezentować najnowszy wpis (na nim znajduje się obraz(jako background-image), tytuł wpisu, krótki opis, kategorię wpisu oraz datę dodania. Także link będzie się zmieniał za pomocą PHP. Czy w takim razie mogę "włożyć" zmienną z PHP do JSa i odwrotnie aby to ładnie działało?

---

Aaaah przyjrzałem się lepiej kodowi. Czy to polega na tym że w samym divie jest już link, a JS obsługuje same przekierowanie po kliknięciu? Wtedy wkładanie tam linku poprzez PHP nie będzie wymagało wyciągania zmiennej z PHP do JS. Czy mam rację?

---

@VBService, tworzenie imitacji linka za pomocą <div>a to zła praktyka. Link reprezentuje hiperłącze, które służy do nawigacji po stronach internetowych i cechuje się zachowaniami, których <div> nie posiada, m.in.: obsługa focusa, zmiana stanu. <div> jest po prostu kontenerem dla swoich potomków i w takim celu należy go używać.