Foto sfondo browser adattabile

sbarz

Foto sfondo browser adattabile

Ciao a tutti!
Se volessi fare un sito in html o php ma con lo sfondo che si adatti alla dimensione della finestra del browser come in questo sito : w w w .ringvemedia.com/ come devo fare? Leggendo qua e la ho sentito che bisogna utilizzare intanto un file png come foto, cosa mi consigliate?
Grazie!
Sara

nhatan

Ciao sbarz credo che abbia sbagliato sezione ora vedo un pò di spostare il tuo tread nella sezione più appropriata dove sapranno consigliarti. Sposto questa discussione nella sezione HTML- XHTML

olaola

Ciao sbarz,

mi sembra di capire che questo effetto sia ottenuto con i css.

Credo basti inserire nel foglio di stile

[html]*{border:0px solid #eee;margin:0;padding:0;list-style:none}
html,body,#bg,#bg table,#bg td,#cont{width:100%;height:100%;overflow:hidden}
body{font-family:Arial,Helvetica,sans-serif;font-size:10px;cursor:default;background:url(loading.gif);color:#000}
img{display:block}

#bg div{position:absolute;width:200%;height:200%;top:-50%;left:-50%}
td{vertical-align:middle;text-align:center}
img{min-height:50%;min-width:50%;margin:0 auto}[/html]

e nella pagina html

[html]<div id="bg"><div><table cellpadding="0" cellspacing="0"><tr><td><img alt="" src="bg.jpg" /></td></tr></table></div></div>[/html]

Prova e facci sapere.

sbarz

Ciao olaola e grazie mille per il tuo consiglio!
Ho messo su con dreamweaver questo codice così come mi hai suggerito:

[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w w w.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="w w w.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Documento senza titolo</title><style type="text/css">*{border:0px solid #eee;margin:0;padding:0;list-style:none}
html,body,#bg,#bg table,#bg td,#cont{width:100%;height:100%;overflow:hidden}
body{font-family:Arial,Helvetica,sans-serif;font-size:10px;cursor:default;background:url(loading.gif);color:#000}
img{display:block}

#bg div{position:absolute;width:200%;height:200%;top:-50%;left:-50%}
td{vertical-align:middle;text-align:center}
img{min-height:50%;min-width:50%;margin:0 auto}

</style>

</head>

<body><div id="bg"><div><table cellpadding="0" cellspacing="0"><tr><td><img alt="" src="DSC_0290.jpg" /></td></tr></table></div>
</div>
</body>
</html>[/html]e funziona tutto benissimo, solo che vorrei mettere al centro di questa immagine di sfondo una tabella con i contenuti del mio sito, solo che ho fatto varie prove ma non riesco :bho: mi sai suggerire qualcosa?

fabernoni

Salve ragazzi,
anch'io ho preso questo esempio e la pagina

w w w . cesarezamparino.it/provahome.htm

funziona.

Ora siccome questo sarà la homepage del sito voglio sapere come fare per inserire i contenuti dell'attuale homepage in quella nuova.
Ho provato ma non ci sono riuscito, potete aiutarmi?
Mi rivolgo a sbarz e olaola oppure a qualsiasi altro che può darmi la soluzione,
grazie e ciao!

olaola

Ciao fabernoni e benvenuto nel Forum GT,

mi sembra che tu abbia risolto, giusto? Nella home c'è sia lo sfondo "flottante" sia i contenuti.

fabernoni

no, tu probabilmente hai vista l'attuale homepage.
io invece devo inserire contenuti dell'attuale homepage in quella nuova che ho costruito secondo l'esempio di questo forum e che puoi trovare su
w w w. cesarezamparino.it/provahome.htm
Ho provato ma non ci sono riuscito, puoi dirmi come devo inserire il codice html in questa nuova pagina.
Grazie

olaola

Ciao,

ho visitato la homepage e la pagina di prova da te indicata con lo stesso browser (Firefox 1.5) e in entrambe vedo lo sfondo flottante.

Forse tu ti riferisci alle pagine interne del sito? Quelle con lo sfondo rosso ripetuto?

fabernoni

Scusami, forse non mi sono spiegato bene.
Io voglio inserire nella pagina flottante che funziona e che hai visto all'indirizzo w w w . cesarezamparino.it/provahome.htm il codice html seguente. Ho provato a metterlo all'interno del body ma non riuscivo a visualizzare nulla, solo l'immagine di sfondo.
Fammi sapere, grazie.

<table style="width: 980px; " cellpadding="0" cellspacing="0" class="style1" align="center">
<tr>
<td class="style3" valign="top" style="height: 650px; width: 599px;">
<p><a href="......" target="_blank">
<img src="images/siparioweb_logojpg_s.jpg" width="34" height="34" alt="SIPARIOWEB Webmaster" class="style5" align="middle" style="float: left" /></a></p>
<p class="style11"> </p>
<p class="style11">
<img src="images/intestazione_index.png" width="590" height="180" /></p>
<p class="style11"> </p>
<p class="style11"> </p>
<table cellpadding="0" cellspacing="0" class="style1" style="width: 520px">
<tr>
<td class="style14"><script type="text/javascript" src="swfobject.js"></script> <div id="player"></div> <script type="text/javascript">var so = new SWFObject('/flash/jwplayer.swf','mpl','160','120','9');so.addParam('allowscriptaccess','always');so.addParam('allowfullscreen','true');so.addParam('flashvars','&file=cesarezamparino.it/flash/videoindex.flv&controlbar=none&autostart=true&displayclick=none&repeat=always');so.write('player');</script></td>
<td><a href="contatti.htm">
<img style="border: 0" id="img1" src="images/button2B1.gif" height="24" width="120" alt="E N T R A" onmouseover="FP_swapImg(1,0,/id/'img1',/url/'images/button2C1.gif')" onmouseout="FP_swapImg(0,0,/id/'img1',/url/'images/button2B1.gif')" onmousedown="FP_swapImg(1,0,/id/'img1',/url/'images/button2D1.gif')" onmouseup="FP_swapImg(0,0,/id/'img1',/url/'images/button2C1.gif')" /></a></td>
</tr>
</table>
<p class="style11"> </p>
<p class="style12">sei il visitatore<br />
<br />
</p>
</td>
<td class="style7" style="height: 650px; width: 381px;">
</td>
</tr>
</table>

<p class="style6"> </p>
<p class="style6"> </p>
<p class="style6">? Cesare Zamparino 2008, All rights reserved</p>

olaola

Il codice che hai postato è proprio quello che io vedo nella homepage del sito, con il contatore di visite e tutto. E lo sfondo è flottante.

Ecco, scoperto l'arcano. Con Firefox funzionano sia la home che la pagina di prova. Con Internet Explorer funziona solo la seconda. Immagino che tu stia usando Internet Explorer.

Ora possiamo cercare di capire come ottenere lo stesso effetto in IE.

fabernoni

Grazie x la tua collabrazione olaola.

La pagina che tu vedi normalmente è la vecchia homepage ancora attiva. Per farti capire meglio ho inserito nella nuova pagina flottante (www . cesarezamparino . it/provahome.htm) i contenuti che vorrei visualizzare. Nell'ordine in cui li ho messi riesco solo a visualizzare il il filmato flash ed in 2 modi diversi (a seconda che uso IE oppure Firefox) ma il resto dei contenuti e cioè l'intestazione, il contavisite, il pulsante ENTRA e altro non riesco a visualizzarli. Mi puoi dire come va correttamente inserito questo codice all'interno della pagina in modo che si possa vedere tutto?
Grazie ancora per l'aiuto

dreamtheater1984

Ciao a tutti, ho provato a usare il vostro codice per l'immagine di sfondo e funziona perfettamente. Ora se io voglio posizionare dei div sopra questa immagine come faccio? Ho provato con lo z index ma non riesco.

olaola

Ciao dreamtheater1984 e benvenuto nel GT Forum,

io ho utilizzato tale effetto in uno dei miei siti (non in firma) e per posizionare successivi div non ho fatto altro che inserirli dentro il div denominato "cont", che deve essere già presente.

dreamtheater1984

Scusami ma non ho capito un cavolo, sono quasi alle prime armi, comunque ho messo online quello che ho fatto. Non mi si vede il div slidshow, non posto il codice tanto credo tu lo veda ugualmente.

[..]

olaola

Ciao,

è meglio che posti il codice invece del link, in base al nostro regolamento.

Comunque, tornando al tuo problema, penso che il codice che devi usare sia

[html]<div id="cont">

<div id="slideshow">scrivi qualcosa qui</div>

</div>[/html]cioè lo sfondo deve stare per ultimo e deve esserci il div "cont".

Prova.

dreamtheater1984

Uffa ho provato ma non va, nell' index.html ho questo

[html]
<div id="cont">

<div id="slideshow">scrivi qualcosa qui</div>

<div id="bg"><div><table cellpadding="0" cellspacing="0"><tr><td><img alt="" src="sabbia.jpg" /></td></tr></table></div></div>
[/html]

mentre nel foglio di stile questo

[html]@charset "UTF-8";
/* CSS Document */
*{border:0px solid #eee;margin:0;padding:0;list-style:none}
html,body,#bg,#bg table,#bg td,#cont{width:100%;height:100%;overflow:hidden}
body{font-family:Arial,Helvetica,sans-serif;font-size:10px;cursor:default;background:url(loading.gif);color:#000}
img{display:block}

#bg div{position:absolute;width:200%;height:200%;top:-50%;left:-50%}
td{vertical-align:middle;text-align:center}
img{min-height:50%;min-width:50%;margin:0 auto}

#slideshow {
position: absolute;
height: 282px;
width: 772 px;
background-image:url(images/slideshow.png);
}
#cont{
height:auto;
width:auto;
}[/html]

Il file aggiornato è sempre al link di sopra.

olaola

Ciao,

perchè nel foglio di stile hai ridefinito il div "cont" visto che è definito alla quarta riga dello stesso? Elimina quella ridefinizione in fondo al foglio di stile.

olaola

dreamtheater1984

Si vero, non avevo visto (che scemo) adesso ho cancellato il mio div cont ma continua ugualmente a non andare, ma sono così duro?
Ho riapplodato il file modificato al solito indirizzo.

olaola

Prima di tutto devo ricordarti le regole del forum che raccomandano di scrivere i messaggi in italiano corretto, compresa la punteggiatura e le maiuscole.

Per quanto riguarda il tuo problema, per fugare ogni dubbio, ti consiglio di eliminare tutti gli attributi del div "slideshow" per vedere se in quel modo funziona.

ciao

dreamtheater1984

Ciao, ho eliminato tutti gli attributi ma continua a stare sotto