CSS - Cant Make A Menu Centered (joomla)

Have a look at the menu at the top of this page. While it does use some CSS, it doesn't appear to use it for spacing. (In point of fact, this page uses tables quite a bit, though not for that menu).

Anyway, if I want to create a top menu (rather than a side menu, perhaps), then how do I evenly space the menu choices across the div (area) that I create for it? Something like:

Home Directions Photos Login FAQs About Us

but nice and even-spaced across the area designated for it. Naturally, I could do the math and use {position:absolute; left:16%} for each item, but this is a bad substitution for a quick, effective, and not so dirty table. Is there a way to set something up once in CSS that applies to all words or <a>'s or something, within a <div>?

Thanks.

Ok, I have a website that i'm building with about 25 pages, and I keep on having to change the side navigation bar, and then I have to copy and paste it on each page to update it. IS THERE A WAY FOR ME TO ONLY UPDATE IT ONCE AND IT UPDATES TO ALL THE PAGES?

Is the answer css? or i-frames(or whatever it's called)

If so, then how would I do this?! PLEASE HELP!

I'm struggling with css on my joomla site. I'm trying to develop a dropdown that can have two levels to it. I've got something working with the following css but I have no idea what to change to line the menus up.
Code:

/* =======================================
Top Menu aka Main Menu
======================================= */
.moduletable_topmenu{
   padding:0;
   color: #333;
   height: 30px;
   margin: 0;
   width: 500px;
   font-size: 90%
}

.moduletable_topmenu h3 {
   background:#666;
   color:#fff;
   padding:0.25em 0;
   text-align:center;
   font-size:1.1em;
   margin:0;
}

.moduletable_topmenu ul{
   list-style: none;
   margin: 0;
   padding: 0;
}

.moduletable_topmenu li{
   margin: 0px 15px 0px 0px;
   float: left;
}
.moduletable_topmenu li ul {
   position: absolute;
   width: 135px;
   left: -999em;
   border: 1px solid #474748;
   border-bottom: none;
   top: 22px;
}
.moduletable_topmenu li:hover ul {
   left: auto;
}
.moduletable_topmenu li ul li {
   width: 135px;
   padding: 0;
   border-bottom: 1px solid #474748;
}

.moduletable_topmenu li a{
   display: block;
   padding: 5px;
   background-color:#fff;
   color: #000;
   font-weight: bold;
   text-decoration: none;
}
html>body .moduletable_topmenu li a {
   width: auto;
}

.moduletable_topmenu li ul li a {
   width: 125px;
   background-color: #221f20;
   color: #fff;
   /* --- 
   filter:alpha(opacity=80); 
   -moz-opacity: 0.8; 
   opacity: 0.8;*/
}


.moduletable_topmenu li a:hover,a#active_menu:link,a#active_menu:visited{
   color: #e22f00;
   text-decoration: none;
   /* --- 
   filter:alpha(opacity=100); 
   -moz-opacity: 1.0; 
   opacity: 1.0;*/
}

.moduletable_topmenu li ul li a:hover {
   background-color: #e22f00;
   color: #fff;
   background: url(../images/top_link_bg2_on.png) repeat-y top left;
}

.moduletable_topmenu li:hover ul, .moduletable_topmenu li.sfhover ul {
   left: auto;
}


.moduletable_topmenu ul li.active a {
   color: #038fd9;
   text-decoration: none;
}
.moduletable_topmenu li.parent.active a {
   color: #038fd9;
   text-decoration: none;
}
.moduletable_topmenu li.parent.active a:hover {
   color: #e22f00;   
}

.moduletable_topmenu li.parent.active ul li a {
   color: #fff;
   text-decoration: none;
}
.moduletable_topmenu li.parent.active ul li a:hover {
   color: #fff;
   text-decoration: none;
}

I am currently using IE 7 and my test site is located at http://vcob.org/2008test if you want to see the menu in action go to that site and mouse over the "About Joomla" link in the menu across the top of the page. You should notice how the sub-menus stack on top of each other and I can't get them to line up. Any help would be so appreciated as I need to get this to work and I can't seem to get anyone at Joomla to help me, thanks in advance.

Hi,

just to explain I know absolutely nothing about css. I can barely manage to change fonts, so please be gentle with me. I am quite capable of following straight forward instructions though so if you can help it would be much appreciated. I have a website (URL address blocked: PM me to get URL)/joomla that I'm playing with. The submenu's are where I have an issue - they appear exactly as I want when a menu item is selected (indented and normal font weight) however when a sub menu item is selected the indent dissappears and it treats it like a main menu item. Below is the code where I think the issue is.
I've been googling like mad to see if anyone else has the same problem with this particular template but no joy. On a seperate note if there are any joomla template experts out there I would be happy to pay a reasonable fee to make some other modifications (basically the padding and position of the main column is all over the place dependent on the content that is displayed). I'd also like to upgrade this to joomla 1.6 at some stage. Enquired with a couple of "professional" Joomla developers and recieved no reply. I assume my requirements are too small for them to consider, and that they are just too rude to reply to say so.

