immagine di sfondo a un div [era: prima volta che mi capita: ...]

[stranyera]

ragazzi non so come, non so il perchè, a ho un problema con una img di sfondo dato una div: con Explorer si vede l'img di sfondo, mentre co Firefox non c'è verso!

La cosa strana è che non mi vede SOLO l'img di sfondo di quel div, mentre di un altro div (contenitore di questo che non si vede) l'img si visualizza correttamente!....

in sostanza:

<div id="profilo"> 
      <div id="profilo_contenuti"> 
        <div class="profilo_top"><h4>PROFILO</h4></div>
        

ciao</p>
      </div>
    </div>

l'id profilo ha questo css e l'img si visualizza:

#profilo{
width: 523px;
background: url(img/sfondo_div_profilo.gif) no-repeat;
float:left;
text-align: center;
margin:0;
padding:0
}

mentre la classe profilo_top ha questo css e l'img di sfondo NON si vede:

.profilo_top{
background: transparent url(img/immagini box profilo/top.gif) no-repeat top center;
}

please help me!

[seed_squall_it]

Prova a dimensionare almeno in larghezza il <div> #profilo_top. Se non lo dimensioni esplicitamente, è probabile che le coordinate dell'immagine di sfondo non possano essere calcolate. Se è largo tanto quanto il <div> che lo contiene, impostagli width: 100%; e l'immagine di sfondo dovrebbe apparire.

[stranyera]

Originariamente inviato da seed_squall_it
Prova a dimensionare almeno in larghezza il <div> #profilo_top. Se non lo dimensioni esplicitamente, è probabile che le coordinate dell'immagine di sfondo non possano essere calcolate. Se è largo tanto quanto il <div> che lo contiene, impostagli width: 100%; e l'immagine di sfondo dovrebbe apparire.

ciao, grazie ma:
1) il div profilo_top non è largo quanto il div profilo (quello che lo contiene), ma è piu' stretto;

2) ho provato comunque ad impostargli altezza e larghezza ma niente da fare...continuo a non visualizzare l'img...

[stranyera]

scrivo nello stesso mio thread giusto per far capire meglio i problemi che ho oltre a quello descritto sopra:

http://img.photobucket.com/albums/v3...robematica.gif

lo scroller cosi' lungo è perchè lo sto sviluppando per una visualizzazione in orizzontale (stile http://www.axisfive.net/) ed ovviamente è ancora da sistemare....

l'img che vedete è uno screen da IE, non da mozilla che a parte il problema dell'img è abbastanza a posto.

Aggiungo inotre, che vorrei che fosse tutto centrato, ma non riesco!!!!!

insomma...un vero MACELLO!!!!

[stranyera]

allora...quasi mi vergogno a scriverlo ma almeno il primoproblema l'ho risolto: in pratica Firefox non amava gli spazi tra i nomi dei file:
scritto cosi' "pippo pluto paperino" ignora qualsiasi cosa,
mentre scritto cosi': "pippo_pluto_paperino" gli piace!!!!

va bene, il primo problema lo ho risolto...mi restano gli altri due che ho descritto nell'immagine allegata al mio precedente post....

[seed_squall_it]

Beh, gli spazi nei nomi dei file non andrebbero mai inseriti, specie se quei file vengono pubblicati sul web. Tra l'altro, gli spazi negli URI vengono convertiti in %20...forse Firefox tentava di trovare un file chiamato letteralmente "pippo%20pluto" invece che "pippo pluto".

Per gli altri due problemi, dovresti postare il codice CSS e XHTML completo. Per ora posso solo darti dei "suggerimenti", non avendo il codice sottomano.

1. Per la sovrapposizione dei link del menu, devi giocare sui posizionamenti (relative e absolute) e sullo z-index.

2. Ora che guardo meglio il codice...ma il problema è che non riesci a visualizzare l'immagine di sfondo del box #profilo_contenuti, non quella di .profilo_top, se ho capito bene. In effetti...a che serve il box .profilo_top? Da quello che posso capire guardando il pezzo di codice che hai postato prima, il background va impostato per #profilo_contenuti.

Per la centratura, Firefox e IE seguono due strade diverse. Per Firefox devi impostare un box che contenga il tutto e assegnargli i margini orizzontali sul valore auto. Per IE (che fa di testa sua!) devi impostare text-align: center nella regola dell'elemento che contiene il box che hai impostato per la centratura in Firefox (e per cui dovrai reimpostare poi l'allineamento del testo a sinistra).

<body>
<div id="contenitore">

CODICE DELLA PAGINA

</div>
</body>

body {
text-align: center;
}

#contenitore {
text-align: left;
margin: 0 auto;
}

[stranyera]

questa è la paginona:
http://www.takingweb.com/lavorazione/index.htm

ovviamente è ancora molto pasticciata perchè ci sto lavorando, ma conto di sistemarla...mi piacerebbe tantissimo finirlo sto sito in questo weekend

[seed_squall_it]

Sì, ma sarebbe utile che postassi anche il codice CSS...

[stranyera]

ok, anche se è facilmente reperibile tramite il link che ho postato

body,html  {
width:auto;
height:auto;
overflow-x:hidden;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
text-align:center
}
#content {
position:relative;
margin: 0;
}
#header {
height: 135px;
background: url(img/sfondo_header.gif) repeat-x top left;
}
#footer {
height: 18px;
background: url(img/sfondo_footer.gif) repeat-x;
clear:both
}

/*contenuti centrali*/
#centrale {
background-color:#fff;
margin:0 auto;
padding-left:25px;
text-align: left;
}
/*inizio sezione Profilo*/
#profilo{
width: 523px;
background: url(img/sfondo_div_profilo.gif) no-repeat top left;
margin:0;
padding:0;
float:left;
}
#profilo_contenuti{
width:337px;
margin: 10px;
padding:5px;
}
.profilo_top{
height: 43px;
background: transparent url(img/immagini_box_profilo/top.gif) no-repeat top center;
}
.profilo_content{
background: transparent url(img/immagini_box_profilo/content.gif) repeat-y top center;
}
.profilo_bot{
height: 17px;
background: transparent url(img/immagini_box_profilo/bottom.gif) no-repeat top center;
}
/*fine sezione profilo */
/*inizio sezione servizi*/
#servizi{
/*width: 523px;*/
background: url(img/sfondo_div_servizi.gif) no-repeat top left;
float:left;
margin-left:1046px;
}
#servizi_contenuti{
width: 337px;
margin-top:10px;
padding:5px;
}
.servizi_top{
width: 337px;
height: 43px;
background: transparent url(img/immagini_box_servizi/top.gif) no-repeat top center;
}
.servizi_content{
background: transparent url(img/immagini_box_servizi/content.gif) repeat-y top center;
}
.servizi_bot{
height: 17px;
background: transparent url(img/immagini_box_servizi/bottom.gif) no-repeat top center;
}
/*fine sezione servizi */
/*inizio sezione portfolio*/
#portfolio{
width: 523px;
background: url(img/sfondo_div_portfolio.gif) no-repeat top left;
float:left;
margin-left:1569px;
}
#portfolio_contenuti{
width: 337px;
margin-top:10px;
padding:5px;
}
.portfolio_top{
height: 43px;
background: transparent url(img/immagini_box_portfolio/top.gif) no-repeat top center;
}
.portfolio_content{
background: transparent url(img/immagini_box_portfolio/content.gif) repeat-y top center;
}
.portfolio_bot{
height: 17px;
background: transparent url(img/immagini_box_portfolio/bottom.gif) no-repeat top center;
}
/*fine sezione portfolio */
/*inizio sezione contatti*/
#contatti{
width: 523px;
background: url(img/sfondo_div_contatti.gif) no-repeat top left;
float:left;
margin-left:2092px;
}
#contatti_contenuti{
width: 337px;
margin-top:10px;
padding:5px;
}
.contatti_top{
height: 43px;
background: transparent url(img/immagini_box_contatti/top.gif) no-repeat top center;
}
.contatti_content{
background: transparent url(img/immagini_box_contatti/content.gif) repeat-y top center;
}
.contatti_bot{
height: 17px;
background: transparent url(img/immagini_box_contatti/bottom.gif) no-repeat top center;
}
/*fine sezione contatti */
p {
margin:0;
padding-left:15px;
color: #09688f;
}
.footer{
margin:0;
color: #fff;
font-size: 10px;
}
h4{
font: 18px;
color:#fff;
text-align: left;
margin:10px;
padding: 0 15px;
}
/*MENU DI PROVA */
#menu{text-align: center;}
#menu ul{width: 687px; margin: 0 auto}
#menu li{float: left; list-style: none;}

[seed_squall_it]

Sì, questo lo sapevo, ma normalmente si posta il codice qui, in modo che tutti possano vederlo. Cmq avevo un po' di tempo e mi sono "divertito" a rifare il tuo sito. Tra l'altro ho snellito parecchio il codice XHTML, l'ho riscritto usando i tag semantici corretti dove servivano, ci ho aggiunto dei separatori logici (tag <hr /> preceduti da un link per tornare all'inizio della pagina), ho aggiunto il titolo (tag <h1>) e ho eliminato le immagini dei link del menu tramite la Phark Image Replacement, così sono più gestibili via CSS. Ho anche usato la Pixy Cover-Up Span per i titoli dei riquadri, impostandoli con il tag <h2>, più corretto semanticamente del semplice <div>.
Ho provato il codice su Firefox 1.5.0.3 e su IE 5. Non ho IE 6 (odio Windows XP e IE 6 con tutte le mie forze, infatti uso Windows 2000 Professional ), quindi non ho potuto provarlo. Cmq penso non dia grossi problemi...al limite ce lo fai sapere e vediamo di sistemarlo anche per IE 6. Ho fatto in modo di scrivere un codice CSS apposta per non incorrere nel box model errato di IE 5, quindi dovrebbe vedersi nello stesso modo su tutti i browser senza commenti condizionali o altri "trucchi". Ho solo usato l'hack per la min-height nel footer, in modo che se un utente aumenta le dimensioni del testo, il footer possa "degradare" bene e adattarsi alle nuove dimensioni. Ti ho mandato un pvt, così posso inviarti i file senza scrivere tutto il codice qui.