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

Dela upp inläggen i boxar

Detta är ett enkelt och smidigt sätt att dela upp inläggen så att det finns “luft” mellan varje inlägg. Det kan då bli lättare för användaren att särskilja inlägg för inlägg, om man ser lite av bakgrunden mellan varje. Detta är också det bästa sättet om man sedan vill styla sin “ruta” med en skugga, rundade kanter eller liknande. Då vi bara har en stilmallskod så är det bara den som behöver stylas och vi undviker då skarvar och så vidare som det blir om man gör detta genom att lägga bakgrund på h3, entrybody & entrymeta och sedan matcha dem så att det ser ut som en ruta. Nackdelen är som sagt att det då blir skarvar om man till exempel vill lägga skugga runtom.

Först ska du alltså ta bort background: #ffffff; under #content, h3, .entrybody & .entrymeta i stilmallen.

Stilmallskoden:

.entrybox {
background: #ffffff;
padding: 20px; 
}

 

I stilmallskoden får du själv justera som du vill, kanske en lägga till en border, en skugga eller liknande. Jag har endast lagt in bakgrunden (så att det inte är genomskinligt) och en padding så att innehållet i varje box inte hamnar ända ute i kanten då det ser väldigt dumt ut.

Kodmallskoden:

<div class="entrybox">Här ligger alltså allt innehåll</div>

 

Tips:
Det viktigaste av allt är att man först tar <div class=”entrybox”> och lägger det överst, och sedan ska man alltså avsluta med </div> och däremellan ligger allt som har med inlägget att göra (<h3>, <div id=”content”> osv.) Så man tar alltså inte hela kodmallskoden, utan att man tar den första delen (<div class=”entrybox”>) och sedan avslutar taggen (</div>) där boxen ska sluta helt enkelt (vilket förklaras i videon).

delaupp

 

Från filmen:

Dela in inläggen i boxar

 

Hej hörni.

Idag så tänkte jag visa er ett lite lättare sätt att dela in inläggen i boxar, alltså att hur man gör så att mellan inläggen så är det mellanrum och det kanske man illustrerar bättre genom att ha en annan färg på bakgrunden än vad man har på, vad heter det, inläggen, så jag gör som så att jag lägger en annan färg på bakgrunden här så att jag visar bättre hur det kommer att se ut sedan. Men det är alltså precis där i mellan som det ska vara liksom ett mellanrum och jag har ju gått igenom detta tidigare men jag har hittat på ett lite nyare och lite lättare tips som också fungerar jättebra om man till exempel vill lägga en skugga bakom varje inlägg eller om man vill rama in varje inlägg med en fin border eller så, så är det mycket lättare att göra på detta sättet än det sättet jag visat tidigare. Så hoppa över mitt tidigare tips och kör på det här istället.

 

Det vi börjar med det är att vi tar bort bakgrunden på content under #content så tar vi bort bakgrunden, så, och jag har ju en ram runt där också och den heter ju border i koderna här så då tar jag bort ramen också. Jag vill liksom inte ha kvar någonting som visar, alltså som ramar in content utan jag vill bara ha, jag vill att det ska ligga direkt på bakgrunden som så där och så sparar vi det bara för att vi, vad heter det, ska kunna gå vidare. Under content lägger jag stilmallskoden och det är en class-kod för den kommer upprepas flera gånger. Även om jag bara skriver den en gång så är det ju en loop i koderna i och med att det finns ju flera inlägg än ett så därför blir det en class trots att vi bara lägger in det en gång. Om ni på källkoden efter så ser ni att den kommer dyka upp flera gånger och därför så vill vi inte lägga det efter id-attribut eller en hashtag på det utan vi lägger en punkt och ett class-element och jag döper den till så mycket som, ni har ju den här nedanför men jag skriver den här.

 

