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:
10 kommentarer
melina
12 Sep 2009 18:11
den här guiden verkar bra men det är ju liiite jobbigt att man inte kan högerklicka och kopiera koderna. Man pallar ju inte skriva av de.
E L L E N
13 Sep 2009 17:46
tack så super mkt! Fast jag hade redan gjort lådor eller "boxar" fast att de heter #side2 istället för #box2. men jag listade ut hur man skulle göra utan att ta bort deet jag hade gjort! tack :D<3
Emmelie
19 Feb 2010 22:07
men hörrudu det där funkar ju inte :P haha kolla hur det ser ut http://emmelius.blogg.se/testblogg/?tmp=19220428
vad har jag gjort för fel? jag lånade dina tre bilder och bara ändrade färgen på dem.. :/ de ligger ju på rätt ställe men kan inte på dem att hänga ihop liksom. ja du ser ju själv. Tacksam för hjälp!!
Design is pure
20 Feb 2010 18:35
jag får det inte att fungera, förstår inte hur du menar. Först när jag klistrat in allt i kodmallen, men sen fattar jag inte var jag ska placera alla de där andra koderna - tex dom här: <img src="Adressen till topp bilden" border="0">
<div id="box1">
Innehållet i boxen här
</div>
Emmelie
22 Feb 2010 14:47
tack för mejlet. men det är inte där felet ligger. dom ligger ju rätt det kan man ju se på sidan. det är det att själva bklgrundsfärgen är fel och de hänger inte ihop- men jag får testa lite i stilmallen och se om jag får till det. tack så mycket för din hjälp ändå :)
Jessica
02 Mar 2010 22:47
hej! bra beskrivning! men ja undrar hur man kan dela upp menyn på så sätt att man får en del av den på vänster sida om content och en annan del av menyn på höger sida. jag har prövat med float: left respektive reight och lagt in lite boxar å så när ja testade men de gick inte att flytta över dem till olika sidor. (har inte kvar så som jag prövade)
tacksamn för svar och hjälp :) fin å kreativ blogg!
nikela.blogg.se
04 Apr 2010 11:15
Måste man göra bild-rutor? Att man gör dom i ett fotoprgramm?:)
unni
09 Apr 2010 11:01
hej!
jag har gjort efter det du skrivit, bra skrivet förresten! men problemet är att jag inte kan ändra bakgrundsfärg på boxarna! så nu är det bara vita hörn men inget i mitten om du förstår haha. vad ska jag göra?
Ebba
23 May 2010 10:10
hej! har en liten fråga!
När du gör designer med mellanrum mellan inlägg ch meny då gör du ju det typ i ps (jag med) sedan gör jag ett mellan rum på bloggen men när jag lägger upp headern så blir mellanrum met inte på samma plats? :D
Rebecka Dahlqvist
31 Jul 2011 22:36
hey.
jag undrar om du har lust att hjälpa mig med detta? :)
maila mig isåfall eller kontakta mig på min blogg.
Mvh Rebecka ;p
Kommentera