Visualizzazione dei risultati da 1 a 5 su 5
  1. #1

    Elenco di righe (da database) con icona

    Salve a tutti,
    scusate il titolo vago ma non sono riuscito a formularne uno più preciso (e proprio per questo non ho trovato qualcosa di specifico on line per il mio problema).

    Devo stampare il resultset di un database che consiste in un elenco di testo da associare (in base a vari criteri) a delle icone.

    Quindi ho praticamente un elenco di blocchi di testo (div) che contengono un'immagine sulla sinistra.

    Vorrei avvicinare il testo all'immagine e allora ho impostato la regola float:left all'immagine.
    Il problema è che se c'è poco testo o se i div sono larghi l'immagine esce fuori dal bordo del div rovinando il layout.
    Ci sono modi semplici per risolvere questa cosa o devo inserire il tutto in due div diversi e renderli float (o table-cell)? In questo caso avrei tutto ordinato ma avrei le icone in una colonna a parte invece che fuse con il testo.

    Cosa mi suggerite di fare?
    I dilettanti costruirono l'Arca, i professionisti il Titanic!

  2. #2
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,654
    Ciao, se posti il codice che usi sarebbe più facile aituarti.

  3. #3
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Ciao, sempre che io abbia capito bene, si tratta del solito problema dato da un elemento float che slega il suo contenitore dall'obbligo di estendersi per poterlo contenere, a meno che il contenitore stesso non sia anch'esso float. Impostando però il float anche al contenitore si potrebbero venire a creare ulteriori problematiche.

    Ci sono comunque diverse soluzioni più o meno semplici (senza dover creare ulteriori elementi HTML, come tu stesso dici) che puoi trovare sotto il nome di "clearfix".

    Una tra le più semplici è l'uso di overflow: auto; da applicare al contenitore.
    Qui una guida con degli esempi esplicativi http://it.learnlayout.com/clearfix.html

    Al capitolo 2 dei link utili CSS puoi trovare anche altre informazioni sotto la voce Float e Clear.

    Se non è ciò che cercavi, fornisci maggiori dettagli ed eventualmente posta il codice incriminato come suggerito da m4rko80.

    Buon proseguimento.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  4. #4
    Grazie mille! Guardo i link e ci faccio sapere. Se non funziona posto il codice
    I dilettanti costruirono l'Arca, i professionisti il Titanic!

  5. #5
    Con overflow:auto funziona.
    Volevo solo chiedere una cosa. Ho letto che auto inserisce una scrollbar se il contenuto supera le dimensioni. Ho fatto vari test ma ciò non accade mai. Posso essere sicuro di ciò?

    Ecco il codice:

    codice HTML:
                    <div id='bodyNews'>
                        <div id='bodyNewsTitle'>Notizie</div>
                        <div>
                            <img src='<?=SITE_URL.IMAGE_DIR?>news_a.png' />
                            <div>Titolo 1</div>
                            Praesent vel augue tristique, gravida ligula sed, porttitor lorem. Nulla sollicitudin sollicitudin mattis. Mauris commodo pulvinar augue, sit amet faucibus risus sodales et. Praesent nec tellus justo. 
                        </div>
                        <div>
                            <img src='<?=SITE_URL.IMAGE_DIR?>news_b.png' />
                            <div>Titolo 2</div>                        
                            Praesent vel augue tristique, gravida ligula sed, porttitor lorem. Nulla sollicitudin sollicitudin mattis. Mauris commodo pulvinar augue, sit amet faucibus risus sodales et. Praesent nec tellus justo.     
                        </div>
                        <div>
                            <img src='<?=SITE_URL.IMAGE_DIR?>news_c.png' />
                            <div>Titolo 3</div>                        
                            Praesent vel augue tristique, gravida ligula sed, porttitor lorem. Nulla sollicitudin sollicitudin mattis. Mauris commodo pulvinar augue, sit amet faucibus risus sodales et. Praesent nec tellus justo.     
                        </div>
                        <div>
                            <img src='<?=SITE_URL.IMAGE_DIR?>news_d.png' />
                            <div>Titolo 4</div>
                            Praesent vel augue tristique, gravida ligula sed, porttitor lorem. Nulla sollicitudin sollicitudin mattis. Mauris commodo pulvinar augue, sit amet faucibus risus sodales et. Praesent nec tellus justo.     
                        </div>
                    </div>

    codice:
    #bodyNews div{
        margin-bottom:10px;
        text-align:justify;
        padding:10px;
        overflow:auto;
    }
    #bodyNews div div{
        font-size:16px;
        font-weight:bold;
        margin-bottom:5px;
    }
    #bodyNewsTitle{
        background-color:transparent;
        font-family:"French Script MT", cursive;
        font-size:40px;
        text-align:center;
        margin:10px auto;
    }
    
    #bodyNews #bodyNewsTitle{
        text-align:center;
    
    
    }
    #bodyNews img{
        float:left; 
        margin:5px;
    }
    I dilettanti costruirono l'Arca, i professionisti il Titanic!

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Si, potrebbe succedere che siano mostrate le scrollbar là dove, per un qualche particolare motivo, il contenuto vada a sbordare dal contenitore stesso, ma è chiaro che in tal caso andrebbero verificate le cause ed effettuati gli opportuni accorgimenti per riallineare correttamente il layout. Per il momento pare anche a me che nel tuo caso non si presenti questo problema. Quando e se si dovesse presentare, puoi tornare a postare qui
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.