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

Poszukiwanie opinii o mojej realizacji tasku

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
300 wizyt
pytanie zadane 29 marca w HTML i CSS przez LIIK0 Nowicjusz (120 p.)
Witam, niedawno przepracowałem zadanie domowe ze strony Pasja informatyki do odcinku "Float left vs. Display inline-block. Technik informatyk. Egzamin EE.09 / E.14". Zadanie polega na utworzeniu layoutu na podstawie schematu używając samych float: left. Zadanie ukończyłem i bardzo bym chciał usłyszeć opinię o sposobie realizowania zadania i użytych przez mnie metod i sposobów. Zastanawiam się czy wybrałem najlepsze możliwe opcje.
Link do GitHub : https://github.com/LIIK0/HomeWorkFloatLeft
Za oddany czas na podgląd i dyskusje bardzo dziękuje.

1 odpowiedź

+1 głos
odpowiedź 30 marca przez VBService Ekspert (256,320 p.)
edycja 30 marca przez VBService

Z treści zadania wynika, że ma to wyglądać mniej więcej tak

dalej dowiadujemy się, że

Uwaga: odstępy widoczne na schemacie są jedynie umowne (mają obrazować wzajemne położenie bloków) – w praktyce divy powinny być przyklejone do siebie bez żadnych odstępów.

czyli np. IMO coś w tym stylu (kolory dodane dla prezentacji)

a Twoja propozycja pokazuje mi się mniej więcej tak

bez urazy, więc popatrz na obrazki powyżej i sam sobie odpowiedz.

 

 

Moja interpretacja

<div class="container">
  <div class="box1"></div>

  <div class="box2 float-left"></div>
  <div class="box3 float-left"></div>

  <div class="box4 float-left">
    <div class="box4a float-left"></div>
    <div class="box4b float-left"></div>
    <div class="box4c float-left"></div>
  </div>
  <div class="box5 float-left"></div>

  <div class="box6 float-left"></div>
  <div class="box7 float-left"></div>
  <div class="box8 float-left"></div>

  <div class="box9 float-left"></div>
  <div class="box10 float-left"></div>
  <div class="float-clear"></div>
</div>
.container {
  width: 600px;
  height: auto;
  margin: 0 auto;
  border: 0;
}
.box1 {
  height: 70px;
}
.box2 {
  width: 400px;
  height: 70px;
}
.box3 {
  width: 200px;
  height: 70px;
}
.box4 {
  width: 400px;
  height: 170px;
}
.box4a,
.box4b {
  width: 50%;
  height: 100px;  
}
.box4c {
  width: 100%;
  height: 70px;
}
.box5 {
  width: 200px;
  height: 170px;
}
.box6,
.box7,
.box8 {
  width: 200px;
  height: 100px;  
}
.box9,
.box10 {
  width: 50%;
  height: 70px;
}
.float-left {
  float: left;
}
.float-clear {
  clear: both;
}



/* dla prezentacji */
.box1 {
  background-color: #FFC0CB;
}
.box2 {
  background-color: #9370DB;
}
.box3 {
  background-color: #6A5ACD;
}
.box4a {
  background-color: #66BDAA;
}
.box4b {
  background-color: #66DDAA;
}
.box4c {
  background-color: #66FDAA;
}
.box5 {
  background-color: #8BD513;
}
.box6 {
  background-color: #FFA500;
}
.box7 {
  background-color: #FFC500;
}
.box8 {
  background-color: #FFE500; 
}
.box9 {  
  background-color: #CD5C5C;
}
.box10 {  
  background-color: #CD7C5C;
}

.container {  
  padding: 4px;
  background-image: 
    linear-gradient(
      to bottom, 
      #FFC0CB, #9370DB, #66BDAA,
      #8BD513, #FFA500, #CD7C5C
    );
}
.container div {
  position: relative;
}
.container div:not(.float-clear)::before {
  content: attr(class);
  position: absolute;
  top: .25rem; left: .25rem;
  font: 300 .7rem/1 system-ui, monospace;
  padding: .25rem .4rem;
  background-color: rgba(0,0,0,.55);
  color: white;
  word-spacing: .25rem;
}

 

1
komentarz 30 marca przez LIIK0 Nowicjusz (120 p.)
Cześć, dzięki ci za twoją odpowiedz, zauważyłem że odstępy nie są wymagane, czyli sam sobie w sumie utrudniłem zadanie. Widzę że fajnie było by go ponownie zrobić. Widać że twoja realizacja jest uporządkowana i zawiera prostsze sposoby do zrealizowania zadania. Fajnie, że dzięki twojemu przykładu mam nad czym się zastanowić. Dziękuję ci bardzo!

Podobne pytania

0 głosów
2 odpowiedzi 424 wizyt
pytanie zadane 12 lutego 2023 w HTML i CSS przez koderro Nowicjusz (120 p.)
+1 głos
1 odpowiedź 185 wizyt
pytanie zadane 1 sierpnia 2022 w HTML i CSS przez Maverick700 Nowicjusz (160 p.)
+1 głos
2 odpowiedzi 401 wizyt
pytanie zadane 5 lipca 2021 w HTML i CSS przez Szyszka Gaduła (3,510 p.)

93,164 zapytań

142,176 odpowiedzi

321,929 komentarzy

62,491 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 688p. - dia-Chann
  2. 676p. - CC PL
  3. 675p. - Łukasz Piwowar
  4. 662p. - Łukasz Eckert
  5. 649p. - Michal Drewniak
  6. 641p. - rucin93
  7. 621p. - Dawid128
  8. 572p. - ssynowiec
  9. 457p. - Marcin Putra
  10. 432p. - rafalszastok
  11. 427p. - Adrian Wieprzkowicz
  12. 425p. - zmmz89
  13. 417p. - Mikbac
  14. 414p. - Piotr Aleksandrowicz
  15. 412p. - ksalekk
Szczegóły i pełne wyniki

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!

...