Posizionamento di immagini al di fuori del layout

Sto creando un sito Web che è largo 960 px ma voglio immagini su entrambi i lati dell'intestazione che è possibile vedere se si dispone di uno schermo più grande.Posizionamento di immagini al di fuori del layout

perché voglio mantenere il sito 960px di larghezza ho bisogno di queste immagini laterali extra non da contare dal browser, posso farlo funzionare a sinistra

vedere qui:

enter image description here

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

Codice:

<!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>

se fate la vostra finestra più sottile l'immagine rossa sinistra scompare dal sito senza provocare la finestra del browser per ottenere una barra di scorrimento in basso, ma quando provo e fare la stessa cosa per il lato destro non funziona

vedi qui

enter image description here

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

codice è uguale, solo <div id="right"></div> manca

il CSS è in la fonte.

si può anche vederlo in uso su questo sito per mostrare la data sporge a sinistra della pagina, senza impattare la larghezza siti complessivi

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

perché questo lavoro sulla ma ha lasciato senza la destra?

fonte

2012-03-16 russian box

ho inserito le immagini e il codice. Per favore, pensa agli altri che lo leggono con lo stesso problema e che i tuoi siti sono offline :) E applica le modifiche :) – Neysor

Grazie per aver fatto tutto questo! speriamo che qualcuno possa vedere che cosa sta andando storto, anche io non so cosa intendi con "E applica le modifiche" –

possibile duplicato di [Posizionamento di un'immagine al di fuori del layout, senza barre di scorrimento] (http://stackoverflow.com/questions/9731774/positioning-an-image-outside-of-the-layout-without-scroll-bars) – Starx

Vedere il violino sotto per l'uscita ...

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

Demo: http://jsfiddle.net/C2j6G/4/embedded/result/

vedi sotto immagine -

enter image description here

fonte

2012-03-16 07:01:03 w3uiguru

Sembra proprio questo! tuttavia se inserisco il contenuto nel contenuto div come un'immagine con collegamento ipertestuale non posso fare clic su di esso. è qualcosa a che fare con il modo in cui i div sono impilati? –

ho risolto il problema^questo perché sono nuovo a tutto questo, quindi ho giocato con il mettere un div all'interno del contenuto div e dando a uno uno z-index: 1; che sembra rendere il contenuto cliccabile! : O –

Grazie mille! –

Se si desidera che la pagina del sito Web sia larga 960 px, è necessario modificare la larghezza dell'immagine principale su 960 - 170 (sinistra) - 170 (destra). Cambiare la larghezza di main.jpg in 620px dovrebbe risolvere il problema.

HTH

fonte

2012-03-16 05:59:47 Swaraj

Voglio che le immagini laterali non vengano contate per la larghezza della pagina, funziona per sinistra ma non per destra. vedere i miei collegamenti –

mettere l'immagine in un tag div o l'immagine che è più grande il vostro centro div e ne fanno il figlio della div Centro contenuti. Assicurati anche che il suo posizionamento lo tolga dal flusso (\ assoluto). Se si aggiunge un margine negativo, è possibile trascinare l'immagine all'esterno del contenuto div senza interromperne il posizionamento.

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

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

il codice HTML sarà un po 'come questo:

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

fonte

2012-03-16 06:10:13 rfinz

Ho giocato con questo ma non sembra funzionare. Non come voglio. Mette un div out dalla sinistra del mio schermo di quanto non possa vedere: S, quello che sto cercando di fare è sedere un'immagine a destra del mio header, come ho fatto a sinistra, e non averlo aggiungi una barra di scorrimento nella parte inferiore della finestra quando la finestra è 1300px e sotto, guarda queste immagini: http://www.wireframebox.com/test/sideimages/justleft.jpg http: //www.wireframebox. it/test/sideimages/left_and_right.jpg –

hai solo 2 piccole immagini? puoi combinarli in uno che è largo 1200px? allora la mia soluzione dovrebbe funzionare ... e per quanto riguarda la cosa a scorrimento, probabilmente avrai bisogno di avvolgere l'intera pagina in un div con overflow: nascosto; .. magari usando jQuery o semplicemente javascript per mantenere la sua larghezza al 100% – rfinz

E' meglio se è possibile combinare queste due immagini & dare nel background del corpo.in questo modo:

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; 
}

Scegli questa http://jsfiddle.net/PVWzA/1/

fonte

2012-03-16 06:43:57 sandeep

Grazie per aver lavorato su questo. sì, sapevo di avere un'immagine che attraversava la parte superiore ma volevo tenerla separata/fluttuare altre immagini dai lati. quello che hai suggerito è un modo di farlo ma non quello che stavo cercando. Grazie lo stesso! –

Posizionamento di immagini al di fuori del layout

risposta

Problemi correlati