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

Zakładka od lewej krawędzi

VPS Starter Arubacloud
0 głosów
122 wizyt
pytanie zadane 18 września 2018 w HTML i CSS przez Meffy Użytkownik (730 p.)
Witam,

Mam taki problem, że totalnie nie mam pojęcia jak przesunąć zakładkę żeby zaczynała się od lewej krawędzi a nie od napisu.

http://meffy2.cba.pl/# Tutaj strona na której można to zobaczyć jak to wygląda.

Chciałbym żeby przesuwając myszką na zakładke Games, ona się rozsuwała od lewej krawedzi a nie tak jak juz pisałem od napisu.

2 odpowiedzi

+1 głos
odpowiedź 18 września 2018 przez arces Pasjonat (17,700 p.)
Elementy masz źle poukładane w menu (przynajmniej moim zdaniem). Znacznik <li> zaczyna Ci się w tym miejscu i dlatego również dropdown menu pojawia się w ten sposób.

Jeżeli chcesz zachować obecną strukturę, to ewentualnie możesz zmienić właściwość "left" na ujemną (z tego co zauważyłem na -20px).
komentarz 18 września 2018 przez Meffy Użytkownik (730 p.)
A w jaki sposób według ciebie powinny być ułożone elementy li, żeby było porpawnie?

Z tym -20px to działa, dzięki :). I czy stosowanie - wartości jest poprawne?
komentarz 18 września 2018 przez arces Pasjonat (17,700 p.)
Po pierwsze to w elemencie <li> z dropdownem masz pusty link (bez żadnego contentu), a później robisz kolejny link już prawidłowy z napisem "Games". Po co dwa linki?

Druga sprawa, to robisz paddingi pomiędzy <li> przez co też powstają przerwy i przesunięcie linków. Ja bym to zrobił w nieco inny sposób (dać na linki margines po prostu, zamiast tego paddinga przy <li>).

Trzecia sprawa przerwy mogą (i tak prawdopodobnie jest) są nieco większe niż deklarujesz przez zastosowanie inline-block na elementach <li>.

Czwarta sprawa (to już pewnie kwestia indywidualna), nie robiłbym tych kresek pionowych borderem, a po prostu pseudoelementami :after, :before.

 

Tak na szybko, to u mnie by było coś takiego:
https://codepen.io/arces92/pen/xaQGmE

 

P.S.
Nie spotkałem się z tym, żeby ujemne wartości były czymś niepoprawnym. Po prostu przy responsywności strony wtedy trzeba zwracać na to większą uwagę, żeby czasami to nie rozjechało strony.
komentarz 18 września 2018 przez Meffy Użytkownik (730 p.)
Spoko, spoko dzięki za te wszystkie podpowiedzi, jestem dopiero początkującym więc ucze sie na swoich błedach, i nastepnym razem zastosuję inne rzeczy i zmiennie trochę :)
komentarz 18 września 2018 przez arces Pasjonat (17,700 p.)
Wiadomo, każdy kiedyś zaczynał. Powodzenia :)
0 głosów
odpowiedź 19 września 2018 przez matir85 Bywalec (2,410 p.)
Pudding i margin ustawiaj na elementach <a> a nie na <li>

Podobne pytania

0 głosów
0 odpowiedzi 208 wizyt
0 głosów
0 odpowiedzi 195 wizyt
pytanie zadane 18 listopada 2016 w HTML i CSS przez Chisorq Obywatel (1,680 p.)
0 głosów
2 odpowiedzi 315 wizyt
pytanie zadane 20 września 2016 w HTML i CSS przez BlvckFox Gaduła (4,240 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 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!

...