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

snoozie Nybegynder

15. juli 2005 - 00:46 Der er 22 kommentarer og
1 løsning

Billeder der følger med når man scroller ned

Hej.

Hvordan får jeg et billede til at scrolle med ned, når man scroller ned?

Jeg har et billede, som jeg vil have til at følge med scrolleren. Kan dette lade sig gøre? - Hvordan? Simpelt, svært?

Synes godt om

busschou Praktikant

15. juli 2005 - 04:39 #1

i princippet simpelt ved brug af style="position:fixed"
Du skal ud over det så blot angive en position i din style, så vil det altid fremkomme på den angivne position :o), smart og nemt
--
Det sørgelige er så at IE ikke understøtter position:fixed og det vil derfor ikke virke i IE
Så hvis du søger efter en IE løsning så er det mere svært
Jeg har set mange forsøg på efterleve dette med det resultat at objektet "hakker" lidt efter og ikke bare står stille, har også set nogle dhtml scripts hvor billedet forsvinder når man scroller og så "dumper" på plads igen når man har scrollet og ikke holder på scrollen mere.
--
Løsningen afhænger derfor lidt af hvad du vil opnå, om det skal stå helt fast og stille (som meningen med position:fixed) eller om det godt må dumpe ned

Synes godt om

fennec Nybegynder

15. juli 2005 - 08:28 #2

Et bagrundsbillede er måske også en mulighed, hvis du bare skal vise et billed.

style="background-image: url(none);background-position:bottom right;background-repeat:no-repeat;"

Det style kan du så smide på de fleste HTMLtags, så som body, table, div og mange andre.

Synes godt om

per1291 Nybegynder

15. juli 2005 - 15:13 #3

fennec har ret i dét med baggrundsbilledet.

busschou har NÆSTEN ret i, at IE ikke understøtter position:fixed.

Faktum er, at IE ikke understøtter position:fixed i de tilfælde, hvor position skal fungere på "det yderste led" i dokumentet.

Man kan omgå denne restriktion, f.eks. ved at erklære en div, som fylder hele body, og så angive position:fixed i relation til denne div. Det giver så nogle andre problemer, som du vil opdage, men som du måske kan leve med.

Hilsen Per

Synes godt om

snoozie Nybegynder

15. juli 2005 - 16:41 #4

Det med position: fixed virker fint, men hvis jeg kalder 2 eller flere billeder får jeg lidt problemer. Jeg har lagt dem ind i to forskellige divs, som jeg kalder, men så bliver billederne ikke sat på rigtige position.

Hvordan kan man kalde flere baggrundsbilleder?

Mine divs:
#leftpic {
background-image: url("img/venstre.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left bottom;
}
#rightpic {
background-image: url("img/hojre.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}

Synes godt om

busschou Praktikant

15. juli 2005 - 16:55 #5

det du har gjort har intet med position:fixed at gøre ! ;o)
Du har sat dem som baggrundsbilleder, og et baggrundsbillede har mig bekendt ikke nogen speciel position, altså ikke en du kan bestemme fuldstændigt

Synes godt om

snoozie Nybegynder

15. juli 2005 - 16:57 #6

Hvis jeg kun har 1 billede virker position:fixed, men når jeg har flere end 1 så virker det ikke....

Synes godt om

busschou Praktikant

15. juli 2005 - 17:01 #7

i din kommentar 16:41:28 fremgår intet sted at du bruger position:fixed ?

Synes godt om

busschou Praktikant

15. juli 2005 - 17:01 #8

du bruger background-attachment:fixed ja
og det er som sagt så et baggrunds billede

Synes godt om

snoozie Nybegynder

15. juli 2005 - 17:03 #9

Ja, men det gør da det samme, forskellen er bare om det er baggrundsbillede eller alm billede.

Kan man ikke have 2 baggrundsbilleder?

Synes godt om

busschou Praktikant

15. juli 2005 - 17:06 #10

det er jo så lige det. Du kan have et baggrundsbillede i hvert af dine elementer som understøtter det :o)
Men hvad der sker når de styles til fixed og der er flere, ja det aner jeg ikke :o/
Men det er jo tilsyneladende det du har fundet ud af, desværre, at det ikke virker

