Doppio Sfondo (Css - Div)

[PierinoPipetta]

Come posso fare secondo voi per avere uno sfondo alla sinistra del mio div e contemporaneamente uno a destra?
Per tenerne uno alla volta nessun problema, basta che lo imposto nel css e abbino lo stile a quel div. Ma se oltre a quello di sinistra (o destra a seconda) volessi averne uno anche a destra?
Devono essere però degli sfondi perchè sopra è scritto e inoltre il testo stà su un div unico e non su due.

Avrei pensato anche a creare un div fittizio con le stesse dimensioni dell'altro e con uno sfondo, ma questo dovrebbe rimanere sotto a quell'altro e non credo sia nemmeno possibile .

Qualcuno può aiutarmi?
Ciao

[flanza]

ma certo che puoi posizionare i div uno sull'altro! con position: absolute;

[PierinoPipetta]

si però come farei a farlo ridimensionare insieme all'altro div (la loro lunghezza deve essere uguale altrimenti avrei una pagina con lo sfondo di destra che continua oltre alla parte scritta.

[Jerry Masslo]

c'è un motivo particolare perché debbano essere 2?

per il fatto dei div uguali, si può fare inserendo lo stesso testo di quello principale e dandogli un visibility:hidden ma come soluzione non è granché, meglio mettere il tuo div principale annidato su altro porta sfondo, con un float che colloca il principale da un lato e così lasciando vedere lo sfondo dell'altro che si allungherà insieme al figlio.

[PierinoPipetta]

grazie Jerry in effetti è proprio quello che dovevo fare. :metallica

[Jerry Masslo]

Originariamente inviato da PierinoPipetta
grazie Jerry in effetti è proprio quello che dovevo fare. :metallica

contrordine è ancora più semplice volendo, prendi il tuo div e gli piazzi il tuo sfondo in un lato, suppongo abbia un repeat-y, poi gli dai un padding-left o right adeguato a secondo dei casi per lasciare lo sfondo non interessato dal testo, però potresti avere problemi di box model e allora ne annidi due e sfondo a quello esterno e a quello interno solo padding, volendo così è un po' come avevo detto prima ma non c'è bisogno di float, neanche prima ce n'era a secondo della disposizione, insomma hai molte alternative.

[bagu]

Originariamente inviato da PierinoPipetta
Come posso fare secondo voi per avere uno sfondo alla sinistra del mio div e contemporaneamente uno a destra?
Per tenerne uno alla volta nessun problema, basta che lo imposto nel css e abbino lo stile a quel div. Ma se oltre a quello di sinistra (o destra a seconda) volessi averne uno anche a destra?
Devono essere però degli sfondi perchè sopra è scritto e inoltre il testo stà su un div unico e non su due.

Avrei pensato anche a creare un div fittizio con le stesse dimensioni dell'altro e con uno sfondo, ma questo dovrebbe rimanere sotto a quell'altro e non credo sia nemmeno possibile .

Qualcuno può aiutarmi?
Ciao

Io ho usato il sistema di rimpiazzare h1 con una immagine oltre a usare una immagine di sfondo.

body {
background-color: white;
letter-spacing: normal;
text-align: center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
div#contenitore {
background-color: #E7F9E3;
background-image:url(rosamario.gif);
background-position:260px 150px;
background-repeat:no-repeat;
text-align: center;
vertical-align: top;
font-family:Verdana, Arial, Helvetica, sans-serif;
width:760px;
height:560px;
margin:auto;
border-top:1px solid black;
border-right:1px solid black;
border-left:1px solid black;


}

#ex1{
margin-left:auto;
margin-right:auto;
/*dimensioni dell'immagine*/
padding-top: 133px;
width: 200px;


background-image: url(50.gif);
background-repeat: no-repeat;

/*nasconde il testo*/
overflow: hidden;
/* WIN IE5 hack */
height: 133px;

voice-family: "\"}\"";
voice-family:inherit;
height: 0;
}

div#footer
{
background-color: #E7F9E3;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
text-align:center;
width:760px;
height:90px;
border-bottom:1px solid black;
border-right:1px solid black;
border-left:1px solid black;
margin-left:auto;
margin-right:auto;
margin-top:-20px;
margin-bottom:0;

}
ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;


}

#navlist li
{
list-style-type: none;
display: inline;
}

#navlist a { padding: 3px 10px; }

#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}

#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}




-->
</style>
</head>
<body>
<div id="contenitore">
<h1 id="ex1">Example</h1>
</div>
<div id="footer">
<div id="navcontainer">
<ul id="navlist">[*]album foto[*]manda foto o testi da pubbkicare[/list]
</div>
</div>
</body>
</html>


testato con ie6, firefox e opera 7.
se qualche anima pia me lo testa con ie 5.5 e mi fa sapere....

ciao
paolo

[PierinoPipetta]

Originariamente inviato da Jerry Masslo
contrordine è ancora più semplice volendo, prendi il tuo div e gli piazzi il tuo sfondo in un lato, suppongo abbia un repeat-y, poi gli dai un padding-left o right adeguato a secondo dei casi per lasciare lo sfondo non interessato dal testo, però potresti avere problemi di box model e allora ne annidi due e sfondo a quello esterno e a quello interno solo padding, volendo così è un po' come avevo detto prima ma non c'è bisogno di float, neanche prima ce n'era a secondo della disposizione, insomma hai molte alternative.

In effetti il float non lo uso sugli sfondi.
Una volta creati i due div uguali con i due sfondi (dx e sx) inserisco a seconda delle pagine:
1. o un'altro div che contiene il testo
2. o due div con float uno right e uno left nei quali posso inserire testo con una impaginazione differente.

Per la verità ci sono div ridondanti, ma in questo modo mi sembra più flessibile l'impaginazione del testo (Non sono vincolato a usare in tutte le pagine le due sezioni). Che ne pensi?


X Bagu: devo ammettere che non ho provato a usare il tuo codice perchè mi sembra implichi una posizione assoluta e uno sfondo non ripetuto.
In effetti non saprei se funziona su tutti i browser.
Grazie lo stesso

[Jerry Masslo]

adesso mi hai confuso dovresti prima scegliere un'impostazione grafica e poi riprodurla, se cambi idea ne fai un'altra ma intanto qualcosa si è fatto. Le possibilità sono diverse, sfondi ai lati, sfruttando il padding e solo un annidamento, una volta di qua e una di là, e potrebbe servire il float a secondo se si vuole la parte centrale sempre al centro o di qua e di là, insomma che hai deciso?

xbagu , essendoci immagini non sarebbe male che tu mettessi la pagina online piuttosto che tutti quelli che vogliono vedere l'effetto ci perdano il tempo che già tu hai speso.

non mi dire che ti sei perso Joe Maddalone

[bagu]

x pierino
l'immagine di sfondo del div contenitore è posizionata assoluta e non ripetuta per esigenze del layout e non perchè non possibile altrimenti.
per l'immagine che sostituisce h1 vale lo stesso discorso anche se ripeterla non avrebbe molto senso.

x jerry
ecco
url
Joe Maddalone nn me lo sono perso , solo che il mio inglesenn mi consente di fare quello mi servirebbe
ciauz
paolo