Układ strony

pytanie zadane 13 maja 2019 w HTML i CSS przez Tomasstom Użytkownik (650 p.)
edycja 13 maja 2019 przez ScriptyChris

Witam.

Mam pytanie - jak wykonać taki układ ? Próbuje Divami, ale średnio mi to wychodzi :/

#container {
    width: 533px;
    height: 300px;
    border: 3px solid #070707;
    align-content: center;
    padding: 22px;
    float:left;
border-top-left-radius: 1em;
border-top-right-radius: 2em;
border-bottom-right-radius: 1.5em;
border-bottom-left-radius: .75em;
  }
#Imie {
    width: 444px;
    height: 22px;
    border: 3px dashed #0a0808;
    align-content: center;
    padding: 22px;
}
#left{
    width: 244px;
    height: 32px;
    border: 3px dashed #0a0808;
    align-content: right;
    padding: 22px;
    float:right;
    
}

<!DOCTYPE html>

<html>

<head>

<title>Model pudełkowy CSS</title>

<meta charset="utf-8">

<link rel="stylesheet" href="style.css">




<body>



<div id="container">

Ledwieś piosnkę zaczęła, jużem łzy uronił,

Twój głos wnikał do serca i za duszę chwytał;

Zdało się, że ją anioł po imieniu witał

I w zegar niebios chwilę zbawienia zadzwonił.

O luba! niech twe oczy przyznać się nie boją,

Jeśli cię mym spojrzeniem, jeśli głosem wzruszę;

Nie dbam, że los i ludzie przeciwko nam stoją,

Niech ślub ziemski innego darzy ręką twoją,

Tylko wyznaj, że Bóg mi poślubił twą duszę.

<br></br>

<br></br>

<br></br>

<div id="Imie">

Konrad </div>




<div style="clear:both;"></div>

<div id="left">

Konrad </div>

</div>




</body>

</html>

3 odpowiedzi

odpowiedź 13 maja 2019 przez mb-dir Mądrala (6,710 p.)

Witaj

Polecam Ci spróbowanie użycia flex'a, jeżeli nie wiesz o czym mówię to zajrzyj w linki na dole, na pewno pomogą, a jako podsumowujący projekt możesz wykonać właśnie twój układ.

https://www.youtube.com/watch?v=yFHgP0MF3V4&t=1668s

https://developer.mozilla.org/pl/docs/Learn/CSS/CSS_layout/Flexbox

https://developer.mozilla.org/pl/docs/Web/CSS/CSS_Flexible_Box_Layout

https://www.youtube.com/watch?v=0vATUHnsq8g

https://flexboxfroggy.com/#pl

Jeżeli to za mało to polecam w yt wpisać css3 flexbox

odpowiedź 14 maja 2019 przez cz3ran Stary wyjadacz (13,380 p.)

odpowiedź 14 maja 2019 przez Pasja Grafiki Nowicjusz (140 p.)

Cześć

polecam jednak użyć znaczników div.

- zmień width w "container" jest 533 a suma "imię i left" to już 688 a do tego dochodzi jeszcze padding 22.

- następnie container nie powinien zawierać border, ponieważ to jest niewidoczny pojemnik w którym powinny się znaleźć div "imię i left" w których to powinieneś użyć border oraz border-radius.

pamiętaj też że div do którego ma być przyklejony obiekt powinien zawierać wpis float: left; a pozostałe które już nie powinny się kleić, albo dodajemy clear: both; albo jak zrobiłeś <div style="clear:both;"></div>.

komentarz 14 maja 2019 przez mb-dir Mądrala (6,710 p.)

Fakt to zadziała ale jest mega nieefektywne, przy użyciu tej metody tworzymy jakieś niepotrzebnie puste divy które są tylko clearem, ponadto tworzenie stron responsywnych jest bardzo utrudnione, więc lepszą opcją jest użycie nowszych rozwiązań takich jak flex czy grid

komentarz 14 maja 2019 przez Pasja Grafiki Nowicjusz (140 p.)

nie twierdzę że są złe absolutnie, po prostu uważam że divy odpowiednio zrozumiane nadają się do wszystkiego.

pozdrawiam i dziękuję

komentarz 14 maja 2019 przez lateM Pasjonat (17,660 p.)

nie twierdzę że są złe absolutnie, po prostu uważam że divy odpowiednio zrozumiane nadają się do wszystkiego.

...na przykład do ostylowania ich regułami CSS przeznaczonymi do tworzenia tego typu układów jak grid i flex, które wymienili przedmówcy? Doradzasz stosowanie przestarzałych praktyk, które są strasznie problematyczne. Inna sprawa - nie wiemy co mieści się w elementach na obrazku - może 'div' nie będzie tutaj najlepszym rozwiązaniem, a lepiej spiszą się tagi HTML5.