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:
.sub_nav li {
    cursor: pointer;
}
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:
#sub_nav ul li a {
    margin-left: -40px;
    padding-left: 40px;
}
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!