ugrás a tartalomhoz

Horgony kattintható területének kiterjesztése

Hymer · 2019. Ápr. 2. (K), 09.23
Szeretném, ha a horgonyok kattintható területe a tőlük balra levő díszre is kiterjedne a http://pedikurspacczer.hu/ oldalon. Amikor az egér odaér, úgy néz ki, mintha kattintani is lehetne, de ez félrevezető, mert csak a szövegre kattintva moccan az oldal. Meg lehet ezt oldani css-sel?
‹ JavaScript iskolába való becsengetés Szövegből kattintható link ›
 ■
1

Ebben az esetben megoldhatod

Endyl · 2019. Ápr. 2. (K), 11.28
Ebben az esetben megoldhatod úgy, hogy ne a listaelemnek legyen paddingje, hanem a linknek.
2

Első?

Pepita · 2019. Ápr. 2. (K), 11.47
Tippre a sub_nav_ul osztályú bal oldali "pöttyös függőleges metró menüre" gondolsz.

Az nem baj, hogy a felső sehogyan sem kattintható, mert rátakar a felette lévő header tartalma? Szerintem ezt is javítani kéne.

Azért néz ki úgy, mintha kattintható lenne, mert a li tag-en van a kurzort meghatározó css:
  1. .sub_nav li {  
  2.     cursor: pointer;  
  3. }  
Egyszerűen úgy is meg lehet oldani, ha a li-n belüli a tageknek adsz egy negatív bal margót, és hogy a szöveg ugyanott maradjon, ugyanennyi (pozitív) bal padding-et is.
Pl:
  1. #sub_nav ul li a {  
  2.     margin-left: -40px;  
  3.     padding-left: 40px;  
  4. }  
Nem számolgattam ki pontosan, csak böngészőbe beírtam a meglévő szelektorhoz. Nem túl elegáns mondjuk ez a szelektor, és lehet, hogy nem pixelben és / vagy nem 40 a legjobb érték.

Nyilván ha saját html + css, nem "gyári" template, akkor szebb / jobb megoldás is lehetne rá.

SZERK.:

Hopsz, a rátakarás a fix pozíció miatt és a top: 50%; miatt van. :-D
Nyilván az én monitoromon az inspector miatt volt túl alacsony a "képernyő", de ez így nem éppen reszponzív megoldás..
3

Negatív margó a megoldás!

Hymer · 2019. Ápr. 2. (K), 15.36
Köszönöm, Pepita! A negatív bal margó egy varázsütésre megoldotta!