Alt har en begynnelse…

Archive for the ‘html/css’ Category

You are currently browsing the archives for the html/css category.

6 mar 2010

Hvordan gjør de det? Roterende header som TheGiant

Først ut skal vi se på hvordan TheGiant ( http://thegiant.blogg.no ) klarer å få til at header bildet som roterer seg. Du kan legge inn så mange bilder du vil, og plassere dem der du vil.

Dette er ikke vanskelig, men du bør vite hvordan du ordner bilder i rett størrelse og ellers ikke være utålmodig så går dette ganske greit.

Først må du finne de bildene du ønsker å bytte mellom. Du trenger ikke å sette inn hele header bildet, bare den delen som skal rotere/bytte på. Bildene kan være så stor eller små du ønsker, men det som er viktig er at de er like store. Så laster du dem opp til http://tinypic.com og noterer ned direkte adressen til bildene ( nederste feltet ).

Når det er gjort går du inn i stilsett filen, helt nederst setter du inn disse linjene, kopier inn alt:

1
2
3
4
5
6
7
8
9
10
11

#photodiv{

background-repeat: no-repeat;

float: right; /* om du vil ha bildet på venstre ( left ) eller høyre ( right ) siden */

height: 269px;  /* hvor høyt er bildene du skal bruke */

left: 10px; /* for å justere bildet, hvis du vil ha det mer til venstre så bruker du feks -10px */

position: relative;

overflow: hiden;

top: 10px;  /* lenger ned eller opp, kan bruke - ( minus ) for å flytte den lenger opp også */

width: 309px; /* hvor bredd bildene er */

}

Alt er beskrevet i koden over, når du etter på ser at bildene blir forlangt til høyre må du forandre til feks left: 20px; Dette er noe du bare må prøve deg frem til senere.

Da skal vi sette inn koden i male. Dette må gjøres i alle malene, men vi gjør det først i forside malen og tilpasser koden der før du kopiere dem over til de andre malene.

Gå inn i malen og finn denne linjen:

</head> IKKE <head> men </head> Selv om det er bare et tegn i forskjell gjør det stor forskjell. Over linjen </head> limer du inn denne koden, nok en gang, alt skal inn:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

<script type="text/javascript"><!--

//

// CSS Photo Shuffler v1.0 by

// Carl Camera

// http://iamacamera.org

//

// SetOpacity Function and inpiration from Photo Fade by

// Richard Rutter

// http://clagnut.com

//

// License: Creative Commons Attribution 2.5 License

// http://creativecommons.org/licenses/by/2.5/

//

// Customize your photo shuffle settings

//

// * Surround the target &lt;img /&gt; with a &lt;div&gt;. specify id= in both

// * set background-repeat:no-repeat in CSS for the div

// * The first and final photo displayed is in the html &lt;img&gt; tag

// * The array contains paths to photos you want in the rotation.

// If you want the first photo in the rotation, then it's best to

// put it as the final array image. All photos must be same dimension

// * The rotations variable specifies how many times to repeat array.

// images. zero is a valid rotation value.

var gblPhotoShufflerDivId = "photodiv";

var gblPhotoShufflerImgId = "photoimg";

// her legger du inn bildene, husk at hver bilde adresse må være inni "

//det skal også være et komma mellom hver bilde adresse.

//UNTATT på siste bildet der skal ikke være noe komme etter

// du kan plassere så mange bilder du ønsker her.

var gblImg = new Array(

"http://i48.tinypic.com/2n9j91c.jpg",

"http://i46.tinypic.com/6p9m3p.jpg",

"http://i48.tinypic.com/14ie4o2.jpg"

);

var gblPauseSeconds = 15.25;  // hvor lenge hvert bilde skal være fremme

var gblFadeSeconds = .85; // hvor lang tid overgangen fra ett bilde til et annet skal være

var gblRotations = 9999; // hvor mange ganger bildene skal vises

//under her skal de ikke gjøres noe forandringer

// End Customization section

var gblDeckSize = gblImg.length;

var gblOpacity = 100;

var gblOnDeck = 0;

var gblStartImg;

var gblImageRotations = gblDeckSize * (gblRotations+1);

window.onload = photoShufflerLaunch;

function photoShufflerLaunch()

{

var theimg = document.getElementById(gblPhotoShufflerImgId);

gblStartImg = theimg.src; // save away to show as final image

document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';

setTimeout("photoShufflerFade()",gblPauseSeconds*1000);

}

function photoShufflerFade()