/*LEFT COL LINK*/
#leftcolumn ul.menu li a, #leftcolumn ul.menu li a:link,
#rightcolumn ul.menu li a, #rightcolumn ul.menu li a:link {
line-height: 18px;
padding: 0 0 0 8px;
text-decoration: none;
font-size: 11px;
background: url(../images/menu_row.jpg) center left no-repeat;
margin: 0;
height: 18px;
color: #666666;
font-weight: bold;
}

#leftcolumn ul.menu li a:hover, #rightcolumn ul.menu li a:hover {
color: #4CAFC6;
text-decoration: none;
}

/*LEFT COL CURRENT LINK*/
#leftcolumn ul.menu li#current a, #leftcolumn ul.menu li#current a:link,
#rightcolumn ul.menu li#current a, #rightcolumn ul.menu li#current a:link {
line-height: 18px;
padding: 0 0 0 8px;
text-decoration: none;
color: #666666;
font-weight: bold;
font-size: 11px;
background: url(../images/menu_row.jpg) center left no-repeat;
margin: 0;
height: 18px;
}

#leftcolumn ul.menu li#current a:hover, #rightcolumn ul.menu li#current a:hover {
color: #4CAFC6;
text-decoration: none;
}

/*LEFT COL SUB LINK*/
#leftcolumn ul.menu li#current ul li a, #leftcolumn ul.menu li#current ul li a:link {
text-decoration: none;
color: #666;
margin: 0 0 0 6px;
font-size: 11px;
background: url(../images/submenu_row.jpg) center left no-repeat;
font-weight: normal;
display: block;
line-height: 18px;
padding: 0 0 0 18px;
border: none;
height: 18px;
}

#leftcolumn ul.menu li ul li#current a, #leftcolumn ul.menu li ul li#current a:link, #leftcolumn ul.menu li ul li#current a:visited, #leftcolumn ul.menu li ul li#current a:hover {
font-size: 11px;
margin: 0 0 0 6px;
padding: 0 0 0 18px;
text-decoration: none;
border: none;
color: #333;
background: url(../images/submenu_row.jpg) center left no-repeat;
height: 18px;
line-height: 18px;
}
/*SUBMENU POSITION*/
#leftcolumn ul.menu li#current ul {
margin: 0;
padding: 0;
}

#leftcolumn ul.menu li#current ul li {
margin: 0;
padding: 0;
}

/*CURRENT SUBMENU POSITION*/
#leftcolumn ul.menu li ul {
margin: 0;
padding: 0;
}

#leftcolumn ul.menu li#current ul li a:hover {
color: #333;
}

#leftcolumn ul.menu li ul, #rightcolumn ul.menu li ul {
list-style: none;
}

I'm trying to do custom active buttons in a Joomla horizontal menu. But they don't align correctly with the text. I assume it's because the pseudo element with the button is an absolute inside a relative positioned section. The only way I can move it is to fiddle with padding on the relative section. But that fixes some buttons and messes up others.
I've tried a lot of other things but they move the whole element and not just that background image.


Does anyone know a way to do this?

Here's the code:

Code:

ul.frc-hmenu>li>a
{
   position: absolute;
   display: block;
   height: 23px;
   cursor: pointer;
   text-decoration: none;
   color: #4A4A4A;
   padding:3px 12px;
   line-height: 23px;
   text-align: center;
}
/*change from absolute positioning*/
ul.frc-hmenu>li>a:before, ul.frc-hmenu>li>a:after
{
   position: absolute;
   display: block;
   content:' ';
   top: 0;
   bottom:0;
   z-index: -1;
   overflow: visible;
  background-image: url('../images/menuitem.png');


}

I am using a modified Joomla template for this site - (birminghamfiberguild . org) I need to simply nudge over the menus and the middle content to avoid the couple of pixel overhang going on, on the right. I have looked at it using Firebug and nothing I do seems to do the trick.

I'm doing this site for free for my non-profit org. I'd be appreciative of any help.

I dunno if this is the right spot but I am stuck. Here is my issue

http://fifafanatics.com/league/index.php?option=com_joomleague&func=showRanking&p=1

is my site. as you can see the theme the content in the right is too close to the left. I want to "center". If you click on the forum you will see the real issue. I need that forum to stretch out. I feel like these are stuck in a container but I don't even know where to look. Let me post some code. this is the .css file. theres a html file as well if needed I can post that.

Code:

body {
	overflow-x : hidden;
	overflow: -moz-scrollbars-vertical;	
}
.body {
	color: #000000;
	margin: 0 0 0 0;
	padding: 0px;
	font-size: 11px;
	font-family: "Trebuchet MS";
	background: #575757;	
}

.all {
	width:970px;
	margin:0 auto;
	padding:0;
	background: url(../images/bg_page.gif) repeat-y;
}


#logo {
	background: transparent url(../images/bg.jpg) no-repeat top center;
	margin:0 auto;
	width: 100%;
	padding:0;
	height:119px;
	text-align:left;
	vertical-align:middle;
}
#logo a {
	margin:20px 0 0 75px;
	line-height:80px;
	font-family:"Trebuchet MS";
	font-size:23px;
	color:#FFFFFF;
}
.topmaincol {
	width:100%;
	height:30px;
}
/* --- nav --- */
.div {
}
#menu{
	position:relative;
	height:58px;
	color:#E0E0E0;
	background: url(../images/topmenu_bg.jpg) repeat-x;
	width:966px;
	font-size:13px;
}

#menu .menuc {
	margin: 0px auto;
	width: 966px;
	font-family:"Trebuchet MS";
	
}

#topnavi{
	position:relative;
	height:58px;
	font-size:12px;
	font-weight: normal;
	font-family:"Trebuchet MS";
	background: url(../images/topmenu_bg.jpg) repeat-x top left;
	padding:0 0 0 5px;
}

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

#topnavi ul li{
	display:block;
	float:left;
	margin:0 1px;
}

#topnavi ul li a{
	
	display:block;
	float:left;
	color: #FFFFFF;
	text-decoration:none;
	padding:0 0 0 11px;
	height:52px;		
}

#topnavi ul li a span{
	font-size:12px;
	padding:17px 11px 0 0;
	height:52px;
	float:left;
}

#topnavi ul li a:hover{
	font-size:12px;
	color: #000000;
}

#topnavi ul li a:hover span{
	font-size:12px;
	display:block;
	width:auto;
	cursor:pointer;
}

#topnavi ul li a.current,#topnavi ul li a.current:hover{
	color: #FFFFFF;
	background: url(../images/topmenu_left.jpg) no-repeat top left;
	line-height:350%;
}

#topnavi ul li a.current span{
	display:block;
	padding:0 10px 0 0;
	width:auto;
	background: url(../images/topmenu_right.jpg) no-repeat top right;
	height:52px;
}
/* --- end nav --- */

/* /////////////////////////////////////////////////////////////////////////// */
form {display:inline;}
hr {
  color            : #999999;
  height           : 1px;
  width            : 100%;
}
.back_button {
  color            : #999999;
  font-family      :"Trebuchet MS", Arial, Verdana,  Helvetica, sans-serif;
  font-size        : 11px;
  font-weight      : normal;
  padding-bottom   : 3px;
  margin-right     : 4px;
  float            : right;
  line-height      : 20px;
}
.button {
  font-size        : 11px;
  color            : #333333;
  border           : 1px solid #999999;
  margin           : 3px;
  background-color : #EDEDED;
  padding          : 1px;
  cursor           : pointer;
}

.inputbox {
 color        : #000000;
 background   : #ffffff;
 border       : 1px solid #cccccc;
 margin       : 3px;

}

table,td,div {
  color            : #000000;
  font-family      :"Trebuchet MS", Arial, Verdana,  Helvetica, sans-serif;
  font-size        : 11px;
  margin:0;
}

p {
  color            : #000000;
  font-family      :"Trebuchet MS", Arial, Verdana,  Helvetica, sans-serif;
  font-size        : 11px;
  line-height      : 16px;
  padding:4px 0px 4px 0px;
  margin:0;
}
strong {
  color            : #000000;
  font-family      :"Trebuchet MS", Arial, Verdana,  Helvetica, sans-serif;
  font-size        : 11px;
  line-height      : 16px;
  padding:4px 0px 4px 0px;
  margin:0;
}
i {
  color            : #000000;
  font-family      : Verdana,  Helvetica, sans-serif;
  font-size        : 10px;
  line-height      : 16px;
  padding:4px 0px 4px 0px;
  margin:0;
  font-style: normal;
}
em {
  color            : #000000;
  font-family      :"Trebuchet MS", Arial, Verdana,  Helvetica, sans-serif;
  font-size        : 11px;
  line-height      : 16px;
  padding:4px 0px 4px 0px;
  margin:0;
  font-style: normal;  
}

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


.leftcol {width:200px;padding:10px 5px 10px 10px;}
.maincol {width:525px;padding:10px 5px 10px 5px;}
.rightcol {width:200px;padding:10px 10px 10px 10px;}
.pollstableborder td{ text-align:left}

#container {
	width:970px;
	height:100%;
	margin: 0px auto;
	padding:0;
	text-align: left;
}


