1. #1
    Bram's Avatar
    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
    Code:
    #main {
    	background-position: 0 -273px;
    	max-height: 500px;
    }
    Maar dat zorgt er natuurlijk voor dat mijn footer tegen de main plakt (en dus content van #main .container met de footer overlapt).

    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  

  2. #2
    kows's Avatar
    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  

  3. #3

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Quote Originally Posted by kows View Post
    This quote is hidden because you are ignoring this member. Show
    screenshots mag ook ni?
    wat ik zo zie als oplossing is uw div#main bg als aparte img en de rest in sprite.
    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  

  4. #4
    Bram's Avatar
    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  

  5. #5
    kows's Avatar
    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  

  6. #6
    Bram's Avatar
    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  

  7. #7

    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.png
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in