{

var theimg = document.getElementById(gblPhotoShufflerImgId);

// determine delta based on number of fade seconds

// the slower the fade the more increments needed

var fadeDelta = 100 / (30 * gblFadeSeconds);

// fade top out to reveal bottom image

if (gblOpacity &lt; 2*fadeDelta )

{

gblOpacity = 100;

// stop the rotation if we're done

if (gblImageRotations &lt; 1) return;

photoShufflerShuffle();

// pause before next fade

setTimeout("photoShufflerFade()",gblPauseSeconds*1000);

}

else

{

gblOpacity -= fadeDelta;

setOpacity(theimg,gblOpacity);

setTimeout("photoShufflerFade()",30); // 1/30th of a second

}

}

function photoShufflerShuffle()

{

var thediv = document.getElementById(gblPhotoShufflerDivId);

var theimg = document.getElementById(gblPhotoShufflerImgId);

// copy div background-image to img.src

theimg.src = gblImg[gblOnDeck];

// set img opacity to 100

setOpacity(theimg,100);

// shuffle the deck

gblOnDeck = ++gblOnDeck % gblDeckSize;

// decrement rotation counter

if ( gblImageRotations &lt; 1)

{

// insert start/final image if we're done

gblImg[gblOnDeck] = gblStartImg;

}

// slide next image underneath

thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';

}

function setOpacity(obj, opacity) {

opacity = (opacity == 100)?99.999:opacity;

// IE/Win

obj.style.filter = "alpha(opacity:"+opacity+")";

// Safari&lt;1.2, Konqueror

obj.style.KHTMLOpacity = opacity/100;

// Older Mozilla and Firefox

obj.style.MozOpacity = opacity/100;

// Safari 1.2, newer Firefox and Mozilla, CSS3

obj.style.opacity = opacity/100;

}

// --></script>

Har skrevet inn forklaringer i koden hvor du skal gjøre de forskjellige tingene, har langt inn 3 bilder, disse er bare å bytte ut. Men det kan kanskje være lurt å la disse stå her enda. Slik at du ser om du har fått tid til å virke.

Så går vi litt lenger ned i malen, finn linjen:

Under denne limer du inn denne koden:

1	<div id="photodiv"><img id="photoimg" src="http://i48.tinypic.com/14ie4o2.jpg" alt="" /></div>

Da er det bare å forhåndsvise og se om alt virker. Hvis det virker så kan du sett inn dine egne bilder.

Husk også å justere høyden og bredden i stilsett filen, slik at de passer til bildene du bruker. Hvis bildene ikke kommer på rett plass, lagrer du, gå inn i stilsettfilen og juster hvor bildene skal komme opp i den kodebiten du satt inn der. I tillegg til å legge inn bildene i den delen som ble lagr inn over </head> linjen så skal du sette inn en bilde adresse i delen som ble plasser under <div id=”doc2″> også, bytt ut med den som alt er der.

Skal være godt forklaring, hvis det er noe du lurer på så er det bare å spørre.

Slik gjorde de det. Spørsmål eller kommentarer er selvfølgelig velkommen
Fikk du det til?

6 mars, 2010 at 12:07 by Tronds

Posted in Design, Hvordan gjør de det?, html/css | 7 Comments »

4 mar 2010

Design: Meny “fane”

Vanskelighets grad: Enkelt.

Da prøver vi oss på en meny til, det er stort sett noe alle ønsker.

Denne gangen her skal vi prøv å få til en slik meny. OG NEI det er ikke så vanskelig som du tror

Passer ikke farge valget ? ikke noe problem du går nemlig inn på denne siden http://www.tabsgenerator.com/ og lager dine egne knapper, er gjort på 1-2-3. Last ned bildene til datamaskinen din, og last dem opp igjen på http://tinypic.com og laster det opp. Kopier ut adressen til bildet for det trenger du etter på.

Når jeg sier “bildene” så holder det med et bilde ( en knapp ) men hvis du feks vil at den skal skifte farge når du holder musen over må du lage to bilder.

Først går vi inn i stilsettfilen, helt nederst i den setter vi inn koden under. Ta med deg alt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

.tsmenyfane{

float: left;

width: 100%;

margin-top: 20px; /* vi lagger et lite mellomrom opp til header, ser finere ut da */

margin-left: 10px; /* denne flytter menyen litt lenger inn på siden, litt forskjellig fra mal til mal */

background: transparent;  /* sett denne til en fargekode hvis du vil  ha en annen farge enn bakgrunnen på bloggen */

}

