Svårighetsgrad: För att klara av denna guide så måste du väl förstå dig på CSS och HTML koder
Denna guiden går igenom hur man skapar en "box" med CSS som med andra ord kan beskrivas som
ett avgränsat område. Boxarna i denna guide är gjorda för att användas i eran meny på bloggen,
men så klart kan man också använda dom till vad man än vill i sin design.
I denna guide kommer jag också att ta upp hur man skapar avrundade hörn till sina "boxar"
med hjälp av 3 st enkla bilder som ni skapar i ett bildredigerings program.
Jag har valt att beskriva uppdelningen av menyn i 3 st sektioner som innefattar Senaste inläggen
med Kategorier och sedan Länkar.
Här är upplägget för hur det kommer se ut på eran blogg om ni följer mina instruktioner.
1. Det första du ska göra är 3 st bilder inne i ett bildredigerings program
och jag förklarar här nedan hur bilderna ska göras och hur dom ska användas.
När du gör dina bilder ska du tänka på vilken färg du vill
ha på dina boxar och vilken färg bakgrunden har bakom
boxarna och till slut hur breda dom ska vara.
Box bild topp: kommer att placeras på toppen av box 1
Box bild mitten: kommer att placeras i botten på box 1
och den blir också toppen av box 2. Denna bild kommer nu också att
bestämma avståndet ni vill ha mellan era
boxar, så här är det viktigt att ni bestämmer
er för vilket avstånd ni vill ha mellan era boxar.
Box bild botten: kommer att placerat nästan i slutet av sidan
och blir botten av box nr.3
2. Nu är det dags att lägga in denna koden i scroll-fönstret under #side i stimallen
och när du gjort det så ska du också ta bort background-color på #side,
för den behöver vi inte längre.
Alla andra inställningar väntar du med till alla koder till kodmallen är inlagda.
Sedan sparar du inställningarna.
3. Nu ska du in i kodmallen och här fungerar det så här:
<div id="box1">
<div>Senaste inläggen</div>
<ul>
<tag:recentlist limit="11">
<li><a href="${EntryPermaLink}">${EntryTitle}</a></li>
</tag:recentlist>
</ul>
<div>Kategorier</div>
<ul>
<tag:categorylist>
<li><a href="${CategoryLink}">${CategoryName}</a></li>
</tag:categorylist>
</ul>
</div>
<div id="box2">
<div>Arkiv</div>
<ul>
<tag:archivelist>
<li><a href="${ArchiveLink}">${ArchiveName}</a></li>
</tag:archivelist>
</ul>
</div>
<div id="box3">
<tag:if test="${hasLinks == 'true'}">
<div>Länkar</div>
<ul>
<tag:linklist>
<li><a href="${LinkURL}" title="${LinkDescription}">${LinkName}</a></li>
</tag:linklist>
</ul>
</tag:if>
</div>
</div>
4. Och som det ser ut från början i kodmallen innan du börjar ändra
så ska allt detta fortfarande ligga efter <div id="side">
för att det ska hamna på rätt plats.
Så nu ska vi lägga in adresserna till bilderna
som vi laddade upp tidigare.
Box bild topp ska placeras ovanför box 1.
Box bild mitten ska placeras ovanför box 2
och engång till ovanför box 3.
Box bild botten ska placeras nästan längst ner på sidan,
precis ovanför <div class="subside">
Hela upplägget kommer at se ut så här:
