Back to top

Autore Topic: Centrare moduli nelle colonne left e right  (Letto 4346 volte)

Offline graz

  • Esploratore
  • **
  • Post: 162
  • Sesso: Maschio
    • Mostra profilo
Centrare moduli nelle colonne left e right
« il: 17 Gen 2007, 13:35:21 »
Ciao a tutti, sò che probabilmente la domanda è banale e old, ma non riesco proprio a centrare i moduli nelle colonne left e right del mio template, ho fatto varie prove via css ma senza risultati, qualcuno mi può aiutare pls? posto il codice del file css :
Codice: [Seleziona]
body {
background-color: #252f36;
margin:0px;
padding:0px;
background-image:url(../images/main_43.jpg);
background-position:center;
background-repeat:repeat-y;
font-family: Arial, Helvetica, sans-serif;
color:#333333;
font-size:71.1%;
}


.main {
width:971px;
margin:0px auto;
text-align:left;
}

.header {
width:971px;
height:142px;
background-image:url(../images/main_02.jpg);
background-repeat:no-repeat;
background-position:bottom;
float:left;
text-align:right;
}

.topmenu {
width:971px;
background-color:#000000;
background-image:url(../images/main_05.jpg);
background-repeat:repeat-x;
float:left;
border-bottom:2px solid #42a009;
border-top:1px solid #333333;
padding:4px 0px 0px 0px;
}


.topcontent{
width:971px;
background-image:url(../images/main_28.jpg);
background-repeat:repeat-x;
background-color:#d8dddf;
float:left;
border-top:1px solid #ffffff;
}

.headerbanner {
width:468px;
height:60px;
float:right;
padding: 40px 18px 0px 0px;
}
.headerbannersep {
float:left;
width:480px;
height:120px;
}

.bottomcontent{
width:971px;
background-image:url(../images/main_34.jpg);
background-repeat:repeat-x;
background-color:#d8dddf;
float:left;
}

.topcontentleft {
width:560px;
float:left;
padding:10px;
}

.topcontentleft2 {
width:950px;
float:left;
padding:10px;
}

.topcontentright {
width:320px;
background-image:url(../images/main_15.jpg);
background-repeat:repeat-x;
background-color:#42a009;
border:1px solid #42a009;
margin:10px;
float:right;
padding:7px;
color:#ffffff;
}


.topcontentright a:link, a:visited {
color:#ffffff;
text-decoration:underline;
}

.topcontentright a:hover {
color:#000000;
}

.topcontentright li  {
color:#ffffff;
}

.orangebox {
background-image:url(../images/main_15.jpg);
background-repeat:repeat-x;
background-color:#42a009;
border:1px solid #42a009;
padding:7px;
color:#ffffff;
margin:10px 0px 10px 0px;
}

.orangebox a:link, a:visited {
color:#ffffff;
text-decoration:underline;
}

.orangebox a:hover {
color:#000000;
}

.orangebox li  {
color:#ffffff;
}

.greybox {
background-image:url(../images/main_28.jpg);
background-repeat:repeat-x;
background-color:#D8DCDF;
border:1px solid #D8DCDF;
padding:7px;
margin:10px 0px 10px 0px;
}

.topcontentshadow{
width:963px;
height:32px;
background-image:url(../images/main_18.jpg);
background-repeat:repeat-x;
float:left;
border-top:1px solid #cccccc;
padding:0px 0px 0px 8px;
}

.maincontent {
width:971px;
background-color:#FFFFFF;
float:left;
border-bottom:1px solid #cccccc;
padding:0px 0px 10px 0px;
}

.footer {
width:951px;
height:58px;
background-image:url(../images/main_41.jpg);
background-repeat:repeat-x;
float:left;
border-top:2px solid #42a009;
text-align:center;
padding:10px;
}

.left {
width:210px;
float:left;
padding:0px 0px 0px 6px;
}

.leftright {
height:500px;
width:25px;
background-image:url(../images/main_24.jpg);
background-repeat:no-repeat;
background-position:right top;
float:left;
}

.right {
width:210px;
float:right;
padding:0px 12px 0px 0px;
}

.middle {
float:left;
width:490px;
}

.middle2 {
float:left;
width:710px;
}
/*link styles*/
a:link, a:visited {
color:#42a009;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}


.small {
color:#999999;
font-size:0.9em;
}




/* Below are  default settings are used when no other style has been defined.*/
p {

font-family:Arial, Helvetica, sans-serif;
font-size:1.0em;
} /*formatting all <div> (division) items.  This is a catch-all that only applies when no other style has been defined.*/
td {
font-family:Arial, Helvetica, sans-serif;
font-size:1.0em;

} /*formatting all
<td> items. This default setting is used when no other style has been defined.*/
tr {

font-family:Arial, Helvetica, sans-serif;
font-size:1.0em;
} /*formatting all
<tr> items.  This default setting is used when no other style has been defined.*/
ul {

font-family:Arial, Helvetica, sans-serif;
font-size:1.0em;
} /*formatting all UL (unordered list) items. This default setting is used when no other style has been defined.*/
li {
list-style:none;
text-align:left;
}
hr {} /* horizontal line in your template*/
hr.separator {}
 
/* FORMS SETTINGS */
.button {
  color            : #666666;
  border           : 1px solid #999999;
  background-color : #ffffff;
  margin-top       : 0px;
  font-family      : arial, helvetica, sans-serif;
  font-size        : 9px;

}
.inputbox {
font-size: 9px;
font-family: verdana, helvetica, sans-serif;
text-align: left;
color: #666666;
background-image:url(../images/back_main.jpg);
border: 1px solid #999999;
text-align:left;

}
.text_area{
width:80px;

}
.search {} /*formatting the <div> which holds search items: inputbox, search button...*/
 
 
/* NAVIGATION/MENU SETTINGS */
.mainlevel td{
 padding:0px 0px 0px 0px;
 }
 
a.mainlevel{
width:90%;
} /* this styling is for the MAIN items in the menu */
a.mainlevel:link, a.mainlevel:visited {
color:#999999;
display:block;
padding:10px;
background-image:url(../images/main_34.jpg);
background-position:center;
background-repeat:repeat-x;
text-transform:uppercase;
border-bottom:1px solid #cccccc;
border-top:1px solid #eaeaea;
}

a.mainlevel:hover, #active_menu {
color:#ffffff;
background-image:url(../images/main_15.jpg);
background-position:center;
background-repeat:repeat-x;
text-decoration:none;
border-bottom:1px solid #42a009;
border-top:1px solid #ffffff;
}

 
ul#mainlevel-nav {
list-style: none;
padding: 0px;
margin: 0px;
float: left;
text-align:center;
text-decoration:none;
}

ul#mainlevel-nav li{
padding: 0px;
float: left;
margin: 0px;
white-space: nowrap;
text-decoration:none;

}

ul#mainlevel-nav li a{
padding:8px 26px 8px 26px;
height:30px;
line-height:30px;
color:#ffffff;
margin:8px 8px 0px 8px;
background-image:url(../images/main_10.jpg);
background-repeat:repeat-x;
background-color:#2a2a2a;
}

ul#mainlevel-nav li a:hover, ul#mainlevel-nav li a#active_menu-nav{
background-image:url(../images/main_15.jpg);
background-position:center;
background-repeat:repeat-x;
text-decoration:none;
}


a.sublevel{
width:90%;
margin-left:8px;

} /* this styling is for menu items that HAS A PARENT */
a.sublevel:link, a.sublevel:visited {
color:#999999;
display:block;
font-size:0.9em;
padding:6px;
background-image:url(../images/main_34.jpg);
background-position:center;
background-repeat:repeat-x;
border-bottom:1px solid #cccccc;
border-top:1px solid #eaeaea;
}

a.sublevel:hover {
color:#ffffff;
background-image:url(../images/main_15.jpg);
background-position:center;
background-repeat:repeat-x;
text-decoration:none;
border-bottom:1px solid #42a009;
border-top:1px solid #ffffff;
}
 
.pagenavbar {} /*Sets the style for the footer navigation ("<< Start < Prev Next > End >>")
when they do not appear as hyperlinks (when only a few articles exist).*/
.pagenavbar:link {} /*Style for the footer navigation ("<< Start < Prev Next > End >>") when
they become hyper links*/
.pagenavbar:visited {}
 
.pagenav {} /* as the name implies, this is for formatting texts for those "<< Start < Previous 1 Next > End >>" links */
a.pagenav:visited {

}
a.pagenav:hover {

}
 
a.readon:link {
font-size:1.0em;

} /*Style for the "Read More" link that is displayed for large content items*/
a.readon:hover {
font-size:1.0em;

}
a.readon:visited {
font-size:1.0em;

}
 
.back_button {} /*Style for the "BACK" button*/
.pagenav_prev {
font-size:1.0em;
} /*Style for the PRE button*/
.pagenav_next {font-size:1.0em;} /*Style for the NEXT button*/
 
.latestnews ul {} /*Style for latest news list - by default, latest news is user1 module*/
.latestnews li {}
 
.mostread ul{} /*Style for most popular list - by default, most popular is user2 module*/
.mostread li{}
 
/* CONTENT PAGE SETTINGS */
a.category:link {

}
a.category:hover {

}
a.category:visited {

}
 
.blogsection {} /* Formatting the links in Blog section */
.blog_more {} /*The "More" text in blog section*/
a.blogsection:link {

} /* set the link format */
a.blogsection:visited {

} /* same as above, but to set the visited link format */
a.blogsection:hover {

} /* same as above, but for links with mouse pointer over it */
 
.componentheading {
font-size:1.5em;
font-weight:bold;
text-transform:uppercase;
border-bottom:1px solid #42a009;
display:block;
background-image:url(../images/main_20.jpg);
background-repeat:no-repeat;
padding:0px 0px 0px 0px;
text-indent:20px;
margin:5px 0px 5px 0px;
}
td.componentheading {

}
/* Title of the component being used to display the content.*/
table.contentpaneopen {
width:100%;
}

table.contentpaneopen td {
padding:0px;
}

table.contentpane {
width:100%;
margin: 0px;
padding: 0px;
}
.contentheading {
font-size:1.5em;
font-weight:bold;
text-transform:uppercase;
border-bottom:1px solid #42a009;
background-image:url(../images/main_27.jpg);
background-repeat:no-repeat;
padding:0px 0px 0px 0px;
text-indent:20px;
margin:5px 0px 5px 0px;
}

.contentheading td {
background-image:none;
background-repeat:no-repeat;
padding:0px 0px 0px 0px;
text-indent:20px;
margin:5px 0px 5px 0px;
}

 /* Title of the content, article, etc. being displayed.*/
.contentpane {background-color:#ffffff;
background-image:none;
text-align:left;
} /* Table that holds all non-article information (components, category lists, contact forms, etc).*/
.contentpaneopen {
background-image:none;
text-align:left;
} /* Table that holds the actual text for an article.*/
.contentpagetitle {
} /*Title of articles*/
 
a.contentpagetitle:hover {
} /*Title of articles when appeare as links */
a.contentpagetitle:link {
}
a.contentpagetitle:visited {
}

.contentdescription {} /* Formating the "DESCRIPTION" of sections, categories (News/Weblinks/Latest news...) */
table.contenttoc {
padding:4px;
margin:4px;
border:1px solid #dadada;
} /* Formating the table of the Tables of Contents for multiple pages content or article */
table.contenttoc td {padding:4px;
margin:4px;
} /* same as above, used to format the td and able cells */
table.contenttoc th {font-size:1.2em;} /* same as above, used to format the th of "Tables of Content" ( normally Article Index)*/
table.contenttoc td.toclink {} /* same as above, used to format toc link texts*/
a.toclink:link {} /* same as above, used to format toc link text status*/
a.toclink:visited {}
a.toclink:hover {}
 
 
/* JOOMLA - MAMBO SECTIONS LISTINGS */
.sectiontableheader {} /* This is for styling the section table headers on a SECTION's page.
  Example: table header of "Date", "Item Title", "Author" and "Hits"? */
.sectiontableentry1 {
text-align:left;
padding:4px;
}
.sectiontableentry2 {
text-align:left;
padding:4px;
background-color:#c2c2c2;
}
 
 
/* JOOMLA - MAMBO MODULES FORMATTING */
table.moduletable {
width:100%;
text-align:left;

} /* Formatting the module table */
table.moduletable th {
font-size:1.3em;
font-weight:bold;
text-transform:uppercase;
border-bottom:1px solid #42a009;
width:100%;
display:block;
margin:5px 0px 5px 0px;
}



 /* Formatting the module header, and the module titles */
