CSS problème de position de sprite

J'essaie de créer une frontière fixe sur le site qui changent dynamiquement la taille de la fenêtre du navigateur de sprite (il est pas parfait, je sais.): http://fc07.deviantart.net/fs70/f/2011/269/7/0/bordersprite_by_nakos-d4ayzne.png CSS problème de position de sprite

DEMO on jSFiddle

Mon problème que vous pouvez voir est la partie du mur vertical. Comme les #falJ et #falB sont height:100%, ils comprennent aussi l'extrémité de la paroi de fond avec l'espace entre les deux sprites de la paroi. Existe-t-il un moyen de forcer backround-position à utiliser uniquement une partie de paroi verticale sans extrémité de paroi inférieure?

Merci d'avance.

Source

2011-09-26 Ákos Nikházy

* Réponse courte: * Non, ce n'est pas la façon de faire ce que vous voulez faire. Vous ne pouvez pas accepter la fluidité avec un sprite qui ne correspond pas à la taille maximale potentielle. * Réponse longue: * Je rédigerai une solution pour vous le matin si personne n'a encore été capable de vous aider. – Ben

@vonkly J'avais peur de cela. Ce serait cool si vous me montrez un moyen de le faire. Je peux donc attendre votre solution :) Merci :) –

Je le mets à votre place maintenant - Je vais éditer ce commentaire quand il sera terminé. Question rapide: Est-ce que la * largeur * de l'élément est fixe, ou avez-vous besoin d'être aussi fluide? – Ben

Solution: http://jsfiddle.net/vonkly/Ld43B/

Ce n'est pas la plus jolie chose dans le monde, mais il réalise ce que vous voulez. Consultez le code source & lien direct pour les images d'arrière-plan pour voir ce que vous devez faire. Il est actuellement fixé à 299px de large; J'imagine que vous utiliserez quelque chose de plus large.

Je suggère également d'ajouter un peu de remplissage autour de votre contenu (avec un tag p, span, un autre div, etc.) - la façon dont il est actuellement mis en place n'est pas ce que je recommande pour la lisibilité.

EDIT

La seule façon que je peux imaginer atteindre une largeur fluide + boîte de hauteur avec les frontières que vous avez de la manière que vous voulez est d'utiliser une seconde image pour l'ouest et l'est contenant divs . Cela devrait fonctionner avec votre méthode actuelle.

Source

2011-09-27 18:08:37 Ben

Désolé mais ce n'est pas ce que je veux atteindre. Nous nous méprenons les uns les autres. :) Le point est que je le veux pour tenir dans n'importe quelle taille d'écran même lorsque je redimensionne la fenêtre à la volée. Dans ce cas, le haut et le bas seront toujours de taille fixe. –

Vous m'avez dit * "seule la hauteur change quand la hauteur de la fenêtre change"; * ceci ne décrit pas correctement votre objectif. Pour réaliser ce que vous voulez, utilisez votre méthode précédente, et simplement en utilisant une image différente pour les murs ouest et est. * Il n'y a aucun moyen de répéter une partie spécifique d'une image (sprite) comme vous le souhaitez *. – Ben

Oui, je vois où mon anglais vous a conduit dans le mauvais sens. Je n'ai trouvé d'autre solution nulle part ailleurs, alors je fais ce que vous venez de dire. :) Merci pour votre temps. Si vous écrivez ce commentaire en réponse, je l'accepterai :) –

CSS problème de position de sprite

Répondre

Questions connexes