Layout-uri simple de site cu o singură coloană în CSS
În această lecție vom exersa crearea unor layout-uri simple de site cu o singură coloană. Să facem, de exemplu, un astfel de layout:
Să începem implementarea. Fiecare layout
începe de obicei cu un div general numit
wrapper, care conține întregul site:
<div id="wrapper">
</div>
În cazul nostru, wrapper-ul va fi aliniat la centrul ecranului:
#wrapper {
width: 800px;
margin: 50px auto;
}
De asemenea, va avea o bordură:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Să creăm acum structura principală a paginii. Aceasta va consta dintr-un meniu și conținutul principal:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Să adăugăm conținutul blocurilor noastre:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
Acum putem adăuga stiluri blocurilor noastre. Să adăugăm stil meniului:
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
Și acum să adăugăm stiluri elementelor de conținut:
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Putem acum să asamblăm tot codul împreună:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Sfatul 1
Este mai convenabil să dai spații de la sus în jos.
De exemplu, avem un meniu și conținut,
iar între ele - spațiu liber. Evident,
că acest spațiu poate fi făcut cu margin-ul de jos
al meniului, cu margin-ul de sus al conținutului,
sau cu influența lor simultană. În acest caz
este mai bine să setăm margin-ul de jos pentru meniu, iar conținutului
să îi eliminăm padding și margin implicit
pentru h1.
Sfatul 2
Descendenții nu ar trebui să formeze spațiu între
părinți. De exemplu, avem un meniu.
Spațiul de jos al acestui meniu poate fi format
fie cu margin al div-ului cu meniu, fie cu margin
link-urilor. Este mai bine să alegem prima variantă, deoarece
link-urile nu ar trebui să acționeze peste capul
părintelui.
Sfatul 3
Să presupunem că între două elemente există un spațiu
și în acest caz vizual nu există diferență,
ce să alegi pentru spațiu - margin sau padding.
În acest caz alegeți margin, deoarece
tocmai acesta ar trebui să creeze spații între
elemente.
