Forum PHP.pl

Witam,
można powiedzieć, że zaczynam przygodę z tworzeniem stronek. W związku z tym chciałem zrealizować kilka projektów - przerabiając gotowe projekty graficzne na działające strony.
No i natknąłem się na problem ... chciałbym się doradzić jak poprawnie powinno wyglądać nakładanie się div na div oraz ich pozycjonowanie ... mając na przykładzie:



Chodzi mi o poprawne ułożenie ... mamy div z tłem na całą szerokość strony. W nim dwa - lewy z tekstem i prawy ze zdjęciem telefonu (CSS'a tu na razie pomijam - chodzi o czysto teoretyczne założenie).

[HTML] pobierz, plaintext 
  <div class="tlo">
    <div class="left-text"></div>
    <div class="right-phone"></div>
  </div>
[HTML] pobierz, plaintext 

Jak wypozycjonować te kontenery, aby ".left-text" był w połowie tła, a ".right-phone" wychodził poza tło w pionie ?
Plus zważywszy na to, że kolejna sekcja z tekstem "Start something new" się już zaczyna pod spodem, a obrazek telefonu nachodzi na nią obniżając tekst w kolumnie prawej ...

wiadomo, że można zrobić margines górny lub odsunięcie od górnej krawędzi dla ".left-text", np: "left:5%; top:10%" itd, ale czy to jest poprawne rozwiązanie ? przy skalowaniu okna myślę, że będzie się rozjeżdżać

Pozdrawiam i z góry dzięki za porady i wyjaśnienie

https://www.w3.org/Style/Examples/007/center.pl.html

dzięki za to info

chociaż bardziej zależało mi na sugestiach z "doświadczenia", czy np. poprawne wypozycjonowanie diva robić metodą "margin-top" "margin-right" i wtedy jak nachodzi jeden na drugi to "z-index" czy jednak bardziej poprawne by było "position:relative" nadrzędnego i względem niego ustawiać divy "position:absolute", czy jakoś float itd ...

no, ale spoko
dzięki

Ja bym dał obrazek jako ::before i lekko margines od góry.

W sumie za mało wiadomo o stronie, aby ci dać ostateczną odpowiedź. Można zastosować position: absolute albo css :before, ale brakuje wiedzy o tym, czy strona ma mieć stałą szerokość, czy mam mieć rwd. Jak ma się zmieniać na różnych ekranach. Z powodu wstawania tego smartfonu dochodzi problem odsunięcia kolumny tekstu w dół od smartfonem. Jest to dosyć nieczyste lekko hackerskie. 99% stron ma tam równo.

Najszybciej byśmy ci pomogli, gdybyś to wrzucił do codepen i można by wtedy kombinować metodą prób i błędów. Zrób najpierw stronę bez smartfonu, z ostatecznym rwd, a potem dodaj smartfon lub z niego zrezygnuj.

spoko, dzięki za zainteresowanie
tzn ogarnąłem to ułożenie procentowo odsuwając div'y - metodą prób i błędów dopasowałem tak jak chciałem także spoko ...

chodziło mi np o komentarz "nie, procentowo tego lepiej nie rób bo się porozjeżdża, bo to i to ... są lepsze sposoby ... tak się tego nie robi ... Lepiej zrobić to tak i tak" itd ...

no i zaintrygował mnie sposób z użyciem ::before, który zaproponował "viking". Muszę rozszerzyć ten temat jak do tego zastosować "pseudo-emelementy" ...

dzięki bardzo