[RISOLTO]CSS: l'immagine esce fuori dal div contenitore

[raffaele181188]

Salve a tutti. Ho un problema con i css.
Questa è la pagina "incriminata" http://www.lumetta.it/1.6.2/galleria.php
Le immagini con titolo e descrizione sono raccolte all'interno di un div. Il markup è il seguente

Codice: Seleziona tutto

<div>
   <img>
   <h3>Intestazione</h3>
   <p>Bla bla bla bla bla...</p>
</div>

L'immagine è posizionata con float e non ci sono problemi MA
se aggiungo colore di sfondo e bordi al div contenitore mi succede un mega pasticcio: il div viene ridimensionato all'altezza del contenuto SENZA tener conto dell'immagine posizionata con float, e così l'immagine stessa, che pure inizia nel div, ne esce abbondantemente fuori. Come se non bastasse le altre immagini sono posizionate in modo assurdo: iniziano tutte più a destra di quella precedente ed escono tutte fuori dai loro div contenitori. Non voglio rassegnarmi a togliere bordi e sfondo!!! Help
Cercando con Google ho trovato che questo è un problema dei browsers Gecko-based, ma a me la stessa cosa succede se uso Konqueror. La soluzione descritta qui http://www.positioniseverything.net/easyclearing.html non mi sembra troppo elegante, e poi si tratta di un articolo del 2004, sono passati 4 anni, dovrebbero aver risolto. O no? Google non mi ha aiutato più di tanto, per questo sono venuto a scocciare voi della community Sorry

[phobos3576]

Spesso, questo tipo di problemi è causato dai font; tempo fa, realizzando una pagina con i CSS, avevo risolto specificando tutti i dettagli dei font (font-family, font-size, font-weight, etc) per ogni DIV contenente del testo.

Per quanto riguarda i bordi, tieni presente che esiste una differenza di comportamento tra Firefox ed Explorer.
Lo standard W3C dice che il bordo circonda ("surrounds") una determinata area rettangolare.
Firefox rispetta lo standard mettendo il bordo esternamente all'area; Expolorer, invece, lo mette internamente.

[raffaele181188]

Proverò a specificare tutte le proprietà del font, anche se
1) Non capisco come possa causare questo problema
2) A questo punto non mi serve che i CSS siano CASCADING, perchè se voglio cambiare il font per tutto il sito che faccio? mi metto a cambiare lo stile di tutti i div? Non mi sembra un grande modo di usare i CSS
Comunque grazie della risposta, proverò e ti farò sapere. A proposito, sono mesi che leggo e rileggo la specifica css2 e mi chiedo: ma si sono impegnati per fare una cosa così difficile? Io l'inglese lo capisco abbastanza, ma quel documento sfiora l'incomprensibilità in certi punti. Poi la spiegazione del box model impiega giorni per farsi assimilare... Mah, sono perplesso.
Ho letto che ci sono delle differenze tra FF e IE, ma io cerco di non usare "fino all'ultimo pixel" i css appunto per evitare problemi di incompatibilità tra i vari browser. Comunque volevo sapere come risolvereste voi questa situazione, e soprattutto cosa ne pensate della soluzione proposta in quell'URL, cioè quella di inserire un div con clear: both. A me non sembra una grande cosa nè nella prima versione perchè sporca il markup, nè nella seconda perchè comunque non FUNZIONA nel caso ci siano altri box posizionati con float. Il risultato è un box contenitore che si "allunga" fino a quando non ci sono più box con float, il che significa box vuoti lunghi miliardi e miliardi di pixel...

[Akito]

Curiosità mia: potresti inserire uno screenshot del "pasticcio"
che viene fuori dopo l'aggiunta di sfondo e bordo?

Non sono esperto di XHTML + CSS, ma non riesco a
riprodurre l'errore in questione.


Akito

[aschenaz]

