Hovedforløb 2 - Grafisk Workflow

PrÌsentationsportfolio for Hovedforløb 2

Hjemmeside til Jelly Belly Danmark

Opgaven Jeg skal lave en ny og mere nutidig hjemmeside til Jelly Belly Danmark. Jelly Belly er nogle amerikanske slikbønner som er populære i hele verden. Dette er en selvvalgt opgave og jeg har derfor meget frie hænder.

Se hjemmesiden på: jellybelly.danweb.com

Arbejdsgang Indhold og udseende af hjemmesiden planlægges.

Udfra storyboard og skelet med pixelmål, udarbejdes hjemmesiden i programmet Dreamweaver CS5. Indexsiden har et unikt udseende, men alle andre indholdssider har samme grundopbygning og laves derfor med en Template. I Dreamweaver arbejder jeg med Classic arbejdsbord og har det splittet op, så jeg har både Code og Design imens jeg arbejder.

Herefter uploader jeg alt html, php, css, og jQuery til Joomla (cms-program), hvor det tilpasses, så det bliver nemt at redigere fremover, både for mig og for kunden selv.

Jeg tjekker løbende i de forskellige browsere hvordan hjemmesiden ser ud, så jeg er sikker på, at det ser ordentligt ud.

Procesbeskrivelse - Planlægning og inspirationssøgning - Hjemmesidens struktur laves med flowchart.

- Valg af layout, komposition og modulopbygning.

- Hjemmesidens udseende og opbygning laves med Storyboard og Skelet (alle pixelmål fastsættes).

- Kodning og opbygning af hjemmesiden i Dreamweaver.

- Forbindelse til danweb.com’s ftp server.

- Upload til jellybelly.daweb.com (uofficiel arbejdsside) og tilpasning til Joomla.

- Korrekturlæsning - tekst, billeder, navigation, knapper mm.

- Publicering til jellybelly.danweb.com

Test i forskellige browsere (Usability) Det er vigtigt at teste hjemmesiden i de forskellige browsere der findes, for at sikre sig, at alle brugere, kan anvende hjemmesiden, uanset hviklen browser de har.

- Testet i Firefox, Safari, Internet Explorer, Google Crome: virker i alle browsere.

Kvalitetsvurdering Produktionen og arbejdsprocessen af hjemmesiden er gået godt. Det blev planlagt godt fra starten, med flowchart, layout, storyboard og skelet, så det forløb planmæssigt. Hjemmesiden er blevet lavet, så den er nem, flot og enkel at navigere rundt i. Den er optimeret med meta beskrivelser og metanøgleord.

Desværre har kunden ikke taget hjemmesiden i brug, fordi de overvejer at stoppe som den danske leverandør af Jelly Belly. Men de syntes at den er rigtig flot og meget bedre end den gamle side. (www.jellybelly.dk).

Inspirationssøgning Jelly Belly hjemmesider fra andre lande:

jellybelly.com Den originale side er fyldt med mange elementer og er ikke helt nem at få overblik over, når man besøger siden første gang. Dog er det hovedinspirationen hvor man kan være sikker på at få det nyeste inden for Jelly Belly

jellybelly.de Sjove små ikoner. Sjov idé at det hele er Jelly Belly formet.

Kan dog godt skræmme nogle brugere, som ikke vil kunne finde rundt i JB universet.

jellybelly.com.au God bannerstørrelse, også slideshow. Meget enkel side.

jellybelly-uk.com Fungerer godt med et stort slideshow banner i toppen, men er meget dominerende i forhold til de andre elementer.

jellybelly.cl Denne opbygning og baggrund er brugt på flere JB sider fra forskellige lande. Det fungerer fint men er lidt kedeligt at se på. Menuen er stor og virker lidt klodset.

jellybelly.se Skiller sig meget ud fra andre JB sider og skaber en form for “ny” identitet for JB. Har en anden version af logo og der er skruet helt op for den røde farve, hvor andre JB sider er mere blålige og forskelligfarvede. Skiller sig for meget ud.

zapsweets.co.uk Sjov idé med toppen!

wondermade.com God opbygning med logo placeret centralt.

Andre slik-hjemmesider:

jellybelly-uk.com Fungerer godt med et stort slideshow banner i toppen, men er meget dominerende i forhold til de andre elementer.

darrelllea.com Den udstråler sin helt egen stil og er ikke til at tage fejl af.

Man kommer nærmest på en rejse med produktet.

Mindmap om Jelly Belly

PP]

&I ] P P .I

wonka.com En meget eventyrlig hjemmeside med amerikansk slik. Får tankerne og fantasien i gang.

PP] NIPP] FI PH G]OIPLS

WNS Z IZIRXW

JIWX

OYRW X

LMW XSVMI

^

IPMX JEQ KS

PWI

STVMRHI

MW E KVERR

WHEK OMR J¢H WIP

Z W S

T FV ]PPY XYVMWQI

RWO

E EQIVMO

TV¡WMHIRX

LIPI ZIVHIR

SH VX LS PP][S TSTYP¡

V W XNIVRI EVX

ER NIPP] FI

KS MREP K M V XLI S FIER

NIPP]

SQXEPI SK TSTYPEVMXIX

YV Q

IX

Idéudvikling Flowchart - Struktur på nuværende hjemmeside: jellybelly.dk

Smag og menu

Sjove sager

smagsvarianter

klog for sjov

cykelhold

menuer

art galleri

nye varianter

månedens menu

historie

festmenuer

Forside

bestil jelly belly

Om Jelly Belly

Produkter

familien goelitz

Kontrolrapport

Forhandlere

Presse

Kontakt

presseklip

bliv forhandler

jens & co.

produkter

smag og menu

sjov og ballade

Flowchart - Struktur på kommende hjemmeside: jellybelly.dk

Om Jelly Belly

Smag og menu

Sjove sager

familien goelitz

smagsvarianter

klog for sjov

Forhandlere

menuer

menuer

art galleri

Bliv forhandler

sjov og ballade

månedens menu

bestil jelly belly

festmenuer

Forside

nye varianter

historie

cykelhold

Produkter

Presse

Kontakt

jens & co.

Idéudvikling Layout - håndskitser

den

Layout til forsi



ld

Layout til indho

Med inspiration fra de andre hjemmesider laves nyt design.

Håndtegnede skitser med de første ideer til layout.

De skitser som er markerede √, er dem der hovedsageligt er brugt til videreudviklingen af det endelige layout. ld

Layout til indho

ld

Layout til indho

ld

Layout til indho

Layout til indho

Layout til indho

Layout til indho

ld

ld

ld



Idéudvikling Layout - forside Med layout fra håndskitserne laves et grafisk layout

Layout - Indholdssider Indholdssiderne skal være ens, i opbygning for at skabe sammenhæng og dynamik i hele siden.

100

10

10

10

38

2

