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

Panoramaheader – bred header till blogg

Om du vill veta hur man designar responsivt för att det ska se lika bra ut på alla enheter, så ska du kolla på denna film!

Det första du börjar med att göra det är att du lägger headern utanför wrappern, annars så kommer det här inte fungera. Du flyttar alltså ditt headerstycket i kodmallarna till ovanför wrappern. Se bild nedan.

Skärmavbild 2014-10-29 kl. 13.36.10

Det du gör därefter är att du går in i din stilmall och scrollar till #header och där ska du se till att det står något sådant här efter background (alltså som värde).

background: url(dinbildhär) no-repeat center center fixed; 

Det viktiga i ovan kod är att du har no-repeat om du inte vill att bilden ska upprepas, center center kan bytas mot till exempel top center, top left, center left – ja, ni fattar säkert, men se även till att den är fixed.

Under detta, men fortfarande i deklarationen för #header, lägger du till följande:

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

Sedan är det färdigt, bortsett från modifiering! Det du kan behöva göra är som sagt att justera positionen på din header, så att den ligger där du vill ha den, och även höjden (height). Du måste också se till att din bild är såpass stor att den kan täcka hela sidan för alla enheter (den här koden är inte responsiv, så antingen får du göra ett responsivt avsnitt som visar hur det ska se ut i surfplatta eller mobil, eller så kommer din header synas lite grann i en surfplatta/mobil, det är upp till dig helt enkelt!) och därmed kan du inte ladda upp den på blogg.se till exempel, då de bara tillåter bilder som är max 1000px breda för att undvika stora uppladdningar. Tips är att ladda upp på till exempel Tumblr eller Tinypic.

Transkribering av film:

Hur du gör en panoramaheader

Hej allihopa.

Idag så hade jag fått en liten fråga från en tjej om inte jag kunde visa, eller om vi här på Designa din Blogg kunde visa hur man gör en panoramaheader. En panoramaheader är en bred header som sträcker sig över hela sidan och då så väljer man inte att sätta en specifik bredd på den utan den visar över hela sidan på alla bloggar, eller på alla skärmar.

Det enda man behöver tänka på det är att man har en bild som täcker hela sidan för den stretchas inte ut och blir större än vad den är. Det betyder också att man måste ladda upp den på en annan hosting-site än blogg.se igenom att deras största format på bilder är 1000 pixlar i bredd men vi behöver ju kanske 2000 pixlar för riktigt, riktigt stora skärmar och då om man inte tycker att det blir bra liksom att ha en sådan stor bild så får man använda Media Queries som jag kan länka nedanför denna filmen, men vi går inte igenom det här utan det går vi igenom i den filmen där och då får man liksom anpassa headern utefter hur, hur stor skärmen är så att om man till exempel har en mobilskärm så kör man på bredden 480 pixlar istället för kanske 2000 pixlar som man kör på en full screen.

Men det lär man sig mer om i den responsiva filmen så att är man väldigt mån om att det ska se bra ut på alla skärmar så är det den responsiva filmen som man ska kolla på. Men i alla fall nu ska jag förklara hur man gör en panoramaheader och det är faktiskt väldigt enkelt om jag får säga det själv. Då är det som så att man går in i stilmallen och i stilmallen så lägger man in, ska vi se så får jag logga in här för Chrome är väldigt långsamt när jag spelar in film, i vilket fall ska vi göra detta på testblogg så vi kör på den. Nu är det som så att jag har redan lagt in detta för att jag var tvungen att testa först att det fungerar. Men som ni ser så täcker inte den här bilden hela sidan och det är det som jag tänkte att vi skulle fixa då. Så jag visar här lite snabbt igen att ni ser att den går bara hela vägen ut hit men vi vill liksom att den ska gå kant till kant här utan att vi har som sagt en specifik pixel, ett specifikt pixel antal.

Det är som sagt lite enkel css men det man börjar med det är att man letar upp div id header, den brukar ligga under wrapper och så tar man div id header och /div som är under, klipper man ut det och lägger det ovanför wrapper för annars så kommer headern bara att finnas inom wrapper och en wrapper då är satt till kanske 1000 pixlar, då kan inte den här oavsett css:en bli större än 1000 pixlar. Men vi vill ju att den ska täcka hela sidan alltså hela body på bredden och därför så lägger vi den direkt efter body om man nu inte har någon, om man inte har någon meny eller någonting som är tidigare eller sådär, men det bästa är att lägga den efter body och så lägger man menyn i så fall efter wrapper och så får man liksom justera menyn i fall det är så att menyn hoppar ner. Så, så sparar vi där och sen så går man in i stilmallen och bläddrar ner till header och då har vi ju en background där och jag brukar lägga transparant på bakgrunden och sen så lägger man in sin bild och nu har ju jag lagt en bild som är för liten och då gör jag som så att jag bara laddar upp en riktigt stor bild så att ni får se liksom vad det är, vad det är man gör. Och så får ni själva liksom matcha in bilden och så där. Men det bästa är ju att ta en bild som, som är stor och sen så använda Media Queries för att göra det responsivt så att det ser bra ut på alla skärmar. Så jag tar en stor bild här och så ska vi fylla i lite Captcha och det är lite pop-ups och grejer. Då ska vi se. Och sedan efter där som ni ser, nedan i koderna så är det no repeat och det är alltså om man inte vill att bilden ska upprepa sig. Sen är det center center men jag har valt att sätta top center istället och det betyder att den lägger sig kant i kant med toppen men den lägger sig också i mitten. Här kan man till exempel lägga left center och då lägger den sig längst till vänster. Man kan även lägga right center men i och med att detta är en, en header som ska ligga i mitten fast högst upp kant i kant. Eller jag tror att det är det som folk vill annars så kan man ju lägga left center eller så lägger man center center det betyder man, det gör man som man vill.

Sen så har man en fixed där också så det är no repeat, left center, fixed eller no repeat, center center, fixed. Det bestämmer man själv. Och sedan så får man justera heighten så att den är så pass stor som man vill ha och så ser man till att man inte har någon bredd på den här utan det sköter vi med ett annat css avsnitt. Då ska vi se hur det går med min bild. Där var den, så då tar vi den och så klistrar vi in den här. Så. Spara. Då ska vi se hur det blev. Problemet när man har en, en stor bild det är ju att den tar lång tid att tanka, men det får man ju liksom överväga själv hur stor bild man vill ha då. Man kan ju till exempel spara den i ett format som inte tar så stor plats som jpeg eller så. Och så får man ju justera den här och klippa och klistra och göra den högre eller mindre eller vad man vill. Jag kanske vill ha den på 463 istället för 363 och sen så tar man också det andra stycket som är här nedanför där det är background size cover och då är det också webkit moz o och det betyder att det här fungerar för det här är ny css, det är ju css 3 och då behöver man också visa att det ska fungera i Internet Explorer och Mozilla Firefox och så Chrome och att allting fungerar där också. Så att ni tar hela den här och så klistrar ni in den någonstans under header. Det spelar ingen roll om det är högst upp eller om det är längst ner bara det är inom klamrarna liksom. Då ska vi se om den blev lite större här. Då ser ni, då blev den lite större där. Det var kort och gott det vi hade att visa idag, så får ni ha en fortsatt trevlig dag. 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.