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

Ruta runt tid & datum

CSS/Stilmallskod:

.datetime {
background: transparent url('bildurlhär') no-repeat; /* Bakgrunden för rutan, dvs. rutan i sig */
color: #ffffff; /* Färgen på texten i rutan */
float: left; /* Om allt ska vara till vänster eller höger */
margin-left: 20px; /* Hur långt från höger/vänster (ändra till right om du byter float till right) rutan ska vara */
margin-top: -80px; /* Hur långt från toppen rutan ska vara */
font-family: verdana; /* Typsnittet på texten */
font-size: 10px; /* Textstorlek */
height: 60px; /* Höjden på rutan */
width: 88px; /* Bredden på rutan */
padding-top: 15px; /* Hur långt från toppen texten i rutan ska vara */
padding-left: 0px; /* Hur långt från höger/vänster (ändra till right om du byter float till right) texten i rutan ska vara */
text-align: center; /* Om texten ska vara centrerad, vänsterjusterad (left) eller högerjusterad (right) */
margin-bottom: 150px;  /* Hur lång marginal neråt till nästa element det ska vara (kan behövas om man har margin-top och väldigt högt negativt tal) */
}

 

HTML/Kodmallskod:

<div class="datetime">tid- & datum-koden här</div>

 

Skärmavbild 2014-03-14 kl. 17.15.40

 

Från filmen:

Ruta runt tid & datum

Hej hörni.
Idag så tänkte jag att jag skulle visa er hur man gör så att tid och datum är i en ruta. Som ni ser så har jag en liten cirkel här längst ut där mitt tid och datum hamnar. Jag har gjort en kod till er, en stilmallskod som hör ihop med en kodmallskod.

 

Stilmallskoden den klistrar ni bara helt enkelt in i er stilmall, förslagsvis längst ner. Sedan så tar ni kodmallskoden och går in i kodmallen. Ni letar upp h3, nej den vill inte. Då bläddrar vi ner istället. Här har vi h3 och efter h3-koden så lägger ni kodmallskoden så alltså efter /h3. Där det står tid- och datum-koden här där klistrar ni in er tid och datum. Förslagsvis så kan ni gå in på min bloggtipssida, under nya blogg.se eller inläggen så hittar ni lite olika format som ni kan klistra in. Kanske är roligare att ha än blogg.se:s originella eller vad man ska säga, deras format på tid och datum. Så jag tar bara ett här helt enkelt.

 

I vanliga fall så ser ju tid och datum ut som entry date och sedan så är det ett snabel-a och sedan entry time, men jag använder den här koden istället men det gör man som man vill. Tar helt enkelt bort tid- och datum-koden här, alltså den lilla texten och klistrar in den, så. I eran kod så ligger det ingen bild utan bilden får ni göra själva, förslagsvis i Photoshop. Den här bilden är det som jag har gjort. Den koden som är i stilmallen den är kompatibel med just den här bilden och just min blogg. Så ni behöver troligtvis kolla lite, se vad som behöver ändras och sådär. Jag gör som så att jag modifierar min tid-kod litegrann så istället för att ha året där så tar vi bort det och så byter vi rad också så att de hamnar på två rader istället. Så och då blir det så.

 

Som ni ser i stilmallskoden så har jag skrivit lite förklaringar till vad som är vad och vad ni behöver ändra men man kan säga så här att det som ni fokuserar på i den här stilmallskoden det är att klistra in er bild här, att välja färg på texten här, att välja om den ska ligga till vänster eller höger och sedan margin. Väljer ni att lägga den här till höger då får ni ändra margin-left till margin-right istället och sedan är det också margin-top som ni får ändra. Det kan vara ett positivt värde eller så kan det vara ett negativt värde, alltså plus eller minus. Ni väljer vilket typsnitt det är, hur stor texten ska vara. Sedan kommer vi till height och width. Det kan ni helt enkelt göra som så att ni kollar i Photoshop, här är min bild, då kollar jag bara helt enkelt hur stor är min bild. Jo den är 88 pixlar x 60 pixlar och då ställer jag helt enkelt in height på 60 pixlar och width på 88 pixlar. Sedan har vi padding top och left om ni som sagt ändrar float till right istället för left så ändrar ni också padding-left till padding-right.

 

Padding är det som try hur långt in texten ska vara i förhållande till bilden. Margin däremot bestämmer hur långt bort bilden och texten ska vara från top eller left eller right eller vad det nu är. Sedan är det text-align, det betyder om det är, om texten ska vara centrerad eller om den ska vara vänsterjusterad eller högerjusterad, det får man också bestämma själv. Sedan har vi margin-bottom, där har jag lagt 150 pixlar. Det är bara för att det ska vara lite marginal ner till själva inlägget. Men som sagt, ni får testa er fram och se vad som behövs ändras, men troligtvis så är det mest margin och padding och själva utseendet på texten och det tror jag ni har ganska bra koll på själva hur man gör. Kan vara så att man också behöver ändra lite på h3, alltså vart ens, vad heter det, rubrik hamnar någonstans och då bläddrar man alltså ner till h3 och så får man ändra lite där också. Ett förslag är om man till exempel väljer att ha sin bild till höger så som jag har, då har jag lagt en margin-left på min h3 så att den här, alltså min rubrik går inte hela vägen bort så att den täcker den här utan jag har lagt en margin-right, ungefär 100 pixlar så att den slutar här någonstans och börjar på en ny rad i så fall. Ska se ifall vi har ett exempel här, ja där har vi ett exempel som ni ser att då slutar den där och så hoppar den ner ett snäpp istället för jag vill ju inte att min rubrik ska skymma det här borta men man får helt enkelt testa sig fram med margin och padding och sedan får man justera koden också så att den blir kompatibel med ens egen bild som man antingen gör i Photoshop eller så kan man koda den via CSS om man känner att man vill göra det. Det var det jag skulle 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

Kommentera

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

Genom att använda DDB, godkänner du användning av cookies. mer info

Denna sajten använder cookies för bästa användarupplevelsen. Genom att använda sajten accepterar du att cookies används.

OK