10

30

30

245

245 x 200

165 x 159

variabel x 30

2

15

variabel x 30

15

2

657 x variabel

variabel x 30

980 x 335

980 x 45

980 x 315

variabel x 30

980 x 255

40

variabel x 30

30

233

Sidebar tekst - 18pt

Sidebar tekst - 18pt

variabel x 30

30

variabel x 30

30

12

135

10

12

135

10

30

100

10

10

10

10

38

6

10

30

30 5

variabel x 30

293 x 61

293 x 180

293 x 61

293 x 180

2 variabel x 30

5 20 5

2 variabel x 30

980 x 389

293 x 61

293 x 180

293 x 61

293 x 180

980 x 45

980 x 315

293 x 137

variabel x 30

5 20 5

variabel x 30

293 x 61

293 x 180

293 x 61

293 x 180

variabel x 30

5 30

Idéudvikling

Skelet - forside

Definition af alle pixelmål på forsiden

Skelet - Indhold

Definition af alle pixelmål på infholdssiderne

Idéudvikling Storyboard Oversigt over indholdet på hver enkelt side

Forsiden Forsiden

jelly_belly_logo.png

oardet

Vejledning til at forstå storyb

FORSIDE

(heading 1) er h1 overskrifter Alt tekst markeret med rød

OM JELLY BELLY

SMAG OG MENU

SJOVE SAGER

PRODUKTER

PRESSE

KONTAKT

BANNER slide_cykelhold.jpg slide_produkter.jpg slide_kinagrannis.jpg slide_menuer.jpg slide_historie.jpg slide_art.jpg

(heading 2) er h2 overskrifter Alt tekst markeret med grøn

BANNERTEKST

(paragraph) er p brødtekst Alt tekst markeret med blå

front_varianter.jpg

ng til hvor man Dette symbol er en henvisni billeder til den kan finde alt tekstindhold og pågældende side.



hold til det Storyboardet kan variere i for rettesnor til en endelige resultat. Det er en rmigt og stabilt stabil arbejdsgang og et ensfo udtryk på alle siderne.

front_menu.jpg

Nye varianter: mere farve mere sjov

front_sjov.jpg

Sammensæt din egen Jelly Belly bean menu

front_netshop.jpg

Sjov og ballade med Jelly Beans

front_historie.jpg

Bestil Jelly Belly på netshoppen (p)

front_cykel.jpg

Læs om Jelly Belly’s historie her (p)

Føl Jelly Belly’s eget cykelhold (p)

FOOTER: FACEBOOK - facebook plug in KONTAKTOPLYSNINGER: Jens & Co Aps · Virkelyst 2-4, Gjellerup, 7400 Herning · Tel. 9627 6066 · Fax 9627 6061 (p) footer_bg.png

Om Jelly Belly  Tekst fra gamle/ nuværende side: http://jellybelly.dk/om-jelly-belly

Smag og menu  http://jellybelly.dk/smag-og-menu

jb_logo.jpg

FORSIDE

OM JELLY BELLY

SMAG OG MENU

SJOVE SAGER

jb_logo.jpg

PRODUKTER

PRESSE

KONTAKT

FORSIDE

OM JELLY BELLY

SMAG OG MENU

SJOVE SAGER

PRODUKTER

BANNER

BANNER

slide_om.jpg

slide_smagsvarianter.jpg

FØDT SAMMEN MED STJERNERNE

Produkter

SMAG DIG FREM TIL DIN FAVORIT

Produkter

side_produkter.png

Om Jelly Belly

PRESSE

side_produkter.jpg

Smagsvarianter

Jelly Belly kommer til verden Jelly Belly er navnet på de verdensberømte jelly beans. De er amerikanere, udviklet og født side om side med skuespillere og stjerner i Los Angeles et stenkast fra Hollywood. Jelly Belly kom til verden i 1976 - det samme år som Liz Taylor indgik sit syvende ægteskab. En begivenhed, som skabte tilskuere, men ikke desto mindre tiltrak en talentfuld amerikansk slikdistributør sig mere opmærksomhed dette år, da han sammen med slikproducenten Goelitz, præsenterede verden for Jelly Belly beans.

Jelly Bean Art

Jelly Belly beans er ikke som de andre, men er derimod noget for sig selv. Og lige sådan skal du spise dem – hver for sig selv og en ad gangen. Smag og behag er individuelt, så det bestemmer du selvfølgelig selv. Men hvis du spiser én ad gangen, får du bedst den ægte Jelly Belly smag frem.

side_side_jb_art.png

blaabaer.jpg

Individuel smag

Jelly Bean Art side_side_jb_art.png

Original tyggegummi.jpg

popcorn.jpg

netmelon.jpg

cappucino.jpg

individuel_smag1.jpg

Opskrifter opskrifter.png

Fra den spæde begyndelse blev otte smagsvarianter sendt på markedet: kirsebær, citron lime, vanille soda, grøn æble, root beer, vindrue, lakrids og mandarin. Alle med hver sin individuelle og helt naturlige smag. I dag er der mere end 50 smagsvarianter, men de otte oprindelige er stadigt de mest populære Jelly Belly beans. (p) individuel_smag2.jpg

Kontrolrapport

Blåbær

Tyggegummi

Popcorn

Netmelon

Cappucino

blaabaer.jpg

tyggegummi.jpg

popcorn.jpg

netmelon.jpg

cappucino.jpg

Blåbær

Tyggegummi

Popcorn

Netmelon

Cappucino

tyggegummi.jpg

popcorn.jpg

netmelon.jpg

cappucino.jpg

Sours blaabaer.jpg

side_kontrol.png

Opskrifter opskrifter.png

Kontrolrapport side_kontrol.jpg

Blåbær

Tyggegummi

Popcorn

Netmelon

Cappucino

Osv.

FOOTER: FACEBOOK - facebook plug in KONTAKTOPLYSNINGER: Jens & Co Aps · Virkelyst 2-4, Gjellerup, 7400 Herning · Tel. 9627 6066 · Fax 9627 6061

FOOTER: FACEBOOK - facebook plug in KONTAKTOPLYSNINGER: Jens & Co Aps · Virkelyst 2-4, Gjellerup, 7400 Herning · Tel. 9627 6066 · Fax 9627 6061

footer_bg.png

footer_bg.png

KONTAKT

Idéudvikling Storyboard Oversigt over indholdet på hver enkelt side Produkter  http://jellybelly.dk/produkter

Sjove sager Ny side med nyt indhold

jb_logo.jpg

jb_logo.jpg

FORSIDE

OM JELLY BELLY

SMAG OG MENU

SJOVE SAGER

PRODUKTER

PRESSE

KONTAKT

FORSIDE

OM JELLY BELLY

SMAG OG MENU

SJOVE SAGER

BANNER

BANNER

slide_klog.jpg

slide_produkter.jpg

KINA GRANNIS - "IN YOUR ARMS"

PRODUKTER

EN VERDEN AF JELLY BELLY BEANS

Produkter

PRESSE

Produkter

side_produkter.jpg

side_produkter.jpg

Produkter

Sjove sager Se musikvideoen med Kina Grannis, "In your arms":

På denne side præsenterer vi dig for en verden af Jelly Belly beans, hvor du finder alt lige fra assorterede poser til gaveæsker med forskellige smagsvarianter samt sjovt merchandise. Der kommer løbende nye smagsvarianter og spændende produkter, som du finder her på siden.

Jelly Bean Art side_side_jb_art.png

Youtube film med Kina Grannis: http://www.youtube.com/watch?v=IOu0DuxFAT0&feature=player_embedded

side_side_jb_art.png

Opskrifter opskrifter.png

pinterest.jpg

Heading 2 Paragraph. Sam, sit, quatam am, nim esequodiae omnis acilique eturi dionsequia si quaero officient qui te volorit lant, nus.

Ut haribusdae. Cae volupta spellaccabo. Et aut voluptu sandanda quam sam nulla sim que pra sollenis desed que nonet et, cuptam rem eaquis des es alit, sition reicilibus. (p)

Heading 2

Kontrolrapport Jelly Bellys eget cykelhold

Opskrifter opskrifter.png

Kontrolrapport

Heading 2

side_kontrol.jpg

Det er ikke alle slikproducenter som kan prale med at have deres eget cykelhold, men det kan Jelly Belly.

Se mere her »

Jelly Bean Art

Heading 2 hello_kitty.jpg

cycling_team.jpg

KONTAKT

side_kontrol.jpg

Heading 2

Jelly Belly på Pinterest Følg Jelly Belly på Pinterest her » Se de nyeste billeder og få en masse inspiration.

FOOTER: FACEBOOK - facebook plug in KONTAKTOPLYSNINGER: Jens & Co Aps · Virkelyst 2-4, Gjellerup, 7400 Herning · Tel. 9627 6066 · Fax 9627 6061 footer_bg.png

FOOTER: FACEBOOK - facebook plug in KONTAKTOPLYSNINGER: Jens & Co Aps · Virkelyst 2-4, Gjellerup, 7400 Herning · Tel. 9627 6066 · Fax 9627 6061 footer_bg.png

Kontakt  http://jellybelly.dk/kontakt

Presse  http://jellybelly.dk/presse http://jellybelly.dk/presse/presseklip

jb_logo.jpg

jb_logo.jpg

FORSIDE

OM JELLY BELLY

SMAG OG MENU

SJOVE SAGER

PRODUKTER

PRESSE

KONTAKT

FORSIDE

OM JELLY BELLY

SMAG OG MENU

SJOVE SAGER

BANNER

BANNER

slide_om.jpg

slide_map.jpg

JELLY BELLY ER POPULÆRT SLIK

Produkter

THE ORIGINAL GOURMET JELLY BEAN

PRODUKTER

PRESSE

Produkter

side_produkter.png

Presse

side_produkter.jpg

Kontakt

Her på siden finder du artikler og sjove historier fra dagblade og magasiner.

Klik på ikonet for at åbne pdf-filen:

Du er velkommen til at kontakte os for yderligere information:

Jelly Bean Art side_side_jb_art.png

berlingske.pdf

Jens & Co Aps Virkelyst 2-4 Gjellerup 7400 Herning

Jelly Bean Art side_side_jb_art.png

Tel. 9627 6066 Fax 9627 6061 Mail info@jensogco.dk - Denne e-mailadresse bliver beskyttet mod spambots, du skal have Javascript aktiveret for at se den

Opskrifter opskrifter.png

Opskrifter

Send os en besked:

opskrifter.png

(mail/contact form)

Kontrolrapport

Kontrolrapport

side_kontrol.png

FOOTER: FACEBOOK - facebook plug in KONTAKTOPLYSNINGER: Jens & Co Aps · Virkelyst 2-4, Gjellerup, 7400 Herning · Tel. 9627 6066 · Fax 9627 6061 footer_bg.png

side_kontrol.jpg

FOOTER: FACEBOOK - facebook plug in KONTAKTOPLYSNINGER: Jens & Co Aps · Virkelyst 2-4, Gjellerup, 7400 Herning · Tel. 9627 6066 · Fax 9627 6061 footer_bg.png

KONTAKT

Idéudvikling Storyboard Oversigt over indholdet på hver enkelt side Familien Goelitz  http://jellybelly.dk/om-jelly-belly/laes-om-familien-goelitz

Menuer  http://jellybelly.dk/smag-og-menu/menuer

jb_logo.jpg

FORSIDE

OM JELLY BELLY

SMAG OG MENU

SJOVE SAGER

jb_logo.jpg

PRODUKTER

PRESSE

KONTAKT

FORSIDE

OM JELLY BELLY

SMAG OG MENU

SJOVE SAGER

BANNER

BANNER

slide_historie.jpg

slide_menuer.jpg

GOELITZ BLIVER TIL JELLY BELLY

PRODUKTER

LAV DIN EGEN JELLY BELLY BEAN MENU

Produkter

PRESSE

KONTAKT

Produkter

side_produkter.jpg

side_produkter.jpg

Historien om familien Goelitz

Menuer

Europæiske forfædre Jelly Belly beans blev rige og berømte i L.A som så mange andre kendte. Men det er ingen hemmelighed, at slikbønnerne har europæiske rødder, som kan føres tilbage til Goelitzbrødrene. I midten af 1800-tallet besluttede to brødre ved navn Goelitz at emigrere til Amerika.

De var unge, håbefulde og jagtede succes. Første skridt på deres vej hed Belleville og bestod i en lille slik- og isbutik, som den ene passede butikken, mens den anden red rundt i omegnen og solgte slik. Siden gik det stærkt...

Goelitz bliver til Jelly Belly De to brødre blev til familier og slikbutikken blev til slikfabrikken. En ny Goelitz-generation kom til, og det gjorde en ny type slik også. Og på trods af nogle hårde perioder i Amerika, depressionen og verdenskrigene, overlevede virksomheden. I dag arbejder den 4.generation af Goelitz-brødrene fortsat med at udvikle og producere slik, Familiens største succes er slikbønnerne, som de kalder Jelly Belly.

Det er ikke noget problem, hvis du er kræsen, når menuen står på Jelly Belly beans. Du blander bare smagsvarianterne sammen, så får du hurtigt et helt måltid slik.

Opskrifter

Jelly Bean Art side_side_jb_art.png

side_opskrifter.jpg

Mud Pie chokoladebudding.jpg

chokoladebudding.jpg

+

cappucino.jpg

+

Chokoladebudding x 2

jordnoed.jpg

+

kage.jpg

=

Capuccino

Jordnøddesmør

chili_mango.jpg

pineapple_salsa.jpg

Mud Pie

Jelly Bean Art

Opskrifter Pineapple Salsa

opskrifter.png

mango.jpg

goelitz.jpg

pineapple.jpg

+ Mango

Kontrolrapport

+ Pineapple

side_jb_art.jpg

= Chili Mango

Pineapple Salsa

Kontrolrapport

Osv.

side_kontrol.jpg

side_kontrol.jpg

FOOTER: FACEBOOK - facebook plug in KONTAKTOPLYSNINGER: Jens & Co Aps · Virkelyst 2-4, Gjellerup, 7400 Herning · Tel. 9627 6066 · Fax 9627 6061

FOOTER: FACEBOOK - facebook plug in KONTAKTOPLYSNINGER: Jens & Co Aps · Virkelyst 2-4, Gjellerup, 7400 Herning · Tel. 9627 6066 · Fax 9627 6061

footer_bg.png

footer_bg.png

Månedens menu  http://jellybelly.dk/smag-og-menu/manedens-menu

Festmenuer  http://jellybelly.dk/smag-og-menu/festmenuer

jb_logo.jpg

jb_logo.jpg

FORSIDE

OM JELLY BELLY

SMAG OG MENU

SJOVE SAGER

PRODUKTER

PRESSE

KONTAKT

FORSIDE

OM JELLY BELLY

SMAG OG MENU

SJOVE SAGER

BANNER

BANNER

slide_menuer.jpg

slide_festmenuer.jpg

SLIP FANTASIEN LØS

Produkter

PRODUKTER

JELLY BELLY TIL ENHVER ANLEDNING

PRESSE

Produkter side_produkter.jpg

side_produkter.jpg

Festmenuer

Månedens menu Er du kreativ? Og synes du, det er sjovt at skabe noget lige efter din smag? Så er månedens menu måske en sjov lille konkurrence for dig. Slip fantasien løs og sammensæt din helt egen Jelly Belly bean menu og send eller e-mail den til os. Så kårer vores smagsdommere hver måned en ny menu. Vinderopskriften kommer på menuen – her på siden!

Jelly Bean Art side_side_jb_art.png

Jens & Co. Virkelyst 2-4 Gjellerup 7400 Herning Tlf. 9627 6066 Fax 9627 6061 Mail e-mail: info@jensogco.dk Denne e-mailadresse bliver beskyttet mod spambots, du skal have Javascript aktiveret for at se den

Der er mange måder at holde fest på - nogle mere festlige end andre! Suppe, steg og is eller kanel og peber eller jordbær, chokolade og champagne. Det er ikke altid sjovest at tænke traditionelt. Eller er det?

bryllup.jpg

birthday.jpg

Kontaktpersoner: Jens Peder Damgaard Jens Martin Hagelskjær

Kontrolrapport

Månedens menu 1 stk. kokos + 1 stk. lakrids + 1 stk. jordbær daiquiri = lakridskonfekt

side_kontrol.jpg

Månedens menu er indsendt af: Lauritz Lundorff Poder, 6 år Gyldenstensvej 27 5400 Bogense

FOOTER: FACEBOOK - facebook plug in KONTAKTOPLYSNINGER: Jens & Co Aps · Virkelyst 2-4, Gjellerup, 7400 Herning · Tel. 9627 6066 · Fax 9627 6061 footer_bg.png

side_side_jb_art.png

Opskrifter

Opskrifter opskrifter.png

Jelly Bean Art

Sæt Jelly Belly på bryllupsmenuen Køb Jelly Belly beans f.eks. i røde, lyserøde og hvide nuancer Pynt bryllupskagen med jelly beans Lav små poser og fyld dem med jelly beans i stedet for ris Dekorer små flasker eller glas men Jelly Belly beans Fyld små skåle med jelly beans og hav dem stående i cocktailbaren Giv brudeparret en af de mange gaveæsker fra Jelly Belly

student.jpg

Sig tillykke med Jelly Belly Sig tillykke til 25-års fødselaren med Jelly Belly beans med kanelsmag Sig tillykke til 30-års fødselaren med Jelly Belly beans med lakridssmag eller med en tyrkisk peber menu (lakrids+chili+chili) Sig tillykke med en Jelly Belly beans gaveæske Server Jelly Belly beans på studenterbesøget Server forskellige Jelly Belly menuer f.eks. Tequila Sunrise, Chokoladeovertrukket jordbær, Happy Hour, Mud Pie Server studenterkagn med Jelly Belly beans Server en snack med røde og hvide Jelly Belly beans og kom f.eks. skumfiduser, chokolade eller andet slik i.

Server Jelly Belly i forskellige farver og lav sjove cocktails til

opskrifter.png

Kontrolrapport

FOOTER: FACEBOOK - facebook plug in KONTAKTOPLYSNINGER: Jens & Co Aps · Virkelyst 2-4, Gjellerup, 7400 Herning · Tel. 9627 6066 · Fax 9627 6061 footer_bg.png

side_kontrol.jpg

KONTAKT

Idéudvikling Storyboard Oversigt over indholdet på hver enkelt side Klog for sjov  http://jellybelly.dk/sjove-sager/klog-for-sjov

Art galleri  http://jellybelly.dk/sjove-sager/art-galleri

jb_logo.jpg

jb_logo.jpg

FORSIDE

OM JELLY BELLY

SMAG OG MENU

SJOVE SAGER

PRODUKTER

PRESSE

KONTAKT

FORSIDE

OM JELLY BELLY

SMAG OG MENU

SJOVE SAGER

BANNER

BANNER

slide_klog.jpg

slide_art.jpg

RUNDT OM JORDEN MED JELLY BELLY

PRODUKTER

KUNST MED JELLY BELLY

Produkter

PRESSE

Produkter side_produkter.jpg

side_produkter.jpg

Art Galleri

Klog for sjov holly.jpg

regan1_s.jpg

jorden.jpg

KONTAKT

Skuespillere spiser Jelly Belly beans Jelly Belly er født under en heldig stjerne og lige fra den spæde begyndelse blev Jelly Belly taget godt i mod i hjembyen Hollywood. De unge, smukke skuespillere kunne ikke stå for den lille slikbønne med den store smag. Og inden nogen nåede at se sig omkring, blev Jelly Belly beans til en berømt spise hos mange af de store stjerner. I dag spiser Mel Gibson, Demi Moore og Larry King blandt andet Jelly Belly beans.

Ronald Reagan vild med Jelly Belly Det er ikke bare en god historie, men rent faktisk var Jelly Belly beans grunden til, at Ronald Reagan stoppede med at ryge. Det har han i hvert fald selv udtalt. Han var så vild med at spise Jelly Belly beans, at han stoppede med at ryge helt uden nikotintyggegummi - og uden at Jelly Belly blev nødt til at udvikle en Jelly Belly cigaretmenu.

