Archief - image sprites en div sizing

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
B

Bram

Legacy Member
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 :p)

vosdmu.png


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.
k

kows

Legacy Member
screenshots mag ook ni? :p
wat ik zo zie als oplossing is uw div#main bg als aparte img en de rest in sprite.
-

-BVR-

Legacy Member
kows zei:
screenshots mag ook ni? :p
wat ik zo zie als oplossing is uw div#main bg als aparte img en de rest in sprite.
Klik om te vergroten...
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.
B

Bram

Legacy Member
'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.
k

kows

Legacy Member
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)?
B

Bram

Legacy Member
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)
-

-BVR-

Legacy Member
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan