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

    Centrare floating DIV nel loro contenitore

    Dunque ho questa situazione:

    codice:
    -----------------------------------------------------------
    | -------  -------  -------                               |
    | |     |  |     |  |     |                               |
    | |     |  |     |  |     |                               |
    | |     |  |     |  |     |                               |
    | -------  -------  -------                               |
    -----------------------------------------------------------
    e vorrei avere questo risultato

    codice:
    -----------------------------------------------------------
    |              -------  -------  -------                  |
    |              |     |  |     |  |     |                  |
    |              |     |  |     |  |     |                  |
    |              |     |  |     |  |     |                  |
    |              -------  -------  -------                  |
    -----------------------------------------------------------
    Problema: il numero dei div non e' noto a priori quindi non posso ridimensionare il container e usare margin: auto su di esso.
    Ora se non fosse come al solito per IE, basterebbe usare display: inline-block invece di float e basterebbe il text-align: center nel container.

    C'e' un modo cross-browser per ottenere questo risultato?

  2. #2
    Un rudimentale JS: Si presuppone che i div all'interno del container siano di larghezza uguale, a questo punto con un veloce calcolo imposti il margine sinistro del primo div ed il gioco è fatto!

    Qualcosa del tipo:
    codice:
    document.getElementById("firstDiv").style.marginLeft = (conteiner_width-content_width*n_div)/2 +"px";
    così facendo sottrai dalla lunghezza del container la lunghezza dei singoli div, lo spazio rimasto è l'offset massimo dei tui div e diviso per due è esattamente la metà!

    Se poi calcoli i div lato server è ancora più semplice perché imposti direttamente l'attributo style sul tag

    La soluzione non sarà elegantissima ma dovrebbe funzionare

  3. #3
    No niente javascript, piuttosto uso una tabella

    Comunque si al momento ho risolto calcolando la larghezza in PHP ma volevo una soluzione solo CSS.

  4. #4
    Nessun modo

  5. #5

  6. #6
    Moderatrice di HTML 5 e Kickstarter L'avatar di electric_g
    Registrato dal
    Jan 2002
    residenza
    Vancouver, BC
    Messaggi
    176
    Originariamente inviato da k.b
    Allora forse e' vero che le alternative alle table non sono sempre altrettanto semplici e cross-browser ?
    fcaldera mi ha dato la soluzione al tuo problema 10 minuti dopo che hai postato, ma è troppo timido per rispondere
    Codice PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">

    <
    head>
        <
    meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <
    title></title>

        <
    style>
        .
    ib_cnt {
            
    width            600px;
            
    text-align        center;
            
    white-space        nowrap;
            
    font-family        Arial;
            
    font-size        0;
            
    margin            10px auto;
            
    border            1px #e8e8e8 solid;
        
    }
        
        .
    ib_cnt div {
            
    width            120px;
            
    white-space        normal;
            
            
    font-size        14px;
            
    margin            20px 2px;
            
    border            3px #ccc solid;
            
            
    display            : -moz-inline-box;
            
    display            inline-block;
            
    vertical-align    middle;

        }
        
        .
    ib {
            *
    display        inline;
            *
    zoom            1;    
        }
        </
    style>
        

    </
    head>
    <
    body>

        
        <
    div class="ib_cnt">
            <
    div style="width:40%; margin: 30px 0;">
                


                
    Ecco diversi motivi per non usare le tabelle per il layout
                
    </p>
            </
    div>
        </
    div>
        
        <
    div class="ib_cnt">
            <
    div>Introducono codice ridondante</div>
            <
    div>Mischiano semantica e presentazione</div>
            <
    div>Non consentono layout complessi</div>
            <
    div>Rallentano la visualizzazione della pagina</div>
        </
    div>


    </
    body>
    </
    html
    Nope.

  7. #7
    Grazie, lo testo appena passo su una macchina windows

    Usare hack che fanno fallire il validator CSS e' inevitabile?

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.