• T
    User •

    Div css centrato per template joomla 1.5

    Carissimi,

    sto studiando i template di joomla, ne sto creando uno utilizzando div e relativi css.

    Questo è il risultato attuale:

    www tourz it/joomla

    vorrei centrare il tutto, ma essendo poverissimo in div e css, non riesco.
    Pensavo di provare a lavorare sul DIV esterno "gabbia" ma non riesco.

    Provo a postare il codice del file index.php e il relativo layout.css

    Index.php:

    ...
    ...
    <link rel="stylesheet" href="templates/apollo/css/layout.css" type="text/css" />
    </head>
    <body>

    <!-- Gabbia esterna -->
    <div id="gabbia">

    <!-- Testata: deve ontenere solo il ritaglio dell'immagine quindi si apre e si chiude e nel file layout.css ci sarà il puntamento al file grafico -->

    <div id="top"> </div>

    <!-- Apre il corpo centrale -->
    <div id="centro">
    <!-- lasciamo aperto perchè conterrà tutto il corpo del sito -->

    <!-- immagine proncipale -->
    <div class="header"></div>

    <!-- la barra di navigazione -->
    <div class="navigatore">
    <jdoc:include type="module" name="breadcrumbs" />
    </div>

    <!-- Menù laterale -->
    <div class="bloccoleft"><jdoc:include type="modules" name="left" style="" />
    </div>

    <!-- blocco centrale dei componenti -->
    <div class="middle"><jdoc:include type="component" /></div>

    <!-- Clear Setta impostazioni ottimali -->
    <div class="clear"></div>

    <!-- copyright -->
    <div class="piedipagina"><jdoc:include type="module" name="footer" />

    </div>
    </div>
    <div id="down"> </div>

    </body>
    </html>

    LAYOUT.php

    • {
      padding: 0;
      margin: 0;
      }

    #gabbia {

    margin-top: 20px;
    margin-left: 20px;
    width: 725px;
    background: #fff url('../images/middle.jpg');
    background-repeat: repeat-y
    }

    #top {
    background: url('../images/top.jpg');
    height: 28px;
    }

    #centro {
    padding: 0 40px 0 40px;
    }

    .header {
    height: 190px;
    background: #6897EF url('../images/city2.jpg');
    }

    .navigatore {
    background: #F6F9FB;
    border-bottom: lpx solid #DEDCDC;
    padding-top: 5 px;
    padding-bottom: 5px;
    padding-left: 5px;
    width: 645px;
    }

    .bloccoleft {
    float: left;
    width: 180px;
    height: 100%;
    margin-right: 0;
    margin-top: 5;
    background:;
    }

    .middle{

    width: 450 px;
    margin: 5 0px;
    margin-left: 180 px;
    padding-left: 10px;
    }

    #clear {
    display: block;
    clear: both;
    width: 100%;
    height: 1px;
    overflow: hidden;
    }

    #down {
    background: url('../images/down.jpg');
    height: 24px;
    }

    .piedipagina {
    background:;
    text-align: center;
    border-bottom: lpx soldi;
    padding: 5px;
    }

    So che qui troverò le dritte per risolvere il mio piccolo problema.

    GRAZIE A TUTTI

    0
  • P
    Super User •

    Hai provato a scrivere margin-left:auto; margin-right:auto; al div gabbia? 😉

    Solo così si centra il tutto. 😉

    0
  • T
    User •

    @pikadilly said:

    Hai provato a scrivere margin-left:auto; margin-right:auto; al div gabbia? 😉

    Solo così si centra il tutto. 😉

    #gabbia {

    margin-left: auto;
    margin-right: auto;
    width: 725px;
    background: #fff url('../images/middle.jpg');
    background-repeat: repeat-y
    }

    Come vedi non funzia.
    Qualcosa cambia, ma non è proprio quello che cercavo 🙂
    devo fare un -x pari alla metà della dimensione interna?

    0
  • T
    User •

    Ho risolto, grazie mille.

    Non so bene come ho fatto, ma con l'aiuto di Firebug e del tuo prezioso supporto sono riuscito a risolvere

    ANZI NO!

    **Mi funziona su Chrome e Firefox, ma non su explorer 7

    **

    Why

    0
Effettua l'accesso per rispondere