/* -------------------------------------------------------------------------------------------------------------- */
table.moduletable {
	margin             : 0 0 20px 0;
	width              : 100%;
    font-family        :"Trebuchet MS", Arial, Verdana,  Helvetica, sans-serif;
	font-size          : 10px;	
}

table.moduletable th {
      
    font-family        :"Trebuchet MS", Arial, Verdana,  Helvetica, sans-serif;
	font-size          : 11px;
	font-weight        : bold;
	text-align         : left;
	height			   : 34px;
    color              : #FFFFFF;
	padding            : 8px 0 0 13px;
    text-indent        : 10px;
	line-height        : 15px;
	background		   : #fff url(../images/moduletable_th_bg.jpg) no-repeat left top;
	}

table.moduletable td {
    padding-top: 2px;
}
table.moduletable td table{
   width              : 100%;
}


.sectiontableheader {
  font-size        : 10px;
  font-family        :"Trebuchet MS", Arial, Verdana,  Helvetica, sans-serif;  
  font-weight      : normal;
  text-transform   : uppercase;
  letter-spacing   : 1px;
  color            : #333333;
  background       : #ffffff; 
  padding          : 1px;
}


.sectiontableentry1 {
  vertical-align   : top;
  padding          : 3px;
  background       : #D9D9D9;
  border-bottom    : 1px solid #ffffff;
  line-height      : 25px;

}
.sectiontableentry2 {
  vertical-align   : top;
  padding          : 3px;
  border-bottom    : 1px solid #ffffff;
  background       : #EEEEEE;
  line-height      : 25px;
}
a.mainlevel  {
  display           : block;
  width             : auto;
  margin            : 1px 0;
  padding           : 0;
  font-size         : 12px;
  background        : none;
  text-indent       : 10px;
  width				: 200px;
}

a.mainlevel:link, a.mainlevel:visited {
  display          : block;
  font-size        : 11px;
  background       : transparent url(../images/mainlevel.gif) repeat-x right bottom;
  font-weight      : normal;
  padding          : 4px 0 4px 0;
  color            : #000000;
  text-indent      : 11px;
}
a.mainlevel:hover {
  background       : transparent url(../images/mainlevel_h.gif) repeat-x right bottom;
  font-size        : 11px;
  font-weight      : normal;
  color            : #D01C0D;
  text-decoration  : none;
  text-indent      : 11px;
}
#active_menu {
  color            : #D01C0D;
  background       : transparent url(../images/mainlevel_h.gif) repeat-x right bottom;
}
a#active_menu:hover {
  color            : #333333;
}

a:link, a:visited {
  font-size        : 11px;
  color            : #333333;
  text-decoration  : none;
  font-weight      : bold;
}
a:hover {
  font-size        : 11px;
  color            : #D01C0D;
  text-decoration  : none;
  font-weight      : bold;
}
a.category:link, a.category:visited {
  font-size        : 11px;
  font-weight      : bold;
}
a.readon:link, a.readon:visited {
  color            : #999999;
  font-family      :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
  font-size        : 11px;
  background       : url(../images/readon.gif) no-repeat;
  white-space      : normal;
  font-weight      : bold;
  padding          : 1px 0 3px 18px;
  float            : right;
  line-height      : 10px;
  text-decoration  : underline;
}
a.readon:hover {
  color            : #D01C0D;
  font-family      :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
  font-size        : 11px;
  background       : url(../images/readon.gif) no-repeat;
  white-space      : normal;
  font-weight      : bold;
  padding          : 1px 0 3px 18px;
  line-height      : 10px;
  text-decoration  : underline;
}
ul {
  margin           : 2px;
  padding-left     : 10px;
  list-style       : none;
}
li {
  
  line-height      : 15px;
  padding-left     : 10px;
  padding-top      : 0;
}
table.contenttoc {
  border           : 1px solid #dcdcdc;
  background       : #F1F1F1;
  padding          : 5px;
  margin-left      : 2px;
  margin-bottom    : 2px;
}
.pagenavcounter {
  font-size        : 10px;
  color            : #4da338;
}
.pagenavbar {
  border-top       : 1px solid #999999;
  padding          : 2px;
}
.pagenav {
  font-weight      : bold;
  }
a.pagenav:link, a.pagenav:visited {
  font-size        : 11px;
  color            : #999999;
  text-decoration  : none;
}
a.pagenav:hover {
  font-size        : 11px;
  color            : #3333ff;
  text-decoration  : none;
}
.date {
  font-size        : 10px;
  font-weight      : bold;
  color            : #707070;
  padding-right    : 12px;
}
.small {
  font-size        : 10px;
  color            : #333333;
}
.smalldark {
  font-size        : 10px;
  color            : #333333;
}
.createdate, .modifydate {
  float            : right;
  font-size        : 10px;
  color            : #666666;
  font-weight      : bold;

  
}
.content_vote {
  font-size        : 10px;
  height           : 22px;
  padding-top      : 2px;
  padding-bottom   : 2px;
}
.content_rating {
  font-size        : 10px;
  color            : #999999;
}