Ma le dimensioni del div (anche l'altezza) le hai specificate nel css?
Se le specifichi tenendo conto del contenuto, non dovresti avere
problemi...

Come hanno già detto, se le dimensioni devono essere uguali con
tutti i browser, rinuncia ai bordi e al padding, altrimenti non ne
caverai un ragno dal buco.

In questo caso, se ho capito bene e tu vorresti visualizzare le
thumbnail con un bordo, forse sarebbe il caso di ripiegare su di
una tabella. Non bisogna fare troppo gli schizzinosi con le tabelle:
anch'io tendo a non usarle più, ma in certi casi tornano utili...

[conraid]

Se per "sporca" intendi quella di mettere un clear: both (clear: left) se hai un right da qualche altra parte, la uso anche io ormai da anni.
Ti chiedi come mai sono 4 anni, beh... ormai le specifiche css e x(html) hanno molto di più di 4 anni, e si aspetta html5, xhtml2 e css3 sembra in draft.
Secondo me il problema te lo da il bordo, ma prima di risolvere questo problema, sistema il charset. Se dichiari utf-8 assicurati di usare un editor che supporta utf-8 e fai le pagine in utf-8.
Te lo dico perché in identità di un fiore non viene visualizzata la à.
Fai prima ad usare i codici html se hai dei problemi

p.s.
il consiglio di scrivere i codici incriminati, cioè fai una piccola pagina con solo quel div che riproduce l'errore, e postarli non sarebbe una cattiva idea

[raffaele181188]

Grazie a tutti. Allora, appena posso posto screenshot e codice incriminati. Scusate l'attesa, ma devo fare un travaso di files perchè il computer che uso per scrivere il sito non ha la connessione a internet.
@conraid
Il set di caratteri è apposto, nel senso che il file è salvato in utf-8. L'editor che uso è kwrite, e i files sono tutti .php. Quando li apro con un qualunque editor di kde non ho problemi. Se poi fanno i furbi e mi spacciano per utf-8 un set che utf-8 non è... ma non credo
Il problema è che non ho capito come vengono scelte le codifiche quando invii i dati tramite form (perchè i titoli sono inviati da una pagina del sito) e soprattutto come vengono processate le stringhe php quando vengono inserite e recuperate da un db MySQL. Ho chiesto aiuto a quelli dell'hosting perchè, per esempio, tramite phpMyAdmin avevo visto che il charset predefinito del mio database era tipo latin1_swedish o una cosa del genere. Quindi ora vedo un po' cosa mi rispondono. Io intanto ho cambiato il charset di default di db e tabelle ma non so come sono stati trattati i dati già inseriti. Ma poi, scusa se te lo chiedo, ma magari dovrei fare una cosa del genere(?):
(Ipotizzando che il charset del database sia utf8, e della collation non me ne frega tanto no la uso)
Nel file aggiungi_immagini.php

Codice: Seleziona tutto

// Tanto per cominciare, i caratteri inviati con post sono interpretati correttamente da php o no?
$titolo = mysql_real_escape_string($_POST['titolo']);

// Nota: l' utf8_encode() serve o è superfluo/sbagliato? Per ora non lo uso...
$query = utf8_encode("INSERT INTO tabella (titolo) VALUES ($titolo)");

mysql_query($query);

Nel file vedi_immagini.php

Codice: Seleziona tutto

$row = mysql_fetch_array($foo);

// E questo utf8_decode sarebbe da aggiungere secondo te?
$titolo = utf8_decode( $row[0] );

Io no ho usato nè uno nè l'altro, perchè quando provo il sito in locale (slackware) mi funziona tutto bene, evidentemente funziona tutto in utf8, quindi... E' quando pubblico il sito sull'host (windows) che mi dà questi problemi

[conraid]

Hosting windows... ahiahiahiahia...

comnque il DB non dovrebbe entrarci, nel senso che al limite hai dati utf8 memorizzati in formato latin1, devi solo saperlo al momento del backup e relativo restore.
Per anni ho usato Wordpress così per esempio

Per il resto io userei i dati html, così ti togli il pensiero

[puzuma]

il comportamento che tu chiami "pasticcio" in realtà è il comportamento standard dei float così come descritto nelle specifiche W3C, non ti sorprenderà sapere che tutti i browser lo interpretano secondo le specifiche tranne uno (ti lascio indovinare quale).

se la soluzione indicata (aggiungere un elemento con clear: both) non ti sembra elegante, prova semplicemente ad aggiungere

Codice: Seleziona tutto

overflow: hidden

nello stile del div contenitore (riferimenti : http://www.quirksmode.org/blog/archives ... loats.html)

[raffaele181188]

overflow: hidden non fa al caso mio, perchè troncherebbe l'immagine...
comunque se le specifiche w3c dicono che ci si deve comportare così no mi sembrano razionali: che senso ha che un float esce fuori dal div contenitore? Mah...
Comunque ora posto gli screenshots. per il codice mi scuso, ma non avevo salvato i file sulla penna usb come si deve eheheh... sono illegibili. E poi il codice si intuisce abbastanza dalle immagini:
Con il div invisibile con clear: both ho il problema che me lo allunga perchè anche la barra di navigazione è un float, anche se si trova in un altro div:

Senza il clear: both ecco il "pasticciaccio brutto":

Ovviamente questa è una versione del sito che testo in locale, le immagini sono inadeguate, lo so... eh eh eh
Ah, il div contenitore non può avere un parametro width settato sempre uguale, perchè la sua altezza dovrebbe dipendere dal contenuto (per esempio: se ho una immagine più lunga o più corta? e se volessi inserire del testo nel div che descrive l'immagine?)
Spero che gli screens siano visibili, no so come si inseriscono

[conraid]

Intendevi height forse?

Se sì esiste una soluzione

min-height in gecko e simili
height in IE

quindi scrivi qualcosa come

Codice: Seleziona tutto

height: auto !important;
height: 100px;
min-height: 100px

in IE height si comporta "male" e puoi sfruttare queste cosa. Se con IE7 è cambiato qualcosa usa css condizionali

[puzuma]

overflow: hidden non fa al caso mio, perchè troncherebbe l'immagine...

ne sei proprio sicuro ? hai provato ?

guarda che overflow: hidden ha esattamente lo stesso effeto del clear: both

esempio:

Codice: Seleziona tutto

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Test</title>
	<style>
	#fuori {
		overflow: hidden;
		border: solid 1px red;
	}
	#dentro {
		float: left;
		height: 100px;
		width: 100px;
		border: solid 1px blue;
	}
	</style>

</head>
<body>

<div id="fuori">
<div id="dentro">
</div>
</div>

</body>
</html>

prima di criticare le specifiche w3c magari dovresti provare a leggerle

[raffaele181188]

@conraid per quanto riguarda il set di caratteri, non ho capito la soluzione che mi hai proposto. Tu per caso mi suggerisci di fare qualcosa tipo:
Identit\x98 di un fiore, cioè con il carattere \x98 specificato con il codice? In effetti non avrei problemi ma tieni presente che quei titoli sono inseriti e presi dal database così:
L'utente che aggiunge l'immagine e ne specifica il titolo in un form, quindi
browser --> PHP --> MySQL
Quando un utente vuole vedere le immagini, i titoli sono presi così
MySQL --> PHP --> browser
Io ho specificato il set di caratteri solo nella pagina che visualizza il browser. Tu mi stai dicendo (se ho capito bene) che le comunicazioni tra PHP e MySQL sono gestite in automatico.
Quindi non capisco: perchè i caratteri accentati vengono visualizzati male? Il problema sta tra il browser e PHP? E, soprattutto, si verifica quando INSERISCO il titolo o quando lo RITIRO?

@puzuma OK proverò con l'overflow come dici tu. ma preciso che le specifiche le ho lette duemila volte, e la proprietà overflow è descritta nel capitolo sugli effetti e ci sono degli esempi che mostrano quello che provoca se applicata a contenuto testuale. Ora provo e ti faccio sapere. Ma non credo che funzioni per il semplice motivo: la proprità overflow può prendere 3 valori e si applica al contenuto dei box INTERNI che esce da quello del box per cui è specificata la proprietà:
hidden: NON MOSTRA il contenuto che sporge
scroll: mostra le barre di scorrimento
auto, eccetera....
Non mi sembrava che fosse il caso di ricorrere a overflow, comunque vado, provo e posto
Grazie comunque per avermi ribadito la tua idea, così adesso ci provo!!!

[conraid]

io intendevo qualcosa come identità (spero che phpbb non faccia casini)

cioè caratteri in HTML

poi usi il php per toglierle nei titoli delle pagine (come è adesso non posso nemmeno linkare su quella pagina).
Insomma, prevedi pagine e link senza spazi e lettere accentate.
Hai molte funzioni in php per farlo

per overflow anche a me sembra che sia diverso rispetto a clear, e nasconde solamente il contenuto

[aschenaz]

Per quanto riguarda l'altezza del div, oltre all'ottima soluzione del min-height
proposta da conraid, potresti ricavarti l'altezza dell'immagine con getimagesize
(es. list($width, $height) = getimagesize($filename);) e poi impostare
l'altezza al volo del div con il valore di altezza dell'immagine (o qualcosa in più):
<div style="height:<?php echo $height ?>">

Tutto questo, naturalmente, se stiamo parlando anche di php...