Joomla.it Forum

Joomla! 1.5.x (versione con supporto terminato) => Joomla! 1.5 => I Template di Joomla 1.5.x => : Elwood 08 Dec 2010, 00:37:36

: Gestione larghezza colonne
: Elwood 08 Dec 2010, 00:37:36

Premetto che sono diversi giorni che sto mettendo mano al mio template per cercare di sistemarlo.
Ho grossi problemi nel modellare le larghezze delle colonnne.
Colonna sx - colonna centrale - Colonna dx

Anche dopo aver letto alcuni topic qui sulle colonne, provo a variare nel css le larghezze di riferimento, ma nulla:
-mi restano sempre le colonne esterne della stessa dimensione (le vorrei allargare un pò a discapito della centrale per evitare l'effetto sovrapposizione testo/elementi grafici laterali ora presente: il modulo mainmenu è ok, ma quelli sotto a sx partono troppo a ridosso deil margine grafico sovrapponendosi - a dx il testo nei moduli news termina anche lì sopra il margine grafico)
-l'immagine che uso nell'head (880 di larghezza) non occupa tutto lo spazio che dovrebbe essere proprio di 880. lascia un margine "buio" a destra come si vede.

Se stringo ancora il table.middle ora impostato su 920px, vengono coperti i borsi verticali rossi che delimitano graficamente la lunghezza della tabella principale.

Se torna utile posto il codice del css:

:

body, html {
background-color:#b71919;
        padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
font-family: Arial, Helvetica, sans-serif;
height:100%;
scrollbar-3d-light-color:#b71919;
scrollbar-arrow-color:#b71919;
scrollbar-base-color:#b71919;
scrollbar-dark-shadow-color:#b71919;
scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#b71919;
background-image: url(../images/Searing20Gorge.jpg);
background-repeat: repeat;
}

table.main {
width: 100%;
vertical-align:top;
height:100%;
margin:0px;
padding:0px;
}

table.middle {
width: 920px;
background-color: Black;
vertical-align:top;
}

td.rightshadow {
background-image: url(../images/rightbg.gif);
background-repeat: repeat-y;
background-position: left;
width: 10px;
}

td.center {
width: 540px;
vertical-align:top;
height:100%;
}

td.leftshadow {
background-image: url(../images/leftbg.gif);
background-repeat: repeat-y;
background-position: left;
width: 10px;
}

td.centerleft {
background-image: url(../images/centerleft.gif);
background-position: left;
background-repeat: repeat-y;
width: 180px;
vertical-align: top;
height:auto;
}

td.centerright {
background-image: url(../images/centerright.gif);
background-position: right;
background-repeat: repeat-y;
width: 180px;
vertical-align: top;
height:auto;
}

td.head {
height: 180px;
background-image: url(../images/MagMaBARnew.gif);
vertical-align:middle;
background-repeat: no-repeat;
color: #b71919;
font-size: 36px;
border-bottom: 0px ridge #b71919;
text-indent: 300px;
margin:0px;
padding:0px;
}

td.path {
background-image: url(../images/headbg.gif);
background-position: center;
background-repeat: repeat-x;
color:black;
height:20px;
font-size: 11px;
font-weight:bold;
text-align:left;
text-indent: 10px;
vertical-align: middle;
}

td.date {
background-image: url(../images/headbg.gif);
background-position: center;
background-repeat: repeat-x;
color:black;
height:auto;
font-size: 11px;
font-weight:bold;
text-align:right;
padding-right: 10px;
vertical-align: middle;
}

table.moduletable {
margin: 10px 10px 10px 10px;
padding: 3px 3px 3px 3px;
vertical-align: top;
}

table.moduletable th {
background-image: url(../images/headbg.gif);
background-position: center;
background-repeat: repeat-x;
color: black;
height: auto;
font-size: 12px;
font-weight: bold;
text-align: center;
width: auto;
padding: 3px 3px 3px 3px;
vertical-align: middle;
}

table.moduletable td {
padding:3px 3px 3px 3px;
   color:#b71919;
font-size:12px;
text-align:left;
vertical-align:top;
}

p {
font-size: 12px;
color:#b71919;
}

.contentdescription {
font-size: 11px;
color:#b71919;
}

a.mainlevel:link, a.mainlevel:visited {
display: block;
text-decoration: none;
font-size:12px;
font-weight:bold;
color:#b71919;
height: auto;
text-indent: 5px;
border-bottom:1px solid orange;
padding-bottom:3px;
}

a.mainlevel:hover, a.mainlevel:active {
display: block;
text-decoration: none;
font-size: 12px;
font-weight: bold;
color: #e11f1f;
height: auto;
border-left: 1px solid orange;
text-indent: 5px;
padding-bottom:3px;
}

a.sublevel:link, a.sublevel:visited {
display: block;
text-decoration: none;
font-size: 12px;
color: #EB8E30;
height: auto;
font-weight: normal;
}

a.sublevel:hover {
display: block;
text-decoration: none;
font-size: 12px;
color: #BA6612;
height: auto;
font-weight: normal;
}

.inputbox, .searchbox {
border: 1px solid #b71919;
background-color: White;
color:#b71919;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
}

.button {
background-color:#b71919;
background-image: url(../images/section1.jpg);
background-repeat: repeat-x;
color:black;
font-size:11px;
font-weight: bold;
border:1px solid #b71919;
padding:2px 2px 2px 2px;
}

a:link, a:visited, a.category:link, a.category:visited {
color:#b71919;
font-weight:bold;
font-size: 12px;
}

a:hover, a.category:hover {
text-decoration: none;
}

.small, .createdate, .modifydate, .content_rating {
font-size:11px;
color:#b71919;
}

.contentheading {
color: orange;
font-size: 13px;
font-weight: bold;
padding: 3px 3px 5px 3px;
}

.frontpageheader {
color:#b71919;
font-size:12px;
font-weight: bold;
padding:3px 3px 3px 3px;
}

a.readon:link, a.readon:visited {
color:#b71919;
font-size: 11px;
font-weight: normal;
}

a.readon:hover {
text-decoration: none;
}

.contentpaneopen {
text-align: left;
vertical-align:top;
color:#b71919;
}

li {
list-style-type: square;
font-size:12px;
color:#b71919;
}

ol, ul {
list-style-type: decimal;
font-size:12px;
color:#b71919;
}

td {
text-align: left;
color:#b71919;
font-size:12px;
}

.sectiontableentry1 {
background-color:orange;
padding:3px;
color:black;
}

.sectiontableentry2 {
background-color:black;
padding:3px;
color:orange;
}

a.category:link,a.category:visited {
color:#b71919;
font-size:11px;
text-decoration: none;
}

a.category:hover {
text-decoration: underline;
}

td.bottom {
background-image: url(../images/headbg.gif);
background-position: center;
background-repeat: repeat-x;
height:auto;
text-align:center;
color:black;
}

a.bottom:link, a.bottom:visited {
color:orange;
font-weight:bold;
font-size: 12px;
}

a.bottom:hover {
text-decoration: none;
}
Accetto consigli per risolvere questo problema ed ottimizzare il template e relativo css.
Grazie,
Elwood

: Re:Gestione larghezza colonne
: ophtalmos 08 Dec 2010, 01:08:43

non potresti linkare il sito?
grazie ciao

: Re:Gestione larghezza colonne
: Elwood 08 Dec 2010, 01:38:25

Scusami, ero sicuro di averlo scritto, mi devo esser perso nel fiume di parole :)
http://www.magmamagicmachine.it/ (http://www.magmamagicmachine.it/)