.tsmenyfane a {

display: block; /* denne må du ikke røre ;) */

padding-left: 10px; /* justerer teksen lenger mot høyre */

width: 130px; /* bredden på bildet du bruker som bakgrunn MINUS   hvorlangt du velger å flytte inn teksten på linjen over */

padding-top: 10px; /* justerer teksten lenger ned */

height: 30px; /* høyden på bildet du bruker som bakgrunn MINUS   hvorlangt du velger å  flytte ned teksten på linjen over */

background: url( http://i46.tinypic.com/2s68shf.png ); /* "knapp" bildet  */

font-size: 20px; /* størrelsen på fonten */

color: #000; /* fargen på teksen */

margin-right: 10px; /* hvor stor avstand du skal ha mellom knappene */

float: left;

text-decoration: none; /* sier bare at det ikke skal være linje under linken */

}

/* delen under forandrer bildet når du holder musen over, hvis du  ikke ønsker dette så fjern denne delen */

.tsmenyfane a:hover, .tsmenyfane .preload{

background: url( http://i49.tinypic.com/35a3thj.png ) no-repeat; /*  knappen forandrer seg til denne når du holder musen over */

}

Du ser at det er to forskjellige adresser til tinypic.com i koden over. Den første er til bildet som skal vises i menyen, det andre er til hvordan knappen skal se ut når noen plassere musen over. Sett inn linkene til de knappene du har fikset selv. Koden over passer til knapper som er 40 høy og 140 bredd, har du andre størrelser på knappene må du tilpasse koden over. Er ganske greit forklart så det skulle ikke være noe problem.

Lagre. Du skal ikke se noe forskjell på siden enda, hvis du gjøre det så har du gjort noe feil! Tilbake still designet og prøv igjen.

Når det er gjort så skal vi putte inn litt kode i malen . Det første du må gjøre er å finne linjen:

Over den linjen limer du inn koden som står under her:

1
2
3
4
5
6
7

<!-- Meny start -->

<div class="tsmenyfane">

<a href="/">Forside</a>

<a href="LINKEN">NAVN</a></div>

<!-- Meny slutt-->

Lim inn alt. På linjen som det står LINKEN på kan du kopiere opp så mange ganger du vil, LINKEN byttes ut med adressen til innlegge/kategorien som du vil skal komme opp når noen trykker på NAVN. NAVN byttes ut med navnet du vil ha på knappen.

Trykk på forhåndsvisning.
Hvis du er fornøyd så lagrer du. For at menylinjen skal vises heletiden må den siste delen også limes inn i malene “innlegg”, “kategori” og “Arkiv”. Da tar du bare koden som du nettopp limte inn i malen og kopierer den inn i de andre.
Hvis det er noe du ønsker å forandre på å så se på linjene i stilsettet, har skrevet forklaringer på alle linjene. Noe du ikke får til å legg igjen en melding her så skal jeg sjekke det ut.

Lykke til

4 mars, 2010 at 4:20 by Tronds

Posted in Design, Meny, html/css | 5 Comments »

5 feb 2010

10 punkt til et bedre design

Hvordan et design skal se ut er vel en smakssak, noen synes det skal være mange farger andre liker enkle design uten noe farger. Dette er det jeg synes skal være med på en design. Du har selvfølgelig dine meninger, hvis du er uenig eller enig med meg på noen punkt så legg igjen en kommentar.

1. Luft, noe vi alle trenger

Et design uten luft blir rotete og uoversiktlig. Gi det litt mer “tomrom” og det vil med en gang bli mer oversiktlig. Få et lite mellomrom mellom innleggsdelen og sidemenyen, ikke la teksten komme helt inntil hverandre.

Få litt “luft” mellom headern og toppen på siden. Ville du ha hengt opp et bilde helt oppi taket? Litt “luft” mellom headern og innleggsdelen er også greit å ha.

Flytt også bort fra rammer, bakgrunnsfarger og alle andre ting som gjør at det blir vanskelig å lese.

2. Headeren kan nå aldri bli for stor?

Jo så absolutt, ingen liker å måtte bla seg nedover en hel side for å komme ned til teksten. En header skal være samme bredde som bloggen og ikke mer enn 250px høy.

Fjern den skriften som blogg.no legger inn. Og aldri, jeg gjentar ALDRI la headeren gjenta seg selv bortover eller nedover. Fiks en som er stor nok til å dekke hele.

3. Valg av skrift

Ikke bruk alt for mange font/skrift typer på bloggen. 2-3 er mer enn nok. Hvis du velger å bruke en font/skrift type som ikke er vanlig så er det ikke sikkert den som er inne på siden din har den installert, da vil det bare bli vist en standard font/skrift type i stede for den du har valgt ut.

4. La oss ramme inn ting.

Jo, det er noe jeg kan like. Fargevalget er viktig her også, i stede for å gå får den standard svarte rammen velg heler en som er litt mørkere enn fargen inni boksen, de gir alt en litt mer 3D look. Jeg sier ikke at det skal være rammer alle plass, men rammer/sterker er grei å ha når du skal skille ting fra hverandre.

5. Fargevalg er like viktig som innholdet

Noen ganger prøvd å lese et ett innlegg som er skrever på svart bakgrunn med mørk grå skrift? Eller gul bakgrunn med rosa skrift? Det har jeg, noen ganger må jeg vil og med merke teksten før jeg klarer å lese hva som står det. Når du velger farge så tenk litt over at folk skal lese dette, hvis det blir for vanskelig å lese vil gjerne folk ikke ta seg tiden til å lese. Tenk også at å ha en bakgrunn bak innlegget ser kanskje fint ut for deg, men andre vil ha problem med å lese det.

Farge valget på bloggen skal også gjenspeile fargene som er i headern. Alt skal passe sammen, akkurat dette har jeg problemer med også. Heldigvis finnes det hjelp å få, LINK og LINK er to siden jeg bruker ganske mye for å finne fager som passer sammen.

6. Lenker skal vises.

Noen websider jeg er innpå så er det vanskelig å si hva som er en lenke eller hva som ikke er en lenke. En lenke skal ha en annen utforming enn teksten den står i, feks understreking, litt annen farge eller noe annet som skiller den ut fra resten av teksten. Linker kan også forandre seg litt når du tar pilen over.

Det skal også være helt unødvendig å skrive, “trykk HER for å komme til siden hans” bruk heler noe slik: “Var innom VG ( www.vg.no ) i dag å leste en god artikkel “ med lenke på adressen og “VG”.

7. Profile bilde skal være så lite at du ikke ser de engang. NOT!

Standard profilbildet som er på blogg.no er ikke tilpasset designet. Det er alt for lite og forsvinner igrunn. La det vokse, gjør det nesten like bredd som “sidemenyen” slik at de kommer til sin rett.

8. Bredd blogg er jo best?

Ikke alltid, kommer litt ann på hva du skal blogge om, om du legger ut store bilder eller ikke. Skriver du bare noen linjer uten stort bilde så er det ikke nødvendig med bredd blogg. Det blir sende så “tomt” ut hvis du har en blogg på 950px også skriver du bare noen linjer. Gjør den mindre, da vil teksten komme på flere linjer og det er ut som om du skriver mye mer.

Hvis du vil ha stor plass til innleggene, men du vil også ha en smalere blogg. så er det fortsatt mulighet å korte litt ned på bredden på bloggen. Du bare gjør sidemenyen litt mindre, beholder størrelsen på innleggsdelen. Da vil bloggen bli mindre.

En annen mulighet er å kutte ut sidemenyen helt eller flytte den over innleggende.

9. Meny under headern

Dette gjør at du har mulighet til å legge inn en del linker som folk ønsker å se på, feks “Om meg”, “Bloggen” osv.

10. Gjør den personlig

La den bli din, ikke bruk en som 10000 andre også bruker. Gjør noe for at den skal bli din og bare din. Når noen kommer på bloggen din så skal de tenke “Ah, en slik person hun/han er”. Da vet du at den er perfekt.

Det var det jeg hadde å si om design for denne gangen, noen vil være enig andre ikke. Hvis du føler at bloggen din trenger en “oppussing” og du ikke vet helt hvordan du skal få det til, så er det bare å spørre. Jeg har også laget en OSS ( Ofte Stilte Spørsmål ) som ligger du finner under “Designhjelp” i menyen. Jeg prøver å legge inn det jeg blir spørrer om, men det er ikke alle spørsmålene jeg kan legge inn da mange har litt forskjellige utgangspunkt i maler.

Hvordan synes du et perfekt design skal være ?

5 februar, 2010 at 22:14 by Tronds

Tags: Design
Posted in Design forbedringer, Tanker, blogg.no, html/css | 8 Comments »

9 sept 2009

Du ønsker?

Her kan du spørre spørsmål om html/css og jeg vil svare deg så godt jeg kan.

Jeg svarer på din blogg og jeg ordner kanskje et innlegg her hvis det er noe flere kan komme til å lure på.

Hva ønsker du?

( Jeg svarer på alle spørsmålene jeg får )

9 september, 2009 at 16:31 by Tronds

Posted in Design, Nerding, html/css | 81 Comments »