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.

Skribent och ansvarig för DDB. Driver Designa din blogg sedan juni 2015. Har bland annat studerat webbdesign, marknadsföring och online strategier både i Sverige och USA. Jobbar inom IT.

Läs mina andra inlägg

Lämna ett svar

Din e-postadress kommer inte publiceras.