Grazie,
Elwood

: Re:Gestione larghezza colonne
: Elwood 08 Dec 2010, 13:11:21

Aggiungo un'altra domanda: come posso inserire "aria", spazio tra un modulo e l'altro?

Spero che qualcuno mi dia una mano, ieir ho fatto l'alba smanettando sul css con scarsi risultati  ???

: Re:Gestione larghezza colonne
: ophtalmos 08 Dec 2010, 14:22:11

vai a templates/css/template_css.css e alla riga 259 e aggiungi un padding-bottom di quanto gradisci

:

ol, ul {
color:#B71919;
font-size:12px;
list-style-type:decimal;
padding-bottom:[i]tuo[/i]px;
]
ciao

: Re:Gestione larghezza colonne
: Elwood 08 Dec 2010, 14:53:54

Perfetto, grazie. Impostato a 20px.

Sapresti darmi un aiuto anche per poter metter mano alle larghezze delle colonne e sovrapposizione testo moduli/grafica laterale come riportato sopra?

Grazie!

: Re:Gestione larghezza colonne
: adottauncane 08 Dec 2010, 15:38:23

Ciao Elwood,
prova ad aggiungere questo div al fondo del file template_css.css:

:

div.moduletable {
padding-left:30px;
padding-right:30px;
}
dove la misura del padding la puoi variare come ti serve. Però si allarga anche il template, quindi dovrai allargare di conseguenza l'immagine dell'header.