Synes godt om

snoozie Nybegynder

15. juli 2005 - 17:21 #11

position: fixed fungerer ikke. Det gør background-position: fixed, men der kan jeg ikke få det til at virke med 2 baggrundsbilleder

Synes godt om

per1291 Nybegynder

15. juli 2005 - 18:30 #12

Nej, det virker ikke med 2 baggrundsbilleder.
Måske kunne man definere 2 divs oven i hinanden, med hvert sit baggrundsbillede?

Synes godt om

snoozie Nybegynder

15. juli 2005 - 19:04 #13

oven i hinanden? Jeg har en side jeg includer, som kalder de to divs: <div id="leftpic"></div>
<div id="rightpic"></div>

Synes godt om

per1291 Nybegynder

15. juli 2005 - 21:05 #14

Hej - Du skal erstatte med dine egne images, så virker dette her:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#leftpic {
position:absolute;
left:0px; width:500px;
top:0px; height:200px;
left:0px; width:100px;
top:0px; height:200px;
background-image: url("favicon.ico");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left bottom;
}
#rightpic {
position:absolute;
left:0px; width:500px;
top:0px; height:200px;
background-image: url("favicon.ico");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
</style>
</head>
<body>
<div id="leftpic"></div>
<div id="rightpic"></div>
</body>
</html>

Synes godt om

per1291 Nybegynder

15. juli 2005 - 21:09 #15

Hov, jeg har givet dig nogle overflødige linjer. Men dem kan du nok selv frasortere. - Hilsen Per

Synes godt om

snoozie Nybegynder

15. juli 2005 - 21:12 #16

Jeg kan ikke få det til at virke... De følger ikke med.

Synes godt om

per1291 Nybegynder

15. juli 2005 - 21:21 #17

Passer ikke. Prøv igen.

I både #leftpic og #rightpic skal du bruge:
left:0px; width:500px;
top:0px; height:200px;

Min tastefejl i #leftpic skal slettes:
left:0px; width:100px;

Hilsen Per

Synes godt om

snoozie Nybegynder

15. juli 2005 - 21:26 #18

De ender bare som et alm. billede på siden.

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<style type="text/css">
#leftpic {
position:absolute;
left:0px; width:500px;
top:0px; height:200px;
background-image: url("img/venstre.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left bottom;
}
#rightpic {
position:absolute;
left:0px; width:500px;
top:0px; height:200px;
background-image: url("img/hojre.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
</style>
<div id="leftpic"></div>
<div id="rightpic"></div>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</body>
</html>

Synes godt om

per1291 Nybegynder

15. juli 2005 - 21:30 #19

Hej snoozie -

Måske har jeg fuldstændig misforstået dig.
Min kode vil sikre, at dine billeder bliver stående på samme sted på skærmen, uanset hvordan folk scroller rundt i teksten.
Måske har du i stedet brug for, at disse billeder følger med teksten ned, når man scroller?

Synes godt om

snoozie Nybegynder

15. juli 2005 - 21:36 #20

Ja, nemlig. Men jeg er begyndt at benytte en iframe hvor teksten skal stå i og så behøves billederne ikke at følge med. Mit problem var at jeg kun kunne få 1 baggrundsbillede til at følge med når man scroller ned.

Så må jeg bare håbe at iframen ikke ødelægger for meget i php.

Men tak for hjælpen.

Synes godt om

per1291 Nybegynder

15. juli 2005 - 21:40 #21

Okay. Venligst læg et svar og giv dig selv point, så kan alle se at problemet er løst. Det var sjovt nok. - Hilsen Per

Synes godt om

snoozie Nybegynder

15. juli 2005 - 21:46 #22

Tror du ikke også det er den smarteste måde at gøre med iframe?

Synes godt om

per1291 Nybegynder

15. juli 2005 - 22:28 #23

iframe er det nemmeste at have med at gøre, synes jeg.
Men frame kan styres udefra.
Det er en smagssag. - Hilsen Per

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 JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

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