Content-box, nej entry-box, och det betyder ju inläggs-box, så. Helst ska vi ju använda engelska när man skriver i HTML och CSS för att undvika problem. Man får absolut inte blanda svenska och engelska det vet ni säkert. På den här entry-box där lägger jag in alla attribut som jag vill ha så säg då att jag till exempel vill ha en border och då vill jag ha en border runt hela, då behöver jag inte hålla på att lägga border-top och border-left och border-right på h3 alltså rubriken och sedan border-left och border-right på, vad heter det, entry-body och så border-left, border-right och border-bottom på, vad heter det, på entry-meta utan jag lägger helt enkelt allting på den här entry-box. Så då lägger jag 1px solid och så lägger jag bara svart där och sen så vill jag ju ha en bakgrund också så då lägger jag background #FFF, det är vitt. Sedan så, vad kan mer behövas? Padding behövs nog så jag lägger en padding på 10 pixlar och så sparar vi det.

 

Sedan går man in i kodmallarna och det här behöver man göra på varje kodmall. Alltså på startsida, inläggssida, kategorisida, arkivsida. Det räcker inte att bara göra det på startsidan för då kommer det att se ut såhär på de andra sidorna och vi vill att alla sidor ska se likadana ut annars så ser det riktigt oprossigt ut. Ogillar att komma in på bloggar där det ser galet ut på vissa sidor. Klart att man kan göra, att man inte gör det med flit men om man bara hoppar över det så tycker jag att det ser riktigt oproffsigt ut. Då ska vi lägga in kodmallskoden i kodmallarna och det är viktigt då att man gör detta på startsidan, inläggssidan, kategorisidan och arkivsidan för annars om man till exempel hoppar över att göra detta på kategorisidan så kommer det att se ut så här när man klickar sig in på en kategori och det vill vi inte utan vi vill att alla sidor ska se lika snygga ut.

 

När man då ska klistra in kodmallskoden så klistrar man in den inledande div-taggen och vi börjar med det helt enkelt. Så jag gör som så att jag zoomar in här så att ni ser ordentligt. Jag har bläddrat ner till <div id=”content”> och nedanför där så har vi ett litet programmeringsavsnitt som heter for entry in entries och därefter så har vi det här 15, alltså att det ska synas 15 stycken inlägg på framsidan och det är precis under detta som jag skriver min <div class=”entry-box”>, så och sedan så rullar jag ner och efter den här a href rel –tag så finns det en div-tagg som avslutar div class entrymeta, där ska jag också avsluta min div class entry-box därför att det är därefter som jag, det är därefter som jag liksom, det är innan loopen tar slut så att, vad heter det, så att nästa inlägg får samma värde. Hade jag lagt den längre ner då hade alla inlägg gått inuti div class entry-box i en och samma men nu så går det i varsin så att varje inlägg går i varsin box.

 

Jag zoomar ut lite så att ni ser, förhandsvisar vi då ser ni då blir det blir ett streck där och det beror på att jag inte lagt någon form av margin eller padding så vi går tillbaka till stilmallen, bläddrar vi ner till entry-box och så lägger jag en margin-bottom 10 pixlar och så förhandsgranskar vi och tada, det blev ett litet fint mellanrum där i mellan och skulle jag vilja göra det här lite snyggare så kan man till exempel lägga 4 pixlar double på bordern, då blir det så istället eller så kan jag lägga en skugga eller jag kan lägga lite vad som helst helt enkelt. Men det här är ett väldigt enkelt sätt att göra, att dela in inläggen i boxar. Det blir sällan något problem när man gör på det här viset och det var det som jag hade tänkt att visa er 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

