Thread: image sprites en div sizing
-
13-07-2011, 17:51 #1Approved 9-lifer
- Registered
- 01/08/02
- Location
- Gent
- Posts
- 9,675
- iTrader
- 3 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/361
image sprites en div sizing
Elk zijnen goeiendag
Sorry voor de cryptische/onduidelijke titel, ik probeer mezelf wat duidelijker uit te leggen: ik ben bezig met een klein design en gebruik 1 image sprite, geschetst hieronder (werkgever wil niet dat ik de originele afbeelding upload, vandaar frisse kleurtjes
)

In mijn html heb ik een header, div#main en footer die stretchen over 100% van de pagina, in elk element zit een .container die 960px breed is. De bovenste 3 vlakken in de sprite dienen van boven naar onder voor de header, #main en footer respectievelijk.
Ik zit met het volgende probleem: mijn sprite werkt perfect voor alle elementen die een vaste hoogte (en eventueel vaste breedte hebben, zoals header, footer of de losse afbeeldingen). Het probleem zit hem echter in het div#main gedeelte: de achtergrond afbeelding voor #main is 500px hoog, maar de #main .container kan natuurlijk veel hoger zijn, afhankelijk van de inhoud.
Mijn vraag is nu: kan ik dit met eenvoudige css oplossen? Ik probeerde met
Maar dat zorgt er natuurlijk voor dat mijn footer tegen de main plakt (en dus content van #main .container met de footer overlapt).Code:#main { background-position: 0 -273px; max-height: 500px; }
Moet ik m'n sprite anders opdelen? Moet ik verschillende sprites gebruiken? Alvast bedankt voor tips/hulp/uitleg.If I had a nickel for every time someone told me that my idea for melting down coins to make a giant robotic parrot was a bad idea, I would have one kicka$$ giant robotic parrot.no votes
-
-
13-07-2011, 18:02 #2Approved 9-lifer
- Registered
- 21/06/03
- Location
- Lichtervelde/Gent
- Posts
- 1,009
- iTrader
- 21 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 1/9
screenshots mag ook ni?

wat ik zo zie als oplossing is uw div#main bg als aparte img en de rest in sprite.no votes
-
13-07-2011, 18:20 #3Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
Dit.
Ge moet uw sprites ook niet te groot maken hé, want dan duurt het nog eeuwen voor het geladen is. Ook files die niet per se .png moeten zijn (kleine loader, page-ups etc.) kan je dan best als een simpele .gif opslaan.no votes
-
13-07-2011, 20:25 #4Approved 9-lifer
- Registered
- 01/08/02
- Location
- Gent
- Posts
- 9,675
- iTrader
- 3 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/361
't Is momenteel opgelost door het content stuk onderaan de sprite te zetten, daar is repeat-x voldoende, maar ik veronderstel da het idd beter zou zijn om het in een aparte afbeelding te steken.
Kga eens kijken of mijn sprite nog "verantwoord" is, anders gaak losse afbeeldingen in sprite steken, en achtergronden van content in losse afbeeldingen.If I had a nickel for every time someone told me that my idea for melting down coins to make a giant robotic parrot was a bad idea, I would have one kicka$$ giant robotic parrot.no votes
-
14-07-2011, 10:48 #5Approved 9-lifer
- Registered
- 21/06/03
- Location
- Lichtervelde/Gent
- Posts
- 1,009
- iTrader
- 21 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 1/9
Het nuttigste voorbeeld dat ik gezien heb met sprites is voor hover-effects,
anders wordt die afbeelding pas geladen de eerste keer dat je hovert en zie je dus de overgang
nu doe je dit gewoon voor de snelheid (1 request ipv 1 / afbeelding)?no votes
-
14-07-2011, 11:43 #6Approved 9-lifer
- Registered
- 01/08/02
- Location
- Gent
- Posts
- 9,675
- iTrader
- 3 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/361
Zitten hover effects tussen en idd ook voor de snelheid. Het zijn nu nog maar een paar afbeeldingen, maar dat zal snel meer worden (icoontjes etc)
If I had a nickel for every time someone told me that my idea for melting down coins to make a giant robotic parrot was a bad idea, I would have one kicka$$ giant robotic parrot.no votes
-
14-07-2011, 13:10 #7Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
Ik zou, zoals je eerder zei, het wat beter sorteren.
Background images -> apart bestand
Kleine icoontjes, hover images, menu-items -> sprite
Voorbeeld van hoe FB sprites gebruikt: http://static.ak.fbcdn.net/rsrc.php/...W6-cJl05WA.png
Voorbeeld van hoe ik sprites op een site gebruikt heb (voor een menu, dus elk menu-item + zijn hoverstate heb je dan in één afbeelding zitten, ipv 14 afzonderlijke afbeeldingen):
http://www.denotenbalkers.be/files/t...nubalkfull.pngno votes

