Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse

Dela upp menyn i boxar

Stilmallskoden (vi väljer ett class-attribut för att boxen ska finnas med flera ggr):

.box {
width: 178px;
padding: 10px;
background: #FFFFFF;
margin-bottom: 20px;
}

Denna kod modifierar du sedan; du kan lägga till skugga, ändra bakgrundsfärg, göra rundade hörn eller vad som helst.

Kodmallskod:

<div class="box">Menykoderna häremellan</div>

 

Tips:
Om du är osäker på vad som är vad i kodmallen och hur du klipper ut bara till exempel Senaste inläggen, så har jag gjort som så att jag har lagt de olika generella koderna här nedanför. Kolla gärna på dem och se hur de ser ut, klipp ut och klistra in dina egna koder i dina boxar sedan.

Sök i bloggen:

<div class="navheader">Sök i bloggen</div>
<form action="http://www.google.se/search" name="search" method="get">
<input type="text" name="q" value="" size="12" maxlength="64" />
<input type="hidden" name="sitesearch" value="{{ blog.absolute_url }}" />
<input type="submit" value="Sök" />
</form>

 

Senaste inläggen:

<div class="navheader">Senaste inläggen</div>
<ul>
{% for entry in entries[:20] %}
<li><a href="{{ entry.url }}">{{ entry.title }}</a></li>
{% endfor %}
</ul>

 

Kategorier:

<div class="navheader">Kategorier</div>
<ul>
{% for category in categories %}
<li><a href="{{ category.url }}">{{ category.name }}</a></li>
{% endfor %}
</ul>

 

Arkiv:

<div class="navheader">Arkiv</div>
<ul>
{% for month in archive_months %}
<li><a href="{{ month.link }}">{{ month.name }}</a></li>
{% endfor %}
</ul>

 

Länkar:

{% if linklist %}
<div class="navheader">Länkar</div>
<ul>
{% for link in linklist %}
<li><a href="{{ link.url }}" title="{{ link.description }}">{{ link.name }}</a></li>
{% endfor %}
</ul>
{% endif %}

 

Koden ovan (som rör länkarna) skiljer sig lite från de andra, därför att blogg.se har valt att lägga en if-sats på den. Det betyder att Länkar syns endast om du faktiskt har lagt in länkar via blogg.se (Arkiv > Länkar). Det är det som {% if linklist %} (översta raden, betyder ”om det finns länkar gör detta…”) (nedersta raden, betyder ”slut på ‘om det finns länkar gör detta…’”). Jag skulle rekommender att man klistrar in <div class=”box”> under {% if linklist %} & </div> ovanför {% endif %}, då syns bara boxen om man har länkar inlagda.

 

Transkriberat från film:

Dela upp menyn i boxar

Hej allihopa.
Idag så tänkte jag visa er hur man delar upp menyn i boxar och det första vi ska göra, man går ju in i sina koder på design. Då går man in i stilmallen för det är främst där man är men man ska även vara litegrann i kodmallen och då måste man göra detta i alla kodmallar, inte bara på startsidan.

Men man går i alla fall in i kodmallen och så ser man till att man tar bort bakgrunden och eventuell border eller så under div id eller #side, som ni ser där. Då har jag en background där så jag tar bort den, så, och sen har jag en border där så då tar jag bort den och sen så skriver man ett eget stycke som man kan kalla för box och då är det en punkt framför av den anledningen att boxen kommer ju att användas flera gånger för vi ska ju ha fler boxar och så lägger man istället bakgrunden på den och jag gör som så att jag, för att ni lättare ska se så ändrar jag bakgrund på den här testbloggen så att ni ser nu hur det ser ut. Då ska vi se, då ser ni att det är vitt här men här är det ingen bakgrund.

Så, då kan vi fortsätta, då har vi den här box här lite längre ner som jag började skriva på. Då lägger vi om man nu vill ha en bakgrund så lägger man en bakgrund på den då så man skriver background och så tar vi vit bakgrund och sen så har ju jag en border runt här och det vill jag ha på mina boxar i menyn också, men man får ju designa de här precis hur man vill så då tar vi border 1px solid 000. Sen så brukar jag alltid lägga till lite padding också för padding är ju, vad heter det, själva det mellanrummet som blir från kanten intill texten eller innehållet i boxen. Så jag lägger till padding 10 pixlar för det tycker jag blir bra och sen så tar jag bort padding på siden för där vill jag inte ha någon padding. Då sparar vi det och så kan vi förhandsgranska och då ser ni ju att det ju ingenting här och det beror på att vi har inte än gått in i kodmallen och visat koderna vart den här boxen ska finnas.

