Problema visualizzazione immagine background solo con safari

Di: terenziodecimomeridio | 26/09/2020 17:28:55
Ho un problema nel visualizzare l'immagine background del header del mio sito quando lo visiualizzo con firefox, ie7...solo con safari la vedo mentre con firefox e ie7 c'è solo lo spazio bianco...

Risposte



Bisognerebbe vedere quale modalità e quali parametri hai scelto per il background dell'header. Senza riferimento è difficile capire dove può essere l'ipotetico errore. Se potessi mettere tutto su un'area remota, sarebbe la soluzione ideale. In alternativa potresti postare lo stile e la struttura dell'header.
Questa comunque è la dimostrazione di ciò che ti dicevo nel post http://www.001design.it/forum_italiano/thread.php?id=8453. Conoscere le regole di progettazione di un layout ti consente di non avere problemi di questo genere... forse avresti bisogno di conoscere anche un po' meglio i CSS.

Di: Gian Paolo | 26/09/2020 17:28:55


La struttura del sito è:
<!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/xhtm">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FotoCineClub2001</title>
<link rel="shortcut icon" href="images/favicon.ico" >
<link rel="icon" href="images/animated_favicon1.gif" type="image/gif" >
<link href="css/fotocinecss.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container"></div>
<div id="header"></div>
<div id="navigation"></div>
<div id="spazio"></div>
<div id="content"</div>
<div id="footer"> <span class="footer_text">2008 © FotoCineClub2001 - Via Brigata Sassari,68 - Quartu S.Elena (CA)</span> <a href="mailto:info@fotocineclub2001.it">info@fotocineclub2001.it</a></div>
</div>
</body>
</html>
Mentre il css è:
/*stili per il layout fisso con altezza minima*/
html,body{padding:0;height:100%;}
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 76%;
text-align: center
}
div#container{
position:relative;
width: 760px;
height: 100%;
margin: 0 auto;
}
body>div#container{height:auto;min-height:100%}
div#header/*stili generici, su header e footer*/
{
background-image: url(../images/header_background.jpg);
height: 150px;
width: 760px;
background-position: center center;
}
/*stili specifici per il layout*/
div#navigation{
background-image: url(../images/navigation_background.jpg);
height: 30px;
width: 760px;
}
div#spazio/*stili generici, su header e footer*/
{
background-image: none;
height: 50px;
width: 760px;
background-position: center center;
}
div#content{padding: 1em 1em 5em}
div#footer{
position: absolute;
bottom:0;
width: 100%;
color: #000;
text-align:center;
background-image: url(../images/footer_background.jpg);
padding-top: 0.5em;
padding-right: 0;
padding-bottom: 0.5em;
padding-left: 0;
left: 0px;
}
h1,h2{margin: 0;padding:0}
h1{
padding-left:0.5em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 2.3em;
line-height: 80px;
font-weight: bold;
color: #FFFFFF;
}
h2{color: #999;font-size: 1.5em}
div#footer a{color: #fff;font-weight: bold;text-decoration: underline}
.footer_text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 76%;
color: #FFFFFF;
}
Ho cercato di seguire il tutorial da te segnalato...

Di: terenziodecimomeridio | 26/09/2020 17:28:55


RISOLTO!!!!!!!!
L'immagine era semplicemente troppo grande e i vari browser non la caricavano...
In ogni caso se c'è qualcosa di errato puoi segnalarmelo lo stesso? Grazie.

Di: terenziodecimomeridio | 26/09/2020 17:28:55


Ma no! Attenzione Terenzio! Mi fa piacere che segui i consigli... ma non mi puoi sbagliare due righe su cinque . Il DIV "container" (ossia il contenitore) deve, per sua natura, contenere tutti gli altri "DIV".
Il tag di apertura <div id="container"> va bene come l'hai messo all'inizio, ma la sua chiusura </div> deve stare alla fine di tutti i DIV, altrimenti non ha senso, e lo stile associato non può assegnargli i valori attribuiti.
Poi al tag di apertura <div id="content" hai dimenticato la parentesi angolare >.
Inoltre, per il momento, lascerei perdere il foglio di stile che ti sei scelto. Non ti occorre tenere il footer posizionato a fondo pagina. E' una tecnica non molto affidabile, non pienamente compatibile con i float molto lunghi. Uhm! Qualcosa mi dice che ti stai scaricando gli esempi senza leggere la guida col dovuto impegno.
Capisco l'ansia di fare bene quanto prima e so che può essere stimolante sperimentare, ma a meno che non abbia un committente col fiato sul collo, non c'è ragione di correre. La guida non è proprio una passeggiata nel parco, lo so... c'è bisogno di calma e di tempo per assimilarla bene. Le scorciatoie, però, non pagano e le passioni "attive" richiedono sacrifici. Non si può pretendere di svoltare in due giorni laddove è constatato che ci vogliono settimane per capirci qualcosa, mesi e anni per avere un bagaglio solido.
Mi raccomando! La prossima volta fammi vedere un significativo passetto in avanti... ci conto. Poi vedremo insieme come evolvere con accorgimenti grafici che diano maggiore senso al lavoro. Forse sarà la volta buona per convincere anche qualcun altro ad abbandonare certi strani convincimenti che si son fatti sui loro discutibili lavori e intraprendere la strada della consapevolezza. Folgorati come Paolo sulla via di Damasco.

Di: Gian Paolo | 26/09/2020 17:28:55


Hai ragione da vendere...il <div="container"> si chiude dopo il <div="footer">...ho sbagliato nel copia-incolla...idem per <div="content">...
in effetti ho scopiazzato il foglio di stile dall'esempio che ho trovato nella guida...
Il footer sempre in fondo mi sembrava una buona idea...dovrei corregere la cosa dando un'altezza definita in pixel al <div="contenuti"> allora?
Cosa mi consigli?? e quando il contenuto del <div="contenuti"> è più lungo dell'altezza che gli imposto devo intervenire a mano??
A parte il footer che non approvi cosa altro non va nel foglio di stile da me scelto?
Grazie ancora!!!

Di: terenziodecimomeridio | 26/09/2020 17:29:55


Per adesso il consiglio che ti do è di prendere gli esempi, iniziando dal primo, scaricartelo, associargli il relativo foglio di stile, mettere tutto in una cartella a piacere e vederlo funzionare senza toccarlo. Inizi a guardarti il codice all'interno e piano piano lo modifichi incominciando ad agire sul foglio di stile. Cambi i colori di sfondo, magari mettendo uno sfondo immagine nell'header, aggiungi un logo. Insomma fare una serie di esercizi di modifica senza toccare i div originali. Appena ti senti sicuro, provi a riprodurre tutto autonomamente.
Come ti dicevo quello stile lascialo per il momento e concentrati sugli altri, senza mai perdere di vista le spiegazioni della guida per ogni tipo di layout.

Di: Gian Paolo | 26/09/2020 17:29:55