Enkle en-kolonne nettstedslayouter i CSS
I denne leksjonen skal vi øve på å lage enkle en-kolonne nettstedslayouter. La oss for eksempel lage en slik layout:
La oss begynne implementeringen. Hver layout
starter som regel med en generell div med navnet
wrapper som inneholder hele resten av nettstedet:
<div id="wrapper">
</div>
I vårt tilfelle vil wrapperen være sentrert på skjermen:
#wrapper {
width: 800px;
margin: 50px auto;
}
Den vil også ha en kant:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
La oss nå lage hovedstrukturen til siden. Den vil bestå av en meny og hovedinnholdet:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
La oss legge til innholdet i blokkene våre:
<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>
Nå kan vi legge til stiler for blokkene våre. La oss legge til stil for menyen:
#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 nå legger vi til stiler for innholdselementene:
#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;
}
Nå kan vi sette sammen all koden:
<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 å angi avstander ovenfra og ned.
For eksempel har vi en meny og innhold,
og mellom dem - tomt rom. Åpenbart
kan dette rommet lages med bunnmargin
på menyen, toppmarginen til innholdet,
eller deres samtidige påvirkning. I dette tilfellet
er det bedre å angi bunnmarginen til menyen, og fjerne topp
padding og margin som standard
for h1.
Råd 2
Underelementer skal ikke danne avstand mellom
foreldreelementer. For eksempel har vi en meny.
Bunnmarginen til denne menyen kan dannes
enten med margin på div-en med menyen, eller margin
på lenkene. Det er bedre å velge det første alternativet, siden
lenkene ikke skal handle over hodet på
foreldreelementet.
Råd 3
Anta at det er en avstand mellom to elementer
og i dette tilfellet er det visuelt ingen forskjell
på hva du velger for avstand - margin eller padding.
I dette tilfellet velger du margin, siden
det er denne som skal lage avstander mellom
elementer.
