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

Jak rozłożyć ten tekst

VPS Starter Arubacloud
0 głosów
260 wizyt
pytanie zadane 18 lipca 2019 w HTML i CSS przez Kubs Mądrala (5,190 p.)

Witajcie,

próbuje rozłożyć tekst w html w sposób pokazany poniżej. Jak tego dokonać i jak zrobić żeby rozkład tej strony automatycznie dostosowywał się do ekranu telefonu?

Początkujący jestem w temacie. 

Dziękuje.

2 odpowiedzi

0 głosów
odpowiedź 18 lipca 2019 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

Nie chce Ci podsyłać dokładnego rozwiązania. Jeśli chcesz dowiedzieć się jak tworzyć responsywne strony (takie pasujące pod telefon poczytaj o bootstrapie. Co do ustawienia tekstu możesz zastosować właściwość css margin

2
komentarz 18 lipca 2019 przez lapa19904 Stary wyjadacz (11,560 p.)
Nie pakowałbym kogoś bez znajomości podstaw w bootstrap-a. Bootstrap ułatwia i przyśpiesza mocno pracę ale nie polecałbym go komuś na początku drogi.

Tutaj lepiej to rozwiązać za pomocą  @media
komentarz 18 lipca 2019 przez Kubs Mądrala (5,190 p.)

@pawi125, Dziękuje, a mógłbyś wypunktować kilka rzeczy, które są ważne w utworzeniu takiego layout-u? 

0 głosów
odpowiedź 18 lipca 2019 przez lapa19904 Stary wyjadacz (11,560 p.)
Wrzuć kod który masz teraz napisany to powiem Ci jak to zapisać.
komentarz 18 lipca 2019 przez Kubs Mądrala (5,190 p.)
No własnie to początek. Nie wiem jak i z czym połączyć. Może daj kilka podpowiedzi, a ja spróbuje krok po kroku to wykonać.
2
komentarz 18 lipca 2019 przez lapa19904 Stary wyjadacz (11,560 p.)
W pliku html zapisz <p> i nadaj im class. Później w css ustaw:

.class{font-size: 14px;}

@media(min-width: 576px){

.class{font-size: 16px;}

}

@media(min-width: 768px){

.class{font-size: 18px;}

}

@media(min-width: 991px){

.class{font-size: 20px;}

}

@media (min-width: 1200px){

.class{font-size: 24px;}

}

To tylko przykładowe wartości, sam musisz do dopasować według swoich preferencji.
komentarz 18 lipca 2019 przez Kubs Mądrala (5,190 p.)
Super, zadziałam co pewnie zajmie trochę czasu  i ewentualnie dopytam Cię. Dziękuje.
komentarz 19 lipca 2019 przez Kubs Mądrala (5,190 p.)

@lapa19904, Pomału działam.  W między czasie dopytam jak zrobić żeby dopasowywał się ten layout do każdego ekranu telefonu?

komentarz 19 lipca 2019 przez lapa19904 Stary wyjadacz (11,560 p.)
Co konkretnie chcesz ustawić pisząc o dopasowaniu pod konkretny telefon? Jeśli marginesy lub pozycjonowanie to proponuję ustawić je procentowo. Możesz dodać @media poniżej 576px co 50-100px dopasowując się idealnie pod szerokości mobilne ale to jest zależne od konkretnego projektu i Ja raczej tego unikam.
komentarz 19 lipca 2019 przez Kubs Mądrala (5,190 p.)
edycja 19 lipca 2019 przez Kubs
Tak, mam na myśli marginesy i pozycjonowanie. Jeśli radzisz  procentowo to tego się będę trzymał. Mógłbyś proszę dać przyklad takiego ustawienia procentowo?

Przyznam Ci się, że mam kłopot jak nadać class znacznikowi  <p> i ddlaczego się to robi :(
komentarz 19 lipca 2019 przez Kubs Mądrala (5,190 p.)
czy to chodzi o cos takiego?

<p class="nazwaklasy"></p>

a potem w css

.nazwaklasy {..}

ale wciaz nie wiem po co sie to robi
1
komentarz 21 lipca 2019 przez lapa19904 Stary wyjadacz (11,560 p.)
Tak, klasy nadaję się w ten sposób. Dlaczego się tak robi?

Wyobraź sobie witrynę z kilkoma podstronami mającymi różne layouty lub nawet jedną witrynę gdzie <p> występuje kilkanaście razy i chcesz nadać im różne rozmiary czcionek, marginesy, czy kolory. Bez dodania klas zmieniasz margines dla <p> na dole strony i psuję Ci to wygląd pozostałych <p> na stronie. Miedzy innymi dla tego właśnie nie styluję się w css po tagach html.

Rozumiesz?

P.S. Wiadomo są wyjątki jak na przykład w nawigacji wordpress-a gdzie klasę możesz nadać dla containera nawigacji czy dla ul ale dla li czy linków wewnątrz już nie możesz, a robisz template z bootstrapem gdzie elementy są stylowane po tagach html z important!;

Są to tylko wyjątki i nie jest to częste.
komentarz 23 lipca 2019 przez Kubs Mądrala (5,190 p.)
Acha dobrze,

czyli w tym moim przypadku potrzebne będą trzy różne nazwy klas dla oddzielenia znaczników. I klasy idą do pliku html.

Sprobuje napisac to co omowilismy i dam Ci do oceny.

Głowie sie jeszcze nad zrozumieniem tego PS.  'template z bootstrap' , '..stylowane po tagach html important!' ..czarna magia na tą chwile :)

Podobne pytania

0 głosów
1 odpowiedź 228 wizyt
pytanie zadane 7 czerwca 2020 w HTML i CSS przez Layoutowiec Mądrala (5,470 p.)
0 głosów
1 odpowiedź 512 wizyt
0 głosów
3 odpowiedzi 286 wizyt

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!

...