» Div css centrato per template joomla 1.5

tourz · 09-10-08, 15:42

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>


<div id="gabbia">



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


<div id="centro">



<div class="header"></div>


<div class="navigatore">
<jdoc:include type="module" name="breadcrumbs" />
</div>


<div class="bloccoleft"><jdoc:include type="modules" name="left" style="" />
</div>


<div class="middle"><jdoc:include type="component" /></div>


<div class="clear"></div>


<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: #fff 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: #fff;
}

.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: #fff url('../images/down.jpg');
height: 24px;
}

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

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

GRAZIE A TUTTI

pikadilly · 10-10-08, 00:48

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

Solo così si centra il tutto.

tourz · 10-10-08, 09:26

Quote:

pikadilly

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?

tourz · 10-10-08, 15:41

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

09-10-08, 15:42	#1 (permalink)
tourz User Data di registrazione: Nov 2006 Messaggi: 43	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: #fff 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: #fff; } .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: #fff url('../images/down.jpg'); height: 24px; } .piedipagina { background: #F6F9FB; text-align: center; border-bottom: lpx soldi #DEDCDC; padding: 5px; } So che qui troverò le dritte per risolvere il mio piccolo problema. GRAZIE A TUTTI

10-10-08, 00:48	#2 (permalink)
pikadilly Esperta Data di registrazione: Dec 2006 Ubicazione: Old City Messaggi: 6,290	Hai provato a scrivere margin-left:auto; margin-right:auto; al div gabbia? Solo così si centra il tutto.
	__________________ Pikadilly. 2*. Piacere. Smanettona in via di sviluppo. :D

10-10-08, 15:41	#4 (permalink)
tourz User Data di registrazione: Nov 2006 Messaggi: 43	Pikadily grazie 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
	Ultima modifica di tourz : 10-10-08 16:09.

Condividi questo contenuto nei Social Network:		Tweet
Ti stiamo aspettando: Registrati subito e gratis. Entra a far parte di una delle comunità più attive in Italia. Se hai dimenticato i tuoi dati li puoi recuperare subito.

Strumenti di discussione
Visualizza la versione stampabile Invia la pagina tramite email