CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

kobe14 Nybegynder

19. november 2006 - 12:44 Der er 31 kommentarer og
2 løsninger

Gradient Baggrund

Hej,

Jeg skal lave en baggrund som fader fra en lys grå til en mærke grå. Og så skal den gerne selv kunne bestemme hvor stor den skal være i forhold til browseren.

Men jeg har ingen idé om hvordan jeg skal gøre det, tænker på CSS men er jo ikke sikker.

Håber i forstår mit spørgsmål.

Synes godt om

karmicmind Nybegynder

19. november 2006 - 13:31 #1

http://www.alistapart.com/articles/supereasyblendys

Synes godt om

kobe14 Nybegynder

19. november 2006 - 14:40 #2

Nydeligt link, men jeg har ikke lige tid til at lære CSS fra bunden, så nogen der kunne hjælpe mig til hvad af det der står jeg skal bruge.

Synes godt om

miqe Nybegynder

19. november 2006 - 17:58 #3

Spændende artikel på A List Apart. Lægger mærke til at den kun er 6 dage gammel.
Det har i hvert fald givet mig nyt blod på tanden mht. gradients med PNG.

Synes godt om

kobe14 Nybegynder

20. november 2006 - 13:55 #4

Ingen der kan hjælpe mig med det her?
Ellers mange point for noget, som i mine øjne lyder simpelt.

Synes godt om

karmicmind Nybegynder

20. november 2006 - 14:18 #5

Baggrunde kan ikke skalere.. kun billeder..

Synes godt om

miqe Nybegynder

20. november 2006 - 16:12 #6

Desuden ser det rimeligt langhåret ud.
Ifølge artiklen er det nemt nok i andre browseren end IE (groft sagt).
IE7 kræver en minimal ændring pakket ind i en IE conditional.
Det er for IE6 det bliver langhåret. Denne browser sidder desværre bare på de største markedsandele og vil gøre det et godt stykke ud i fremtiden.

Evt. behøver du ikke benytte aplhablends for at opnå din fadende baggrund.
Hvad er det helt precist du gerne vil opnå effekten på?
<body>, <div>, <td>, <younameit>????
Har du noget kode du kan vise os, hvor du gerne vil have effekten implementeret??

Synes godt om

kobe14 Nybegynder

20. november 2006 - 16:18 #7

Altså kan jo godt lave et billede med en gradiant på, som så skal være baggrunden, men det har jeg os brug for hjælp til.

Ja læste noget af artiklen og kunne godt se at IE6 var et problem.

Jeg har lavet en hjemmeside i photoshop, og skal have en baggrund til den når jeg sætter den på nettet, så lige pt. er photoshops rendering det eneste kode jeg har.

Synes godt om

kobe14 Nybegynder

20. november 2006 - 16:19 #8

Altså jeg kan godt lave en gradiant baggrund, skal bruge hjælp til at få den ind i css så den skalerer af sig selv.

Synes godt om

miqe Nybegynder

20. november 2006 - 16:35 #9

Har du et link til dit midlertidige resultat.
Så skal jeg gerne prøve at se om jeg kan lave nogle rettelser, så du får smidt baggrunden ind i CSS

Synes godt om

kobe14 Nybegynder

20. november 2006 - 17:51 #10

www.zeizu.dk/DJKasper/

baggrunden jeg ønsker på er
www.zeizu.dk/DJKasper/bg.jpg

Synes godt om

jhe-ting Nybegynder

20. november 2006 - 20:15 #11

I IE6 kan man bruge filter:gradient(...)
Jeg mener det skalerer automatisk.

Synes godt om

miqe Nybegynder

21. november 2006 - 11:37 #12

kobe14>> Ønsker du baggrunden i det mørkegrå indholdsfelt??

jhe-ting>> Forhåbentligt får han slet ikke brug for filteret i denne omgang, for at opnå den ønskede effekt.

Synes godt om

kobe14 Nybegynder

21. november 2006 - 16:37 #13

