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

Przesunięta różowa warstwa

VPS Starter Arubacloud
0 głosów
214 wizyt
pytanie zadane 9 września 2021 w HTML i CSS przez Bzytek Użytkownik (810 p.)
edycja 9 września 2021 przez Bzytek

Dzień dobry,

Dla lepszego podglądu problemu umieściłem  wszystko pod  tym linkiem.

Problem polega na różowym divie z buttonem. W mojej koncepcji różowy powinien mieścić się w represywnej szarej warstwie, a jest poniżej warstwy z żółtymi /mobilka/ poglądowymi prostokątami. Ich wielkość jest tutaj testowa.  Ułożenie obrazków w widoku desktop i mobile mam opanowane, pozostaje położenie tego różowego div.

Może wie ktoś jak to rozkimać ? Czy może ktoś mi wskazać dobre rozwiązanie?

 

komentarz 9 września 2021 przez Wiciorny Ekspert (269,120 p.)
na forum masz odpowiednie bloczki kodu, tutaj wrzuć kod.

1 odpowiedź

0 głosów
odpowiedź 9 września 2021 przez pablop76 VIP (123,060 p.)
edycja 9 września 2021 przez pablop76
#topsection {
  background: lightblue;
  content: '';
  display: block;
  height: 55px;
  margin-top: 0px;
  text-align: center;
  width: 100%;
  padding: 0;
  float: left;
  clear: both;
}

Widać tu kilka problemów.

Własność content określa, co jest wyświetlane wewnątrz pseudoelementów  :before i :after. Więc w tym przypadku nie ma zastosowania.

clear: both; powinien być elementem bezpośrednio występującym po float: left; Istnieje technika czyszczenia floata zwana clearfix

#container4 {
  text-align: center;
  display: none;
  width: 100%;
  height: 52px;
  float: left;
  z-index: 100;
  background: #ddd;
}

z-index: 100; nie działa na elementy z pozycją statyczną

Zapoznaj się z flexbox  i przepisz te style. Będzie dużo czytelniej.

<div id="container4">
    <div class="menusquare">Mobilka Lewa 22 PL</div>
    <div class="menusquare">pusty-L</div>
    <button id="toggle" class="menusquare">Swith 2 lang.</button>
    <div class="menusquare">pusty-P</div>
    <div class="menusquare">Mobilka Prawa 22 PL</div>
</div>
#container4 {
  background: #ddd;
  display: flex;
  justify-content: center;
}



.menusquare {
  margin: 1px;
  width: 17%;
  text-align: center;
  border: 1px solid gray;
  background: yellow;
  display: flex;
  align-items: center;
  justify-content: center;
}

button.menusquare {
  background: pink;
}

Wydaje się, że to button powoduje psucie układu. Dodatkowo ograniczenie wysokości kontenera wypycha go na zewnątrz.

komentarz 10 września 2021 przez Bzytek Użytkownik (810 p.)
edycja 10 września 2021 przez Bzytek

Dzięki Pablop76 za rozwiązanie. Na teraz jeszcze go nie próbowałem, ale wymodziłem coś taką górną belkę Bordery i kolory div są oczywiście tylko przykładowe.

Co  o tym sądzisz?

 

 

 

komentarz 10 września 2021 przez pablop76 VIP (123,060 p.)
edycja 10 września 2021 przez pablop76
.contai3 {
  display: flex;
  margin: -8px 0 5px;
  background-color: red;
}

display: flex; nic tu nie wnosi.

.orange-column {
  background-color: orange;
  height: 118px;
  position: fixed;
  right: 90px;
}

position: fixed; w tym przypadku popsuje Ci humor jak dodasz więcej treści i pojawi się pasek przewijania :)

Dalej korzystasz z float 

Czy robienie dwóch niezależnych widoków desktop/mobile jest konieczne?

komentarz 10 września 2021 przez Bzytek Użytkownik (810 p.)
edycja 10 września 2021 przez Bzytek

Jak pewnie zauważyłeś jest to jeden plik przystosowany do dwóch rodzajów wyświetleń: desktop i mobile. Nie potrzeba moim zdaniem zbędnie rozbudowywać kodu, wystarczy sam css. W orange-column nic się nie znajdzie poza tym obrazkiem nhc3-logo.

Z tym contai3  - flex masz rację, niemniej to tylko studium do oceny.

Sprawdzenie całej strony, nie tylko tego przykładu, w lighthouse  i gtmetrix daje mi wartość 90 -93 i pagespeed też. W tym studium próbuję tylko deczko uprościć kod, którego teraz używam.

Podobne pytania

0 głosów
1 odpowiedź 134 wizyt
0 głosów
1 odpowiedź 65 wizyt
pytanie zadane 17 stycznia w HTML i CSS przez new_user Użytkownik (610 p.)
0 głosów
2 odpowiedzi 315 wizyt

92,453 zapytań

141,262 odpowiedzi

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

...