centrare contenuto delle colonne

[Hod]

Salve a tutti!

Mi presento, mi chiamo Giuseppe, e sto scrivendo un sito utilizzando joomla come piattaforma.
Il sito è di una libreria cattolica e il problema che sto riscontrando è che non riesco a centrare all'interno delle colonne laterali il contenuto dei moduli.
Nella colonna di sinistra il guaio è meno evidente, ma nella destra è un casino.

Vi posto il codice del file template.css, il template è "joomla-freedom-template.zip", anche se una volta installato, nella sezione administrator è segnato con la sigla "themza_j15_25":

Codice: [Seleziona]

/*****************************/

/*** Core html setup stuff ***/

/*****************************/



html {

  height: 100%;

  margin-bottom: 1px;

}



form {

  display:inline;

}



body {

    margin: 0px 0px 0px 0px;

    width: 100%;

    display: table;

    background:url(../images/bg_page.png) top repeat-x #0C1A33;

}



body, td{

    font-family: "Trebuchet MS";

    font-size: 13px;

    color: #333;

    line-height: 1.3em;

}



a:link, a:visited {

    text-decoration: none;

    font-weight: normal;

}



a:hover {

    text-decoration: underline;

    font-weight: normal;

}



input.button { cursor: pointer; }



p { margin-top: 0; margin-bottom: 5px; }



img { border: 0 none; margin:0px; }



/*****************************************/

/*** Template specific layout elements ***/

/*****************************************/

#page_bg {

    padding: 0px;

    margin: 0px;

    margin-bottom: 0px;

}



div#top_menu{

    height:54px;

    margin:0px auto;

    width: 1020px;

}



#topnav{ height: 54px; width:1200px; margin: 0px; padding:0px; font-weight: bold; }

#topnav ul { margin: 0px 0px 0px 11px; padding: 0; width: auto; float: left; list-style-type:none; }

#topnav ul li{ margin: 0; padding: 0; height: 54px; float: left; position: relative; }

#topnav ul li a{ color: #FFFFFF; font-weight: bold; text-decoration: none; padding: 14px 10px 0px 10px; height:40px; display: block; float: left; }

#topnav ul li a:hover{ background-color: #444444; text-decoration: none; font-weight: bold; color: #fff; }

#topnav ul li ul ul { margin: -50px 0 0 11em; }

#topnav ul li li { width:auto; height: 35px; }

#topnav ul li li a { color: #000000; text-transform: none; display: block; background: none; width: 277px; border-top: 1px solid #DDDDDD; border-left: 0px; padding: 9px 10px 6px 10px; height:20px; }

#topnav ul li li a:hover{ background: none; background-color: #333333; left: 0; width: 277px; padding: 9px 10px 6px 10px; height:20px; border-top: 1px solid #DDDDDD; }

#topnav ul li ul { left: -999em; top: 54px; left: 0; display: block; height: 36px; width: 277px; position: absolute; z-index: 99; left: -999em; clear: left; margin-top: 0px; margin-left: 0px; }

#topnav ul li:hover ul ul, #topnav ul li:hover ul ul ul { left: -999em; }

#topnav ul li:hover ul, #topnav ul li li:hover ul, #topnav ul li li li:hover ul { left: auto; }



div#main_bg{

    margin:0px auto;

    width: 1019px;

    text-align:left;

}



div.banner1{

    background: #FFF url(../images/banner1.png) top center no-repeat;

}



div#h_area{

    margin:0px auto;

    width: 964px;

    height:280px;

    text-align:left;

    padding-left:14px;

    padding-top:10px;

}





.logo{

    display: block;

    float:left;

    padding-top:5px;

    margin-bottom:10px;

    margin-left:10px;

    width:600px;

}

a.logo,a.logo:link,a.logo:hover, a.logo:visited{

    font-size:1px;

    line-height: 60px;

    color:#2D4660;

    text-decoration:none;



    font-family:"Trebuchet MS",Arial;

}



div#user4{

    float:right;

    text-align:left;

    margin-right: 20px;

}



div#user4 div.search{

    width:220px;

    height:46px;

    text-align:left;

    padding-top: 5px;

    background: url(../images/search_bg.gif) top left no-repeat;

}

div#user4 div.search .inputbox {

    background:#FFFFFF;

    width: 150px;

    height: 16px;

    margin-left: 60px;

    font-size: 11px;

    color: #454545;

    padding:5px 2px 2px 2px;

    border: 1px solid #D3D3D3;

}



div#main_top table.contentpaneopen{

    padding:0px;

    margin-top:70px;

    margin-left:22px;

    width:410px;

    height:134px;

    overflow: auto;

    text-align:left;

    color:#FFFFFF;

    float:left;

}

div#main_top table.contentpaneopen td{

    color:#FFFFFF;

}



.search {

    text-align:left;

    width: 156px;

    height:43px;

}

.search .inputbox {

    background:#FFFFFF;

    width: 156px;

    height: 17px;

    font-size: 11px;

    color: #454545;

    margin:9px 0px 0px 20px;

    border: 1px solid #D3D3D3;

}





#leftcolumn{

    margin-left:9px;

    padding:0px;

    width:205px;

    float:left;

}

#rightcolumn{

    margin-right:9px;

    padding:0px;

    width:205px;

    float:right;

}



#maincolumn{

    width:530px;

    float:left;

    margin:0px 5px 0px 5px;

    padding:0px;

    overflow:hidden;

}

#maincolumn_middle{

    width: 740px;

    float:left;

    margin:0px 5px 0px 5px;

    padding:0px;

    overflow:hidden;

}

#maincolumn_big{

    width: 1007px;

    float:left;

    margin:0px 5px 0px 5px;

    padding:0px;

    overflow:hidden;

}



div.path{

    margin:10px 0 0 0px;

    padding: 5px;

    padding-left:30px;

    background:url(../images/breadcrumbs_bg.png) top left no-repeat;

}



div.nopad {

    float:left;

    padding:0 0px 15px 0px;

}



div.nopad ul {

    clear: both;

}

.article_separator {

    height:35px;

    line-height:35px;

}

form#form-login fieldset {

    border: none;

    margin: 0;

    margin-left:10px;

}

form#form-login ul li{

    padding: 0;

}



form#form-login ul li a {

    text-align: left;

    padding: 0px;

    font-size: 10px;

    color: #858585;

}



#leftcolumn div.module_menu, #leftcolumn div.module{

    margin: 10px 0px 0px 0px;

    padding:0px;

    width: 205px;

}

.article_column {

    padding-right:10px;

}

#rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text{

    margin: 10px 0px 0px 0px;

    padding: 0px;

    width: 205px;

}

div.bannergroup_text {

    margin:0px 13px 15px 13px;

}

.bannerheader {

    font-weight:bold;

    margin-bottom:10px;

}

.banneritem_text {

    margin-bottom:10px;

}

.bannerfooter_text {

    margin-bottom:10px;

}

#leftcolumn div.module_menu  div div div, #leftcolumn div.module div div div,

#rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text{

    background: url(../images/rub_bottom.png) center bottom no-repeat;

}

#leftcolumn div.module_menu  div div div, #leftcolumn div.module div div{

    margin: 0px;

    padding: 0px;

    padding-bottom:5px;

    width: 205px;

    height:auto;

}



#leftcolumn div.module_menu div div div div, #leftcolumn div.module div div div div{

    background: none;

    padding:4px 8px;

}

#leftcolumn h3,

#rightcolumn h3{

    text-align: left;

    padding-left:15px;

    height: 30px;

    width: 190px;

    line-height: 40px;

    color:#FFFFFF;

    font-size:13px;

    margin:0px;

   

}

table.poll thead td {

    text-align: left;

    padding-left:10px;

}

