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

Jak zakodowac taki layout?

VPS Starter Arubacloud
0 głosów
509 wizyt
pytanie zadane 27 stycznia 2019 w HTML i CSS przez maarittka Nowicjusz (120 p.)
otwarte ponownie 29 stycznia 2019 przez maarittka

Cześć.

 Chcę zakodować taką oto stronkę:

 

Tylko mam problem z layoutem. Na przyklad ta sekcja z naglowkiem "What is Yoga?" nie jest w jakims tam wysrodkowanym kontenerze jak zazwyczaj tylko wychodzi poza i jest przyklejona do prawej krawędzi. Podobnie jest z pozostalymi obrazkami.

Znalazłam taka podpowiedź: https://codepen.io/kupas/pen/Yepadv , ale ten rozowy div powinien byc troche szerszy i nadal zaczynac sie w tym samym miejscu gdzie ten kontener wyzej. No i oczywiście  strona ma być responsywna.

Ma ktos jakiś pomysl? Albo moze widzial stronke z takim layoutem i moglby podeslac link? A wtedy to ja juz sobie poradze. 

Z góry dziękuję za pomoc. 

 

PS Jakby ktos nie wiedzial a chcialby wiedziec to layout do zakodowania pochodzi z grupy na fb: https://www.facebook.com/groups/940002776068923/

2 odpowiedzi

+1 głos
odpowiedź 28 stycznia 2019 przez ArkTop Początkujący (290 p.)

Jest to klasyczny podział dobrze znany w bootstrapie
zobacz dla przykładu to:

https://colorlib.com/preview/#yoga

zobacz źródło. Ewenutalnie doprecyzuj pytanie.
1) Masz container z tłem zawartym w css i paddingi, w nim masz położony div menu (100% szerokości) oraz (o ile zrozumiesz słownictwo bootstrapa) col-lg-6 (czyli 50%) col-sm-12 (jak będzie w rozmiarze sm to zmieni szerokość na 100%), w ten sposób zrobisz responsywnie zmianę na małym ekranie 100% szerokości, ewentualnie @media jak nie bootstrap. Tekst wyśrodkowany w pionie w lewym div

2) 100% szerokości po zakończeniu całej sekcji 1.
3)  row 100% z float right, w nim col-6 i col-4, (zostanie wolne wielkości col-2) (na 100% składa się 12)
4) to samo co wyżej tylko float left i najpierw col-4 na obrazek pozniej col-6 na tekst.

dane wzięte mniej więcej na oko, ale masz tu jako obrazek z podziałem, może Ci coś rozjaśni

komentarz 28 stycznia 2019 przez maarittka Nowicjusz (120 p.)
Nie mialabym problemu z napisaniem tej stronki do ktorej zapodales link i to bez uzycia bootstrapa, bo jak na moje to tam wszystko wyglada normalnie. :D Bootstrapa nawet nie znam, jeszcze nie zaczelam sie go uczyc, bo jak widac nie ogarniam podstaw html i css. :o

A ta stronka, ktora chce zrobic ma niektore sekcje albo do prawej krawedzi przyklejone albo do lewej, ale zaczynaja sie rowniutko z tym kontenerem w headerze (albo koncza jak w przypadku tej drugiej "Who can practice?") .

Problem w tym, ze nawet jak tylko cwicze sobie na tym codepenie to jak chce zeby ten rozowy div mial powiedzmy 60% szerokosci tego kontenera wyzej i zaczynal sie w tym samym miejscu równo z tym kontenerem to to sie rozjezdza jak sie zmniejszy/zwiekszy okno przegladarki, az mnie serce boli jak na to patrze. :( Nie mam juz pomyslu jak to zrobić flexem, floaty tez by mogly byc, na pewno sie da tylko nie wiem jaaaak.
0 głosów
odpowiedź 27 stycznia 2019 przez Tomek Sochacki Ekspert (227,510 p.)
Tutaj nie ma za bardzo nic udziwnionego, myślę, że 100% Twoich problemów rozwiąże hasło "flex css". W grida bym się tu nie pchał bo chyba nie ma jeszcze super wsparcia, a nie widzę tu nic, co faktycznie dawałoby przewagę grida nad flexem.

Najlepiej zacznij kodować i w razie czego przyjdź z konkretnymi pytaniami, bo teraz to pytasz w sumie o co:) ?
komentarz 27 stycznia 2019 przez maarittka Nowicjusz (120 p.)
No ja tez tak myslalam, ze mi flex zalatwi sprawe, ale flex mi wczoraj zlamal serce...

Widzialam na grupie na fb byly 2 rozwiazania to sobie podejrzalam, ale u nich nie wyglada to tak jak powinno.

Bawilam sie troche tym kodem na codepen, chcialabym na przyklad by ten rozowy div byl ustawiony na 60% szerokosci tego kontenera wyzej i zaczynal sie w tym samym miejscu no i nie mam juz pomyslu, bo jak powiekszam okno przegladarki albo zmniejszam to ten rozowy nie zaczyna sie tam gdzie jego miejsce.

Podobne pytania

0 głosów
1 odpowiedź 312 wizyt
pytanie zadane 15 kwietnia 2017 w HTML i CSS przez KrisPOD Nowicjusz (120 p.)
0 głosów
1 odpowiedź 587 wizyt
pytanie zadane 7 października 2016 w Rozwój zawodowy, nauka, praca przez Vromix Początkujący (410 p.)
0 głosów
1 odpowiedź 119 wizyt
pytanie zadane 31 sierpnia 2020 w HTML i CSS przez rob Bywalec (2,440 p.)

92,454 zapytań

141,262 odpowiedzi

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

...