7
votes

Positionnement d'une image en dehors de la mise en page

Je fais un site Web qui est de 960px de large, mais je veux des images des deux côtés de l'en-tête que vous pouvez voir si vous avez un écran plus grand.

Parce que je veux garder le site 960px large, j'ai besoin de ces images latérales supplémentaires Pour ne pas être compté par le navigateur, je peux le faire fonctionner à gauche

voir ici:

 Entrez la description de l'image ici

http://www.wireframebox.com/test/veimages/index_leftworks.html

code: xxx

si vous faites votre FINULE DERNIER L'image rouge gauche disparaît hors du site sans amener la fenêtre du navigateur à obtenir une barre de défilement inférieure, cependant, lorsque j'essaie de faire la même chose sur le côté droit, il ne fonctionne pas

voir ici < / p>

Entrez la description de l'image ici

http: / /www.wireframebox.com/test/veimages/

code est égal, seul

est manquant

Le CSS est dans la source.

Vous pouvez également le voir étant utilisé sur ce site pour afficher la date qui sort de la gauche de la page, sans avoir un impact sur la largeur globale des sites

http://www.tequilafish.com/2009/04/22/css-how-a-pin-an-image-a-the-bottom-of-a-div/

Pourquoi cela fonctionne-t-il à gauche mais pas le droit?


5 commentaires

J'ai inséré des images et du code. Pensez à penser aux autres lisant cela avec le même problème et vos sites étant déconnecté :) et veuillez appliquer les modifications :)


Merci d'avoir fait tout ça! Espérons que quelqu'un peut voir ce qui se passe mal, je ne sais pas ce que vous entendez par "et s'il vous plaît appliquer les modifications"


Dupliqué possible de Positionnement d'une image en dehors de la mise en page, sans barres de défilement


Pourquoi avez-vous rependu votre question précédente? Éditer celui-là


@Russian Box - Vérifiez ma réponse Cela pourrait vous aider à obtenir le concept de la manière de réaliser la mise en page souhaitée. Si je suis en train de retarder certains où s'il vous plaît faites le moi savoir.


4 Réponses :


0
votes

Si vous souhaitez que votre page Web soit de 960px de large, vous devez modifier votre largeur de l'image principale à 960 - 170 (à gauche) - 170 (à droite). Changer la largeur de MAIN.JPG en 620px devrait corriger votre problème.

htth


1 commentaires

Je veux que les images latérales ne soient pas comptées vers la largeur de la page, cela fonctionne pour la gauche mais pas la droite. voir mes liens



0
votes

Placez l'image dans une étiquette de div ou d'image plus grande que votre Centre DIV et en faites l'enfant du contenu central div. Assurez-vous également que le positionnement le sortez du flux (\ Absolute). Si vous ajoutez ensuite une marge négative, vous pouvez extraire l'image en dehors du contenu div sans perturber son placement.

<div id="center">
<div class="top"></div>
Content content content
</div>


2 commentaires

J'ai joué avec cela, mais cela ne semble pas fonctionner. Pas comme je veux. Il met un divisé de la gauche de mon écran que je ne peux pas voir: S, ce que j'essaie de faire est de vous asseoir une image à droite de mon en-tête, comme je l'ai fait à gauche et que je n'ai pas ajouté Une barre de défilement vers le bas de la fenêtre lorsque la fenêtre est de 1300px et sous, voir ces images: wireframebox.com/test/veymages/justleft.jpg wireframebox.com/ Test / SIMILAGES / GAUCHE_AND_RIGHT.JPG


Avez-vous juste 2 petites images? Pouvez-vous les combiner en un de 1200px de large? Ensuite, ma solution devrait fonctionner ... et comme pour le défilement, vous devrez probablement envelopper la page entière dans une DIV avec débordement: caché; .. Peut-être utiliser de jQuery ou de javascript plain pour garder sa largeur à 100%



2
votes

C'est mieux si vous pouvez combiner ces deux images et donner dans l'arrière-plan du corps. Comme ceci:

html xxx

CSS xxx < p> Cochez cette http://jsfiddle.net/pvwza/1/


1 commentaires

Merci d'avoir travaillé à ce sujet. Oui, je savais avoir une seule image qui a étendu la section supérieure mais je veux le garder séparé / flotter d'autres images sur les côtés. Ce que vous avez suggéré est une façon de le faire mais pas ce que je cherchais. Merci tout de même!



4
votes

Voir le violon ci-dessous pour la sortie ...

Fiddle: http://jsfiddle.net/c2j6g/4/

Demo: http://jsfiddle.net/c2j6g/4/Enbedded/result/

voir ci-dessous image -

Entrez la description de l'image ici


4 commentaires

Cela semblent être ça! Toutefois, si je mets du contenu dans le contenu divisé telle qu'une image avec un hyperlien sur je ne peux pas cliquer dessus. Est-ce quelque chose à voir avec la façon dont les divs sont empilés?


J'ai trié ce problème ^ C'est parce que je suis nouveau à tout cela, je joue donc avec la mise en place d'une div dans le contenu div et de donner celui-ci un index Z: 1; qui semblent faire le contenu cliquant! : O


Merci Happy Singh! Je ferai ce que vous avez fait dans ce violon et je mets la colum dans le - donc je n'ai pas besoin de continuer à dire à de nouvelles choses d'être dans le + :)


Omfg son approche fantastique: D