Mige:
Nej, jeg vil gerne have baggrunden, virkelig i baggrunden. Altså bag hele siden. Der hvor der er lysegråt lige nu.

Synes godt om

miqe Nybegynder

21. november 2006 - 19:12 #14

Har kigget lidt nærmere på din side.
Både den nemme og den besværlige løsning kræver at du redigerer de gif-billeder der udgør dine yderhjørner og kanter.
Den nemme kræver at du omdanner det grå område (farve #93a1aa) til transparent.
Den besværlige kræver at ovennævnte gif'er konverteres til png, det grå område (farve #93a1aa) omdannes til den omgivende farve og at hjørnerne herefter dannes ved hjælp af aplha-kanalen, hvorefter vi skal anvende det langhårede filter for at IE6 også kan forstå det.

Vælger du den nemme kan du gøre følgende:
Efter <body.....> indsættes:
<img class="baggrund" src="bg.jpg" alt="">

Din første div ændres til:
<div class="forgrund" align="center">

I <head> sektionen efter eller før din javascript-sektion indsætter du følgende:
<style type="text/css">
body img.baggrund {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
body div.forgrund{
position: relative;
top: -100%;
}
</style>

Billeder du skal redigere:
index_01.gif
index_02.gif
index_11.gif
index_13.gif
index_15.gif
og
index_16.gif

Den svære løsning kræver kendskab til aplha-kanalen i png, at du sætter dig ind i css og at du sætter dig ind i brugen af filter:gradient(...)
Jeg er pt. ikke stiv nok i filter:gradient(...) til at kunne hjælpe dig med den svære løsning.

Synes godt om

miqe Nybegynder

21. november 2006 - 19:49 #15

Hovsa!!...
En væsentlig tilføjelse.

Du skal tilføje:
html body div.forgrund{
top: 0px;
}
i din <style> sektion.

Synes godt om

kobe14 Nybegynder

22. november 2006 - 19:49 #16

Hmm kan ikke få den til at virke helt...
Jeg har kommet til at smide hele siden bag baggrunden, istedet for foran :S

Synes godt om

jhe-ting Nybegynder

22. november 2006 - 20:04 #17

body img.bagground {
z-index:-99; /* i baggrunden */
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
body div.forground{
position: relative;
top: -100%;
}
html body div.forground{
top: 0px;
}

Synes godt om

kobe14 Nybegynder

22. november 2006 - 21:06 #18

Tak tak tak =)

Hmm, hvor'n faen ska jeg dele point'sne..

Smid lige et svar Mige, du fortjener ihvertfald mange af dem.

Synes godt om

miqe Nybegynder

22. november 2006 - 22:04 #19

Svar!
Hmm... Jeg afprøvede mit eksempel i både Firefox 2, IE6 og IE7.
Hvilken browser bruger du?

Synes godt om

kobe14 Nybegynder

22. november 2006 - 22:17 #20

Hvis jeg bruger IE7, uden Jhe-ting's lille kommentar, så ser jeg kun baggrunden.(samme gælder firefox)

Men hvis jeg bruger Jhe's kode virker den ikke i firefox(Her viser den ikke baggrunden)..
Whats a man to do?

Synes godt om

miqe Nybegynder

22. november 2006 - 22:37 #21

Går ud fra at du har noteret dig forskellighederne i jhe-ting's og min måde at stave baggrund og forgrund. Disse skal være stavet ens i din css og din html.

Den eneste forskel på hans og mit eksempel(ud over stavning) er z-index'et. Problemet med hans z-index er at billedet ryger ind bag den baggrundsfarve der bliver defineret i <body bgcolor.....>

Synes godt om

kobe14 Nybegynder

23. november 2006 - 07:22 #22

Gjorde ingen forskel hvordan jeg stavede dem :S

Synes godt om

miqe Nybegynder

23. november 2006 - 14:57 #23

Jeg kan se at dit baggrundsbillede er fejlplaceret i din html.
Lige nu ligger det i bunden.
Det skal efter dit <body> tag, og IKKE efter dit </body> tag.
Med andre ord... Den skal ind før din første <div>

Synes godt om

miqe Nybegynder

23. november 2006 - 15:10 #24

En lille note!
Der er god fornuft i at designe efter W3C's webstandarder.
Dette er rent faktisk et must, vis man vil sikre sig et nogenlunde ensartet layout i forskellige browsere.
Her er et link til hvordan din side validerer: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.zeizu.dk%2FDJKasper%2F
Her er et link til hvordan du kan lære dig at skrive korrekt html i forhold til forskellige html-versioner: http://w3schools.com/html/
Fremtidens hjemmesider skrives i de nyere standarder: http://w3schools.com/xhtml/

Synes godt om

miqe Nybegynder

23. november 2006 - 15:10 #25

CSS kan læres hér: http://w3schools.com/css/

Synes godt om

olebole Juniormester

23. november 2006 - 15:14 #26

<ole>

- og som det er dette sites vanlige brugere bekendt, er w3schools.com og html.dk proppet med alvorlige fejl, mangler og udeladelser.
Dér kan man under ingen omstændigheder lære at kode seriøs kode - men de kan til nød være et sted at begynde ;o)

/mvh
</bole>

Synes godt om

miqe Nybegynder

23. november 2006 - 17:00 #27

olebole>> Hæhæ. Rigtigt. Man skal begynde et sted. Hvilke sites kan du anbefale til at lære seriøs kode?

Synes godt om

kobe14 Nybegynder

24. november 2006 - 06:31 #28

Hehe, nu vil jeg ikke have alt koden smidt i hovedet, ser mig selv som designer only =)