Præsidentens favoritsmag Ronald Reagan kom til magten i 1981. Og i den forbindelse blev der udviklet en Jelly Belly bean med blåbærsmag, som præsidenten fejrede sin indsættelsesfest med. Der blev spist omkring 40 millioner Jelly Belly beans på dagen (omtrent lige så mange som han havde fået stemmer ved valget). Det er også helt almindeligt kendt, at Ronald Reagan ikke startede et møde eller traf en beslutning uden at byde kollegaerne på jelly beans. En ægte fan af Jelly Belly beans kan man sagtens sige uden at fornærme den tidligere præsident. Og det er måske grunden til, at Jelly Belly lavede et jelly beans portræt af ham. ”You can tell a lot about a fellow's character by his way of eating jelly beans.” citat Ronald Reagan

Jelly Belly beans er slik for stjerner og slik for sjov, men det er også kunst. I Jelly Belly Art galleri kan du se portrætter af kendisser. Billederne er i klassisk mosaik stil og lavet af Jelly Belly beans. Det kan kaldes slikkunst!

Jelly Bean Art

Jelly Bean Art

Ny kunst:

side_side_jb_art.png

side_side_jb_art.png

harry_potter.jpg

beatles.jpg

crown_jewels.jpg

Opskrifter

Opskrifter Harry Potter

opskrifter.png

The Beatles - Let it Bean

Kronjuvelerne

opskrifter.png

Berømte mennesker osv.

Kontrolrapport

Kontrolrapport

side_kontrol.jpg

side_kontrol.jpg

osv

FOOTER: FACEBOOK - facebook plug in KONTAKTOPLYSNINGER: Jens & Co Aps · Virkelyst 2-4, Gjellerup, 7400 Herning · Tel. 9627 6066 · Fax 9627 6061

FOOTER: FACEBOOK - facebook plug in KONTAKTOPLYSNINGER: Jens & Co Aps · Virkelyst 2-4, Gjellerup, 7400 Herning · Tel. 9627 6066 · Fax 9627 6061

footer_bg.png

footer_bg.png

Bliv forhandler  http://jellybelly.dk/kontakt/bliv-forhandler

Forhandlere  http://jellybelly.dk/forhandlere

jb_logo.jpg

jb_logo.jpg

FORSIDE

OM JELLY BELLY

SMAG OG MENU

SJOVE SAGER

PRODUKTER

PRESSE

KONTAKT

FORSIDE

OM JELLY BELLY

SMAG OG MENU

SJOVE SAGER

BANNER

BANNER

slide_jb.jpg

slide_forhandler.jpg

ALTID LIGE VED HÅNDEN

Produkter

PRODUKTER

SKAL DU VÆRE FORHANDLER?

PRESSE

Produkter side_produkter.jpg

side_produkter.jpg

Bliv forhandler

Her kan du købe DANMARK 7-Eleven kæden

Jelly Bean Art

CoffeeBeansOnline.eu Baggeskærvej 23, 7400 Herning

side_jb_art.jpg

Den Gamle Købmandsgaard Vestergade 3, 5300 Kerteminde osv.

Opskrifter side_opskrifter.jpg

Løber dine tænder i vand, når du hører om slikbønner, der findes i lige den smag, du ønsker?

Så er det måske noget for dig at blive forhandler af Jelly Belly! Kontakt os med det samme og lad os få en uforpligtende snak.

Jelly Bean Art

Jens & Co. ApS Virkelyst 2-4 Gjellerup 7400 Herning Tlf. 9627 6066 Fax. 9627 6061 e-mail: info@jensogco.dkDenne e-mailadresse bliver beskyttet mod spambots, du skal have Javascript aktiveret for at se den

side_jb_art.jpg

Opskrifter

Kontaktpersoner: Jens Peder Damgaard Jens Martin Hagelskjær

side_opskrifter.jpg

Kontrolrapport

Kontrolrapport

side_kontrol.jpg

side_kontrol.jpg

FOOTER: FACEBOOK - facebook plug in KONTAKTOPLYSNINGER: Jens & Co Aps · Virkelyst 2-4, Gjellerup, 7400 Herning · Tel. 9627 6066 · Fax 9627 6061 footer_bg.png

FOOTER: FACEBOOK - facebook plug in KONTAKTOPLYSNINGER: Jens & Co Aps · Virkelyst 2-4, Gjellerup, 7400 Herning · Tel. 9627 6066 · Fax 9627 6061 footer_bg.png

KONTAKT

Idéudvikling Storyboard Oversigt over indholdet på hver enkelt side Jens & Co.  http://jellybelly.dk/kontakt/jens-co

jb_logo.jpg

FORSIDE

OM JELLY BELLY

SMAG OG MENU

SJOVE SAGER

PRODUKTER

PRESSE

BANNER slide_jens.jpg

ANDERLEDES DAGLIGVARER FRA HELE VERDEN

Produkter side_produkter.jpg

Jens & Co. Jens Peder Damgaard er manden bag den trendspottende virksomhed Jens & Co., der distribuerer anderledes dagligvarer fra hele verden. Det kan godt være, at Jens Peder Damgaard er en sindig jyde med begge ben plantet midt på jyske hede, men når det handler om, hvad der er hot i New York, Tokyo og Paris, går det bestemt ikke langsomt for vestjyden - tværtimod. Jens Peder har konstant fingeren på pulsen og til tider går det så stærkt, at det kan være svært at følge med for den midtjyske virksomhed.

En skør, skør verden...

I 2000 slog Jens & Co. for første gang dørene op til et helt nyt univers fyldt med trendy dagligvarer. Målsætningen var at gøre tingene på en helt anden måde, end man traditionelt plejede at gøre i dagligvarebranchen. Til at starte med satsede Jens & Co. primært på at distribuere amerikanske produkter, men siden hen har virksomheden udvidet sortimentet, og satser i dag på at sælge anderledes dagligvarer fra hele verden.

Jelly Bean Art side_jb_art.jpg

Opskrifter side_opskrifter.jpg

Kontrolrapport side_kontrol.jpg

FOOTER: FACEBOOK - facebook plug in KONTAKTOPLYSNINGER: Jens & Co Aps · Virkelyst 2-4, Gjellerup, 7400 Herning · Tel. 9627 6066 · Fax 9627 6061 footer_bg.png

KONTAKT

Produktion Forsiden - HTML og CSS laves til forsiden Ting som bør nævnes ved forsiden: - De seks billeder med tekst er sat i en tabel og på den måde 100% centreret på siden.

- I footeren er Facebook blevet indlejret med en iFrame.

Indholdssiderne HTML og CSS laves til en template som bruges til alle andre sider Ting som bør nævnes ved template siden: - Menuen er lavet med en Unordered List - Slideshowet er lavet med jQuery.