table.poll td {

    text-align: left;

}

#leftcolumn ul.menu li ul{

    list-style: none;

}

.pollstableborder {

    margin: 5px 0px 10px 0px;

}

.poll td div{

    display:inline;

}



/* forms */



#leftcolumn .moduletable ul,

#rightcolumn .moduletable ul {

    margin: 6px 0;

    padding: 0;

    list-style: none;

}



#leftcolumn .moduletable ul li,

#rightcolumn .moduletable ul li {

    margin: 0;

    padding: 0 2px;

}

.moduletable ul {

    padding:5px 10px 5px 12px;

    margin:0px;

}



.moduletable ul li {

    padding:0px 10px 5px 15px;

    margin:0px;

    line-height:18px;

}

#leftcolumn ul.menu li#current ul li,

#rightcolumn ul.menu li#current ul li {

    margin: 0px;

    padding: 0px;

}

ul.menu {

    padding:5px 10px 5px 12px;

    margin:0px;

}

ul.menu li{

    padding:0px 10px 5px 15px;

    margin:0px;

}



ul.menu li ul {

    padding:0px 0px 5px 0px;

    margin:0px;

}

ul.menu li ul li{

    padding:0px 0px 0px 15px;

    border:none;

}

ul.menu li#current ul li a{

    margin-left:15px;

    text-decoration:none;

}

ul.mostread {

    padding:5px 10px 5px 12px;

    margin:0px;

}

ul.mostread li{

    padding:0px 10px 5px 15px;

    margin:0px;

    line-height:18px;

}

ul.latestnews {

    padding:5px 10px 5px 12px;

    margin:0px;

}

ul.latestnews li{

    padding:0px 10px 5px 15px;

    margin:0px;

    line-height:18px;

}

div.componentheading{

    font-size:16px;

    font-size:19px;

    margin:7px auto;

}

td.contentheading{

    font-weight:normal;

    vertical-align:top;

    font-size:19px;

    height:30px;

    color:#363636;

    background: url(../images/contentheading_ico.png) left top no-repeat;

}

table.contentpaneopen td.contentheading{

    padding-left:34px;

}

table.contentpaneopen{

    border-collapse: collapse;

    margin-left:5px;

}

td.buttonheading{

    padding:0px 2px 0px 2px;

}

table.contentpaneopen td{

    padding:0px;

}

.contentpaneopen p{

    line-height:22px;

}

span.small, td.createdate, td.modifydate{

    font-size:11px;

    color:#999999;

}

span.pagination span, span.pagination a{

    padding:5px;

}







div#f_area{

    background: #2A2A2A url(../images/f_area_bg.png) bottom center no-repeat;

    margin:0px auto;

    width: 978px;

    text-align:left;

    margin-bottom:3px;

}

#f_area div.moduletable, #f_area div.moduletable_menu{

    float: left;

    margin:10px 4px 10px 6px;

    width: 234px;

}

#f_area h3{

    text-align: left;

    vertical-align:bottom;

    height: 30px;

    width: 180px;

    color:#FFFFFF;

    font-size:19px;   

    font-family:"Trebuchet MS", Tahoma, Verdana;

    font-weight:normal;

    margin:0px;

    padding-left: 54px;

    padding-top:20px;

}



/* System Standard Messages */

#system-message { margin-bottom: 20px; }



#system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;}



/* System Error Messages */

#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}



/* System Notice Messages */

#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}



#syndicate{

    float:left;

    padding-left: 25px;

}
il sito è fedeecultura.com, vi sarei eternamente grato se poteste darmi una mano.
Grazie

[Hod]

rimango in speranzosa attesa   

[kiuz]

... provato ad aggiungere l'attributo "text-align:center;" al blocco di dichiarazioni CSS che ti interessa?

[Hod]

si, ma purtroppo con le scarse competenze tecniche che mi ritrovo, non riesco ad inserire il comando nel div, e quindi all'altezza giusta del foglio css allegato nel primo intervento, che definisce i contenuti dei moduli delle due colonne. 

