Jag fick en fråga om hur man delar upp sidomenyn i olika boxar och då min förmåga att förklara utan bilder visade sig vara helt värdelös blir det ett helt "How to"-inlägg om det istället :) All sån här information finns säkerligen hos Designadinblogg.se men ändå. Nu försöker jag verkligen vara galet överpedagogisk men det är inte helt omöjligt att jag failar i beskrivningen ändå haha. Det är ju lätt hänt att jag bara tar för givet att "alla borde kunna" ditten och datten, men det är ju inte säkert. Fråga på om det är något som är oklart!


Först och främst. HTML-koden för sidomenyn bör se ut ungefär som första bilden visar- om man inte har ändrat runt där för mycket. (Bilderna är dock inte från Framsidans kod, utan från Inläggssidan, men det ser mer eller mindre likadant ut.) Det du ska hålla utkik efter i det här fallet är <div class="nav"> </div> som man kan förklara som inramningen av all information i sidomenyn. Har man bara en uppsättning av dessa har man en hel sidomeny som innehåller all den information som finns innanför den stora ljusblå rutan.




Det du gör för att få sidomenyn uppdelad är att man lägger in fler <div class="nav"> </div>. Som den andra bilden visar "öppnar" man varje ruta med <div class="nav"> och "stänger" med </div> och all kod som är mitt i mellan hamnar i EN ENSKILD ruta i sidomenyn. Se till att inte glömma "stänga" för alla du "öppnar". Missar man att lägga in en </div> kan hela designen krångla till sig och det kan vara svårt att förstå varför för det otränade ögat. Ett tips är att "öppna" precis före <div class="navheader"> (som är koden för alla rubriker i sidomenyn) och "stänga" innan nästa rubrik.

Kom ihåg att göra såhär i alla de 4 HTML-koderna, annars kommer det bara bli uppdelat på t.ex framsidan om det är där du gör ändringarna.





När du har delat upp sidomenyn på det viset du vill måste du ändra lite i stilmallen. Du ska leta upp .nav och lite beroende på hur din design är utformad ska du i allfall lägga till margin-bottom: 10px; (antalet px bestämmer man själv, ju högre tal desto större mellanrum.

Vissa (speciellt blogg.se's färdiga) designer har en ram med bakgrund runt "hela bloggen", då kan man behöva göra lite mer ändringar. Lägg till Background: #ffffff; exempelvis så blir rutorna vita. Är hela bloggen vit så måste man ta en annan färg såklart. Testa dig fram med t.ex #5d5d5d (som är grå) tills du är nöjd med placeringen - sen kan du byta till den färg du vill ha på rutorna.

Om du tycker rutorna är för små och inte har tillräckligt med luft runt texten kan du enkelt lägga till: Padding: 10px; t.ex. Då får du en kant runt hela rutan som är 10px bred åt alla håll. Vill du bara ha det bredare åt höger och vänster kan man lägga till såhär: Padding: 0px 10px 0px 10px;




PUH, det här var rackarns krångligt att förklara, men det är JÄTTELÄTT att göra det när man väl vet vad som ska göras.