.pway {
	margin:0 auto;
	text-align:left;
	width:970px;
	height:18px;
	padding:5px 0 0 0 ;
	background:#575757;
}
.pathway {
  font-family      :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
  font-size        : 11px;
  color            : #D01C0D;
  padding-left     : 12px;
}
a.pathway:link, a.pathway:visited {
  font-family      :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
  color			   : #FFFFFF;
  font-size        : 11px;
  padding-left     : 0;
}
a.pathway:hover {
  color:#efefef;
  font-size        : 11px;
  padding-left     : 0;
}
table.content{
  width            : 100%;
  padding          : 0;
  border-collapse  : collapse;
  border-spacing   : 0;
  margin-bottom    : 10px;
}
table.contentpane {
  width            : 100%;
  border-spacing   : 0;
  padding-left     : 5px;
  padding-right    : 5px;
  margin-bottom    : 5px;
}
table.contentpaneopen {
  width            : 100%;
  border-spacing   : 0;
  padding-left     : 5px;
  padding-right    : 5px;
  margin-bottom    : 5px;
}
.poll {
	color : #333333;
	line-height : 12px;
	font-weight: normal;
      
}

.pollstableborder{
  border-color     : #999999;
}
.contentheading,.componentheading {
  width            : 90%;
  font-size        : 12px;
  font-weight      : bold;
  line-height      : 16px;
  text-transform   : uppercase;
  text-align       : left;
  text-indent      : 0;
  color            : #D01C0D;
  padding          : 1px;
  margin           : 3px 0px;
  }


.ontab {
  border-left      : 1px solid #666666;
  text-align       : center;
  font-weight      : bold;
  color            : #333333;
  padding          : 5px;
  cursor           : pointer;
  line-height      : 30px;
}
.offtab {
  border-left      : 1px solid #666666;
  text-align       : center;
  color            : #999999;
  font-weight      : normal;
  padding          : 5px;
  cursor           : pointer;
  line-height      : 30px;
}
.tabpadding {
 border-left       : 1px solid #666666;
}
.col {
   vertical-align   : top;
   background       : #ffffff;
   padding-top: 5px;
   

}

.contentdescription { 
  width          : auto !important;
  margin         : 0;
  padding        :  0;
  padding-top    : 5px;
  text-align     : left;
}

td.top1{
margin: 0;
padding:  0;
height: 28px !important;
height: 28px;
padding-top:  2px !important;
padding-top:  3px;
background		: url(../images/shadow.jpg) #f1f1f1 repeat-x top;
}
table.top2{
background : #ffffff; 
}

.searchbox {
  margin           : 0;
  padding          : 0;
  margin-top       : 13px;
  margin-left      : 10px;
  width            : 130px;
  font-size        : 11px;
  color            : #707070;
  border           : 1px solid #cccccc;
  padding          : 2px !important;
  padding          : 1px;
  background       : none;
     }

.sublevel {
   font-family      :"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
   font-size        : 10px;
   font-weight      : normal;
   color            : #999999;
   margin-top		: 10px;
}
a.sublevel:link, a.sublevel:visited {
   font-family      :"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
   font-size        : 10px;
   font-weight      : normal;
   color            : #999999;
   padding    	    : 5px 1px 3px 5px;
   text-decoration	: none;
}
a.sublevel:hover {
  color            : #D01C0D;
  text-decoration  : none;
}
a.sublevel#active_menu  {
	background      : transparent;
	color           : #ff6600;
	border          : 0;
      
}
a.toclink:link, a.toclink:visited {
   font-family      :"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
   font-size        : 10px;
   font-weight      : normal;
   color            : #999999;
   padding    	    : 5px 1px 3px 5px;
   text-decoration	: none;
}
a.toclink:hover {
  color            : #D01C0D;
  text-decoration  : none;
}

td.logoheader {
  margin: 0;
  padding:  0;
  background     : url(../images/header.jpg)  no-repeat bottom;
  height         : 65px;
  width          : 770px;
 }
td.topnav {
  margin : 0px;
  padding:  0px;
  background     : url(../images/bg_top.jpg) repeat-x top left;
  height         : 42px;
  width          : 770px;
  
 }

td.bgline {
  margin : 0;
  padding:  0;
  background     : url(../images/s.gif) repeat-y;
  width          : 7px;
 }


 #mainlevel-nav {
  font-size        : 11px;
  list-style       : none;
  padding          : 0;
  margin           : 0;
  margin-left      : 1px;
 
}

