CSS - Designing A Site For Joomla

Sorry if I'm being repetitive, this has been discussed before, but still there is something preventing me from making CSS boxes behave properly.

Everything has to do with stopping <TABLE> and starting <CSS>-based thinking. I mean, there shouldn't be so much magic and wonderdust as I trick myself into believe.

My problem is very simple;

I'd like the design to do the following:
[wrapper: full width, 5px padding all over]
[variable size image container, 2 px padding all over, staying on the left at all times]
[variable size text container, staying on the right at all times, stretching full width so it touches the image container]

Here's an example of the design:
Code:

------------------------
|      (wrapper)       |
||------||------------||
||image || text       ||
||------||------------||
------------------------

I thought I had it made when I read that you basically can look at creating a table based design as using a combination of DIV's and SPAN's, havind the DIV's being looked at as rows and SPAN's as columns/cells. But for some reason I can't seem to get the full grip out of it.

I've had *some* success with this, but I'm having horrible problems with making the text get to the top left of the container. It *always* stays at bottom left, no matter how I adjust my DIV's, SPAN's or properties of those. I can't seem to make the boxes have any actual "space"; when I add margin properties to either box, I can't locate it, it's as if the container isn't there. I can get the wrapper to behace though.

While I'm at it, is there some good, solid, documentation of how the boxes work and interact? I've read *alot* of different articles, looked at w3c, checked other peoples code (which actually have teached me the most), but I'd like to have some kind of resource that gives me the knowledge of "box modelling" to such an extent that I should be able to solve in not all but most problems, like this simple one.

Thanks for taking time to read through all this. I know it won't become a FAQ or rooted topic, but I'm hoping perhaps someone with the same problem as I have will benefit from this.

I am new to design but really doing my best to keep up with the big boys. I am trying to tweak my site on Wordpress to have a oversized, and fluid footer.

Long story short I want my site (sac247[dot]sacobserver[dot]com) to have a footer that looks like venturebeat[dot]com or mashable[dot]com. Can someone help me get started on how to break my colors out of the widget box?

I am curious to know what many of you think about the design consideration for 800 x 600. I am about to start a major project and am considering going to a fixed width of 1024 instead of my current default of 770. As I see it only about 1 of 10 use 800 x 600, and I think that will go down in the not too distant future. I wouln't mind learing how to scale a site so it looks good in any resolution but as I understand it you can not scale images that many of my site layouts depend on. Tom

hola.

1.i am looking for quick tutorials on how to cross-platform web design a page without using tables.

2. and why people dont like to use tables?

++thanks in advanced.
+ckill3r

Hi

I am trying to learn how to design and develop a website that has consistent behavior across browsers, browser window size and screen resolution.

What are the industry best practices for designing and developing such websites.

Your help is appreciated

Thanks

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 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!!

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.

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,

Ive got a joomla worksite and it has a menu on footer. The menu uses the following css code :


#footmenu ul {
margin: auto;
padding: 0;
list-style:none;
margin-top:7px;
}

#footmenu li {
float:left;
border-right: 2px solid #fff;
background: none;
padding: 0;
display: inline;
padding: 10 10px;
}
}


#footmenu a {
font-family: Tahoma, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
float:left;
display:block;
height: 25px;
line-height: 25px;
padding: 0 15px;
color: #666;
}

#footmenu a:hover {
/*background: #e1e1e1;
*/ color:#98aa65;
}

I have read some posts and articles on the web but i didnt have any luck with it. I could make it align in left or right but not in the middle. From what i read, i have to align the whole div as one part, dunno

Any help appreciated,

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?