Skal bare kunne præsentere en halv funktionel hjemmeside =)

Synes godt om

miqe Nybegynder

24. november 2006 - 09:59 #29

Hæhæ!
Ved at flytte dit billede som beskrevet i 23/11-2006 14:57:17 burde dit problem løses.
Som det ligger i bunden nu, ligger det "ulovligt", da det er udenfor din <body> sektion.

Synes godt om

olebole Juniormester

24. november 2006 - 14:10 #30

miqe >> "Hvilke sites kan du anbefale til at lære seriøs kode" >> Ja, det er så straks et større problem!

Generelle 'grund-tutorials' spænder ofte fra dårlige til elendige, men der ligger mange gode special-tutorials rundt omkring ... de kan bare være svære at genkende, før man har lært at kode. Jeg kender desværre ikke gode begynder-tuts på WWW :oP

Synes godt om

kobe14 Nybegynder

28. november 2006 - 20:42 #31

Hmm jeg kan simpelt hen ikke få den til at virke...

Nogen der kan skrive alt ind i kildekoden og copy paste det til mig? for jeg ANER ikke hvad jeg har gjordt galt, den vil kun gemme siden bag baggrunden.

Synes godt om

miqe Nybegynder

29. november 2006 - 08:11 #32

kobe14>> Du gør jo ikke hvad jeg fortæller dig.

I bunden har du:
</body>
<img class="bagground" src="bg.jpg" alt="">
</html>

Det skal se sådan ud:
</body>
</html>

Starten af din body ser sådan ud:
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/Mouseovers5.gif','images/Mouseovers6.gif','images/Mouseovers7.gif','images/Mouseovers.gif','images/Mouseovers1.gif','images/Mouseovers2.gif','images/Mouseovers3.gif','images/Mouseovers4.gif')">
<div class="forground" align="center">


Den skal se sådan ud:
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/Mouseovers5.gif','images/Mouseovers6.gif','images/Mouseovers7.gif','images/Mouseovers.gif','images/Mouseovers1.gif','images/Mouseovers2.gif','images/Mouseovers3.gif','images/Mouseovers4.gif')">
<img class="bagground" src="bg.jpg" alt="">
<div class="forground" align="center">

Synes godt om

kobe14 Nybegynder

29. november 2006 - 15:42 #33

Tak for denne gang :D

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS