• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Kikalne dwa div

Object Storage Arubacloud
0 głosów
169 wizyt
pytanie zadane 1 sierpnia 2023 w Sieci komputerowe, internet przez Bzytek Użytkownik (810 p.)

Witam

Próbuję opanować z pozoru łatwy problem - dla znawcy.
Sytucję bez zbędnego pisania najlepiej widać pod linkem pen/yLQGxXV
Chodzi mi o klikalność div 1 i 3, której ni jak nie mogę wymusić. Div 3 obecnie nie wyświetla nawet placeholdera.
Div 1 ma otwierać button twittera "tweet", a div 3 reagować na onclick="window.print(); .
Wartości druk-pl i druk w zmyśle będą zmieniały obrazki z zależności o wersji językowej.
Czy mógłby poratowac mnie ktoś rozwiązaniem ? 

Pozdrawiam Zdz

1 odpowiedź

+2 głosów
odpowiedź 1 sierpnia 2023 przez VBService Ekspert (254,880 p.)
wybrane 11 sierpnia 2023 przez Bzytek
 
Najlepsza

Właściwość css: content musi się znajdować "we wnętrzu" kodu dla ::before, i analogicznie dla ::after

Propozycja poprawek (bez użycia ::before  wink)

[ on-line ]

<div class="box">
  <div class="item1">
    <a class="tweet" href="https://twitter.com/swierki" target="_blank">Tweet świerki</a> 
  </div>
  <div class="item2"></div>
  <div class="item3">
    <button class="druk" onclick="window.print()" title="Drukuj"></button>  
  </div>
</div>
.box {
  display: flex;
  justify-content: center;
  align-items: top;
  gap: 1rem;
  border: 2px solid red;
}
div.item1 {
  background: url('https://via.placeholder.com/90x50') no-repeat;
  text-align: center;
  width: 90px;
  height: 50px;
  margin-top: 25px;
}
.item1 a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  line-height: 50px;
}
div.item2 {
  width: 182px;
  height: 264px;
  background: url('https://via.placeholder.com/182x264') no-repeat;
}
div.item3 {
  width: 37px;
  height: 32px;
  margin-top: 25px;
}
.druk {
  background: url('https://via.placeholder.com/37x37') no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: none;
}

 

 


Wersja z wykorzystaniem darmowych svg ze strony: Bootstrap Icons

[ on-line ]

 

Podobne pytania

0 głosów
1 odpowiedź 413 wizyt
pytanie zadane 7 maja 2019 w HTML i CSS przez voytech Nowicjusz (220 p.)
+1 głos
2 odpowiedzi 1,496 wizyt
0 głosów
2 odpowiedzi 409 wizyt
pytanie zadane 19 marca 2020 w HTML i CSS przez spicedagger Użytkownik (530 p.)

92,757 zapytań

141,679 odpowiedzi

320,441 komentarzy

62,101 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...