: Re:Gestione larghezza colonne
: Elwood 08 Dec 2010, 16:18:26

Ok grazie. Sto facendo delle prove con questo:
così allargo le colonne, elimino l'effetto sovrapposizione testo/grafica, ma alalrgandosi spariscono i bordi grafici rossi verticali esterni. Ora faccio altre prove.

Mi resta una perplessità: ma non è proprio possibile cambiare la dimensione della colonna centrale?
Se si potesse la rimpicciolirei in larghezza e tutto dovrebbe sistemarsi. almeno credo. ma come?

Elwood

: Re:Gestione larghezza colonne
: Elwood 08 Dec 2010, 16:22:41

Pensavo fosse questo campo

:

td.center {
width: 540px;
vertical-align:top;
height:100%;
}
per variare la larghezza della colonna centrale, ma se lo vario, riducendo la larghezza non cambia nulla. La colonna centrale resta sempre così

???

Inserisco anche il codice dell'index . php del template se vi può servire:

:

<?php 
// no direct access
defined( '_JEXEC' ) or die( 'Restricted index access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language ?>" dir="<?php echo $this->direction; ?>">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<jdoc:include type="head" />
<link href="templates/<?php echo $this->template ?>/css/template_css.css"
rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link href="templates/<?php echo $this->template ?>/css/template_ie.css"
rel="stylesheet" type="text/css" />
<![endif]-->
<link rel="shortcut icon" href="images/favicon.ico" />
</head>
  <body topmargin=0 leftmargin=0 bottommargin=0>
  <center>
 <table border="0" class="main" cellpadding=0 cellspacing=0 height="100%" valign="top">
 <tr><td valign="top" height="100%">
 <center>
 <table border="0" class="middle" cellpadding=0 cellspacing=0 height="100%">
 <tr><td class="leftshadow"></td><td class="center" valign=top>
<table border="0" height="100%" width="100%" cellpadding=0 cellspacing=0 valign="top">
<tr><td class="centerleft"></td><td height="10" valign="top"></td><td class="centerright"></td></tr>
<tr><td class="head" colspan=3 height=150>&nbsp;</td></tr>
<tr><td class="path" colspan=2>
<div id="pathway">
<jdoc:include type="modules" name="breadcrumb" />
</div>
</td><td class="date"><?php echo JHTML::_('date', 'now', JText::_('DATE_FORMAT_LC')) ?></td></tr>
<tr><td class="centerleft">
<jdoc:include type="modules" name="left" style="xhtml" /></td>
<td width="550" height="auto" valign="top" style="padding-top:10px;">
<jdoc:include type="message" />
<jdoc:include type="component" />
</td><td class="centerright">
<jdoc:include type="modules" name="user4" style="xhtml" />
<jdoc:include type="modules" name="newsflash" />
<jdoc:include type="modules" name="right" style="xhtml" /></td></tr>
<tr><td class="centerleft"></td><td height=20%>&nbsp;</td><td class="centerright"></td></tr>
<tr><td class="bottom" colspan="3"><I><b>Magma Magic Machine <img alt="Creative Commons License" align="bottom" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/2.5/it/80x15.png" /> Some Right Reserved - 2007</b></I></td></tr>
 </table>
 </td><td class="rightshadow"></td></tr> 
</table>
</center>
 </td></tr>
</table>
 </center>
</body>
</html>

: Re:Gestione larghezza colonne
: Elwood 09 Dec 2010, 23:46:50

Nada, non riesco ancora a far variare la larghezza della colonna centrale. Anche questa sera ho smanettato su css e index.php inutilmente :(
Spero ancora in un aiuto.

Grazie,
Elwood