Egyszerű egyoszlopos weboldal elrendezések CSS-ben
Ebben a leckében gyakorolni fogjuk az egyszerű egyoszlopos weboldal elrendezések készítését. Készítsük el például a következő elrendezést:
Kezdjük a megvalósításhoz. Minden elrendezés
általában egy általános div-el kezdődik, amelynek neve
wrapper, és tartalmazza a weboldal többi részét:
<div id="wrapper">
</div>
Esetünkben a wrapper középre lesz igazítva a képernyőn:
#wrapper {
width: 800px;
margin: 50px auto;
}
Szintén lesz egy szegélye:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Készítsük el most az oldal fő szerkezetét. Ez egy menüből és a fő tartalom - a content - részből fog állni:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Adjunk hozzá tartalmat a blokkjainkhoz:
<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>
Most már hozzáadhatjuk a stílusokat a blokkjainkhoz. Adjunk stílust a menühöz:
#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;
}
És most adjunk stílust a tartalom elemeinek:
#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;
}
Most összeállíthatjuk az egész kódot:
<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;
}
1. tipp
A legkényelmesebb a margókat felülről lefelé megadni.
Például, van egy menünk és egy tartalom,
köztük pedig üres tér. Nyilvánvaló,
hogy ezt a teret lehet az alsó
margóval megadni a menünek, a felső margóval a tartalomnak,
vagy az egyidejű hatásukkal. Ebben az esetben
jobb, ha a menünek alsó margót adunk, a tartalomnak
pedig eltávolítjuk az alapértelmezett padding és margin értékeket
a h1 elem esetében.
2. tipp
Az utódoknak nem szabad margót képezniük
a szülők között. Például, van egy menünk.
Ennek a menünek az alsó margója vagy
a menüt tartalmazó div margin-jével, vagy a linkek
margin-jével képezhető. Jobb az első változatot választani, mivel
a linkeknek nem szabad a szülő "feje fölött"
hatniuk.
3. tipp
Tegyük fel, hogy két elem között van margó
és ebben az esetben vizuálisan nincs különbség,
hogy mit válasszunk a margó számára - margin vagy padding.
Ebben az esetben válaszd a margin-ot, mivel
ez felelős az elemek közötti távolságok létrehozásáért.
