Posicionar imágenes fuera del diseño

Estoy creando un sitio web de 960px de ancho, pero quiero imágenes en ambos lados del encabezado que puede ver si tiene una pantalla más grande.Posicionar imágenes fuera del diseño

porque quiero mantener el sitio 960 de ancho Necesito estas imágenes laterales adicionales a no ser contados por el navegador, que puede conseguir que funcione a la izquierda

ver aquí:

enter image description here

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

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
body { margin: 0; padding: 0; border: 0; background-color:#096 } 

img { border: 0; } 

#main { 
    width:960px; 
    height:216px; 
    background-image:url(main.jpg); 
    position:relative; 
    top:0; margin: 0 auto; 
} 



#left { 
    width:170px; 
    height:216px; 
    background-image:url(left.jpg); 
    float:left; 
    left:-170px; 
    position:relative; 
} 

#right { 
    width:170px; 
    height:216px; 
    background-image:url(right.jpg); 
    float:right; 
    left:170px; 
    position:relative; 
} 



</style> 

</head> 

<body> 

    <div id="main"> 
     <div id="left"></div> 
     <div id="right"></div> 
    </div> 
</body> 
</html>

si hace que su ventana sea más delgada, la imagen roja izquierda desaparece del sitio sin hacer que la ventana del navegador obtenga una barra de desplazamiento inferior, sin embargo, cuando intento hacer lo mismo hacia la derecha, no funciona

ver aquí

enter image description here

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

Código es igual, sólo se <div id="right"></div> falta

el css está en la fuente.

también se puede ver que está siendo utilizado en este sitio para mostrar la fecha que sobresale la izquierda de la página, sin afectar los sitios Ancho total

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

por qué funciona esto de la izquierda, pero no ¿el derecho?

Fuente

2012-03-16 russian box

me inserta imágenes y código. Por favor, piense en otros que lo lean con el mismo problema y sus sitios estén fuera de línea :) Y por favor aplique los cambios :) – Neysor

¡Gracias por hacer todo eso! con suerte alguien puede ver lo que está yendo mal, también no sé a qué te refieres con "Y aplica los cambios" –

posible duplicado de [Posicionar una imagen fuera del diseño, sin barras de desplazamiento] (http://stackoverflow.com/questions/9731774/positioning-an-image-outside-of-the-layout-without-scroll-bars) – Starx

Ver el violín a continuación para la salida ...

violín: http://jsfiddle.net/C2j6G/4/

Demostración: http://jsfiddle.net/C2j6G/4/embedded/result/

ver imagen abajo -

enter image description here

Fuente

2012-03-16 07:01:03 w3uiguru

¡Esto parece serlo! sin embargo, si pongo contenido en el contenido div como una imagen con hipervínculo, no puedo hacer clic en él. ¿Tiene esto algo que ver con cómo se dividen los divs? –

ordene ese problema^esto es porque soy nuevo en todo esto, así que jugué con poner un div dentro del div de contenido y darle un índice z: 1; que parece hacer que el contenido se pueda hacer clic! : O –

¡Muchas gracias! –

Si desea que su página web tenga 960px de ancho, entonces debe cambiar el ancho de la imagen principal a 960 - 170 (izquierda) - 170 (derecha). Cambiar el ancho de main.jpg a 620px debería solucionar su problema.

HTH

Fuente

2012-03-16 05:59:47 Swaraj

Quiero que las imágenes laterales no se cuenten en el ancho de la página, funciona a la izquierda pero no a la derecha. mira mis enlaces –

poner la imagen en una etiqueta div o imagen que es más grande que su div centro y hacen que el niño de la div de contenido central. También asegúrese de que su posicionamiento lo sacará del flujo (\ absoluto). Si agrega un margen negativo, puede extraer la imagen fuera del div de contenido sin interrumpir su ubicación.

#center div.top{ 
     width:1200px; 
     height:170px; 
     margin: 0px -170px; 
     position:absolute; 

     background:url("randombackground.png") no-repeat; 
    }

el código HTML será un poco como esto:

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

Fuente

2012-03-16 06:10:13 rfinz

He jugado con esto pero parece que no funciona. No como yo quiero. Coloca un div en la parte izquierda de mi pantalla que no puedo ver: S, lo que intento hacer es colocar una imagen a la derecha de mi encabezado, como hice a la izquierda, y no tenerlo. agregue una barra de desplazamiento en la parte inferior de la ventana cuando la ventana tenga 1300px o menos, consulte estas imágenes: http://www.wireframebox.com/test/sideimages/justleft.jpg http: //wireframebox. com/test/sideimages/left_and_right.jpg –

¿acabas de tener 2 imágenes pequeñas? ¿Puedes combinarlos en uno de 1200px de ancho? entonces mi solución debería funcionar ... y en cuanto a la función de desplazamiento, probablemente necesites envolver toda la página en un div con desbordamiento: oculto; .. tal vez usando jQuery o JavaScript simple para mantener su ancho al 100% – rfinz

Es mejor si se pueden combinar esas dos imágenes & dan en el background del cuerpo.de esta manera:

HTML

<div id="main"></div>

CSS

body { 
margin: 0; 
padding: 0; 
background:#096 url(http://imgur.com/JHXDv.png) no-repeat top center; 
} 

#main { 
    width:960px; 
    height:216px; 
    background-image:url(http://www.wireframebox.com/test/sideimages/main.jpg); 
    margin:0 auto; 
}

Marque esta http://jsfiddle.net/PVWzA/1/

Fuente

2012-03-16 06:43:57 sandeep

Gracias por trabajar en esto. sí, sabía que tenía una imagen que abarcaba la sección superior, pero quiero mantenerla separada/flotar otras imágenes por los lados. lo que sugirió es una forma de hacerlo, pero no lo que estaba buscando. ¡Gracias de todos modos! –

Posicionar imágenes fuera del diseño

Respuesta

Cuestiones relacionadas