Forum Mjukvara Programmering och digitalt skapande Tråd

Element som går utanför skärmen på hemsida

1 2
Skriv svar
Permalänk
Medlem
●

Element som går utanför skärmen på hemsida

Hej.
Jag håller på att koda en webbsida och har stött på ett problem.
Jag hade tänkt att ha en pil som går från utsidan skärmen in till min meny som ligger i ungefär mitten på sidan. Det jag har testat är att gör pilen rätt så lång så den går utanför skärmen men då blir det självklart en scroll vågrätt.

Jag har testat med overflow:hidden men det funkar tydligen inte och har slut på idéer. jag hade ju kunnat göra pilen så den passar just min upplösning så klart men så vill jag ju inte ha det.

tyvärr kan jag inte länka sidan för den ligger ej uppe för servern den ligger på kraschade efter en systemuppdatering.

Tacksam för svar

Visa signatur

MSI 770-C45 | Amd Athlon x4 635 | Asus Radeon Hd 5770 1GB | Corsair 2x2gb 1333mhz Value Select | Chieftec Smart series 550W | Western Digital Caviar 500GB 16MB 7200rpm |

Logitech G9x | Steelseries 6G V2 | Razer Carcharias

Redigera
Citera flera Citera
Permalänk
Medlem
●

Själv skulle jag nog ha skapat pilen av två bilder samt två DIV taggar.

Den första bilden skulle då föreställa pilens spets och skulle användas som bakgrund i den första DIV'en, som är lika bred och hög som bilden. Den andra bilden skulle föreställa pilens "bakdel", och jag skulle göra den på ett sådant sätt så att man kan repetera den horisontellt.

Den andra bilden skulle jag då använda som bakgrund i den andra DIV'en, som skulle ha samma höjd som bilden, fast lika bred som resten utav skärmen. Sen skulle jag såklart vilja repetera den andra bakgrunden (pilens bakdel) i x-led.

Det kan vara ganska krångligt att förstå det jag just skrev. Jag tror själv inte riktigt att jag förstår när jag läser det igen. Men du kan be mig om en förtydligande om det behövs

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Här är min lösning som jag snabbt knåpade ihop:

  • body - width: 99% för att ha en bredd, med 100% blev det en horizonal scroll bar

  • wrapper - position: relative för att pilens position: absolute ska utgå från wrapper, inte från skärmen

  • arrow - position: absolute för att ha en exakt position (daah)

  • arrow - right: 905px för att befinna sig 905 px från den 900 px breda wrapperns högra kant, d.v.s. 5 px utanför vänsta kanten

  • arrow - width: 1000px för att gå utanför skärmen som du tänkte

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Body (och alla block-element) tar upp allt tillgängligt horisontellt utrymme som standard. Om pilen är en grafisk detalj så är det enklast att helt enkelt ange den som bakgrundsbild på body eller ett annat element beroende på hur din sida är uppbyggd. Släng in en bit HTML så är det lättare att hjälpa.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Alex87:

Själv skulle jag nog ha skapat pilen av två bilder samt två DIV taggar.

Den första bilden skulle då föreställa pilens spets och skulle användas som bakgrund i den första DIV'en, som är lika bred och hög som bilden. Den andra bilden skulle föreställa pilens "bakdel", och jag skulle göra den på ett sådant sätt så att man kan repetera den horisontellt.

Den andra bilden skulle jag då använda som bakgrund i den andra DIV'en, som skulle ha samma höjd som bilden, fast lika bred som resten utav skärmen. Sen skulle jag såklart vilja repetera den andra bakgrunden (pilens bakdel) i x-led.

Det kan vara ganska krångligt att förstå det jag just skrev. Jag tror själv inte riktigt att jag förstår när jag läser det igen. Men du kan be mig om en förtydligande om det behövs

Gå till inlägget

ahh, varför tänkte jag inte på det innan, har gjort så innan. Tack så sjukt mycket Jag förstår precis hur du menar, jag skär bara ut en liten del av pilen och sedan repeterar jag den via x vinkeln.

Visa signatur

MSI 770-C45 | Amd Athlon x4 635 | Asus Radeon Hd 5770 1GB | Corsair 2x2gb 1333mhz Value Select | Chieftec Smart series 550W | Western Digital Caviar 500GB 16MB 7200rpm |

Logitech G9x | Steelseries 6G V2 | Razer Carcharias

