Problema con immagine di sfondo e css

matrix66

Problema con immagine di sfondo e css

Salve ho un problema grave ho realizzato un box così:

<img border="0" src="http://www.giorgiotave.it/forum/images/icona_news.gif" width="25" height="25" style="float:left; margin: 1px 5px 1px 1px">TESTO

Con testo e una piccola immagine sulla sinistra.

Questo il css:

.p3 { border : 1px solid #ccc; padding:6px; background: url(images/sfondo1.gif) right no-repeat; height: auto; width: auto; text-align: left}

Quando guardo l'anteprima tutto è ok ma poi quando trasferisco tutto in rete l'immagine di sfondo non si vede

Dove sbaglio?

hogudo

prova a dare le unità di misura ed i percorsi assoluti, tra doppi apici
le misure auto proverei a toglierle

matrix66

@hogudo said:

prova a dare le unità di misura ed i percorsi assoluti, tra doppi apici
le misure auto proverei a toglierle

Sai che ho notato che posizionandomi con il puntatore nella zona dove dovrebbe esserci l'immagine di sfondo e cliccando con il tasto destro visualizza immagine di sfondo (uso firefox) si apre la pagina senza immagine

Not Found
The requested URL /images/sfondo1.gif was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Apache/1.3.3

Dove sbaglio? pensi che abbia sbagliato nel scrivere il css o il percorso dell'immagine?
Ho fatto l'esperimento con altre immagini ma da sempre lo stesso errore

Che posso fare?

hogudo

Come detto sopra proverei a mettere invece che url(images/sfondo1.gif) url("http://www.nomedominio.com/percorso/images/sfondo1.gif") che era un problema dei Mac
e invece di width="25" height="25" metterei width:25px ; height= 25px dentro lo style
Poi vediamo

marasma

@Matrix66 said:

Salve ho un problema grave ho realizzato un box così:

<img border="0" src="http://www.giorgiotave.it/forum/images/icona_news.gif" width="25" height="25" style="float:left; margin: 1px 5px 1px 1px">TESTO

Con testo e una piccola immagine sulla sinistra.

Questo il css:

.p3 { border : 1px solid #ccc; padding:6px; background: url(images/sfondo1.gif) right no-repeat; height: auto; width: auto; text-align: left}

Quando guardo l'anteprima tutto è ok ma poi quando trasferisco tutto in rete l'immagine di sfondo non si vede

Dove sbaglio?

Togliere il border in html e metterlo in css è un controsenso..

Togli il border="0" dall'html

matrix66

@marasma said:

Togliere il border in html e metterlo in css è un controsenso..

Togli il border="0" dall'html

Ho seguito i vostri suggerimenti ma l'immagine continua a non vedersi
Penso di aver sbagliato a scrivere o il codice html o il css o entrambi
Ho provato anche a sostituire il con il <div> ma l'immagine non ne vuole sapere
Vi scrivo il codice html della mia home page e tutto il css e spero che mi possiate aiutare a risolvere il problema anche perchè dovrei caricare l'immagine in altre pagine del sito visto che uso un css per tutte le pagine.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta name="Description" content="Recensioni film e dvd, novità dal mondo del cinema, concorso vinci un dvd, concorso vinci una locandina">
<meta name="Generator" content="Microsoft FrontPage 4.0">
<meta name="Keywords" content="Recensioni film, recensioni dvd, recensioni cinema, recensioni film nelle sale, film, dvd, cinema, recensioni, dvd, novità, news, suggerimenti, scrivi la tua recensione, anticipazioni, scarica, pdf, recensioni, film, dvd, concorso">
<meta name="robots" content="all">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title> Happycinema - Recensioni film e dvd </title>
<link rel="shortcut icon" href= "favicon.ico"><type="image/icon">
<link rel="stylesheet" type="text/css" href="Untitled-9.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>HAPPYCINEMA Recensioni film & dvd</h1></div>
<div id="content">
<h2>Come nasce Happycinema.<a name="Su"></a></h2>
<div class="div3"><img src="images/icona_news.gif" width="25px" height="25px" style="float:left; margin: 1px 5px 1px 1px">Happycinema nasce dalla passione per il cinema dei suoi creatori, Francesco e Federico. 
Ci occupiamo sostanzialmente di recensire e raccogliere recensioni, sia dei film usciti nei circuiti cinematografici che in Home Video, curando le novità più interessanti.
Diamo anche una sbirciatina ai cult del passato, a quei classici che non tramontano mai e che risultano estremamente
interessanti. Tutte le recensioni presenti sono frutto di considerazioni del tutto personali e le analisi del film sono, e vogliono essere, assolutamente prive di qualsiasi forma di snobbismo, ma soprattutto al di sopra delle parti e prive di qualsiasi genere di sudditanza psicologica.
 Cercheremo di offrire le recensioni che riteniamo più valide e interessanti.</div>
<h2> Recensioni film novità.</h2>
<div class="div1"><a href="The%20Wicker%20Man.htm"><img src="images/20.jpeg" alt="20" style="float:left; margin: 1px 5px 1px 2px" width="80" height="114"></a><a href="The%20Wicker%20Man.htm">The
Wicker man - Il prescelto</a> 
<img border="0" src="images/New.gif" alt="News" align="absmiddle" width="28" height="11"> 
Nicolas Cage è un poliziotto che parte per una lontana isola quando riceve la lettera di una sua ex fidanzata. 
Gli è scomparsa la figlia, e non sa a chi chiedere aiuto visto che tutta la comunità gli è ostile. 
I rudi modi però dello sbirro californiano si scontreranno con la reticenza a parlare di quella che è, misteriosamente, una comunità quasi esclusivamente femminile... 
Rispetto all'originale, quello di Neil LaBute (autore in passato del sottovalutatissimo "Betty Love") è un film meno terrorizzante e più orientato verso il thriller. 
Tutta la narrazione è indirizzata verso un mistero che però è facilissimo da prevedere.</div> 
<div class="div1"><a href="Conciati%20per%20le%20feste.htm"><img src="images/22.jpeg" alt="21" style="float:left;margin: 1px 5px 1px 2px" width="80" height="114"></a><a href="Conciati%20per%20le%20feste.htm">Conciati
per le feste</a>
<img border="0" src="images/New.gif" alt="News" align="absmiddle" width="28" height="11"> Mettere insieme una persona metodica, riservata ed abitudinaria ed un individuo caciarone, parolaio e casinista è un meccanismo comico alla base di una mole così imponente di film che non vale nemmeno la pena di iniziare ad enumerarli.Quando il tranquillo oculista Steve Finch (Matthew Broderick) si vede arrivare come nuovo vicino di casa il venditore d'auto Buddy Hall (Danny DeVito) già si capisce che non sarà un Natale tranquillo per nessuna della due famiglie.
Buddy un giorno vede per caso che la sua nuova dimora non si vede dal satellite e decide di preparare una decorazione natalizia talmente sontuosa da renderlo visibile dallo spazio.
Con buona pace della quiete e della serenità di Finch.
</div> 
 
<h2>Concorso vinci una locandina di un grande cult movie.</h2>
<div class="div1"><a href="Concorso%20locandina%20immagine.htm" target="_blank"><img src="images/17.jpeg" alt="17" style="float:left;margin: 1px 5px 1px 2px" width="80" height="114"></a>Il
nuovo concorso di Happycinima ti permette di vincere una locandina di un
fantastico cult movie! <img border="0" src="images/New.gif" alt="News" width="28" height="11"> 
Per ogni appassionato di cinema le "famose"
locandine dei film sono sempre state oggetto di culto e di particolare
interesse. 
Abbiamo pensato che un iniziativa di questo tipo possa riscontrare un buon successo...... 
<a href="Modulo%20concorso%20vinci%20una%20locandina.htm">
Rispondete alle tre domande</a> su un particolare film e inviatele
attraverso il <a href="Modulo%20concorso%20vinci%20una%20locandina.htm"> modulo</a> e ogni mese estraremmo tra le risposte esatte
un vincitore che riceverà direttamente a casa la locandina cinematografica. 
Per il mese di dicembre il film scelto è <a href="Concorso%20locandina%20immagine.htm" target="_blank">Il
pianeta proibito</a> un classico della fantascienza anni 50.</div> <h2>Concorso vinci un dvd.</h2>
<div class="div1"><a href="Concorso%20vinci%20un%20dvd%20confezione.htm" target="_blank"><img src="images/16.jpeg" alt="16" style="float:left;margin: 1px 5px 1px 2px" width="80" height="114"></a>Partecipa al concorso e potrai vincere un
fantastico dvd in Edizione Speciale <img border="0" src="images/New.gif" alt="News" width="28" height="11"> 
Continua il fantastico concorso che con cadenza mensile 
coinvolge tutti voi appassionati di cinema e che ci terrà compagnia
per tutto l'anno prossimo. 
<a href="Modulo%20recensione%20concorso.htm">
Scriveta la vostra recensione</a> di un film o di un dvd che vi è
particolarmente piaciuto e inviatecela attraverso <a href="Modulo%20recensione%20concorso.htm">il
modulo</a>. 
Ogni fine mese la migliore recensione secondo il nostro giudizio
vincerà un dvd in edizione speciale particolarmente interessante e
curata. 
Per Dicembre il titolo messo in palio è:<a href="Concorso%20vinci%20un%20dvd%20confezione.htm" target="_blank">
Superman
Returns Special Edition</a> edito da Warner che per l'occasione
ha realizzato un' edizione a due dischi in una confezione Slipcase
Olografata.</div> 
<h2>I commenti le frasi celebri & i vostri film preferiti.</h2>
<div class="div1">Le frasi celebri: 
"Ho visto cose che voi umani non immaginereste mai... navi da
combattimento in fiamme al largo dei bastioni di Orione. E ho visto i
raggi B balenare nel buio vicino alle porte di Tannhauser. E tutti
quei momenti andranno perduti nel tempo come lacrime nella pioggia. E'
tempo di morire...." 
Questa frase ce la ricordiamo tutti vero?e anche il film immagino? 
Segnalateci quelle che sono rimaste impresse nella vostra memoria e
provvederemo ad aggiornare <a href="Frasi%20celebri.htm"> la lista delle frasi
celebri</a>. 
Inviaci le tua frasi all'indirizzo: <a href="mailto:[email protected]">[email protected]</a></div>
<div class="div1"> I vostri tre film preferiti: 
Mandateci la vostra classifica personale e noi provvederemo a
aggiornare la classifica generale che rispecchi veramente i vostri
gusti e non sia influenzata da campagne pubblicitarie. 
Se volete mandateci anche un commento per spiegare cosa vi piaciuto
così tanto di quel film. <a href="I%20tuoi%20film%20preferiti.htm"> 
Inserisci i tuoi film preferiti</a></div>
<div class="div1">I vostri commenti: 
Sei stato al cinema? hai visto un bel film in dvd? <a href="Commenta%20il%20film.htm">
lascia il tuo commento</a>, scrivici cosa ne pensi, condividi con noi le
tue opinioni. 
Il tuo pensiero risulta utilissimo per tutti gli utenti che si
vogliono fare un'idea sul film. <a href="Commenti%20al%20film%20Maria%20Antonietta.htm">Ultimi commenti</a></div> 

<script type="text/javascript" language="javascript">
var s_sid = 2120;var st_dominio = 4;
var cimg = 137;var cwi =112;var che =33;
</script>
<script type="text/javascript" language="javascript" src="http://s10.histats.com/js9.js"></script>
<noscript><a href="http://www.histats.com/it/" target="_blank">
<img src="http://s4.histats.com/stats/0.gif?2120&1" alt="contatore per sito" border="0"></a>
</noscript>

</div>
 
 
 
<a href="#Su">Torna su</a>
<div id="extra">Scambio Links testuali 
 
<a href="http://www.6zig.com" target="_blank"><img
src="http://www.6zig.com/a/imgNOadult/pr100.gif" title="6zig Aumenta il tuo pagerank"> Aumenta il Pagerank</a> 
<A href="http://www.pagerankten.net/" target="_blank"><img src="http://www.pagerankten.net/images/link.gif" border="0" width="88" height="31" alt="Sito approvato da PageRankTen"></A> 
<a href="http://www.account.it" title="Realizzazione siti internet Torino" target="_blank">Realizzazione siti internet</a>
 <a href="http://www.webtarget.org" target="_blank" alt="Webtarget" title="Webtarget">Segnalato da Webtarget.org</a> 

<a href="http://freepagerank.altervista.org" target="_blank">link-exchange</a> 
<a href="http://www.pigot4.it" target="_blank">giochi</a> 

<a href="http://www.advdirectory.net" target="_blank">ADVDirectory</a> 
<a href="http://www.scambiolink.com" target="_blank">scambiolink.com</a> 
<a href="http://www.forza46.com/" target="_blank">The Valentino Rossi Fansite</a> 
<a href="http://www.pimpumpam.com/" target="_blank">Cerca nel web con
PimPumPam</a> 
<a href="http://www.benni.org/page_rank.htm" target="_blank">Segnala il tuo sito</a> 

<a href="http://www.sharelinks.it" target="_blank">sharelinks.it</a> 

<a href="http://www.gotlinks.it" target="_blank">gotlinks.it</a> 
<a href="http://www.tuttisensi.it">TuttiSensi</a>
<a href="http://www.hellodir.com" target="_blank">
Hello Directory</a> 

<a href="http://www.websolution.it" target="_blank">WebSolution.it</a> <a href="http://www.directory.egregiosempiterno.com/" target="_blank">
Egregio Directory</a> 
<a href="http://www.directory.egregiosempiterno.com/" target="_blank">
E-cerca Directory</a> 

<a href="http://www.bazarop.com/in.php?ID=806" target="_blank">Bazarop
Directory</a>
 

<a href="http://www.bluebanner.net/" target="_blank">Blue Banner</a> 

<a href="http://www.suinternet.it/directory/" target="_blank">Suinternet.it
 Directory</a> 

<a href="http://www.bloo.it/" target="_blank">Segnalato da Bloo.it</a> 
<a href="http://www.sartorio.it/detail.php?id=3947" target="_blank">Sartorio.it</a> 

<a href="http://www.mariorossi.it/" target="_blank">Mariorossi.it</a> 
<a href="http://www.hititaly.com/in.php?site=1163368827" target="_blank">HitItaly.com</a> 

<a href="http://www.bellarete.com/" target="_blank">Bellarete.com</a> 

<a href="http://www.zizazu.com/" target="_blank">Directory Gratuita</a> 
<a href="http://www.abclink.it/" target="_blank">AB clink</a> 
<a href="http://directory.pubblicitaonline.it/" target="_blank">Pubblicitaonline.it</a>

 <a href="http://www.ilsitone.com/index.html" target="_blank"><img border="0" src="images/logositone120x19.gif" width="120" height="19"></a> 
<CENTER> </CENTER>
<CENTER>
<A HREF="http://www.visitegratis.com/cgi-bin/AdServer/join.cgi?new&sponsor=matr
ix66&exchangeCode=visitegratis_link">
<IMG SRC="http://www.visitegratis.com/Spot/sponsorVisiteGratis_120x60.gif"
WIDTH="120" HEIGHT="60" alt="CLICCA QUI !" BORDER=0></A>
 <A
HREF="http://www.visitegratis.com/cgi-bin/AdServer/join.cgi?new&sponsor=matr
ix66&exchangeCode=visitegratis_link"></A>
<A
HREF="http://www.visitegratis.com/cgi-bin/AdServer/join.cgi?new&sponsor=matr
ix66&exchangeCode=visitegratis_link">Visite Gratis - Scambio
Link!</A>
</CENTER>

 
<CENTER>
<A HREF="http://www.softwareplanet.net/cgi-bin/AdServer/join.cgi?new&sponsor=ma
trix66&exchangeCode=ScambioLink">
<IMG SRC="http://www.softwareplanet.net/Images/piuvisitatori_120x60.gif"
WIDTH="120" HEIGHT="60" alt="CLICCA QUI !" BORDER=0></A>
 
<A
HREF="http://www.softwareplanet.net/cgi-bin/AdServer/join.cgi?new&sponsor=ma
trix66&exchangeCode=ScambioLink">Advert Power - Scambio Link!</A>
</CENTER>
</div>
<div id="navigation"><a href="Index.htm">Home Page</a> 
<a href="Recensioni%20film.htm">Recensioni film</a> 
<a href="Recensioni%20dvd.htm">Recensioni dvd</a> 
<a href="Scrivi%20la%20tua%20recensione.htm">La tua recensione</a> 
<a href="Archivio%20recensioni.htm">Archivio recensioni</a> 
<a href="mailto:[email protected]">Contattaci</a> 
<a href="Suggerimenti.htm">Suggerimenti</a> 
<a href="Cerca%20nel%20sito.htm">Cerca nel sito</a> 
<a href="Area%20Download.htm">Area download</a> 
<a href="Links.htm">Links</a> 
<a href="News.htm">News</a> 
</div>
<div id="footer">
Tutti i marchi citati in queste pagine sono e restano dei rispettivi proprietari, tutti i diritti riservati. Copyright. 2006-2007. Tutti i diritti riservati.
</div>
</body>
</html>

La parte interessata è quella con <div class="div3">

E questo è il foglio di stile che uso per tutto il sito:

/stili per il layout fluido/
html,body{margin: 0;padding:0}
body{font-family:Georgia,sans-serif;font-size: 74%}
div#container{position: relative}

/stili generici, su header e footer/
div#header{height: 80px; background: url(images/rete.gif) repeat; color: #000080; border: 1px solid #ccc}
.div3{ border : 1px solid; padding:6px; background: url(http://www.happycinema.it/images/sfondo1.gif) right no-repeat; text-align: left}
h1,h2,h3,h4,h5,h6{margin: 0;padding:0}
h1{padding-left:8px;font: bold 3.2em/70px Comic Sans MS}
h2{padding-left:1px;color: #004080;font-size: 1.5em georgia;Background-color:#F1F4F5;border-style:solid; border-width:1 1px; border-color:#ccc}
h3{padding-left:1px;color:;Background-color: #F1F4F5;border-style:solid; border-width:1 1px; border-color:}
.p1 { border : 1px solid; padding:5px; height: auto; width: auto; text-align: justify}
.p2 { border : 1px solid #C0C0C0; background-color:; padding:4px; height: auto; width: auto}
.p3 { border : 1px solid; padding:6px; background: url(images/sfondo1.gif) right no-repeat; height: auto; width: auto; text-align: left}
.p4 { border : 1px solid #0080C0; background-color: #FFFFB7; padding:5px; height: auto; width: 120px}
.p5 { border : 1px solid; padding:4px; height: auto; width:auto; text-align: justify}
.p6 { border : 1px solid; padding: 3px; height: auto; width:auto}
.div1 {border : 1px solid; padding: 5px; height: auto; width: auto; text-align: justify}
.div2 { border: 1px solid; margin: 0px; padding: 5px; width: "80"; width; "484"}
div#footer a{color:#36C;font-weight: bold;text-decoration:none}

/stili specifici per il layout/
div#navigation{position: absolute; top: 82px; left: 2
width: 160px;\width:170px;w\idth:160px; padding: 1em 0 10 10px}
div#extra{position: absolute; top: 80px; right: 0;
width: 160px;\width:170px;w\idth:160px;padding: 1em 5px}
div#content{margin: 0 170px; border-style:solid; border-width:0 1px; border-color:#ccc; padding:1em 10px}
div#content{padding-left:12px}
div#content a{color:#004080; text-decoration: none}
div#content a:hover{color:#FF0000;background-color: #EAEAEA; text-decoration: none}
div#content a#activelink{color: #033;text-decoration: none}
div#footer{text-align:center; font-family: georgia,sans-serif; padding: 0px 0; background-color: #A5C5C4; color:}

/stili per la navigazione/
div#navigation ul{margin: 1;padding: 1; list-style-type: none}
div#navigation li{margin: 1;padding: 1}
div#navigation a{color:#004080;font: normal bold 1.2em/1.4em Georgia,sans-serif; text-decoration: none}
div#navigation a:hover{color: #FF0000;text-decoration: underline}
div#navigation a#activelink{color:;text-decoration: none}
div#navigation p{font-size: 92%}

/stili per la sezione extra/
div#extra div.newsbox{font-size: 90%;margin-bottom: 2em}
div#extra div.newsbox h2{color: #999;font-size: 1.2em}
div#extra div.newsbox p{margin: 0}

Confido in voi esperti che possiate spiegarmi i miei errori.

Grazie ancora.

hogudo

Ehm....
Nella teoria a me lo fa vedere sia con IE6 che con FF1.5.0.8 uguale, ovvero l'immagine di sfondo c'è.

Però, sembrerà strano ma http://www.happycinema.it/images/sfondo1.gif non esiste!!!!

Prova a fare l'upload FTP nella giusta cartella

matrix66

@hogudo said:

Ehm....
Nella teoria a me lo fa vedere sia con IE6 che con FF1.5.0.8 uguale, ovvero l'immagine di sfondo c'è.

Però, sembrerà strano ma http://www.happycinema.it/images/sfondo1.gif non esiste!!!!

Prova a fare l'upload FTP nella giusta cartella

Grazie mille ancora :):) grazie per i consigli adesso si vede ho capito dove ho sbagliato.

Ti chiedo un'ultima cosa come mai in remoto pur avendo sbagliato ( avevo scritto in minuscolo la prima lettera) lo vedevo ugualmente?
Sbagliando la prima lettera non si doveva vedere nemmeno in remoto giusto?
Questo non riesco a spiegarlo. Mi puoi aiutare tu

hogudo

per me lo vedevi ancora come in locale, o una via di mezzo (il drive era il tuo)

matrix66

@hogudo said:

per me lo vedevi ancora come in locale, o una via di mezzo (il drive era il tuo)

Cosa intendi per il drive era il tuo? Scusa per la domanda