table.moduletable td {
padding:3px 0px 0px 0px;
} /* Formatting the table cells of the module table */
 
.pathway {
text-decoration:none;
color:#666666;
}

.pathway a:link {
text-decoration:none;

}
.pathway a:visited {
text-decoration:none;

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

}
.buttonheading a:link {
text-decoration:none;
}
.buttonheading a:visited {
text-decoration:none;
}
.buttonheading a:hover {
text-decoration:none;
}

/* MISCELLANEOUS */
 
/* Dates , Authors*/
.createdate {
font-size:0.9em;
} /* For styling the date the content/articles are created under contents title */
.modifydate {
font-size:0.9em;
} /* Formating "Last updated on" text at the end of articles/contents */
.small {
font-size:0.9em

} /* Formating "Written by:...." text */
.smalldark {
color:#333333;
font-size:1.0em
}/*Found in poll result page, for " Number of Voters".. text */
 
/* Polls */
.poll {} /* format the td of poll table */
.pollstableborder {} /* set the border properties of the polls voting table */
 
 
/* Weblinks */
.weblinks{} /* well.. to format the link's titles under the "Weblinks"
  section on the frontend */
a.weblinks:hover {
text-decoration:none;
} /* same as above, but for link with mouseover */
 
/* Newsfeeds */
.newsfeedheading {} /* The newsfeed title. NOTE: This will not affect the newsfeed's news title! */
.newsfeeddate {} /* yeah.. the date on the newsfeed */
.fase4rdf {} /* this is the body text of the newsfeed */
 
/* Search page */
table.searchintro {} /* This is for formatting the box with "Search Keyword: test returned 4 matches" box
  that appears after you have entered a search value. It appears on the mainbody
  with the search results */
 
 
/* JOOMLA - MAMBO TABBED FRONTEND ADMIN INTERFACE */
/* The CSS below efines how the frontend admin interface when logged in */
 
.ontab {width:98% !important;
background-color:#FFFFFF;
text-align:left;
}/* For styling of the "Tab" buttons when editing contents through the frontend as admin.
This .ontab is the styling for the tab when it is active or after its "clicked" */
.offtab {width:98% !important;
background-color:#FFFFFF;
text-align:left;
} /* Same as above, used for styling of the "Tab" buttons when editing contents through the frontend.
This the styling for the tab when it is NOT active or when it is NOT "clicked" */
.tabpadding {width:98% !important;
background-color:#FFFFFF;
text-align:left;
} /* this style is used set the size of the tab in the above */
.tabheading {width:98% !important;
background-color:#FFFFFF;
text-align:left;
} /* Not too sure what this is used for. Couldn't find anything related to it yet at the moment */
.pagetext {width:98% !important;
background-color:#FFFFFF;
text-align:left;
} /* this style is used to style the content of the editing form contents
(where HTMLArea sits and all its forms + contents) in the frontend Administration interface */
#introtext {width:98% !important;
background-color:#FFFFFF;
background-image:none !important;
text-align:left;}
#fulltext {width:98% !important;
background-color:#FFFFFF;
text-align:left;
background-image:none !important;
}
.introtext {width:98% !important;
background-color:#FFFFFF;
background-image:none !important;
text-align:left;}
.fulltext {width:98% !important;
background-color:#FFFFFF;
text-align:left;
background-image:none !important;
}
table#toolbar a.toolbar {
color : #808080;
text-decoration : none;
display: block;
border: 1px solid #DDD;
width: 40px;
padding: 2px !important;
}
table#toolbar a.toolbar:hover {
color : #C64934;
border: 1px solid #c24733;
background-color: #f1e8e6;
padding: 2px !important;}

.tab-page{
width:98% !important;
background-color:#FFFFFF;
text-align:left;
background-image:none !important;
}

.mceContentBody{background-color:#ffffff;
background-image:none;
text-align:left;
}

/*Joomla 1.5 Beta classes*/
.mainmenu ul{
width:100%;
padding:0px;
margin:0px;
}

.mainmenu ul li a:link, .mainmenu ul li a:visited {
color:#999999;
padding:10px;
background-image:url(../images/main_34.jpg);
background-position:center;
background-repeat:repeat-x;
text-transform:uppercase;
border-bottom:1px solid #cccccc;
border-top:1px solid #eaeaea;
display:block;
width:100%;
margin:1px 0px 1px 0px;
}

