[maxwol]

Mireczki pomóżcie proszę. Zaczynam się bawić w CSS i ogarniam podstawy, ale mam problemy z pozycjami:absolute, relative, fixed itp.

Jakie pozycje najlepiej dać do podanych elementów by wyglądało tak jak na obrazku? (A,B,C,D)

#naukaprogramowania

[n0xx]

@maxwol: relative na float

[latarnia_jastarnia]

@maxwol: A zwykły div z width=100%, B tak samo, C z szerokość 75%, D z 25%.

A na serio poczytaj o flex layout: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ rozwiąże Ci 200% problemów związanych z layoutem.

[maxwol]

@n0xx: @latarnia_jastarnia: @PorryHatter: Dzięki!

[h.....j]

@maxwol: właściwie, to możesz to zrobić bez ustalania pozycji, ani flexów, ani niczego takiego. (aczkolwiek css-grid jest dobrą opcją do ogarnięcia). z natury jest elementem blokowym, więc zajmuje 100% swojego elementu "macierzystego" i tyle wysokości, ile w sobie ma. Ale jak ustawisz mu display "inline-block", to będzie już zajmował tyle pozycji, ile mu zadasz (bądź ile ma wewnątrz).

Może być to np coś takiego:
A-Baner
B-Menu

D galeria

Ale polecam obczaić

[maxwol]

@hasztag_andrzej: dzieki:)

[h.....j]

@maxwol: Jeszcze PS bo nie mogłem edytować: Przy używaniu floatów nie będzie ci brał pod uwagę interpreter tych kontenerów do wysokości strony. To bywa irytujące. A position relative i absolute używa się raczej, jak chcesz w niestandardowym miejscu (ponad wszystkimi elementami) ustawić jakiś obiekt wewnątrz kontenera. Wtedy kontener ma position: relative, a element, który chcesz ustawić position: absolute. I wtedy możesz sobie ustawiać pozycję dowolnie wzgledem kontenera z position relative

[maxwol]

@hasztag_andrzej: Super dzieki - przydadzą się porady:)

[rhaya]

@hasztag_andrzej: jestem w szoku jak mu wytłumaczyłeś, takich ludzi jak ty to ze świecą tutaj szukać :D

[h.....j]

@rhaya: Pamiętam jak się męczyłem z tym kiedyś, a teraz to wszystko takie oczywiste się wydaje :P

[rhaya]

@hasztag_andrzej: ale rzeczywiście z inline block trzeba kombinować xd

[h.....j]

@rhaya: no nie wiem, ja tak własnie ustawiłem i mi działa normalnie :P Dlatego ogólnie polecam najbardziej css-grid. Najwygodniejsze rozwiązanie

[Viters]

@maxwol: css grid

[rhaya]

@hasztag_andrzej: pokaż kod, sam się uczę i zrobiłem w inlineblock i się nie mieści :D

[h.....j]

@rhaya: Nie no teraz na jsfiddle faktycznie widze, że całe 25% nie wchodzi. jak dasz np 24% to już git. I nie mam pojęcia dlaczego ( ͡° ͜ʖ ͡°) Tym bardziej że na bardzo podobnym kodzie u mnie na stronie jest git, może jakieś dodatkowe parametry html czy head robią tutaj coś

[rhaya]

@hasztag_andrzej: no PorryHatter napisał dlaczego i dopiero jak przeczytałem jego wpis, to mi się przypomniało, że też kiedyś miałem z tym problem xd przez biały znak z html