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

question-closed Nawigacja na witrynie

VPS Starter Arubacloud
+1 głos
117 wizyt
pytanie zadane 15 marca 2021 w HTML i CSS przez niezalogowany
zamknięte 16 marca 2021

Witam!

Mam pytanie jak zrobić, żeby lista <ul>, a dokładniej jej element <li>, który pełni rolę przycisku nawigacyjnego, przenosił na następną "podstronę" nie tylko po kliknięciu na napis ale i obok niego. Czyli tak jak jest na stronie Pasja informatyki", że nie trzeba klikać np. w przycisk "START" tylko można obok:

Będę wdzięczny za odpowiedź, pozdrawiam!

komentarz zamknięcia: Otrzymanie najlepszej odpowiedzi

1 odpowiedź

0 głosów
odpowiedź 15 marca 2021 przez VBService Ekspert (251,250 p.)
wybrane 16 marca 2021
 
Najlepsza

Do <li> dodaj (ustaw) padding.  wink

<body>
<ul>
  <li>Start</li>
  <li>Kursy</li>
</ul>
<ul class="padding">
  <li>Start</li>
  <li>Kursy</li>
</ul>
<pre></pre>
</body>

<style>
body {
  user-select: none;
}
ul {  
  list-style-type: none;
}
li {
  display: inline-block;
  margin: 1em;
  cursor: pointer;
  transition: all 1s;
}
li:hover {
  background-color: gray;
  color: white;
}
.padding li {
  display: inline-block;
  margin: 1em;
  border: 1px solid red;
  cursor: pointer;
  padding: 1em; /* <--- */
  transition: all 1s;
}
.padding li:hover {
  background-color: red;
  color: yellow;
  border-color: yellow;
}
</style>

<script>
const pre = document.querySelector('pre');
let id_time_out;

[...document.querySelectorAll('li')].forEach(li_ => {
  li_.addEventListener('click', e => {
    clearTimeout(id_time_out);
    const padding_ = window.getComputedStyle(e.target).getPropertyValue('padding');
    pre.innerHTML = `    Ma padding ustawiony na: <b>${padding_}</b>`;
    id_time_out = setTimeout(() => { pre.innerHTML = ''; }, 2000);
  })
})
</script>

 

komentarz 15 marca 2021 przez niezalogowany

Dziękuję za odpowiedź, lecz mam ustawiony padding, ale nie ma oczekiwanych skutków, czy ustawienie znaczników <li></li> w środku znaczników <a href="abcd" ></a>, czyli tak:

<a href="/index.php"><li>Strona główna</li></a>

jest zgodne ze standardami, czy tego nie powinno się robić?

 

komentarz 15 marca 2021 przez VBService Ekspert (251,250 p.)
edycja 15 marca 2021 przez VBService

Znacznik <li> jest częścią znacznika <ul>, czyli inny kod html musi znajdować się w wnętrzu <li> ... kod html ... </li>

Tu masz jak dopasować padding znacznika <a> do <li>

<body>
  <ul>
    <li title="Klik"><a href="#">Start</a></li>
    <li title="Klik">Kursy</li>
  </ul>
  <ul class="padding">
    <li title="Klik"><a href="#">Start</a></li>
    <li class="last-child" title="Klik">Kursy</li>
  </ul>
  <pre> </pre>
  <pre>
    czerwona ramka - padding &lt;li&gt;
     zielona ramka - padding &lt;a&gt;
  </pre>
</body>

<style>
body {
  user-select: none;
}
ul {  
  list-style-type: none;
}
li {
  display: inline-block;
  margin: 1em;
  cursor: pointer;
  transition: all 0.5s;
}
li:hover {
  background-color: gray;
  color: white;
}
.padding li { /*  <------------+   */
  display: inline-block; /*    |   */
  margin: 1em; /*              |   */
  border: 3px solid red; /*    |   */
  cursor: pointer; /*          |   */
  transition: all 0.5s; /*     |   */
  padding: 0; /*  <------------+   */
}
.padding li a { /*  <----+   */
  display: block; /*  <--|   */
  padding: 1em; /*  <----+   */

  color: black;
  border: 3px solid green;
}
.padding li:hover {
  background-color: red;
  color: yellow;
  border-color: yellow;
}
.padding .last-child {
  padding: 2em;
}
</style>

<script>
const pre = document.querySelector('pre');
let id_time_out;

[...document.querySelectorAll('li')].forEach(li_ => {
  li_.addEventListener('click', e => {
    clearTimeout(id_time_out);
    const padding_ = window.getComputedStyle(e.target).getPropertyValue('padding');
    pre.innerHTML = `    Ma padding ustawiony na: <b>${padding_}</b>`;
    id_time_out = setTimeout(() => { pre.innerHTML = ' '; }, 2000);
  })
})
</script>

 

1
komentarz 16 marca 2021 przez niezalogowany

@VBService,

Dziękuję bardzo! Już wszystko działa!

Pozdrawiam!

Podobne pytania

0 głosów
1 odpowiedź 319 wizyt
pytanie zadane 10 lipca 2018 w HTML i CSS przez Q7V Gaduła (4,250 p.)
0 głosów
1 odpowiedź 356 wizyt
pytanie zadane 9 lipca 2020 w HTML i CSS przez gmcode Gaduła (3,120 p.)

92,454 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...