Repository 32bit  Forum
Repository 64bit  Wiki

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

Forum dedicato alla programmazione.

Moderatore: Staff

Regole del forum
1) Citare in modo preciso il linguaggio di programmazione usato.
2) Se possibile portare un esempio del risultato atteso.
3) Leggere attentamente le risposte ricevute.
4) Scrivere i messaggi con il colore di default, evitare altri colori.
5) Scrivere in Italiano o in Inglese, se possibile grammaticalmente corretto, evitate stili di scrittura poco chiari, quindi nessuna abbreviazione tipo telegramma o scrittura stile SMS o CHAT.
6) Appena registrati è consigliato presentarsi nel forum dedicato.

La non osservanza delle regole porta a provvedimenti di vari tipo da parte dello staff, in particolare la non osservanza della regola 5 porta alla cancellazione del post e alla segnalazione dell'utente. In caso di recidività l'utente rischia il ban temporaneo.

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

Messaggioda raffaele181188 » dom nov 02, 2008 22:11

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
Ultima modifica di raffaele181188 il lun nov 03, 2008 21:08, modificato 1 volta in totale.
Avatar utente
raffaele181188
Packager
Packager
 
Messaggi: 789
Iscritto il: ven set 07, 2007 20:40
Località: DearSkin (FG)
Nome Cognome: Raffaele
Slackware: current
Kernel: 2.6.29.6
Desktop: KDE 4.3
Distribuzione: Ubuntu

Re: CSS: l'immagine float esce fuori dal div contenitore

Messaggioda phobos3576 » dom nov 02, 2008 22:32

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.
Avatar utente
phobos3576
Staff
Staff
 
Messaggi: 2980
Iscritto il: sab apr 16, 2005 23:00
Slackware: 13.1
Kernel: 2.6.37-smp
Desktop: KDE 4.5.3

Re: CSS: l'immagine float esce fuori dal div contenitore

Messaggioda raffaele181188 » dom nov 02, 2008 23:19

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...
Avatar utente
raffaele181188
Packager
Packager
 
Messaggi: 789
Iscritto il: ven set 07, 2007 20:40
Località: DearSkin (FG)
Nome Cognome: Raffaele
Slackware: current
Kernel: 2.6.29.6
Desktop: KDE 4.3
Distribuzione: Ubuntu

Re: CSS: l'immagine float esce fuori dal div contenitore

Messaggioda Akito » lun nov 03, 2008 0:20

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
Akito
Linux 2.4
Linux 2.4
 
Messaggi: 285
Iscritto il: dom set 03, 2006 12:12
Località: Limite sull'Arno (FI)
Nome Cognome: Alessandro Bianconi
Slackware: 13.1
Desktop: XFCE

Re: CSS: l'immagine float esce fuori dal div contenitore

Messaggioda aschenaz » lun nov 03, 2008 7:14

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... :)
pensieriemotivi.aschenaz.eu - music-blog
Avatar utente
aschenaz
Staff
Staff
 
Messaggi: 4423
Iscritto il: mar lug 27, 2004 23:00
Località: Reggio Calabria
Nome Cognome: Nino
Slackware: current 64bit
Kernel: 3.14.16
Desktop: KDE 4.10.5

Re: CSS: l'immagine float esce fuori dal div contenitore

Messaggioda conraid » lun nov 03, 2008 8:43

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
Avatar utente
conraid
Staff
Staff
 
Messaggi: 12016
Iscritto il: mer lug 13, 2005 23:00
Località: Livorno
Nome Cognome: Corrado Franco
Slackware: current

Re: CSS: l'immagine float esce fuori dal div contenitore

Messaggioda raffaele181188 » lun nov 03, 2008 11:35

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
Avatar utente
raffaele181188
Packager
Packager
 
Messaggi: 789
Iscritto il: ven set 07, 2007 20:40
Località: DearSkin (FG)
Nome Cognome: Raffaele
Slackware: current
Kernel: 2.6.29.6
Desktop: KDE 4.3
Distribuzione: Ubuntu

Re: CSS: l'immagine float esce fuori dal div contenitore

Messaggioda conraid » lun nov 03, 2008 11:42

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
Avatar utente
conraid
Staff
Staff
 
Messaggi: 12016
Iscritto il: mer lug 13, 2005 23:00
Località: Livorno
Nome Cognome: Corrado Franco
Slackware: current

Re: CSS: l'immagine float esce fuori dal div contenitore

Messaggioda puzuma » lun nov 03, 2008 12:45

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/2005/03/clearing_floats.html)
The quiet ones are the ones who change the world. The loud ones only take the credit.
Avatar utente
puzuma
Linux 2.4
Linux 2.4
 
Messaggi: 481
Iscritto il: mar lug 04, 2006 16:14
Località: Udine
Nome Cognome: Stefano Salvador
Slackware: current
Kernel: 2.6.32.2
Desktop: KDE 4.4.0

Re: CSS: l'immagine float esce fuori dal div contenitore

Messaggioda raffaele181188 » lun nov 03, 2008 12:59

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:
Immagine
Senza il clear: both ecco il "pasticciaccio brutto":
Immagine
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
Avatar utente
raffaele181188
Packager
Packager
 
Messaggi: 789
Iscritto il: ven set 07, 2007 20:40
Località: DearSkin (FG)
Nome Cognome: Raffaele
Slackware: current
Kernel: 2.6.29.6
Desktop: KDE 4.3
Distribuzione: Ubuntu

Re: CSS: l'immagine float esce fuori dal div contenitore

Messaggioda conraid » lun nov 03, 2008 13:06

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
Avatar utente
conraid
Staff
Staff
 
Messaggi: 12016
Iscritto il: mer lug 13, 2005 23:00
Località: Livorno
Nome Cognome: Corrado Franco
Slackware: current

Re: CSS: l'immagine float esce fuori dal div contenitore

Messaggioda puzuma » lun nov 03, 2008 13:16

raffaele181188 ha scritto: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
The quiet ones are the ones who change the world. The loud ones only take the credit.
Avatar utente
puzuma
Linux 2.4
Linux 2.4
 
Messaggi: 481
Iscritto il: mar lug 04, 2006 16:14
Località: Udine
Nome Cognome: Stefano Salvador
Slackware: current
Kernel: 2.6.32.2
Desktop: KDE 4.4.0

Re: CSS: l'immagine float esce fuori dal div contenitore

Messaggioda raffaele181188 » lun nov 03, 2008 13:27

@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!!!
Avatar utente
raffaele181188
Packager
Packager
 
Messaggi: 789
Iscritto il: ven set 07, 2007 20:40
Località: DearSkin (FG)
Nome Cognome: Raffaele
Slackware: current
Kernel: 2.6.29.6
Desktop: KDE 4.3
Distribuzione: Ubuntu

Re: CSS: l'immagine float esce fuori dal div contenitore

Messaggioda conraid » lun nov 03, 2008 14:10

io intendevo qualcosa come identit&agrave; (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
Avatar utente
conraid
Staff
Staff
 
Messaggi: 12016
Iscritto il: mer lug 13, 2005 23:00
Località: Livorno
Nome Cognome: Corrado Franco
Slackware: current

Re: CSS: l'immagine float esce fuori dal div contenitore

Messaggioda aschenaz » lun nov 03, 2008 14:21

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...
pensieriemotivi.aschenaz.eu - music-blog
Avatar utente
aschenaz
Staff
Staff
 
Messaggi: 4423
Iscritto il: mar lug 27, 2004 23:00
Località: Reggio Calabria
Nome Cognome: Nino
Slackware: current 64bit
Kernel: 3.14.16
Desktop: KDE 4.10.5

Prossimo

Torna a Programmazione

Chi c’è in linea

Visitano il forum: Nessuno e 2 ospiti