» [1.5] Problema con template per joomla 1.5 senza tabelle.

tourz · 24-10-08, 09:53

Carissimi, ho un problema che mi assilla.

Sto creando un template per joomla 1.5 senza tabelle, ma ho problemi di centratura.

il sito è:
. tour z. it / joomla

se lo visualizzo con Chrome e Firefox tutto ok, bello centrato orizzontalmente col margine 20 sopra, ma se lo visualizzo con IE7 mi si sposta a sinistra.

Vi posto il file index.php e il relativo layout.css sicuro che troverete il problema.

index.php

<?php defined( "_JEXEC" ) or die( "Restricted access" );?>
<jdoc:comment></jdoc:comment>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ">
<html xmlns=" " xml:lang="{LANG_TAG}" lang="{LANG_TAG}" dir="{LANG_DIR}" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/_system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/apollo/css/template.css" type="text/css" />
<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="table" />
</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.css

* {
padding: 0;
margin: 0;
}
#gabbia {

background: #fff url('../images/middle.jpg');
background-repeat: repeat-y;
width: 725px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
}
#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;
}

Io pensavo che con il
margin-left: auto;
margin-right: auto;
tutto funzionasse...

INVECE ?

ashtur1 · 06-03-09, 14:27

Ciao,
per Ie6 ti dico già che ci vuole anche text-align:center; dentro la gabbia.

Ho dato una scorsa rapida al codice e sembra andar bene.

pikadilly · 10-03-09, 20:43

Vedo il template di base si joomla 1.5 nel link che hai postato. Prova a mettere anche posizione relativa al div #gabbia, anche se non dovrebbe assolutamente essere questo il problema, altrimenti un clear both prima di chiudere il tag della gabbia.

sputnik · 09-11-09, 17:46

Ciao..
Anche io ho un problema simile e vi chiedo di aiutarmi perchè sono disperato.
Il sito è gruppolongopuntocom e ho il problema che con Mozilla si vede tutto perfettamente centrato.
Con IE invece si vede la parte sopra tutta a sinistra e il footer centrato.
Aiutatemi è importantissimo ed urgente.
Grazie mille.

24-10-08, 09:53	#1 (permalink)
tourz User Data di registrazione: Nov 2006 Messaggi: 43	[1.5] Problema con template per joomla 1.5 senza tabelle. Carissimi, ho un problema che mi assilla. Sto creando un template per joomla 1.5 senza tabelle, ma ho problemi di centratura. il sito è: . tour z. it / joomla se lo visualizzo con Chrome e Firefox tutto ok, bello centrato orizzontalmente col margine 20 sopra, ma se lo visualizzo con IE7 mi si sposta a sinistra. Vi posto il file index.php e il relativo layout.css sicuro che troverete il problema. index.php <?php defined( "_JEXEC" ) or die( "Restricted access" );?> <jdoc:comment></jdoc:comment> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " "> <html xmlns=" " xml:lang="{LANG_TAG}" lang="{LANG_TAG}" dir="{LANG_DIR}" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="templates/_system/css/general.css" type="text/css" /> <link rel="stylesheet" href="templates/apollo/css/template.css" type="text/css" /> <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="table" /> </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.css * { padding: 0; margin: 0; } #gabbia { background: #fff url('../images/middle.jpg'); background-repeat: repeat-y; width: 725px; margin-right: auto; margin-left: auto; margin-top: 20px; } #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; } Io pensavo che con il margin-left: auto; margin-right: auto; tutto funzionasse... INVECE ?
	Ultima modifica di JACK1971 : 10-03-09 21:09. Motivo: Editato titolo per renderlo conforme al regolamento

06-03-09, 14:27	#2 (permalink)
ashtur1 Utente Premium Data di registrazione: Nov 2007 Messaggi: 71	Ciao, per Ie6 ti dico già che ci vuole anche text-align:center; dentro la gabbia. Ho dato una scorsa rapida al codice e sembra andar bene.
	__________________ www.braincode.it da psd a xhtml joomla!

10-03-09, 20:43	#3 (permalink)
pikadilly Esperta Data di registrazione: Dec 2006 Ubicazione: Old City Messaggi: 6,290	Vedo il template di base si joomla 1.5 nel link che hai postato. Prova a mettere anche posizione relativa al div #gabbia, anche se non dovrebbe assolutamente essere questo il problema, altrimenti un clear both prima di chiudere il tag della gabbia.
	__________________ Pikadilly. 2*. Piacere. Smanettona in via di sviluppo. :D

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.

09-11-09, 17:46	#4 (permalink)
sputnik User Newbie Data di registrazione: Aug 2009 Messaggi: 4	Ciao.. Anche io ho un problema simile e vi chiedo di aiutarmi perchè sono disperato. Il sito è gruppolongopuntocom e ho il problema che con Mozilla si vede tutto perfettamente centrato. Con IE invece si vede la parte sopra tutta a sinistra e il footer centrato. Aiutatemi è importantissimo ed urgente. Grazie mille.

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