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

Permalänk
Medlem
Skrivet av Mitander:

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.

Det är ett trick; den ska inte vara från kanten utan centrerad. Om du kollar på arm.png-bilden kommer du se att den är 6600 pixlar bred, varav halva är helt transparent. Något sånt här:
_______________________________________
|_____transparent_____|_______ solid_______|
'----------------------- 6600 px ----------------------'

(observera att jag har gått hårt till överdrift med armens längd, men pngs packar väldigt bra)

Bilden centreras i x-led för att aldrig flytta sig ur från mitten och således ser det ut som om man har en arm som sticker in från högra kanten (iom att vänstra delen av bilden är genomskinlig)

I mitt exempel låter jag för enkelhets skull bilden försvinna bakom #wrapper, men då du inte har en rak pil får du experimentera med att ersätta solida pixlar i armen med transparenta. Om du har en wrapper som är 800 px bred borde det exempelvis räcka att byta 400 solida pixlar mot transparenta.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

Okej, jag fattar nu men jag har inte komma så jättelångt i webdesign kursen, så vad är taggen för transp.?

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

Permalänk
Medlem

Vänstra hälften av bilden ska vara transparent. Det krävs ingen tagg, bara att utöka ritområdet med 100% i X-led och se till att det hamnar till vänster om grafiken, samt att du inte har någon bakgrundsfärg på den sektionen

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

okej haha, jag tror jag är lite trög^^vilket område ska jag utöka ritområdet i xled? :S body?

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

Permalänk
Medlem

Bilden.

Om du detta är din pil: <|========= så tar du ========= (som är säg 1000 px) och lägger till lika mycket transparens till vänster om den delen, så här ungefär: __________========= (sammanlagt 2000 px, underscore representerar total genomskinlighet)

Det handlar alltså om bilden som du sätter som bakgrund. Inget HTML-element alltså. Med ritområdet menar jag den area du har att rita på i t ex Photoshop.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

Ok, nu fattar jag tror jag. Men om jag har 2 olika upplösningar så ändras ju avståndet mellan vänstra sidan på skärmen och min pil. d.v.s. att om jag har ändrat pixlarna så att det stämmer överens på min nuvarande upplösning på min laptop och sedan går hem till min 1920 upplösning så borde pilen flyttas längre till vänster på skärmen?

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

Permalänk
Medlem

Eftersom du centraliserar bakgrundsbilden så hänger den med när du förstorar och förminskar ditt fönster i sidled. Se följande vackra och icke skalenliga ASCII-illustration:

1024x: +-------------------+ | | | | | | +-----------+---------+---------+-----------+ | : | : | +-----------+---------+---------+-----------+ | | | | | | | | +-------------------+ 1920x: +-----------------------------+ | | | | | | +------+--------------+--------------+------+ | : | : | +------+--------------+--------------+------+ | | | | | | | | +-----------------------------+

Visa signatur

Kom-pa-TI-bilitet