#mainlevel-nav li {
  float            : right;
  display          : block;
  list-style       : none;
  background-image : none;
  padding-left     : 2px;
  padding-right    : 2px;
  margin           : 0;
  width            : auto !important;
  font-size        : 11px;
  line-height      : 28px;
  white-space      : nowrap;
  border-left      : 1px solid #cccccc;

}
#mainlevel-nav li a {
  
  padding-left     : 10px;
  padding-right    : 10px;
  font-size        : 11px;
  color            : #000033;
  text-decoration  : none;
  
}

#mainlevel-nav li a:hover {
  font-size        : 11px;
  color            : #999999;
    
}

.blog_more {
margin   : 10px 0 7px 7px;
}
.buttonheading {
padding  : 0 2px;
}

.mosimage {
  border     : 1px solid #dedede;
  margin     : 5px;
  padding-top:  3px;
  background:#FFFFFF;

}

.mosimage_caption {
  margin-top: 3px;
  padding   :  2px;
  color     : #000066;
  font-size : 10px;
  background: #f1f1f1;
}

/* -------------------------- */
.footer_bg {
	width:970px;
	background:#575757 url(../images/footer_bg.jpg) no-repeat left top;
	color:#FFFFFF;
	padding:6px 0px 0 0;
	height:43px;
	text-align: center;
	margin:0px;
}
.footer {
	color:#fff;
	padding:0;
	margin:0 0 10px 0;
}
.footer div, .footer div a, .footer div a:visited{
	color:#fff;
}

hello community... i would like to humble ask for anyone's help on this one... i need to add a right column to this template to make it a 3 column joomla template. but since i dont know css, i really dont know what to do. please help me. i have privided the code below.

Here is the index.php


Code:

<?php
/**
 * @copyright	Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
 * @license		GNU/GPL, see LICENSE.php
 * Joomla! is free software. This version may have been modified pursuant
 * to the GNU General Public License, and as distributed it includes or
 * is derivative of works licensed under the GNU General Public License or
 * other free or open source software licenses.
 * See COPYRIGHT.php for copyright notices and details.
 */

defined('_JEXEC') or die('Restricted access');



?>
<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>
<!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; ?>" >
<head>
	<jdoc:include type="head" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/layout.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/template.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/joomla.css" type="text/css" />
	<!--[if lte IE 6]>
		<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/template_ie6.css"  type="text/css" />
	<![endif]-->
    <!-- Flow Player Start -->
<script type="text/javascript" src="flowplayer/flowplayer-3.0.6.min.js"></script> 
<!-- Flow Player End -->
<meta name="verify-v1" content="18/oD5mtAqJSklIsjK/k6NWXMxJ6ZNJMyoGRkIl3Md8=" /> 
</head>

<body id="template-body">
	
<div id="header">
	<div id="top"><jdoc:include type="modules" name="top" /></div>
	<div id="contact"><jdoc:include type="modules" name="user6" /></div>
</div>

<div id="mainnav">
	<div id="blog">
		<a href="irsblog/index.php">Blog</a>
	</div>
	<jdoc:include type="modules" name="user3" />
</div>

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

<div id="mainbody">
	<div id="mainbody2">
		<div id="sidebar">
			<div class="inside">
				<jdoc:include type="modules" name="left" style="xhtml" />
			</div>
		</div>
        
        <div id="sidebar2">
			<div class="inside">
				<jdoc:include type="modules" name="right" style="xhtml" />
		</div>
        

        

		<div id="maincontent">
			<div class="inside">
				
			
				<?php if ($this->getBuffer('message')) : ?>

				<?php endif; ?>
				<jdoc:include type="component" />
			</div>
               
		</div>      
    


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

		<div id="mainbottom-wrapper">
			<div id="mainbottom">
				<?php if( $this->countModules('user1') ): ?>
				<div class="mainbottom-box" id="box-1">
					<jdoc:include type="modules" name="user1" style="xhtml" />
				</div>
				<?php endif; ?>
				
				<?php if( $this->countModules('user2') ): ?>
				<div class="mainbottom-box" id="box-2" >
					<jdoc:include type="modules" name="user2" style="xhtml" />
				</div>
				<?php endif; ?>
				
				<?php if( $this->countModules('user4') ): ?>
				<div class="mainbottom-box" id="box-3">
					<jdoc:include type="modules" name="user4" style="xhtml" />
				</div>
				<?php endif; ?>
				
				<?php if( $this->countModules('user5') ): ?>
				<div class="mainbottom-box" id="box-4">
					<jdoc:include type="modules" name="user5" style="xhtml" />
				</div>
				<?php endif; ?>
				
				<div class="clear"></div>
				
			</div>
		</div>
		<div id="footer">
			<jdoc:include type="modules" name="footer" />
		</div>
		

	</div>
</div>