Så vi gör som så att vi går in på startsidan och så bläddrar man ner till div id side som vi har där och på lite nyare blogg.se bloggar så kan det också vara taggen a side så ni får liksom hitta själva vart menyn är någonstans. Precis under det så skriver jag div class, class i och med att det var en punkt innan. Det hade varit id om det var en # och den hette ju box så och min första box vill jag ska innehålla profilbilden och min profiltext och det är det som ligger här, så då så sätter jag en /div där också. I och med att vi har en div class nav här så betyder det att jag även måste avsluta den för att annars så blir det att det är den som avslutas nu, för att det blir div id side som avslutas sist sen är det div id box som avslutas näst sist. Div class nav den slutar precis innan boxen slutar men sen har jag också div class profile-text här inne och det är den som avslutas här, vilket betyder att den som avslutas här det är div class nav så då måste jag lägga till ytterligare en /div här. Så då kan jag förhandsgranska.

Då ser ni att då blir det en div där, men det blir lite knasigt, för den, det avslutas inte riktigt så som vi vill och om det blir så, då betyder det att någonstans så är det liksom någon div eller så som inte stämmer och då får man göra som så att man testar sig fram lite. Man kan ta bort div class nav till exempel så ser vi vad som händer då. Ja, då blir det mycket, mycket finare här. Sedan så vill jag att sök i bloggen ska vara samma grej så, i en box, så då tar jag div class box där igen och så lägger jag den precis ovanför Sök i bloggen och precis efter /form så lägger jag en div, så förhandsgranskar vi. Så, då ser ni att de går liksom linje i linje med varandra där och det kanske man inte vill. Man vill kanske ha ett mellanrum där i mellan och då gör vi som så att vi sparar den här så att vi kan gå tillbaka men så går vi in i stilmallen och så bläddrar vi ner till box och i box så lägger vi en margin-bottom, kanske 15 pixlar eller något sådant där, sparar vi och förhandsgranskar och då blir det ett mellanrum där för att det blir en marginal ner till nästa element och nästa element är ju den här boxen så det kommer bli samma sak i nästa box.

Då sparar vi och så går vi in på startsidan igen och så fortsätter man helt enkelt och när man kommer ner till inläggen och så då kan man behöva en div class nav så då får man lägga in div class nav och anledningen till att man kan behöva det är för att annars så blir det en punktlista som ni ser här och det kanske man inte vill ha. Vill man inte ha en punktlista då måste man lägga till div class nav och så lägger vi en /div för vi avslutar div class nav och sen lägger vi ytterligare en /div för vi avslutar div class box och så fortsätter man så helt enkelt.

Så på kategorier så gör vi samma sak en gång till, div class box, div class nav och /div, vi avslutar div class nav och /div, vi avslutar div class box. När man kommer ner till länkar här nere så finns det en if linklist, vilket betyder att om det finns länkar, att man alltså gått in på arkiv och skapat egna länkar, då kommer dem att synas i menyn annars så kommer dem inte att synas. Därför så tycker jag personligen att man lägger en div class box efter i flinklist, så här och sen så lägger man div class nav och den här i flinklist den avslutas ju med en endif här nere så då lägger vi /div och avslutar div class nav och en /div så avslutar vi div class box och då betyder det att den här boxen kommer endast att synas om man har lagt in länkar via arkivet.

Hade vi däremot lagt det ovanför if linklist och dem här div:en då, nedanför endif, då hade boxen synts men det hade inte varit någonting i boxen.

Det är helt enkelt så man gör och det var det jag tänkte visa er idag så får ni ha det så gott. Hej hej.

 

24 år, läser till Webbutvecklare, driver eget företag inom design, grafik & SEO samt ett företag som designar posters. På fritiden skapar jag bloggar, hemsidor och gör andra projekt inom webb. Jag har bloggat sedan 2007 under namnet Sannas Rum och har också två egna Youtubekanaler.

Läs mina andra inlägg

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *