Visualizzazione risultati 1 fino 5 di 5

Discussione: Problema con div e dimensioni

  1. #1
    L'avatar di radiodelmomento
    radiodelmomento non è connesso AlterGuru
    Data registrazione
    09-09-2010
    Messaggi
    1,075

    Predefinito Problema con div e dimensioni

    Il mio problema è che il div interno con height:48px viene inserito dentro un div con dimensioni minori. In quest'ultimo div, come potete notare da immagini e relativo codice, non viene impostata un'altezza, quindi non capisco come mai le dimensioni non siano quelle dell'elemento interno più grande.



    Codice HTML:
    <div style="border:1px solid #CCC;background:#FFF;padding:10px;border-radius:4px;margin-top:-10px; content:inherit">
        <div style="float:left;margin-right:5px;width:48px;height:48px"><a href="abc" style="float:left"><img src="abc"></a></div>
        <div><b><a href="abc">text</a></b>
        <br>h</div>
    </div>
    Grazie come sempre.

  2. #2
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,625

    Predefinito

    Perché il div è flottante. Gli elementi figli che hanno la proprietà CSS float diversa da none non vengono considerati per il calcolo dell'altezza del contenitore quando questo ha la proprietà height impostata su auto e se è di tipo blocco con overflow visible. Vedi le specifiche: http://www.w3.org/TR/CSS21/visudet.html#normal-block.

    Per ovviare a ciò puoi:
    • aggiungere un elemento in-flow alla fine del contenitore che si posizioni sotto l'elemento con il float, ovvero aggiungere un elemento vuoto con la proprietà CSS clear impostata su both. L'elemento non deve essere necessariamente presente nel documento HTML, in quanto si possono sfruttare gli pseudo elementi CSS:
      Codice:
      tuoselettore:after{
      	content: "";
      	clear: both;
      	display: block;
      }
    • Impostare proprietà overflow dell'elemento contenitore su un valore differente da visible. In questo modo le regole per determinare l'altezza dello stesso cambiano: http://www.w3.org/TR/CSS21/visudet.h...ck-root-margin.
    Ultima modifica di karl94 : 02-01-2014 alle ore 15.21.15 Motivo: correzione del codice

  3. #3
    L'avatar di radiodelmomento
    radiodelmomento non è connesso AlterGuru
    Data registrazione
    09-09-2010
    Messaggi
    1,075

    Predefinito

    Proprio come pensavo.
    Nella seconda soluzione, l'attributo "content" sarebbe il contenuto dell'elemento che viene creato?
    Poi "tuoselettore" sarebbe il div assoluto (quello non flottante) oppure quello all'interno?
    Se "clear: both" serve, in un certo senso, a "resettare" il float, aggiungendo questo div dopo l'elemento flottante, quest'ultimo continuerà ad esserlo, o sbaglio?
    Te lo chiedo perché ho provato ad utilizzare quel codice css senza ottenere alcun risultato (non funziona nemmeno se creo il contenitore direttamente senza css).
    La spiegazione è ottima come sempre

    P.S.: ho cambiato un po' il layout (non per questo problema) per cui ho risolto, ma non mi dispiacerebbe imparare qualcosa che non so

  4. #4
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,625

    Predefinito

    Citazione Originalmente inviato da radiodelmomento Visualizza messaggio
    Proprio come pensavo.
    Nella seconda soluzione, l'attributo "content" sarebbe il contenuto dell'elemento che viene creato?
    Quella è la prima soluzione.
    Sì, la proprietà CSS content è applicabile solo per gli pseudo elementi, ed il suo valore diviene il contenuto dello stesso.
    Citazione Originalmente inviato da radiodelmomento Visualizza messaggio
    Poi "tuoselettore" sarebbe il div assoluto (quello non flottante) oppure quello all'interno?
    Nel codice che hai indicato tu sarebbe quello più esterno, ossia il contenitore.
    Citazione Originalmente inviato da radiodelmomento Visualizza messaggio
    Se "clear: both" serve, in un certo senso, a "resettare" il float, aggiungendo questo div dopo l'elemento flottante, quest'ultimo continuerà ad esserlo, o sbaglio?
    Più o meno, un elemento in-flow con la proprietà CSS clear impostata su both deve venire posizionato (traslandolo verso il basso) in modo che né a destra né a sinistra si trovi un elemento flottante.
    Citazione Originalmente inviato da radiodelmomento Visualizza messaggio
    Te lo chiedo perché ho provato ad utilizzare quel codice css senza ottenere alcun risultato (non funziona nemmeno se creo il contenitore direttamente senza css).
    Quello perché mi sono dimenticato di specificare che l'elemento deve essere di tipo blocco, e che quindi bisogna specificare display: block all'interno della regola con lo pseudo elemento (ho corretto il messaggio).

    Ho preparato un piccolo esempio: http://dabblet.com/gist/8219789.

  5. #5
    L'avatar di radiodelmomento
    radiodelmomento non è connesso AlterGuru
    Data registrazione
    09-09-2010
    Messaggi
    1,075

    Predefinito

    Capito tutto, grazie mille

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •