Paraqitje të thjeshta një-kolone të faqeve në CSS
Në këtë mësim do të praktikojmë krijimin e paraqitjeve të thjeshta një-kolone të faqeve. Le të bëjmë, për shembull, një paraqitje si kjo:
Le të fillojmë zbatimin. Çdo paraqitje zakonisht
fillon me një div të përgjithshëm me emrin
wrapper, që përmban të gjithë faqen e mbetur:
<div id="wrapper">
</div>
Në rastin tonë, wrapper do të rreshtohet në qendër të ekranit:
#wrapper {
width: 800px;
margin: 50px auto;
}
Gjithashtu do të ketë një kufi:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Tani le të bëjmë strukturën kryesore të faqes. Ajo do të përbëhet nga menuja dhe përmbajtja kryesore - content:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Le të shtojmë përmbajtjen e blloqeve tona:
<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>
Tani mund t'u shtojmë stilet blloqeve tona. Le të shtojmë stil menysë:
#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;
}
Dhe tani le të shtojmë stilet elementeve të përmbajtjes:
#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;
}
Tani mund të mbledhim të gjithë kodin së bashku:
<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;
}
Këshilla 1
Është më e përshtatshme të jepen hapësirat nga lart poshtë.
Për shembull, ne kemi një menu dhe përmbajtje,
dhe midis tyre - hapësirë të lirë. Natyrisht,
kjo hapësirë mund të bëhet nga hapësira e poshtme
e menusë, hapësira e sipërme e përmbajtjes,
ose ndikimi i njëkohshëm i tyre. Në këtë rast
është më mirë të caktohet hapësira e poshtme e menusë, dhe përmbajtjes
të hiqet padding dhe margin sipas parazgjedhjes
për h1.
Këshilla 2
Pasardhësit nuk duhet të formojnë hapësirë midis
prindërve. Për shembull, ne kemi një menu.
Hapësira e poshtme e kësaj menu mund të formohet
ose nga margin i div-it me menu, ose nga margin
i lidhjeve. Është më mirë të zgjidhet varianti i parë, pasi
që lidhjet nuk duhet të veprojnë përmes kokës së
prindit.
Këshilla 3
Le të themi se midis dy elementeve ka hapësirë
dhe në këtë rast vizualisht nuk ka ndryshim,
çfarë të zgjidhet për hapësirë - margin ose padding.
Në këtë rast zgjidhni margin, pasi
është pikërisht ai që duhet të krijojë hapësira midis
elementeve.
