Visualizzazione dei risultati da 1 a 7 su 7
  1. #1
    Utente di HTML.it L'avatar di elisa21
    Registrato dal
    May 2004
    residenza
    Lucca
    Messaggi
    246

    problema posizionamento immagini di sfondo

    ciao a tutti,
    probabilmente è una cosa molto semplice, ma non ho trovato niente in rete che potesse indicarmi come muovermi in questa situazione. Devo realizzare una struttura con due immagini di sfondo che vanno a incastrarsi con la parte centrale, dove si svilupperà l'intero sito. Sono riuscita a posizionare con 2 div le immagini in questione però non riesco ad "attaccarle" al div centrale.
    Ecco il mio risultato:

    come potete vedere resta un notevole spazio tra la l'ombra dell'immagine, che dovrebbe appunto affiancarsi alla parte centrale, e il div in bianco.
    Questo problema succede per entrambe le parti.
    Ho creato il css in questo modo:

    /* CSS Document */

    body{
    margin:0;
    color:#232323;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    background-color: #000000;
    background-attachment: scroll;
    }
    .inner_middle {
    background-attachment: scroll;
    background-image: url(images/inner_middle.jpg);
    background-repeat: repeat-y;
    background-position: center center;
    margin: 0px;
    padding: 0px;
    float: left;
    width: 100%;
    height: auto;
    }
    .left-column{
    float: left;
    height: 496px;
    width: 233px;
    padding-top: 0px;
    padding-left: 0px;
    background-image: url(graphics/bkg-left.jpg);
    background-repeat: no-repeat;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    position:relative;

    }
    .right-column{
    float: right;
    height: 496px;
    width: 233px;
    padding-top: 0px;
    padding-right: 0px;
    background-image: url(graphics/bkg-right.jpg);
    background-repeat: no-repeat;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    position:relative;

    }

    #main{
    width:1024px;
    height:765px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    font-family: Georgia;
    font-size: 11px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #908b51;
    text-decoration: none;
    float: none;
    padding: 0px;
    background-image: url(images/body_main_image.jpg);
    background-repeat: no-repeat;
    background-position: right;
    background-color: #FFFFFF;
    position:relative;
    }

    e nella pagina html ho:
    <body>
    <div class="inner_middle">
    <div class="left-column"></div>
    <div class="right-column"></div>
    <div id="main">------------------------</div>

    </div>
    </body>

    come posso risolvere questo problema?
    Vi ringrazio per l'aiuto
    elisa
    L'immaginazione è l'intelligenza che si diverte

  2. #2
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    intanto verifica che i due div siano effettivamente adiacenti

    poi imposta l'immagine di sfondo con il vigneto con
    background-position: top right;
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  3. #3
    Utente di HTML.it L'avatar di elisa21
    Registrato dal
    May 2004
    residenza
    Lucca
    Messaggi
    246
    Originariamente inviato da fcaldera
    intanto verifica che i due div siano effettivamente adiacenti

    poi imposta l'immagine di sfondo con il vigneto con
    background-position: top right;
    ho inserito il tag relativo alla posizione per entrambi i div, mentre per quanto riguarda la verifica ti riferisci a quelli di sinistra e destra?

    grazie.
    elisa
    L'immaginazione è l'intelligenza che si diverte

  4. #4
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    Originariamente inviato da elisa21
    per quanto riguarda la verifica ti riferisci a quelli di sinistra e destra?


    ma il vigneto è un'immagine di sfondo o no?
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  5. #5
    Utente di HTML.it L'avatar di elisa21
    Registrato dal
    May 2004
    residenza
    Lucca
    Messaggi
    246
    Originariamente inviato da fcaldera


    ma il vigneto è un'immagine di sfondo o no?
    sono due immagini: una che si deve posizionare a sinistra e l'ombra deve essere attaccata alla parte bianca e così anche per la seconda immagine tagliata in modo tale da avere l'ombra verso la parte bianca quindi si posiziona alla destra della parte centrale bianca
    L'immaginazione è l'intelligenza che si diverte

  6. #6
    Utente bannato
    Registrato dal
    Sep 2007
    Messaggi
    2,777
    Con questo codice a me funziona bene naturalmente ho cambiato i background per poter provare non avendo le tue immagini
    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>Documento senza titolo</title>
    
    <style type="text/css" media="screen">
    /* CSS Document */
    
    body, html {
    	margin:0;
    	color:#232323;
    	padding: 0;
    	background-color: #000000;
    }
    #main {
    	background:#99CC33;
    	float:left;
    	width:540px;
    	height:765px;
    	margin: 0;
    	font-family: Georgia;
    	font-size: 11px;
    	font-style: normal;
    	line-height: normal;
    	font-weight: normal;
    	font-variant: normal;
    	text-transform: none;
    	color: #908b51;
    	text-decoration: none;
    }
    #contenitore {
    	float:left;
    	background:#FFFF00;
    }
    #dx {
    	height: 250px;
    	width: 233px;
    	background:url(dx.jpg);
    	float: left;
    }
    #sx {
    	height: 250px;
    	width: 233px;
    	background:url(sx.jpg);
    	float:left;
    }
    </style>
    
    </head>
    
    <body>
    
    <div id="contenitore">
      <div id="sx"></div>
      <div id="main">Inserire qui il contenuto per  id "main"</div>
      <div id="dx"></div>
    </div>
    
    </body>
    </html>

  7. #7
    Utente di HTML.it L'avatar di elisa21
    Registrato dal
    May 2004
    residenza
    Lucca
    Messaggi
    246
    innazittutto ti ringrazio, questo è quello che avevo in mente di fare, ho adattato il tuo codice con le mie immagini ed è ok, ho però notato due cose:

    - se voglio centrare tutta la struttura, perdo la disposizione delle immagini ovvero l'immagine di destra va a capo sotto alle altre due parti

    - se ridimensiono la finestra del browser succede la stessa cosa, invece di restare fissa, l'immagine di destra si sposta e si posiziona in linea con l'immagine di sinistra, sotto alla parte centrale, in pratica va a capo.

    E' possibile ovviare a queste due imperfezioni?
    ti ringrazio tanto dell'aiuto.
    elisa
    L'immaginazione è l'intelligenza che si diverte

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.