<div id="bottom">
	
	<div class="left">
		<?php echo JText::_("100 S. EDISON AVE., STE. A TAMPA, FL 33606"); ?><br />
		<?php echo JText::_("PHONE: (813) 229-7100 TOLL FREE: (888) 438-6474 FAX: (813) 251-9605"); ?>
	</div>

	<div class="right">
		<?php echo JText::_("&COPY; 2000-2009 Law Offices of  Darrin T. Mish, P.A"); ?>
	</div>
	
	<div class="clear"></div>
</div>
<script src="http://24520.hittail.com/mlt.js"; type="text/javascript"></script> 

</body>
</html>

here is the layout.css

Code:

#header {
	background: transparent url('../images/bg-header.jpg') no-repeat scroll 0 0;
	height: 149px;
	width: 990px;
	margin: 0 auto;
}

#mainnav {
	height: 46px;
	width: 990px;
	margin: 0 auto;
}

#mainbody {
	background: url('../images/bg-mainbody.png') repeat-y scroll 0 0;
	width: 1010px;
	margin: 0 auto;
}

#mainbody2 {
	background: url('../images/bg-mainbody2.png') no-repeat scroll 0 0;
} 


#sidebar {
	background: #FFFFFF url('../images/bg-sidebar.png') repeat-x scroll 0 0;
	color: #000000;
	width: 223px;
	min-height: 700px;
	margin-left: 15px;
	float: left;
}

#sidebar2 {
	background: #FFFFFF url('../images/bg-sidebar.png') repeat-x scroll 0 0;
	color: #000000;
	width: 250px;
	min-height: 700px;
	margin-right: 15px;
	float: right;
}

#maincontent {
	width: 500px;
	float: right;
	margin-right: 15px;
}

#mainbottom-wrapper {
	border-top: 0px dotted #000;
	margin-top: 50px;
	margin: 0 15px;
} 

#mainbottom {
	background: none #EFEFEF no-repeat scroll 0 0;
	min-height: 192px;
	margin: 10px 0;
	padding: 0 10px;
	clear: both;
	color: #000000;
}

#footer {
	background: #0B60B7 url('../images/bg-footer.png') no-repeat scroll 0 0;
	text-align: center;
	color: #FFFFFF;
	padding: 10px 0;
	margin: 0 11px;
}

#bottom {
	background: #FFFFFF url('../images/bg-bottom.png') no-repeat scroll 0 0;
	margin: 10px 0 20px 0;
	width: 1010px;
	margin: 0 auto;
	padding: 10px 0;
}

and here is the template.css
Code:

/* @important */

* { margin:0; padding:0; }

body {
	background: #FFFFFF url('../images/bg.png') repeat-x scroll center top;
	font: 78% Arial,Tahoma,Verdana;
	color: #000000;
}

h1,h2,h3 {
	margin: 0 0 10px 0;
}

h1, .componentheading { font-size: 1.5em; }
h2, .contentheading { font-size: 1.2em; text-align:center; }
h3 { font-size: 1.167em; }

ul {
	margin: 10px 0 10px 0;
	padding: 0 0 0 35px;
}

li{}

a {
	text-decoration: underline;
	color: #666666;
}

p {
	margin: 0 0 15px 0;
	line-height: 20px;
}

img {
	border: none;
}

fieldset {
	border: none;
}

.clear{
	clear: both;
}

.inside {
	padding: 5px;
}

.left {
	float: left;
}

.right {
	float: right;
}

/* Header Style */

#top {
	height: 35px;
	text-align: right;
	color: #FFFFFF;
}

#contact {
	float: right;
	width: 300px;
	min-height: 80px;
	padding-right: 5px;
	color: #000000;
}

/* Mainnav Style*/

#mainnav ul {
	float: right;
	list-style-type: none;
	padding: 0;
	margin: 0 auto;
}

#mainnav ul li {	
	background: url('../images/bg-menu.png') no-repeat scroll right center;
	display: inline;
	float: left;
	height: 46px;
	padding: 0 10px;
}

#mainnav ul li a {
	color: #FFFFFF;
	display: block;
	float: left;
	font-family: times new roman;
	font-size: 1.2em;
	font-weight: bold;
	line-height: normal;
	margin-top: 12px;
	text-decoration: none;
	text-transform: uppercase;
}

/* Blog Button */

#blog {
	float: right;
	margin: 10px 15px 0 120px;
	padding: 0;
	width: 60px;
}

#blog a {
	background: #F2A31E;
	color: #FFFFFF;
	display: block;
	font-family: times new roman;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	padding: 3px 0;
}


/* Advert Style */

#advert-wrapper {
	border-bottom: 0px dotted #000;
	padding: 0 0 10px 0;
}

.advert-box {
	min-height: 239px;
	width: 367px;
}

/* Sidebar Style */

