Enkle enkeltkolonne layout til hjemmesider i CSS
I denne lektion vil vi øve os i at lave enkle enkeltkolonne layout til hjemmesider. Lad os for eksempel lave et layout som dette:
Lad os komme i gang med implementeringen. Hvert layout starter som regel
med en generel div med navnet
wrapper, som indeholder hele resten af hjemmesiden:
<div id="wrapper">
</div>
I vores tilfælde vil wrapperen være centreret på skærmen:
#wrapper {
width: 800px;
margin: 50px auto;
}
Den vil også have en kant:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Lad os nu lave hovedstrukturen på siden. Den vil bestå af en menu og hovedindholdet - content:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Lad os tilføje indhold til vores blokke:
<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>
Nu kan vi tilføje styling til vores blokke. Lad os tilføje styling til menuen:
#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;
}
Og nu tilføjer vi styling til indholdselementerne:
#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;
}
Nu kan vi samle al koden sammen:
<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;
}
Råd 1
Det er mest praktisk at give afstand ovenfra og ned.
For eksempel har vi en menu og indhold,
og mellem dem - tomt plads. Det er indlysende,
at dette mellemrum kan laves som bundmarginen
på menuen, topmarginen på indholdet,
eller deres samtidige indflydelse. I dette tilfælde
er det bedre at sætte bundmarginen på menuen, og fjerne top
padding og margin som standard
for h1.
Råd 2
Afkom skal ikke danne afstand mellem
forældre. For eksempel har vi en menu.
Bundmarginen på denne menu kan dannes
enten ved margin på div'en med menuen, eller margin
på linkene. Det er bedre at vælge den første mulighed, da
linkene ikke bør handle over forældrens hoved.
Råd 3
Lad der være en afstand mellem to elementer
og i dette tilfælde er der visuelt ingen forskel,
hvad man skal vælge til afstanden - margin eller padding.
I dette tilfælde skal du vælge margin, da
det netop skal skabe afstande mellem
elementer.