.mainmenu ul li a:hover, .mainmenu ul li a:active{
color:#ffffff;
background-image:url(../images/main_15.jpg);
background-position:center;
background-repeat:repeat-x;
text-decoration:none;
border-bottom:1px solid #42a009;
border-top:1px solid #ffffff;
}


/* this styling is for the MAIN items in the menu */

.moduletable_menu {
width:100%;
text-align:left;
}

.moduletable_menu th {
font-size:1.3em;
font-weight:bold;
text-transform:uppercase;
border-bottom:1px solid #42a009;
width:100%;
display:block;
margin:5px 0px 5px 0px;
}

Grazie 1000 in anticipo !!  :)

Offline 3mentina

  • Esploratore
  • **
  • Post: 120
    • Mostra profilo
Re: Centrare moduli nelle colonne left e right
« Risposta #1 il: 17 Gen 2007, 14:17:30 »
inserisci

margin: 0px auto;
text-align: center;

Offline joomlapixel

  • Abituale
  • ****
  • Post: 1555
    • Mostra profilo
Re: Centrare moduli nelle colonne left e right
« Risposta #2 il: 17 Gen 2007, 22:57:00 »
inserisci

margin: 0px auto;
text-align: center;

riga 532
table.moduletable {
width:100%;
text-align:left;

non dovrebbe servire quel trucchetto per la centratura in questo caso poichè viene usato solitamente sul div "padre" del blocco da centrare.
dovrebbe bastare convertire il left in center
fd

Offline 3mentina

  • Esploratore
  • **
  • Post: 120
    • Mostra profilo
Re: Centrare moduli nelle colonne left e right
« Risposta #3 il: 18 Gen 2007, 16:09:28 »
Risposta di default, mica mi sono letto tutto il codice!  ;)

Offline joomlapixel

  • Abituale
  • ****
  • Post: 1555
    • Mostra profilo
Re: Centrare moduli nelle colonne left e right
« Risposta #4 il: 18 Gen 2007, 18:08:35 »
Risposta di default, mica mi sono letto tutto il codice!  ;)
ah se è per questo neanche io,ho solo cercato la classe moduletable.................

Offline graz

  • Esploratore
  • **
  • Post: 162
  • Sesso: Maschio
    • Mostra profilo
Re: Centrare moduli nelle colonne left e right
« Risposta #5 il: 18 Gen 2007, 22:17:04 »
eccomi, scusate il ritardo, grazie ad entrambi, adesso provo immediatamente  :)

Offline graz

  • Esploratore
  • **
  • Post: 162
  • Sesso: Maschio
    • Mostra profilo
Re: Centrare moduli nelle colonne left e right
« Risposta #6 il: 18 Gen 2007, 22:32:41 »
Niente, il mio problema non sembra legato a questo, in pratica mi si sposta tutto tranne il modulo di artbanner che contiene appunto un bannerino, questo mi si allinea cmq tutto a sinistra, allego due immagini per farvi capire la situazione prima e dopo la modifica.
Grazie 1000  :)

[allegato eliminato da un amministratore]

Offline joomlapixel

  • Abituale
  • ****
  • Post: 1555
    • Mostra profilo
Re: Centrare moduli nelle colonne left e right
« Risposta #7 il: 18 Gen 2007, 22:56:47 »
E questo dimostra che le modifica funziona perfettamente,il banner non viene centrato probabilmente perchè ha impostazioni proprie... io non l'ho mai usato e quindi mi fermo qui.
E' legato a quello specifico modulo.
fd

Offline graz

  • Esploratore
  • **
  • Post: 162
  • Sesso: Maschio
    • Mostra profilo
Re: Centrare moduli nelle colonne left e right
« Risposta #8 il: 18 Gen 2007, 23:31:36 »
ah perfetto, allora vedo di lavorare sul banner.
Grazie 1000 ancora  :)

Offline 3mentina

  • Esploratore
  • **
  • Post: 120
    • Mostra profilo
Re: Centrare moduli nelle colonne left e right
« Risposta #9 il: 19 Gen 2007, 08:34:33 »
Usa firebug di firefox per scoprire cosa modificare.

 



Web Design Bolzano Kreatif