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

Menu lewe content i menu prawe

VPS Starter Arubacloud
0 głosów
310 wizyt
pytanie zadane 27 czerwca 2017 w HTML i CSS przez sonewbie Użytkownik (690 p.)

Hej,

Jakiego kodu trzeba użyć, aby były obok siebie 3 divy? Mój obecny sprawia, że na pierwszy rzut oka wszystko ok, ale gdy się doda dużo tekstu do contentu, i zjedzie się poniżej strony, to menu lewe przeskakuje na środek na górze i zanika po przescrolowaniu, a cały tekst przesuwa się w lewo, a menu prawe niby zostaje tam na miejscu ale widać, że coś z nim przeskoczyło.

 

z css:

.menulewo
{
    height: 350px;
    width: 190px;
    float: left;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 20px;
    margin-left: 10px;
}

.content
{
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding-top: 10px;
    min-height: 360px;
    float: left;
    font-size: 60px;
}

.menuprawo
{
    height: 350px;
    width: 160px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 40px;
    margin-right: 20px;
    float: right;
}

kolejny div stopka ma clear:both

 

Pomocy:)

4 odpowiedzi

0 głosów
odpowiedź 28 czerwca 2017 przez zgrybus Pasjonat (24,860 p.)
wybrane 3 lipca 2017 przez sonewbie
 
Najlepsza
Nie używaj float'a. Zmień kod i użyj flexboxa :)
0 głosów
odpowiedź 27 czerwca 2017 przez APNL Obywatel (1,440 p.)
W klasie .menuprawo daj float: left;
komentarz 27 czerwca 2017 przez sonewbie Użytkownik (690 p.)
nic to nie zmieniło niestety ;/
0 głosów
odpowiedź 27 czerwca 2017 przez sonewbie Użytkownik (690 p.)
a dobra, umknelo mi clear both po nawigacji, juz działa. sorki
0 głosów
odpowiedź 28 czerwca 2017 przez JayJay Mądrala (6,020 p.)

Dwie (chyba najpopularniejsze) metody układania elementów obok siebie to:
Float:left
Display:inline-block

Wykorzystanie obu metod polega na nadaniu każdemu elementowi, z tych które mają znaleźć się obok siebie, własności odpowiednio: "float:left" lub "display:inline-block".

Każda z metod ma jednak swoje wady (w skrócie):
Float-left wymaga wykorzystania dodatkowego div'a, któremu należy nadać właściwość "clear:both".
W przypadku display:inline-block należy poradzić sobie ze znakami białymi (aby między divami nie występowały przerwy).

Szczegółowe porównanie i więcej informacji: http://pasja-informatyki.pl/wp-content/uploads/2016/10/programowanie-webowe-odc-2.pdf

Inne stosunkowo nowe metody układania elementów obok siebie to:
Flexbox
Grid

Nie są to jednak metody konkurencyjne - mogą, a nawet powinny być używane razem.

Flexbox jest kompatybilny z większością przeglądarek internetowych.
Jego wykorzystanie opiera się głównie na nadaniu div'owi będącemu "pojemnikiem" dla innych div'ów właściwości "display:flex", potem zależnie od uznania i potrzeby ustawienia takich własności jak np.flex (dla elementów), flex-flow (dla pojemnika), ...

Grid natomiast jest kompatybilny z nowymi wersjami większości popularnych przeglądarek, ale nie jest kompatybilny z wieloma starszymi przeglądarkami, niektórymi mobilnymi itp. Budową lekko przypomina tabele - również występują wiersze i kolumny.

Więcej informacji:
https://developers.google.com/web/updates/2017/01/css-grid
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
https://www.w3.org/TR/css-grid-1/#intro
https://www.w3.org/TR/css-flexbox-1/#box-model

Podobne pytania

0 głosów
2 odpowiedzi 591 wizyt
pytanie zadane 14 stycznia 2021 w HTML i CSS przez Rever Początkujący (290 p.)
0 głosów
2 odpowiedzi 170 wizyt
pytanie zadane 14 marca 2017 w SQL, bazy danych przez seba Dyskutant (8,900 p.)
0 głosów
1 odpowiedź 195 wizyt
pytanie zadane 24 sierpnia 2018 w HTML i CSS przez schumix Początkujący (330 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!

...