Redigera
Citera flera Citera
Permalänk
Medlem
●

Vill även tacka för alla övriga svar!

Visa signatur

MSI 770-C45 | Amd Athlon x4 635 | Asus Radeon Hd 5770 1GB | Corsair 2x2gb 1333mhz Value Select | Chieftec Smart series 550W | Western Digital Caviar 500GB 16MB 7200rpm |

Logitech G9x | Steelseries 6G V2 | Razer Carcharias

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Mitander:

Vill även tacka för alla övriga svar!

Gå till inlägget

Fungerade inte för mig heller men jag googlade lite, tror 'overflow-x: hidden' löser dina problem

Redigera
Citera flera Citera
Permalänk
Medlem
●

men det fungerade på vänster sidan

okej, ska testa nu ikväll!

Visa signatur

MSI 770-C45 | Amd Athlon x4 635 | Asus Radeon Hd 5770 1GB | Corsair 2x2gb 1333mhz Value Select | Chieftec Smart series 550W | Western Digital Caviar 500GB 16MB 7200rpm |

Logitech G9x | Steelseries 6G V2 | Razer Carcharias

Redigera
Citera flera Citera
Permalänk
Medlem
●

Det fungerade inte :/ om du har någon mer idé är jag tacksam för svar!

Visa signatur

MSI 770-C45 | Amd Athlon x4 635 | Asus Radeon Hd 5770 1GB | Corsair 2x2gb 1333mhz Value Select | Chieftec Smart series 550W | Western Digital Caviar 500GB 16MB 7200rpm |

Logitech G9x | Steelseries 6G V2 | Razer Carcharias

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Mitt förslag: http://baramartin.se/pilgrej/

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Teknocide:

Mitt förslag: http://baramartin.se/pilgrej/

Gå till inlägget

+1. Ren markup, inga löjliga extraelement eller fulhack.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●

riktigt fint faktiskt tack! men hur ändrar jag hur långt den hoppar? xpos eller?

Visa signatur

MSI 770-C45 | Amd Athlon x4 635 | Asus Radeon Hd 5770 1GB | Corsair 2x2gb 1333mhz Value Select | Chieftec Smart series 550W | Western Digital Caviar 500GB 16MB 7200rpm |

Logitech G9x | Steelseries 6G V2 | Razer Carcharias

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Hehe, du behöver ju inte låta den hoppa alls, ta bort alla <script>-taggar bara samt onload-attributet i body-taggen så står det still. Annars är det variabeln "mul" som anger hur många pixlar den rör sig (200 = 200 pixlar.)

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Asså, det fungerar fortfarande inte... vill ju ha så att det passar på alla upplösningar men går fortfarande inte! tog bort script samt onloaden..kolla på koden här så blir det nog lättare att förstå:
mali3101.mycase.se/windowsguiden/index.html[/url]

Senast redigerat
Visa signatur

MSI 770-C45 | Amd Athlon x4 635 | Asus Radeon Hd 5770 1GB | Corsair 2x2gb 1333mhz Value Select | Chieftec Smart series 550W | Western Digital Caviar 500GB 16MB 7200rpm |

Logitech G9x | Steelseries 6G V2 | Razer Carcharias

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Du använder inte den teknik som jag visade.. Jag la pilen som bakgrundsbild på #wrapper och pilens "arm" på body. Du har lagt pilen som bakgrundsbild i #arrow och inte mycket mer.

Det enda mitt script gör är att få pilen att hoppa så det är helt irrelevant i sammanhanget.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

jaha okej då förstår jag. Bara en sak till. Jag har ju redan en bakgrundsbild på body, hur gör jag då? :S

Visa signatur

MSI 770-C45 | Amd Athlon x4 635 | Asus Radeon Hd 5770 1GB | Corsair 2x2gb 1333mhz Value Select | Chieftec Smart series 550W | Western Digital Caviar 500GB 16MB 7200rpm |

Logitech G9x | Steelseries 6G V2 | Razer Carcharias

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Sätt den på html

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Men då hamnar den ju bakom body backgrounden? :S

Visa signatur

MSI 770-C45 | Amd Athlon x4 635 | Asus Radeon Hd 5770 1GB | Corsair 2x2gb 1333mhz Value Select | Chieftec Smart series 550W | Western Digital Caviar 500GB 16MB 7200rpm |

Logitech G9x | Steelseries 6G V2 | Razer Carcharias

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