#sidebar ul {
	list-style-position: inside;
	margin: 0;
	padding: 0;
}

#sidebar ul li {
	
	padding: 5px;
	border-bottom: 1px dotted #B9B9B9;
	list-style-image: url('../images/bullet.png');
}
#sidebar ul li a {
	color: #000000;
	text-decoration: none;
}

#sidebar .moduletable, #sidebar .moduletable_menu{
	margin: 0 0 15px 0;
}

/* Sidebar-c Style */

#sidebar-c ul {
	list-style-position: inside;
	margin: 0;
	padding: 0;
}

#sidebar-c ul li {
	
	padding: 5px;
	border-bottom: 1px dotted #B9B9B9;
	list-style-image: url('../images/bullet.png');
}
#sidebar-c ul li a {
	color: #000000;
	text-decoration: none;
}

#sidebar-c .moduletable, #sidebar .moduletable_menu{
	margin: 0 0 15px 0;
}

/* Main Content Style */

#maincontent img {
	padding: 5px;
}

/* Main Bottom Style */

.mainbottom-box {
	float: left;
	width: 228px;
	min-height: 166px;
	padding: 10px 5px;
	margin: 10px 0;
}

.mainbottom-box ul {
	list-style-image: url('../images/bullet.png');
}

.mainbottom-box ul li {}

.mainbottom-box ul li a {
	text-decoration: none;
	color: #000000;
}

#box-2,#box-3,#box-4 {
	border-left: 1px dotted #B9B9B9;
} 

/*Footer Style */

#footer a {
	color: #FFFFFF;
}

/* Bottom Style */

#bottom .right, #bottom .left {
	font-size: 0.833em;	
}

#bottom .right {
	width: 157px;
}

#bottom .left {
	padding-left: 15px;
}

i would really appreciate it if anyone can help...

thankks a whole lot!!

Hi there,

I customized the content module so the title of an article displays an image before the text and the text is displayed with two colors!!

The relevant part of the code is at follows:

Code:

<h2 class="title">
			<?php if ($params->get('link_titles') && !empty($this->item->readmore_link)) : ?>
			<a href="<?php echo $this->item->readmore_link; ?>">
				<div><span class="image-title"></span>
				<?php 
				$titles = explode(" ",$this->item->title);
 
					for ($i=0; $i<count($titles)-1; $i++){
						echo '<div style="float:left;padding-left:7px;color:#303030;">'.$this->escape($titles[$i]).'</div>';
 
					}?> 
					<div style="color:#06cfef;float:left;padding-left:7px;"><?php echo $this->escape($titles[$i]);?></div></div></a>
					<div style="clear:both;height:0px;"></div>
			<?php else : ?>
				<div><span class="image-title"></span>
				<?php
					$titles = explode(" ",$this->item->title);
					for ($i=0; $i<count($titles)-1; $i++){
						echo '<div style="float:left;padding-left:7px;">'.$this->escape($titles[$i]).'</div>';
 
					}?> 
					<div style="color:#06cfef;float:left;padding-left:7px;"><?php echo $this->escape($titles[$i]);?></div></div>
					<div style="clear:both;"></div>
			<?php endif; ?>
		</h2>

In both IE and Google Chrome everything is displayed as wanted (apart from ie which has some positioning problem but i'm not focusing on that now)

In firefox, I can see the content loading correctly but just before the page finish loading the image disappears... I just can't understand why!!

You can take a look at this url:

Can anyone please help??

Thanks

Hi there,

I have a site running on Joomla and I'm using cufon for changing the font type.

The problem is that, in firefox, the tile only shows in the correct font in some articles...

Here, using firefox the title shows up fine:
sostudent.com/joomla/index.php/solutions

Here, using firefox the title shows up without the font replaced by cufon:
sostudent.com/joomla/index.php/about-us

Also, I can't seem to change the links font as you can see in the "Contact Form" link on this page:
sostudent.com/joomla/index.php/contacts

In Google chrome everything seems fine!!

Can anyone please help?

Thanks,

Hi All

I used Joomla to design a really simple website for someone. I currently have the problem where my text, with <h2> tag, in IE, the bottom bit of the text is cut off. For instance, a 'g' will not have its bottom 'loop'. So the text is cut off horizontally, not vertically. Works fine in Firefox.

Using IE 's web development toolbar, I narrowed it down to the H2 tag, which is on a CSS file in Joomla, there are more tags nested within the <h2> tag, but they seem ok, as they are only font tags. Here is the css code of the Joomla template.

Code:

h2, .contentheading { 	
padding: 0; 	
font-family: Verdana, Geneva; 	
font-size: 1.3em; 		
font-weight: bold; 	
vertical-align: text-top; 	
color: #333; 	
text-align: left; 	
width: 100%; } 

Any idea how to fix such a problem?