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

17 comments

  1. SvaraCaroline Cederholm

    Hej, några boxar har flyttats ett snäpp åt vänster hur ska jag göra så det ska bli likadant som de ovanför.
    Är tacksam för snabbt svar! Super tacksam att den här bloggen finns, man lär sig otroligt mycket!
    http://www.kontraster.webblogg.se


    1. Author
      SvaraSanna Preifelt

      Det står att bloggen är borttagen, så vi kan tyvärr inte se vad som orsakat ditt problem /:

  2. SvaraSandra

    Hej! Bra inlägg, men det faller nästan direkt för mig. Trots att jag har tagit bort bakgrunden under #side så ligger det vita kvar där bakom. Vad är det som är fel? Är det någonting jag inte fått med eller råkat skriva dit? Min testblogg heter smalmtoft.blogg.se/test
    Tack på förhand!

  3. SvaraTherese Gustavsson

    Jag är i STORT behov av hjälp.. alltså vet inte vad jag ska ta mig till. För cirka en timme sedan förstörde jag HEEEELA min stilmall. Kunde inget göra än att börja om från början. Hade lagt ner över 24 timmar på att få allt som jag ville och nu är allt det förstört. Vart ska jag börja?
    Nu när jag försöker fixa tillbaka boxarna i menyn svarar inte .box { alls oavsett vad jag gör. Går inte att ändra bakgrundsfärg, inte få en ram osv osv.
    Använder mig av dina Gratis mallar så kodmallen ska ju vara som den är, dock så ser det annorlunda ut i det här inlägget ovan, varför? :/
    SNÄLLA hjälp mig, får ren panik när bloggen ser ut såhär.

    1. SvaraTherese Gustavsson

      Hittade faktiskt mejlet från tjejen som hjälpte mig angående ”boxar” förra gången så tror att jag löste det som jag hade det förut 🙂 Det enda problemet med menyn är att jag inte förstår varför min ”proflbild” inte vill hamna i mitten.. Resten fick jag också ihop skapligt efter några timmar vid datorn! ;p
      Kan passa på att önska ett inlägg gällande ”hur man gör mellanrum mellan inläggen” där man även kan lägga skugga bakom 🙂


    2. Author
      SvaraSanna Preifelt

      Har det löst sig för dig? (såg på bloggen att du har boxar nu)
      Tänk på att alltid ha en backup för din kod 🙂

  4. SvaraLina

    Hej!
    Jo, jag provade att dela upp menyn så här, men istället så använde jag mina egna bilder som bakgrund. Jag gjorde tre bilder i PS, en uppe, mitten och nedre del. Men problemet är att uppe delen och delen i mitten inte sitter ihop, det finns ett mellanrum mellan dem och jag har ingen aning hur man fixar det. Här är en bild för att se vad jag menar: https(:)//cdn2(.)cdnme.se/4613152/8-3/2_55184775e087c37184644b6e(.)png


    1. Author
      SvaraSanna Preifelt

      Använd tipset istället, finns ingen anledning att greja med bilder och sådant när detta tips är jättesimpelt. Om du vill ha en border på dina boxar så lägger du helt enkelt till det i din css.

      1. Lina

        Okej, tack!
        Men kan jag få hjälp att få bort det där mellanrummet? Eller skulle ni kunna göra ett inlägg om hur man kan dela in menyn i boxar, fast med sin egen design som i det ofta ser ut i fansites? (jag är jättedålig på att förklara, sorry) Eller som i ’Rama in dina inlägg’ inlägget?
        Men i alla fall, ni gör ett jättebra jobb med den här sidan! ^^


      2. Author
        Sanna Preifelt

        Vi kan säkert göra ett tips om det när tillfälle ges.
        Först och främst; om du ska använda box mer än en gång per kodmallssida så ska den ha en punkt (.) istället för hashtag (#) framför sig i stilmallen. Därefter ska du ändra div id=”box” till div class=”box”.
        För att få bort mellanrummet kan du lägga en margin-top: -10px; eller något liknande under din .box i stilmallen.

  5. SvaraKristina

    Hej! Jag har skrivit en fråga tidigare, men har inte sett/fått något svar på den än.¨Jag undrar om man kan få länkar till endast det senaste inlägget i en kategori.

    T.ex. så vill jag ha en box-meny där en box är tillägnad resor och en box tillägnad en annan kategori så som mode.
    I den boxen som jag vill ska vara tillägnad resor, så vill jag att det ska finnas en rubrik som rör det senaste inlägget som jag skrev i den kategorin. Går det? Så att man alltid lätt kan se vad jag senast skrev i de olika kategorierna.

    Kanske svårt att ordna i html men jag skulle vara riktigt glad om ni kunde hjälpa mig att klura på det. Kan inte hitta någon sådan tutorial på er hemsida just nu..

    Dessutom, så undrar jag om det finns någon kod som man kan koppla till de senaste inlägget och/eller mest populära inlägget?

    Nu är ju inte min blogg populär, överhuvudtaget, men jag vill gärna strukturera upp den lite roligare än det vanliga ”senaste inläggen”-köret.

  6. SvaraKristina

    Just ja, på blogg.se/stil så har de Senaste med endast bilder från de senaste inläggen, fast hos olika bloggare, som är länkar till de inläggen.
    Har ni någon aning om vilken kod man kan använda för att göra så fast till ens egna senaste inlägg?

    Jag hoppas verkligen att ni kan hjälpa mig med det, Tack!

  7. SvaraSaga

    Hej! Jag har försökt detta och det har funkat bra, men de två sista boxarna har flyttet lite åt vänster. Hur gör jag så att de hamnar mitt under de andra boxarna?

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *