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

Wychodzenie paddingu poza stronę

Aruba Cloud - Virtual Private Server VPS
0 głosów
841 wizyt
pytanie zadane 8 sierpnia 2017 w HTML i CSS przez m_rij_v Użytkownik (660 p.)
https://jsfiddle.net/mw5k9eu6/

Chcę do div clasy tech-container dodać padding-left i -right:10%; wtedy width nie jest na 100% przeglądarki, tylko wyjeżdża mi ponad to. Jak osiągnąć efekt wycentrowania tych małych divów ze zdjęciami w div tech-container tak, aby wszystko było w obrębie width:100% przeglądarki ? Efekt ma być taki, ze te małe divy są pod sobą najpierw 5 i 4 pod nimi.

To moje pierwsze kroki z css i html więc mega proszę o pomoc ;>! Z góry wielkie dzieki za pomoc !

2 odpowiedzi

+1 głos
odpowiedź 8 sierpnia 2017 przez cz3ran Stary wyjadacz (13,380 p.)
https://jsfiddle.net/mw5k9eu6/2/

To tak:

1. Po zaczytaniu css związanych z bootstrapem już było lepiej

2. Nie zapominaj o .row - jeżeli chcesz mieć w pierwszym wierszu 5 elementów, a w drugim 4, stwórz sobie dwa divy z klasą .row i dodaj odpowiednio 5 i 4 elementy do nich

3. Użyłem offsetu żeby stworzyć pustą przestrzeń po lewej stronie (zwróć uwagę na .col-md-offset-2 oraz .col-md-offset-1), w pierwszym divie .row użyłem offset-1, ponieważ jest 5 elementów, każedmu dałem rozmiar 2 'komórek' (.col-md-2), max w bootstrapie to jest 12, zatem jeżeli jest 5 obrazków i każdy z nich używa 2 'komórek', zostają nam jeszcze 2 komórki, .col-md-offset-1 spowodował przesunięcie wszystkich elementów o jedną komórkę w prawo, czyli mamy 1 'komórkę' pustą, 10 zajętych i znowu 1 pustą

4. Mam nadzieję że zdajesz sobie sprawę, że jeżeli postanowisz odtworzyć to na mniejszym ekranie, to nie będziesz miał 5 i 4 - użyłeś col-md więc zgodnie z dokumentacją bootstrapa (http://getbootstrap.com/css/#grid) taki układ zachowasz do szerokości ekranu nie mniejszej niż 970px.

 

W razie pytań lub niejasności dawaj znać - postaram się pomóc.

Pozdrawiam
komentarz 9 sierpnia 2017 przez m_rij_v Użytkownik (660 p.)
http://code-way.azurewebsites.net/

Hej, zrobiłam to tak. Dlaczego strona mi się rozjeżdża nadal? Gdy daję margin to strona wychodzi poza 100% width , a nie powinno być żadnej zmiany, gdy ustawiam margin.
komentarz 9 sierpnia 2017 przez m_rij_v Użytkownik (660 p.)
W .row marginy jak usunę to to działa, ale no kurde nie powinno tak być że marginy rozwalają mi stronę na szerokość.
0 głosów
odpowiedź 8 sierpnia 2017 przez xmentor Nałogowiec (49,520 p.)
edycja 8 sierpnia 2017 przez xmentor

Chcę do div clasy tech-container dodać padding-left i -right:10%; wtedy width nie jest na 100% przeglądarki, tylko wyjeżdża mi ponad to

https://css-tricks.com/almanac/properties/b/box-sizing/

position:center;

https://css-tricks.com/almanac/properties/p/position/

To moje pierwsze kroki z css i html

Jeśli to są twoje pierwsze kroki, to moim zdaniem powinieneś wyrzucić bootstrapa.

Podobne pytania

+1 głos
1 odpowiedź 919 wizyt
pytanie zadane 21 lipca 2021 w HTML i CSS przez Doge Gaduła (3,420 p.)
+1 głos
2 odpowiedzi 443 wizyt
pytanie zadane 5 lipca 2021 w HTML i CSS przez Szyszka Gaduła (3,510 p.)
0 głosów
1 odpowiedź 286 wizyt
pytanie zadane 8 kwietnia 2021 w HTML i CSS przez Nearr Obywatel (1,890 p.)

93,335 zapytań

142,331 odpowiedzi

322,415 komentarzy

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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...