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

question-closed Jak zrobić border dostosywujący sie do contentu diva bez psucia reponsywnosci strony?

Object Storage Arubacloud
+1 głos
177 wizyt
pytanie zadane 24 listopada 2020 w HTML i CSS przez Igorek Mądrala (6,290 p.)
zamknięte 25 listopada 2020 przez Igorek

Jak zrobić border dostosywujący sie do contentu diva bez psucia reponsywnosci strony?

Chodzi o to że jakby div ma swój własny "padding" mimo jego wyzerowania w css

Zawsze z tym problem radziłem sobie dodając 

display: inline-block;

ale teraz to nie działa (a jak działa to psuje sie cały układ strony) bo używam bootstrapa

Istnieje inny sposób ja dostosowanie bordera do contentu?

pomocy

 

 

https://codepen.io/igor-zbala/pen/gOwYgpp

tu jest na code pen

TyLkO tam jest php wiec codePen to zle wyswietla ale jest tam cały kod :D

komentarz zamknięcia: Już pewien pan napisał odpowiedz
komentarz 24 listopada 2020 przez ScriptyChris Mędrzec (190,190 p.)

(pls wbij bo na bank wiesz)

Proszę zapoznaj się z regulaminem forum. Pytanie powinno możliwie zwięźle i szczegółowo opisywać problem, aby ułatwić znalezienie jego przyczyny i udzielić ewentualnej pomocy. Dopisek w tytule w powyższym stylu jest niepotrzebny - może nawet zniechęcić potencjalnych chętnych do pomocy.

Podaj proszę więcej kodu (a najlepiej udostępnij testowalne demo np. na CodePen lub JSFiddle), ponieważ powyższy opis zbyt ogólnie opisuje problem.

komentarz 24 listopada 2020 przez Igorek Mądrala (6,290 p.)
https://codepen.io/igor-zbala/pen/gOwYgpp

tu jest na code pen

TyLkO tam jest php wiec codePen to zle wyswietla ale jest tam cały kod :D
komentarz 24 listopada 2020 przez Igorek Mądrala (6,290 p.)
i chodzi mi o to że jak jest np link

Zaloguj się

to ja moge kursorem najechać normalnie 200px obok - i to mi załapie że na to wjechałem - a ja bym chciał żeby "zalapywało" gdy w jade ten tekst

1 odpowiedź

+1 głos
odpowiedź 25 listopada 2020 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 25 listopada 2020 przez Igorek
 
Najlepsza

Linki "Zaloguj się" i "Zarejestruj się", za sprawą Bootstrap'owej klasy col-sm-6, mają po połowie szerokości rodzica, przez to najechanie na nie aktywuje :hover dla całego elementu, a nie tylko przestrzeni, gdzie jest tekst. Możesz umieścić te linki w span'ach i przenieść klasę log (ona obsługuje :hover) na linki.

<span class="col-sm-6">
  <a class="log" href="zaloguj">Zaloguj się</a>
</span>

<span class="col-sm-6">
  <a class="log" href="rejestracja">Zarejestruj się</a>
</span>

 

komentarz 25 listopada 2020 przez Igorek Mądrala (6,290 p.)

nom niby działa ale sie psuje xD: 

komentarz 25 listopada 2020 przez ScriptyChris Mędrzec (190,190 p.)
Porównaj sobie swój obecny kod z tym: https://codepen.io/ScriptyChris/pen/YzGKvgB
komentarz 25 listopada 2020 przez Igorek Mądrala (6,290 p.)
nw co wcześniej zrobilem źle ale już działa , dzk

Ale jak przy linkach działa to jak zrobić przy tym motto  i niceowe rzeczy? też je zamknąć w spanach?
komentarz 25 listopada 2020 przez ScriptyChris Mędrzec (190,190 p.)

Tam jest analogiczny problem: element jest ostylowany tak, że zajmuje 100% szerokości parenta, więc :hover łapie cały element. Więc tak, zamknięcie tego elementu w <span> (lub np. <p> - zależy jaki chcesz mieć layout menu) sprawi, że to on będzie miał 100% szerokości, a link w środku będzie szeroki na tyle na ile jego zawartość (dopóki będzie elementem liniowym).


Polecam używać inspektora elementów (w Twoim przypadku do przeglądania styli), bo to bardzo ułatwia pracę w trakcie tworzenia strony i szukania ewentualnych problemów: https://developers.google.com/web/tools/chrome-devtools/css

2
komentarz 25 listopada 2020 przez Igorek Mądrala (6,290 p.)
Dobra dzięki, przynajmniej już rozumiem i będę umiał w przyszłości rozwiązać ten problem

Podobne pytania

0 głosów
0 odpowiedzi 46 wizyt
pytanie zadane 7 lutego w HTML i CSS przez Piotrek2713 Mądrala (5,500 p.)
0 głosów
2 odpowiedzi 199 wizyt
0 głosów
1 odpowiedź 76 wizyt
pytanie zadane 7 stycznia 2019 w HTML i CSS przez MoGro Nowicjusz (120 p.)

92,660 zapytań

141,553 odpowiedzi

319,993 komentarzy

62,028 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...