body-bakgrund = pilarm
html-bakgrund = tidigare body-bakgrunden

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jo nu närmar jag mig helt klart men lyckas fortfarande inte, hur repeterar jag den på bodyn så att det blir helt rätt? kolla gärna på koden och hjälp mig får det verkligen inte att funka :S

Visa signatur

MSI 770-C45 | Amd Athlon x4 635 | Asus Radeon Hd 5770 1GB | Corsair 2x2gb 1333mhz Value Select | Chieftec Smart series 550W | Western Digital Caviar 500GB 16MB 7200rpm |

Logitech G9x | Steelseries 6G V2 | Razer Carcharias

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag löste det till slut nu! tack så mycket för all hjälp!

Visa signatur

MSI 770-C45 | Amd Athlon x4 635 | Asus Radeon Hd 5770 1GB | Corsair 2x2gb 1333mhz Value Select | Chieftec Smart series 550W | Western Digital Caviar 500GB 16MB 7200rpm |

Logitech G9x | Steelseries 6G V2 | Razer Carcharias

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Mitander:

Jag löste det till slut nu! tack så mycket för all hjälp!

Gå till inlägget

Det ser inte riktigt rätt ut nu heller är jag rädd..

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

oj shit, har 17" på min laptop, märkte nu på min 24 att det inte såg bra ut :/ tog background position med visst antal px ovch förstår att det inte fungerar på alla upplösningar :S hur ska jag göra nu då? närmar mig lixom..

Visa signatur

MSI 770-C45 | Amd Athlon x4 635 | Asus Radeon Hd 5770 1GB | Corsair 2x2gb 1333mhz Value Select | Chieftec Smart series 550W | Western Digital Caviar 500GB 16MB 7200rpm |

Logitech G9x | Steelseries 6G V2 | Razer Carcharias

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Mitander:

oj shit, har 17" på min laptop, märkte nu på min 24 att det inte såg bra ut :/ tog background position med visst antal px ovch förstår att det inte fungerar på alla upplösningar :S hur ska jag göra nu då? närmar mig lixom..

Gå till inlägget

Om du menar pilen, så kan du använda nyckelordet right istället för ett px-värde:

background-position: top right;
Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●

okej, kan jag använda right, sedan pixlar för att dra ner den längre ner på sidan`?

Visa signatur

MSI 770-C45 | Amd Athlon x4 635 | Asus Radeon Hd 5770 1GB | Corsair 2x2gb 1333mhz Value Select | Chieftec Smart series 550W | Western Digital Caviar 500GB 16MB 7200rpm |

Logitech G9x | Steelseries 6G V2 | Razer Carcharias

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Mitander:

okej, kan jag använda right, sedan pixlar för att dra ner den längre ner på sidan`?

Gå till inlägget

Ja, ersätt top i mitt exempel med ett pixelvärde.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Mitander:

okej, kan jag använda right, sedan pixlar för att dra ner den längre ner på sidan`?

Gå till inlägget

Det kommer tyvärr inte fungera då du förminskar fönstret; då bredden på body-elementet ändras följer bakgrundsbilden med iom att den är relativ till högra kanten. Detta innebär att den till slut kommer hamna under wrapper-elementet.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

okej, asså, någon lösning måste finnas? är ju lixom så nära nu..

Visa signatur

MSI 770-C45 | Amd Athlon x4 635 | Asus Radeon Hd 5770 1GB | Corsair 2x2gb 1333mhz Value Select | Chieftec Smart series 550W | Western Digital Caviar 500GB 16MB 7200rpm |

Logitech G9x | Steelseries 6G V2 | Razer Carcharias

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Mitander:

okej, asså, någon lösning måste finnas? är ju lixom så nära nu..

Gå till inlägget

Ja det går, gör som i mitt exempel så fungerar det t ex.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jo men saken är den att jag fattar inte hur jag ska placera pil armen i body... för beroende på upplösning ändras ju antalet pixlar den ska vara från kanten.

Visa signatur

MSI 770-C45 | Amd Athlon x4 635 | Asus Radeon Hd 5770 1GB | Corsair 2x2gb 1333mhz Value Select | Chieftec Smart series 550W | Western Digital Caviar 500GB 16MB 7200rpm |

Logitech G9x | Steelseries 6G V2 | Razer Carcharias

Redigera
Citera flera Citera
1 2
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara