Re: sfondi con div

**lucrez** · 13-12-2008, 17:05

Ciao Ragazzi

sperando di non fare l'ennesima domanda uguale (ho guardato prima il forum ma non ho trovato esattamente ciò che cerco).

Premettendo con non sono un fenomeno con fogli di stile e div vi chiedo aiuto per realizzare uno sfondo con div centrale ripetutto sull'asse x e due sfondi (uno a sx e uno a destra) ripetututi sull'asse y.

Un po' come su questo forum o meglio su http://grafica.html.it/

Qualcuno mi sa aiutare, perchè ho provato ma riesco solo a realizzare lo sfondo arancione centrale sull'asse x mentre non riesco a metterci le bande a dx e a sx.-

ringrazio in anticipo.

**Myaku** · 13-12-2008, 17:47

lo sfondo ripetuto sull'asse y lo costruisci con una sola immagine alta 1px (ti metto a fine post un'immagine di esempio) e lo applichi ad un div.
All'interno vi anniderai un altro div a cui applichi la sfumatura in orizzontale.

Ti sposto su css

**lucrez** · 13-12-2008, 20:31

grazie l'unico problema è con il div annidato in cui faccio la sfumatura in orizzontale.
Infatti in questo caso l'immagine non si portrae fino in fondo alla pagina come avrei sperato ma si "allunga" fintanto che ci sono dei contenuti all'intero del div stesso.
In questo modo le due bande laterali non vanno fino in fondo alla pagina ma si fermano alla stessa alteza del div centrale.

E' possibile allungare il div centrale fino a fine pagina in modo da allungare anche i div laterali? Coprendo così l'intera pagina??

Spero di essermi spiegato bene.

**Myaku** · 14-12-2008, 10:00

Originariamente inviato da lucrez
Spero di essermi spiegato bene.

non proprio

puoi postare un link (consigliato) oppure il codice completo (html+css, usa il pulsante #)?

**lucrez** · 14-12-2008, 16:40

ops..avevo creato un 3d nuovo x sbaglio dalla fretta

Riporto qui i codici che mi avevi chiedsto sperando sperando che tu riesca a capirci di più di me del casino che sto facendo...

Ecco il file css

codice:
#container {
width:996px; text-align:left; float:left;
background: #FFF url('sfondo_grigio.gif') left top repeat-y
}
#pagina {
background:#FFF url('sfumo-arancio.jpg') left top repeat-x; margin-left:5px;
margin-right:5px; float:left
{

ecco invece l'html:

codice:<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>ciao</title>

<link rel="stylesheet" type="text/css" media="screen, handheld, print" href="principale.css" />

</head>
<body>

<div id="container">
<div id="pagina">

</div>
</div>

</body>

</html>

Praticamente per rendere più facile a te la comprensione del problema ho fatto un copia incolla parziale della sezione grafica del sito html.it

Lasciando stare il footer che è assente, non riesco a far ripetere ambedue le immagini all'infinito.

Solo se metto del testo o degli spazi all'interno del div "pagina" allora si allunga il tutto.
La mia intenzione era di rendere le due immagini infinite fino a fine pagina a priori, sia che ci sia del testo che non ci sia.

Per semplificare le cose ho usato le immagini del sito html (sezione grafica) come esempio

Spero tu possa aiutarmi.

**Myaku** · 14-12-2008, 17:09

Originariamente inviato da lucrez

Spero tu possa aiutarmi.

Originariamente inviato da Myaku
un link (consigliato) oppure il codice completo (html+css, usa il pulsante #)

comunque,

Solo se metto del testo o degli spazi all'interno del div "pagina" allora si allunga il tutto.

è il comportamento normale, a meno di non dichiarare una height o una min-height

La mia intenzione era di rendere le due immagini infinite fino a fine pagina a priori, sia che ci sia del testo che non ci sia.

questo passaggio mi è poco chiaro.
Con ordine: entrambe le immagini - si tratta di una immagine da ripetere in verticale e una da ripetere in orizzontale.
Per quella da ripetere in y la "soluzione" sono le false colonne (faux columns, ne abbiamo già parlato).
Per quella ripetuta in x non c'entra l'"infinito fino a fine pagina a priori"

Discussione: Re: sfondi con div

Strumenti discussione

Ricerca discussione

Visualizza

Re: sfondi con div

ancora..

Re: ancora..

grazie..

Re: grazie..

Permessi di invio