- Logoet er et baggrundsbillede i en div, men stadigvæk muligt at klikke på, så man kommer til forsiden.

- Områder som er gjort redigerbare, Editable regions: Slideshowet, Selve indholdet (left-content), højre sidebar (right-content) - Alt andet på siden skal ikke kunne redigeres.

Specielt ved andre sider Kontakt-siden: - Her er lavet en kontaktformular Galleri-siden: - Opsætning med tabeller, så det er nemt for andre at tilføje eller fjerne billeder og tekst.

Produkt-siden - Opsætning med tabeller, så det er nemt for andre at tilføje eller fjerne produktbilleder og tekst.

Sjove sager-siden - You Tube film med Kina Grannis er en iFrame

Her er koden til mail formularen <form action=”http://jellybelly.danweb.com/kontakt?chronoform =contact&event=submit” name=”contact” id=”chronoform_contact” method=”post” class=”Chronoform hasValidation”> <div class=”ccms_form_element cfdiv_text” id=”navn1_container_ div” style=””> <input type=”text” name=”navn” onblur=”if(this.value==’’) this.value=’Navn*’” onfocus=”if(this.value==’Navn*’)this. value=’’;” value=”Navn*” maxlength=”200” size=”30” class=”” title=””/> <div class=”clear”></div> <div id=”error-message-navn”></div> </div> <div class=”ccms_form_element cfdiv_text” id=”adresse1_con tainer_div” style=””> <input type=”text” name=”adresse” onblur=”if(this.value==’’) this.value=’Adresse’” onfocus=”if(this.value==’Adresse’)this. value=’’;” value=”Adresse” maxlength=”200” size=”30” class=”” title=””/> <div class=”clear”></div><div id=”error-message-adresse”></ div> </div> <div class=”ccms_form_element cfdiv_text” id=”postnrby1_con tainer_div” style=””> <input type=”text” name=”postnr” onblur=”if(this.value==’’) this.value=’Postnr/by’” onfocus=”if(this.value==’Postnr/by’) this.value=’’;” value=”Postnr/by” maxlength=”200” size=”30” class=”” title=””/> <div class=”clear”></div><div id=”error-message-postnrby”></ div></div> <div class=”ccms_form_element cfdiv_text” id=”telefon1_con tainer_div” style=””>

<input type=”text” name=”telefon” onblur=”if(this.value==’’) this.value=’Telefon’” onfocus=”if(this.value==’Telefon’)this. value=’’;” value=”Telefon” maxlength=”200” size=”30” class=”” title=””/> <div class=”clear”></div><div id=”error-message-telefon”></ div> </div> <div class=”ccms_form_element cfdiv_text” id=”email1_container_ div” style=””> <input type=”text” name=”email” onblur=”if(this.value==’’) this.value=’E-mail’” onfocus=”if(this.value==’E-mail’)this. value=’’;” value=”E-mail” maxlength=”200” size=”30” class=”” title=””/> <div class=”clear”></div><div id=”error-message-email”></div> </div> <div class=”ccms_form_element cfdiv_textarea” id=”besked1_con tainer_div” style=””> <label>Besked:*</label> <div class=”clear”></div> <textarea cols=”45” rows=”12” class=””title=””name=”besk ed”></textarea> <div class=”clear”></div> <div id=”error-message-besked”></div> </div> <div class=”ccms_form_element cfdiv_submit” id=”submit1_con tainer_div” style=”text-align:left”><input name=”submit” class=”” value=”Submit” type=”submit” /> <div class=”clear”></div> <div id=”error-message-submit”></div> </div>

Forbindelse til ftp-server Der oprettes forbindelse til serveren.

De nødvendige filer i forhold til Joomla uploades og egen html, css, jQuery, php*, billeder og andre filer uploades også.

Herefter kan der arbejdes med hjemmesiden effektivt i Joomla. * php er den kode som fortæller hvilke dele af siderne der skal være redigerbare i Joomla

Dette FTP program hedder Cyberduck

Produktion - html og php kode Ikke alt kode bliver vist her, men nogle udsnit.

