Czy kolejność w HTML jest ważna?

pytanie zadane 19 lutego 2019 w HTML i CSS przez haskii Nowicjusz (170 p.)

Witam serdecznie, może moje pytanie będzie brzmiało trochę idiotycznie, ale wolę zapytać i wiedzieć na przyszłość :)

Wczoraj zacząłem naukę HTML'a, obecnie jestem w tym miejscu z materiałem - Kurs HTML odc.2: Budowanie struktury strony www.

Wszystko robiłem tak jak na filmiku strona wyszła identycznie (chodzi o tabele, robione na divach), później postanowiłem sam zrobić taką stronkę i tak jak był żart w filmie, że wszystko się posypało i skleiło z sobą tak stało się u mnie, tylko, że ja nie zapomniałem o komendach float: left; i clear:both; i tutaj pytanie, dlaczego tak się stało?

Czy treść kodu musi być identyczna jak na filmie? Czy mogę, np. na początku dać padding;15px; później width, a na końcu np background color, color itd? Bo zupełnie pomieszałem kolejność jak sam robiłem, ale było identycznie jeżeli chodzi o treść, tylko kolejność pomieszałem... Później coś pozmieniałem tak jak na filmie i wyszło dobrze, także czy mógłby ktoś mi uświadomić czy kolejność musi być cały czas taka sama, czy można sobie mieszać?

Pozdrawiam serdecznie,

PS: Przepraszam, dopiero zaczynam przygodę z programowaniem.

1 odpowiedź

odpowiedź 19 lutego 2019 przez lapa19904 Stary wyjadacz (11,560 p.)

Tylko w niektórych przypadkach kolejność ma znaczenie i pytasz tutaj o kolejność w css. Wrzuć kod to Ci powiem gdzie masz błąd.

komentarz 19 lutego 2019 przez haskii Nowicjusz (170 p.)
edycja 19 lutego 2019 przez Arkadiusz Waluk

No właśnie mój błąd, bo zacząłem oglądać film ponownie i coś tam zmieniać, a mogłem zostawić tak jak było to bym wiedział gdzie popełniłem błąd... Teraz zrobiłem znowu sam bez zaglądania. Pojawił się kolejny błąd, którego nie mogę zlokalizować... Po prawej stronie nie ma tego szarego tła, w którym jest zdjęcie, w którym miejscu jest błąd w kodzie?

<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title> Nowości filmowe!</title>
<meta name="description" content="Filmy jakich jeszcze świat nie widział" />
<meta name="keywords" content="filmy,nikt nie widział, najlepsze, nowość" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<style>
#container
{
width:1000px;
margin-left: auto;
margin-right:auto;

}
#logo
{
background-color:black;
color:white;
padding:20px;
text-align:center;

}
#nav
{
float:left;
width:120px;
background-color:lightgray;
min-height:620px;
padding:15px;
}

#content
{
float:left;
width:640px;
padding:20px;

}
#ad
{
float:left;
width:160px;
min-height:620px;
background-color:lightgray;
padding:15px;
}
#footer
{
clear:both;
background-color:black;
color:white;
text-align:center;
padding:20px;
}

</style>

</head>
<body>
<div id="container">
<div id="logo">
<h1>Nowości filmowe - Nikt ich nie widział!</h1>
</div>
<div id="nav">
Film1 <br />
Film2 <br />
Film3 <br />
Film4 <br />
Film5 <br />
</div>
<div id="content">
<h2>Bla bla Bla Bla, coś tam sobię piszę, żeby sprawdzić, czy wyjdzie! </h2>
Ciekawe czy mi to wyjdzie, chciałbym bardzo, hehehehehe......
<br /><br />

Musi to wyjść dobrze za pierwszym razem
</div>
<div="ad">
<img src="plac.jpg">
</div>
<div id="footer">
Najlepsze filmy &copy; Wszelkie prawa zastrzeżone
</div>

</body>

</html>

komentarz 19 lutego 2019 przez lapa19904 Stary wyjadacz (11,560 p.)

Pierwsze co rzuciło mi się w oczy to

div="ad"

musisz zapisać czy id="ad" czy class="ad".

Nie pamiętam za bardzo materiałów Mirosława Zelena, też od niego zaczynałem i mimo że jego materiały są nieaktualne to jestem w stanie zrozumieć dlaczego z nich korzystasz. Pamiętaj jednak aby nie stylować elementów po id, a zawsze za pomocą class. ID przeznaczone jest tylko dla jednego indywidualnego elementu i nie służy do stylowania.

Polecam też ograniczyć używanie <br>, a taką nawigację jaką masz zrobić w liście.

Wiem że dopiero zaczynasz ale dobrze jest już na początku trzymać się dobrych praktyk.

komentarz 19 lutego 2019 przez haskii Nowicjusz (170 p.)

A tak szczerze jakbyś mi odpisał, bo napisałeś, że zaczynałeś od materiałów P.Mirosława, jeżeli się wezmę solidnie za naukę, to samodzielnie, bez żadnych szkół, studiów itd jest szansa, że będę potrafił programować, tworzyć strony itd? :P

komentarz 19 lutego 2019 przez haskii Nowicjusz (170 p.)

Poprawiłem, wpisałem przed "ad" id="ad" i znowu jest wszystko sklejone ze sobą, a mam zastosowane float:left;

Help :D

komentarz 19 lutego 2019 przez lapa19904 Stary wyjadacz (11,560 p.)

Elementy nie mieszczą się na szerokość.

Zastosuj w css box-sizing: border-box; bo do szerokości które podałeś dolicza Ci padding(domyslnie). Zapoznaj się z

https://developer.mozilla.org/pl/docs/Web/CSS/box-sizing

Co do twojego pytania to pewnie że można, sam tak zrobiłem i od roku pracuję na stanowisku Junior Web Dev-a.