• 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

Object Storage Arubacloud
0 głosów
85 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 (252,520 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 284 wizyt
pytanie zadane 12 lutego 2023 w HTML i CSS przez koderro Nowicjusz (120 p.)
+1 głos
1 odpowiedź 152 wizyt
pytanie zadane 1 sierpnia 2022 w HTML i CSS przez Maverick700 Nowicjusz (160 p.)
+1 głos
2 odpowiedzi 246 wizyt
pytanie zadane 5 lipca 2021 w HTML i CSS przez Szyszka Gaduła (3,490 p.)

92,525 zapytań

141,357 odpowiedzi

319,384 komentarzy

61,914 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!

...