HTML - Hypertext Markup Language <!DOCTYPE HTML> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”> <head> <title>Jelly Belly Danmark</title><!--sidens titel --> <!--styles til slideshow tema --> <link rel=”stylesheet” href=”slider/themes/default/default.css” type=”text/css” media=”screen” /> <link rel=”stylesheet” href=”slider/slider.css” type=”text/css” media=”screen” /> <link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” /> <!--slideshow javascript - jquery --> <script type=”text/javascript” src=”slider/scripts/jquery-1.9.0.min.js”></script> <script type=”text/javascript” src=”slider/jquery.nivo.slider.js”></script> <script type=”text/javascript”> $(window).load(function() { $(’#slider’).nivoSlider(); }); </script> </head>

<body> <a href=”/” id=”logo”></a>

<!--Logo i toppen af siden -->

<div id=”menu”><!--menubar start --> <ul><!--unordered list start --> <li><a href=”index.html”>FORSIDE</a></li> <!--list item --> <li><a href=”pages/om_jb.html”>OM JELLY BELLY</a>

<ul> <li><a href=”pages/historie.html”>Familien Goelitz</a></li>

</ul> </li> <li><a href=”pages/smagsvarianter.html”>SMAG OG MENU</a> <ul> <li><a href=”pages/smagsvarianter.html”>Smagsvarianter</a></li> <li><a href=”pages/menuer.html”>Menuer</a></li> <li><a href=”pages/month_menu.html”>Månedens menu</a></li> <li><a href=”pages/festmenuer.html”>Festmenuer</a></li>

</ul> </li> <li><a href=”pages/sjove_sager.html”>SJOVE SAGER</a> <ul> <li><a href=”pages/klog.html”>Klog for sjov</a></li> <li><a href=”pages/art_galleri.html”>Art galleri</a></li>

</ul> </li>

<li><a href=”pages/produkter.html”>PRODUKTER</a></li> <li><a href=”pages/presse.html”>PRESSE</a></li> <li><a href=”pages/kontakt.html”>KONTAKT</a> <ul> <li><a href=”pages/forhandler.html”>Forhandlere</a></li> <li><a href=”pages/bliv_forhandler.html”>Bliv forhandler</a></li> <li><a href=”pages/jensogco.html”>Jens & Co.</a></li>

</ul> </li> </ul> <!--unordered list slut -->

</div><!--menu slut -->

<div id=”front_wrapper”> <!--front-wrapper starter -->

<!--her bruges tabel for at centrere elementerne--> <table width=”100%” border=”0” cellspacing=”0” cellpadding=”0”> <tr>

<td>

<a href=”pages/smagsvarianter.html”><img src=”images/

front_varianter.jpg” width=”281” height=”168” alt=”Nye varianter: mere farve,

mere sjov”title=”Nye varianter: mere farve, mere sjov”></a>

<p>Nye varianter: mere farve, mere sjov</p> </td>

<td>

<a href=”pages/menuer.html”><img src=”images/front_menu.jpg” width=”281”

height=”168” alt=”Sammensæt din egen Jelly Belly bean menu” title=”Sammensæt

din egen Jelly Belly bean menu”></a>

<p>Sammensæt din egen Jelly Belly bean menu</p>

</td>

<td>

<a href=”http://www.go-smag.com/jelly-belly-c-21.html” target=”_blank”><img

src=”images/front_netshop.jpg” width=”281” height=”168” alt=”Bestil Jelly

Belly på Netshoppen” title=”Bestil Jelly Belly på Netshoppen”></a>

<p>Bestil Jelly Belly på Netshoppen</p>

</td> </tr>

<tr>

<td>

<a href=”pages/historie.html”><img src=”images/front_historie.jpg” width=”281”

height=”168” alt=”Læs om Jelly Belly’s historie her” title=”Læs om Jelly

Belly’s historie her”></a>

<p>Læs om Jelly Belly’s historie her</p>

</td>

<td>

<a href=”http://www.jellybellycycling.com” target=”_blank”><img src=”images/

front_cykel.jpg” width=”281” height=”168” alt=”Følg Jelly Belly’s eget cykel

hold” title=”Følg Jelly Belly’s eget cykelhold”></a></div>

<p>Følg Jelly Belly’s eget cykelhold</p>

</td>

<td>

<a href=”pages/sjove_sager.html”><img src=”images/front_sjov.jpg” width=”281”

height=”168” alt=”Sjov og ballade med Jelly Beans” title=”Sjov og ballade med

Jelly Beans”></a>

<p>Sjov og ballade med Jelly Beans</p>

</td> </tr> </table><!--tabel slutter --> </div> <!--front-wrapper slutter --> <div style=”clear:both;”></div>

</div><!--wrapper slutter -->

</body> </html>

PHP er et objekt-orienteret server-side programmeringssprog anvendt til udvikling af dynamiske webapplikationer og websteder

PHP - Hypertext Preprocessor <?php defined(’_JEXEC’) or die; <head> <?php $languages = JLanguageHelper::getLanguages(); foreach($languages as $item) {

echo ’<link href=”http://’.$_SERVER[”SERVER_NAME”].’/’.$item->sef.’/” rel=”alternate” hreflang=”’.$item->lang_code.’”>’.”\n”; } ?>

<jdoc:include type=”head” />

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<link rel=”apple-touch-icon” href=”<?php echo $this->baseurl ?>/templates/<?php echo

$this->template ?>/apple-touch-icon.png”>

<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/<?php echo $this>template ?>/css/style.css”>

<script>

var _gaq=[[”_setAccount”,”<?php echo $analytics; ?>”],[”_trackPageview”]]; (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g. async=1; g.src=(”https:”==location.protocol?”//ssl”:”//www”)+”.google-analytics.com/ ga.js”; s.parentNode.insertBefore(g,s)}(document,”script”)); </script>

<!-- TemplateBeginEditable name=”head” -->

<!-- TemplateEndEditable --> </head> <body class=”<?php echo $homepage ?>”>

<a href=”/” id=”logo”></a>

<div id=”menu”><!--menubar --> <jdoc:include type=”modules” name=”nav” style=”none” /> </div><!--menu slut --> <div id=”wrapper”><!--wrapper starter -->

<!--Frontpage slideshow starter -->

<!-- TemplateBeginEditable name=”slider” --> <div id=”slideshow”> <jdoc:include type=”modules” name=”slideshow” style=”none” /> </div> <!--Frontpage slideshow slutter --> <!-- TemplateEndEditable -->

<?php if($active->home == 1){ ?>

<div id=”front_wrapper”>

<jdoc:include type=”component” />

</div>

<?php }

else { ?>

<div id=”content_wrapper”> <!--front-wrapper starter -->

<!-- TemplateBeginEditable name=”Content” -->

<div id=”left_content”>

<jdoc:include type=”component” /> </div>

<!-- TemplateEndEditable -->

<!-- TemplateBeginEditable name=”Right content” -->

<div id=”right_content”>

<jdoc:include type=”modules” name=”right” style=”none” />

</div>

<!-- TemplateEndEditable -->

</div>

<!--content-wrapper slutter -->

<?php } ?> <div style=”clear:both;”></div>

</div><!--wrapper slutter -->

<div id=”footer”>

<div id=”fb_footer”>

<iframe src=”//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.

com%2FJellyBellyDanmark&amp;width=910&amp;height=258&amp;colorscheme=light&amp;show_f≤

ces=true&amp;header=false&amp;stream=false&amp;show_border=false” scrolling=”no”

frameborder=”0” style=”border:none; overflow:hidden; width:910px; height:150px;” allowTransparency=”true”></iframe>

</div>

<p>Jens & Co Aps · Virkelyst 2-4, Gjellerup, 7400 Herning · Tel. 9627 6066 · Fax 9627 6061</p> </div>

<jdoc:include type=”modules” name=”debug”/>

<script src=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/ plugins.js”></script>

<!--[if lt IE 7 ]>

<script src=”<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/ libs/dd_belatedpng.js”></script>

<script> DD_belatedPNG.fix(’img, .png_bg’);</script> <![endif]--> </body> </html>

Det lille ikon i indlæsningsfeltet, er et favicon. Det er 16x16 px og dets filnavn og endelse er favicon.ico. Det skal uploades i Root folderen. Herfra finder den selv ud af resten.

Produktion - css styles /*====================*/ /*=== Reset Styles ===*/ /*====================*/ * { outline: none;} CSS reset html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; } p { margin: 0; padding: 0; color: #000; font-size: 14px; font-family: Arial, Helvetica, sans-serif; } h1 { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 35px; font-weight: bold; } h2 { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; } h3 { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; } body { line-height:1; color:black; font:14px/1.6 Arial, Helvetica, sans-serif; color:#333; background-image: url(../images/bg_tr.png); background-repeat: repeat-x; background-color: #dcecf6; } table { border-collapse:separate; border-spacing:0; } caption, th, td { font-weight:normal; } blockquote:before, blockquote:after, q:before, q:after { content:””; } blockquote, q { quotes:”” ””; } /* HTML5 tags */ header, section, footer, aside, nav, article, figure { display: block; } /*===================*/ /*=== Main Styles ===*/ /*===================*/ a, a:visited { color:#09f; text-decoration:none; } a:hover, a:active { color:#09f; text-decoration:none; } #dev7link { position:absolute; top:0; left:50px; background:url(../images/dev7logo.png) no-repeat; width:60px; height:67px; border:0; display:block; text-indent:-9999px; } #wrapper { width: 980px; margin-top: 0px; margin-left: auto; margin-right: auto; background-color:#fff; border-radius: 11px 11px 0 0; webkit-border-radius: 11px 11px 0px 0px; moz-border-radius: 11px 11px 0px 0px; box-shadow: 0px 10px 10px 5px rgba(000, 000, 000, 0.3); webkit-box-shadow: 0px 10px 10px 5px rgba(000,000,000,.3); moz-box-shadow: 0px 10px 10px 5px rgba(000,000,000,.3); } .slider-wrapper { width: 100%; margin-top: 2px; } #logo { width: 293px; height: 137px; margin-left:auto; margin-right: auto; margin-top: 30px; background-image:url(../images/jelly_belly_logo.png); background-repeat:no-repeat; display: block; } #menu { margin-left: auto; margin-right: auto; width: 980px; height: 36px; margin-top: 10px; margin-bottom:0px; } #menu ul { /* menu på liste - unordered list */ padding: 0px; list-style: none; margin: 0px;

padding: 0px; z-index: 99; position: relative;

} #menu ul li { /* menu på liste - list item */ width: 130px; height: 36px; margin-right: 8px; float: left; display: inline; /* sætter menu på linje */ /*background-color: rgba(255, 255, 255, 0.5);*/ position: relative; border-radius: 5px; webkit-border-radius: 5px; moz-border-radius: 5px; text-align: center; } #menu ul li a { /* menu på liste - list item link */ font-family:Verdana, Geneva, sans-serif; font-size: 14px; color: #fff; /*background-image: url(../background.jpg);*/ /*border: solid 1px #F60;*/ display: block; /* sørger for at hele feltet er klikbart */ margin: 0px; padding: 6px 2px 0 2px; text-align: center; height: 25px; } #menu ul li:hover a { /* menu på liste - list item link hover */ background-color: rgba(255, 255, 255, 0.7); color: #000; border-radius: 5px; webkit-border-radius: 5px; moz-border-radius: 5px; font-weight: 500; } #menu ul li a:active { /* menu på liste - list item link hover */ background-color: rgba(255, 255, 255, 0.7); color: #000; border-radius: 5px; webkit-border-radius: 5px; moz-border-radius: 5px; font-weight: 500; } #menu ul ul{ position: absolute; /* vigtig - sørger for at dropdown menuen bliver placeret ”ovenpå”, så den ikke forstyrrer andet indhold på siden*/ display: none; } #menu ul li:hover ul{ display: block; } #menu ul ul li { margin-top: 2px; } #menu ul ul li a { background-color: rgba(255, 255, 255, 0.7); margin-top: 3px; color: #000; border-radius: 5px; webkit-border-radius: 5px; moz-border-radius: 5px; } #menu ul li ul a:hover { display: block; color: #09F; border-radius: 5px; webkit-border-radius: 5px; moz-border-radius: 5px; } #front_wrapper { width: 920px; height: auto; float:left; padding: 38px 30px 0px 30px; border-top: solid 1px #CCC; position: relative; } #content_wrapper { width: 970px; padding: 38px 0px 0px 10px; border-top: solid 1px #CCC; position: relative; } .front_box_left { width: 293px; height: 261px; float: left; margin-left:20px; } .front_box_right { width: 293px; height: 261px; float: right; margin-right:20px; } .img_box { width: 281px; height: 168px; float: left; background-color:#FC3; border: 5px solid #8ec1de; border-radius: 10px; } .img_box img { border-radius: 6px; webkit-border-radius: 6px; moz-border-radius: 6px; } .front_text { width: 283px; height: 61px; float: left; padding: 0 5px 0 5px; margin-top: 10px; } #left_content { width: 597px; float: left; height: auto; padding-left: 20px; padding-right: 40px; } .left_product_text { width: 587px; height: 200px; float: left; margin-left: 30px; margin: 5px 0 10px 0; padding-bottom: 10px; border-bottom: solid 1px #000; } .left_product_img { width: 245px; height: 200px; float: left; margin-right: 13px;

} .menutekst { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; } .gallery { width: 160px; float:left; margin-right: 15px; margin-left: 15px; vertical-align: bottom; } #right_content { width: 195px; min-height: 400px; padding: 25px 25px 25px 25px; position: relative; float:right; margin-top: -88px; margin-right: 30px; background-color: #8ec1de; z-index: 99; border-radius: 15px; webkit-border-radius: 15px; moz-border-radius: 15px; border: solid 5px #fff; height: 627px; } .right_img { width: 195px; height: 121px; float: left; margin-bottom: 10px; } .klog { width: auto; height: auto; float: left; margin-right: 10px; } #footer { background-image: url(../images/footer_bg.png); background-repeat:no-repeat; padding-top: 0px; margin-left: auto; margin-right: auto; margin-bottom: 100px; width: 1054px; height: 389px; text-align: center; } #fb_footer { width: 910px; height: 180px; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 10px; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #333; border-bottom-color: #333; } /*====================*/ /*=== Other Styles ===*/ /*====================*/ .clear { clear:both; } .wk-slideshow img, .wk-gallery img, .spotlight img, a[datalightbox] img { border-radius: 10px 10px 0 0; webkit-border-radius: 10px 10px 0 0; moz-border-radius: 10px 10px 0 0; } .wk-slideshow .caption, .wk-slideshow .caption a { color: #c61f26; font-size: 24px; font-weight: 800; margin:0; } .wk-slideshow .caption { background: rgba(255,255,255,0.7); padding: 7px 10px 5px 35px; } .wk-slideshow-default > div:hover .next, .wk-slideshow-default > div:hover .prev { background-image:url(/images/buttons.png); width: 30px; height:30px; } .wk-slideshow-default > div:hover .next { background-position: right center; } .wk-slideshow-default > div:hover .prev { background-position: left center; } .chronoform a { visibility:hidden; } /*====================*/ /*=== Other Styles ===*/ /*====================*/ .clear { clear:both; } .wk-slideshow img, .wk-gallery img, .spotlight img, a[datalightbox] img { border-radius: 10px 10px 0 0; webkit-border-radius: 10px 10px 0 0; moz-border-radius: 10px 10px 0 0; } .wk-slideshow .caption, .wk-slideshow .caption a { color: #c61f26; font-size: 24px; font-weight: 800; margin:0; } .wk-slideshow .caption { background: rgba(255,255,255,0.7); padding: 7px 10px 5px 35px; } .wk-slideshow-default > div:hover .next, .wk-slideshow-default > div:hover .prev { background-image:url(/images/buttons.png); width: 30px; height:30px; } .wk-slideshow-default > div:hover .next { background-position: right center; } .wk-slideshow-default > div:hover .prev { background-position: left center; } .chronoform a { visibility:hidden; }

Test af jellybelly.danweb.com i forskellige browsere Test i forskellige browsere Det skulle jo helst virke alle steder, og det gør det.

Safari

Firefox

Google Chrome

Internet Explorer