• T
    User Attivo •

    Allineare al centro una div

    Buona sera,
    sto costruendo un template per joomla e sto avendo un po' di difficoltà con l'allineamento centrale di questo template. Vi spiego subito come è fatto:

    
<div align="center">
<div id="main">
----<div id="colonna_sx"></div>
----<div id="colonna_centro"></div>
----<div id="colonna_dx"></div>
</div>
</div>

    Ho usato l'escamotage di creare una div senza classe e allinearla al centro.
    Il problema è che in questo modo - tramite firebug - sembra non comparire questa div senza classe. O meglio, compare ma in cima a tutto i template e dello spessore di 1px.

    la classe main è cosi strutturata:
    #main {
    width: 800px;
    margin: 0;
    border: 1px solid #cccccc;
    }

    se non imposto il float a mi si vede centrata ma senza i bordi colorati; se imposto il float mi mostra i bordi colorati, ma mi allinea l'intero template a sinistra.
    Esiste un modo per avere il template allineato e coi bordi colorati?
    Le sto provando tutte.

    Ah dimenticavo, uso FF2.

    Grazie.

    0
  • E
    User Attivo •

    Esiste un modo per avere il template allineato e coi bordi colorati?
    Le sto provando tutte.Allineato dove?

    Il div senza classe è all'ineato al centro non <div id="main">
    Prova ad inserire text-align=center nel div senza classe oppure sostituiscilo con una tabella

    0
  • T
    User Attivo •

    No perchè nel #main io homesso width:left visto che "center" non esiste.
    E quindi me lo spara tutto a sx.

    0
  • A
    User •

    Prova se questo ti va bene

    html

    <div id="centro">
    <div id="colonnasx">sinistra</div>
    <div id="colonnacentro">centro</div>
    <div id="colonnacentro">destra</div>

    </div><!--centro-->

    codici

    <div id="centro">
    <div id="colonnasx">sinistra</div>
    <div id="colonnacentro">centro</div>
    <div id="colonnacentro">destra</div>

    </div><!--centro-->

    Ciao Alex

    0
  • A
    User •

    Scusami ho sbagliato l'invio precedente

    prova questo

    html

    <div id="centro">
    <div id="colonnasx">sinistra</div>
    <div id="colonnacentro">centro</div>
    <div id="colonnacentro">destra</div>

    </div><!--centro-->

    codici css

    #centro { width:800px;
    height:1000px;
    margin:auto;
    border:1px solid #000000;
    }
    #colonnasx { width:260px;
    height:1000px;
    float:left;
    }
    #colonnacentro { width:260px;
    height:1000px;
    float:left;
    }
    #colonnadx { width:260px;
    height:1000px;
    float:left;
    }

    Ciao Alex

    0
  • P
    User Attivo •

    Se non risolvi prova a inserire:
    <div align="center">
    <div id="main">
    ----<div id="colonna_sx"></div>
    ----<div id="colonna_centro"></div>
    ----<div id="colonna_dx"></div>

    ----<div style="clear:both"></div>
    </div>
    </div>
    Risolve spesso taaaaaanti problemi....

    0
  • T
    User Attivo •

    @alex685 said:

    Scusami ho sbagliato l'invio precedente

    prova questo

    html

    <div id="centro">
    <div id="colonnasx">sinistra</div>
    <div id="colonnacentro">centro</div>
    <div id="colonnacentro">destra</div>

    </div><!--centro-->

    codici css

    #centro { width:800px;
    height:1000px;
    margin:auto;
    border:1px solid #000000;
    }
    #colonnasx { width:260px;
    height:1000px;
    float:left;
    }
    #colonnacentro { width:260px;
    height:1000px;
    float:left;
    }
    #colonnadx { width:260px;
    height:1000px;
    float:left;
    }

    Ciao Alex
    Ciao Alex,
    in questo modo però non ho più un template dinamico, ma fisso...pure di altezza! Se infatti tolgo l'altezza ecco che la div scompare.
    Non c'è un modo per far sì che l'altezza sia dinamica ma che il div centrale si veda lo stesso?

    0
  • A
    User •

    A me questo si vede bene. Non so , probabilmente non ho capito quello che vuoi realizzare.
    Ciao Alex

    #main {
    width: 800px;
    margin: 0;
    border: 1px solid #FF0000;
    margin:auto;
    text-align:center;

    }

    0
  • A
    User •

    Il codice html

    <div id="main">
    ----<div id="colonna_sx"></div>
    ----<div id="colonna_centro"></div>
    ----<div id="colonna_dx"></div>

    </div>

    #main {
    width: 800px;
    margin: 0;
    border: 1px solid #FF0000;
    margin:auto;
    text-align:center;

    }

    0
  • T
    User Attivo •

    In pratica, se lo apro con FF2 e lo analizzo con FireBug noto che la div principale (la "main" per intenderci) si posiziona sopra tutto il template facendo intravedere solo 1px di se stessa.
    Ciò si nota anche dal fatto che se metti un "background: #colore;" e non metti alcuna altezza "height: ---px;" non si nota nulla. Se invece metto l'altezza statica (quindi non dinamica) ecco che la div "main" si vede. Ma, come dicevo, in questo modo non è piu un template dinamico.

    0
  • K
    Super User •

    Ciao Tarab 🙂 ,
    Potresti inserirci una risorsa online dove poter guardare direttamente il problema?

    0
Effettua l'accesso per rispondere