Stile CSS funziona offline ma non online

[mith89]

Ciao a tutti, sono nuovo alla progettazione di siti, per cui vi prego di essere pietosi... ho un problema con delle cover per gallerie fotografiche che ho fatto in CSS, la cosa strana è che offline funziona tutto benissimo, online certe cose invece non vanno più.

questa è la pagina online http://www.gianniplossi.it/storie.html

Mentre così risulta offline:

storie.jpg

cosa sbaglio? la pagina online l'ho caricata via FTP, CSS compresi e dovrebbe essere identica a quella offline

Grazie!

[KillerWorm]

Ciao, il problema sta nell'omissione di alcune unità di misura nel CSS, in particolare su diverse proprietà width e height dove hai indicato il valore senza specificare px.

Vedi sul validatore: https://jigsaw.w3.org/css-validator/...rning=&lang=it

Diversamente da width e height definiti come attributi HTML sul tag <img>, dove è possibile indicare i valori senza specificare l'unità di misura (che di default è px), sul CSS non è possibile ometterla per i valori numerici.

Non ho idea del perché online non funzioni mentre offline sì, ma è comunque un errore sia online sia offline.

[mith89]

fantastico, grazie mille!!! Già che sei mi sapresti dire come fare, sempre nella stessa pagina a mantenere l'aspect ratio delle immagini delle copertine? mi va bene se vengono ritagliate un po'

[KillerWorm]

Prova in questo modo:

- togli le dimensioni dai tag <img>, cioè elimina width e height da tutti i tag <img>

- le immagini sono già dimensionate in altezza. Cioè hanno una dimensione di 260px ma, per essere sicuri, puoi impostare l'altezza al 100% dell'elemento contenitore. Sul css aggiungi quindi questa regola:

ul.img-list img{
    height: 100%;
}

- mentre per l'elemento li dovrai aggiungere overflow:hidden . Puoi aggiungere questa regola dentro il selettore ul.img-list li che già esiste sul tuo file css:

ul.img-list li {
/*.. qui avrai le altre regole già scritte */
    overflow: hidden;
}

Questo fa in modo di nascondere la parte di immagine che esce fuori dall'elemento che la contiene.

[mith89]

Perfetto! avevo cercato di fare una cosa del genere, ma sbagliavo un paio di dettagli. Un'ultimissima cosa, nella pagina contatti attorno al form mi è comparso un riquadro bianco e non ho idea del perché. nel codice css non ce n'è traccia. Può essere all'interno del php? sapresti dire al caso cosa modificare? grazieeeeeeeeee

[KillerWorm]

nella pagina contatti attorno al form mi è comparso un riquadro bianco e non ho idea del perché

Dipende dall'elemento <fieldset> che di default ha un bordo 3D.

A dirla tutta, non capisco a cosa ti serva quel fieldset. Se ti è possibile toglierlo direttamente dal codice html, credo che tu possa farne tranquillamente a meno. Diversamente potresti azzerargli il bordo impostandogli opportunamente border:0;

[mith89]

ma va non lo sapevo. In effetti quel codice è un bel copia incolla, per cui non sapevo bene cosa facesse. Mi hai risolto tutti i miei dubbi, grazie!