22 comments

  1. SvaraTine

    Blä blir lite smått galen får inte det att fungera och det är ännu värre eftersom man ej ser på bra på videon att man ej kan “härma” det du gör.

    wwww.tinesdesigncorner.blogg.se <— här är det jag prövade koden, men får som sagt ej till boxen. Det blir endast mellan rum T_T


    1. Author
      SvaraSanna

      Jag ser itne så mkt i och med att både bakgrund och entrybox är i vitt, prova att lägga färg på något av det så att man ser vad som händer? 🙂


      1. Author
        Sanna

        Härligt 🙂 För mig blir det boxar nu när jag kollar. Blir det inte det för dig?


    1. Author
      SvaraSanna

      Då får man lägga en margin-bottom: 10px; (valfritt antal px) på entryboxen. Tipsen är inte fullständiga i sina CSS-koder, då jag upptäckte att många då bara kopierar min design rakt av, så man får lägga till det man vill själv i koden 🙂

      1. Tine

        Tack så mycket för hjälpen, det var det jag missa i videon! xD

        Skrev in både
        margin-bottom: 10px;
        och
        border: 1px solid #000000;


    1. Author
      SvaraSanna Preifelt

      Då är det troligtvis så att man glömt en </div>, så prova att lägga in en sådan innan <div id=”side”> 🙂

  2. SvaraCassandra

    Om jag ska sätta dit skugga funkar det men det blir bara skugga uppe och nere, inte runtom hela boxen :3


    1. Author
      SvaraSanna Preifelt

      Du får justera skuggan och testa om den ska ligga längre ifrån eller närmare.

  3. SvaraHennie

    Hej! Koden funkar super och inläggen delas upp på bloggens startsida. Men så fort jag går in på arkivsida/kategorisida så är det bara en ruta runt FÖRSTA inlägget, och menyn hamnar längst ner, under alla inläggen. Jag har skrivit in koden till punkt o pricka i varje kodmall, men det funkar ändå inte.
    Min blogg heter: tvseries.webblogg.se

    JÄTTEtacksam för svar! 🙂

  4. SvaraEllen

    Jag får en skugga runt mellanrummet mellan inläggen istället för kring själva inläggen. Det blir liksom bara skugga längst upp och längst ner på inlägget, så jag antar att det är mellanrummet som fått en skugga istället. Vad har jag gjort tokigt?

  5. SvaraLovisa

    Hej! 🙂 Jag har också problem med min skugga runt om boxarna. Den lägger sig bara uppe och nere och inte på sidorna.
    Jag förstår inte riktigt vad du menar med att man ska justera skuggan och testa om den ska ligga längre ifrån eller närmare?
    Koden jag lagt in är: -webkit-box-shadow: 0px 0px 3px #9b9b9b; -moz-box-shadow:0px 0px 3px #9b9b9b; box-shadow: 0px 0px 3px #9b9b9b; 🙂

  6. Svaraarg flicka

    Asså det går inte jag blir tokig! Har försökt med detta i en vecka men det funkar inte! Jag sätter in allt där det ska vara precis som du gör men det ända som händer är att ett inlägg blir genomskinligt och flyter ut över menyn. Resten av inläggen stannar bara kvar xC

  7. SvaraTwiggy

    Hej! Jag lyckas få boxarna perfekt, bara det att t.ex bilder i mitt inlägg sticker ut lite, ungefär som om jag har för smal bredd för dom, men detta har jag inte ändrat alls. hur gör jag?

  8. SvaraLovisa

    Hej! Jag har lagt in det här på startsidan och inläggssidan och det funkar jättebra! Men jag vet inte vart jag ska lägga koden någonstans i kategori och arkivsidan. Jag har inget som heter content där så jag vet inte hur jag ska göra.

    Kan någon hjälpa mig? 🙂

  9. SvaraLinnéa Olsson

    Går det på något vis att öka mellanrummen mellan inläggen där det inte ligger en annons i mellan? Ser så obalanserat ut 🙁 Vill att det ska vara typ 150px mellanrum mellan varje entrybox men där det ligger en annons är det redan lagom mellanrum. Haha så frusterande!

  10. SvaraCaroline

    Jag har lyckats få till boxar nu och det ser jättebra ut. Men nu går det inte att ändra textstorlek, textfärg mm.. Vad gör jag för fel?
    Provade lägga in allt från Post’s body text till entrybox och då går textfärgen att ändra men om jag ändrar till större text ökas bara radavståndet, jag fattar ingenting

Kommentera

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