ps. comunque grazie per la risposta.

[bigham]

Ciao Hod.

Vediamo se così funziona: nel file index.php del template trova il tag

Codice: [Seleziona]

<div id="rightcolumn">
dovrebbe essere a riga 53 ed aggiungi align="center" così

Codice: [Seleziona]

<div id="rightcolumn" align="center">
Ti consiglio di usare Firebug (l'addon per Firefox) per analizzare il codice html della pagina e le classi del foglio di stile.
Firebug permette di effettuare modifiche "al volo" sia al codice che al foglio di stile per vederne subito l'effetto.

Inutile dirlo senza le basi di html e fogli di stile (e un pò di php) non si va molto lontano

[Hod]

Grazie ragazzi, e soprattutto grazie bigham... avete risolto la questua.

Non conoscevo il "mondo" di firebug, infatti prima per ogni modifica al css ci impiegavo ANNI!
Purtroppo hai ragione tu bigham, non ho fortissime competenze nel html php css, (studio ingegneria meccanica non informatica  ) ma con l'aiuto dei software wysiwyg un pò me la barcameno.
Quindi non essendo padrone della materia, mi capita che mi impantano senza risolvere granchè.

Utilizzando però firebug, ho notato un altro errore!

Un pò anche insospettito dalla linea fuori tabella generata dal carrello, mi sono reso conto che la dimensione dei moduli generati nella colonna di destra è superiore a quella della colonna di fondo, (che è 205, mentre i div generati sono circa di 213~217 pixel);

Questo dipende perchè nel foglio del css alla riga 543 viene dato un "padding:4px 8px;" riportandolo a "padding:4px 1px;" il tutto si aggiusta (da quanto ho capito quel singolo pixel andrebbe portato a 0 per avere un corretto allineamento con il fondo), ma poi, all'interno della colonnna i moduli si "azzeccano" al margine sinistro... e questo è bruttissimo!
Come posso fare per distanziarli un pò?

ps. Grazie ancora!

[Hod]

allora, vedete se la procedura è corretta

eliminando il padding incriminato, ho provveduto a creare con firebug un div contenitore con i margini da me impostati per quadrare il tutto.
dopo di che, entrando nella gestione del modulo, ho caricato il div contenitore all'inizio e alla fine del codice creando la spaziatura che mi interessava.

Fatto bene i compiti per casa? 

ps. cosa significa la scritta, "suffisso css" e come si modifica e crea una classe css?
ho letto un pò la guida:
http://www.joomla.it/articoli-della-community/4277-moduli-style-classe-e-suffisso-css.html
ma non è che ci abbia capito più di tanto... 
c'è qualche altra fonte scritta in maniera un pò più lineare?

[bigham]

Allora la frase "Cerca, trova, impara... e supera" non è solo per dire! 

Vedo che Firebug ti è tornato utile  Comunque anche le guide su css.html.it sono da leggere

Il suffisso css serve per poter utilizzare una diversa classe del fogli di stile per formattare un modulo.
I moduli di Joomla sono formattati tutti con la stessa classe (es. module). E se io volessi dare un'aspetto diverso ad un solo modulo?
Semplice, faccio un copia e incolla della classe "module" e la rinomino in "module_mio" modificandone gli attributi a mio piacimento (sfondo, bordi, padding, ecc.). Poi vado nelle proprietà del modulo a cui voglio dare un aspetto diverso e aggiungo il valore "_mio" nella casella "Suffisso classe CSS modulo". E il gioco è fatto.

In molti template viene usata questa tecnica per differenziare l'aspetto dei moduli come ad esempio in questo template dove usando i suffissi S1, S2 e S3 si da un aspetto diverso ai singoli moduli (è scritto al centro della pagina).

Ciao! 

Se si, rileggiti l'articolo e forse lo troverai