Dela in menyn i boxar utan bilder
Det är jättemånga som har frågat mig i tidigare blogg som jag har haft hur man gör boxar i menyn. Det kan vara lite klurigt att få alla koder på rätt plats men resultatet blir jättebra om man har gjort allt rätt!
Hur du skapa boxar utan bilder
• Först lägger du till denna koden under #side i din stilmall.
#box {
width: 190px; <---------------------------- Just nu är storleken på boxen 200px, här kan du ändra hur som helst.
padding: 10px 10px 10px 10px; <------- Här ändrar du mellanrummet mellan boxens slut och innehållet.
background: #FFFFFF; <------------------ Här väljer du vilken färg du vill ha på boxarna, just nu är boxen vit.
border: 1px solid #FF4A7D; <----------- Här väljer du färg på ramen som ska vara runt boxen.
}
#box {
width: 190px; <---------------------------- Just nu är storleken på boxen 200px, här kan du ändra hur som helst.
padding: 10px 10px 10px 10px; <------- Här ändrar du mellanrummet mellan boxens slut och innehållet.
background: #FFFFFF; <------------------ Här väljer du vilken färg du vill ha på boxarna, just nu är boxen vit.
border: 1px solid #FF4A7D; <----------- Här väljer du färg på ramen som ska vara runt boxen.
}
•Ta bort (background: #FFFFFF;) i #side. I din stilmall.
Den behövs inte där eftersom att det redan finns en background i #box {.
Den behövs inte där eftersom att det redan finns en background i #box {.
• När du är klar med det ska det se ut ungefär såhär, beroende på vilken grunddesign du har valt att jobba med kan #side se lite olika ut.
#side {
border:0 solid #D4C8BE;
float:left;
margin-top:-254px;
padding:0 8px;
position:absolute;
width:190px;
}
#box {
width: 212px;
border:0 solid #D4C8BE;
float:left;
margin-top:-254px;
padding:0 8px;
position:absolute;
width:190px;
}
#box {
width: 212px;
padding: 10px 10px 10px 10px;
background: #FFFFFF;
border: 1px solid #FF4A7D;
}
background: #FFFFFF;
border: 1px solid #FF4A7D;
}
Efter att du har lagt in alla koderna här ovanför i stilmallen är det nu dags att gå över till kodmallarna och lägga in lite koder.
Du ska göra själva boxarna i ALLA kodmallar.
Kodmalllarna är följande:
Framsidan
Inläggsidan
Kategorisidan
Arkivsidan
Kodmalllarna är följande:
Framsidan
Inläggsidan
Kategorisidan
Arkivsidan
Det är viktigt att du lägger koderna för boxarna under #side i kodmallen annas kommer boxarna inte hamna i menyn.
Koden du ska använda för att få boxarna är:
<div id="box"> innehållet du vill ha i din box </div><br />
<div id="box"> <---------- Denna koden sätter du där du vill att boxen ska börja.
</div><br /> <------------ Denna koden sätter du där du vill att boxen ska sluta.
Tillexempel om du vill ha Senaste inläggen i en box ska det se ut såhär:
<div>Senaste inläggen</div>
<ul>
<tag:recentlist limit="5">
<li><a href="${EntryPermaLink}">${EntryTitle}</a></li>
</tag:recentlist>
</ul>
<div id="box"><div class="navheader">Senaste inläggen</div>
<ul>
<tag:recentlist limit="20">
<li><a href="${EntryPermaLink}">${EntryTitle}</a></li>
</tag:recentlist>
</ul></div><br />
Svårare än såhär är det inte. Kom bara ihåg att göra såhär på alla kodmallar annars kommer det att bli konstigt!
Jag själv hade jätteproblem innan jag lyckades få till alla boxarna. Jag fick pröva flera gånger innan det funkade, ge aldrig upp! Ett tips är att man har två bloggar, en blogg där du gör designen på och den "riktiga" bloggen där du skriver dina inlägg på.
Såhär har jag det:
http://anphoto.webblogg.se <-------------- Detta är min riktiga blogg där jag skriver mina inlägg.
http://anphoto.webblogg.se/design <----- Detta är bloggen som jag göra mina designer på.
Det är en fördel med två bloggar ifall jag skulle göra fel på en design så förstör jag ju inte min "riktiga" blogg.
http://anphoto.webblogg.se <-------------- Detta är min riktiga blogg där jag skriver mina inlägg.
http://anphoto.webblogg.se/design <----- Detta är bloggen som jag göra mina designer på.
Det är en fördel med två bloggar ifall jag skulle göra fel på en design så förstör jag ju inte min "riktiga" blogg.
Hoppas detta var till hjälp för er som inte riktigt har förstått hur man gör boxar i menyn.
Har ni några andra designfrågor så bara hör av er så ska jag försöka hjälpa er.
