CSS positioning help

hargi · 30 Jul 2010 at 09:38

Im having trouble with positioning rss feeds in my footer of a template.
CSS

Code:

/****
author - TemplateDealer.ch
***/

body,html{
  	padding: 0;
 	width:100%;
	margin: 0 auto;
  	background:#000000 url(../images/bg.jpg) repeat-x top center;
  	}
  
#header_top{
	width:900px;
	height: 53px;
	margin: 0 auto;
	}
	
#search {
	width: 200px;
	height: 33px;
	float: left;
	margin-top: 7px;
	background: #ffffff;
	}
	
#searchbox {
  	margin: 0;
  	padding: 0;
  	margin-top: 9px;
  	margin-left: 5px;
	width: 170px;
  	font-size: 12px;
  	color: #006699;
  	padding: 2px !important;
	font-style: italic;
  	padding: 1px; 
  	border: none;
  	background: none;
	}
	
#topnav{
	width: 700px;
	height: 33px;
	float: right;
	text-align:left;
	margin-top: 10px;
	}
	
#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;
	font-size: 11px;
	line-height: 34px;
	white-space: nowrap;
	
	}
	
#mainlevel-nav li a {  
  	padding-left: 30px;
  	padding-right: 10px;
	font-size: 12px;
  	color: #ffffff;
  	text-decoration: none;
	}

#mainlevel-nav li a:hover {
  	font-size: 12px;
	font-weight: bold;
	color: #006699;
  	}
	
#header{
	margin: 0 auto;
	padding: 0;
	background: none;
	height: 167px;
	width: 900px;
  	}
	
#logo{
	width: 900px;
	height: 66px;
	margin: 55px 0 0 0;
	float:left;
	padding: 0;
	background: url(../images/logo.png) no-repeat top center;
	}
	
	
#newsflash{
	background: none;
	margin: 25px 0 0 0;
	width: 500px;
	height: 122px;
	float:right;
	text-align:right;
	}
	
#newsflash th {
	text-align: right;
	padding: 0;
	font-weight: bold;
	color:#69d6ff;
	}
	
#newsflash td {
	color: #69d6ff;
	font-style: italic;
	}
	
#newsflash p{
	color: #69d6ff;
	font-style: italic;
	}	
	
#bg_top{
	height: 250px;
	width: 900px;
	margin: 0 auto;
	background: url(../images/top_bg.png) repeat-x top center;
	}
	
#user1{
	background: url(../images/top_modul_footer.png) top center repeat-y;
        color:#ffffff;
	width: 250px;
	height: 250px;
	padding: 0;
	float:left;
	margin: 0 65px 0 10px;
	}
	
#user1 th{
	width: 250px;
	height: 73px;
	padding: 25px 0 0 0;
	font-size: 16px;
	background: url(../images/top_modul_header.png) top center no-repeat;
	}

.poll td{
	color:#595959;
         }
#top_middle{
	background: url(../images/top_middle.png) top center no-repeat;
	width: 250px;
	height: 250px;
	padding: 0;
	float:left;
	margin: 0 65px 0 0;
	}
	
	
#user2{
	background: url(../images/top_modul_footer.png) top center repeat-y;
	width: 250px;
	height: 250px;
	padding: 0;
	float:left;
	margin: 0 10px 0 0;
	}
	
#user2 th{
	width: 250px;
	height: 73px;
	padding: 25px 0 0 0;
	font-size: 16px;
	background: url(../images/top_modul_header.png) top center no-repeat;
	}
	
#content{
	width: 900px;
	padding: 25px 0 0 0;
	margin: 0 auto;
	min-height: 500px;
	height: 100%;
	overflow:auto;
	background: url(../images/content_bg.png) repeat-y top center;
	}
	
#left {
   	vertical-align: top;
   	background: none;
   	padding: 35px 0 0 10px;
   	border-left : none;
   	float: left;
   }
   
#left table.moduletable th, #left table.moduletable_menu th, #left table.moduletable_text th{
    background: url(../images/moduletable_header.png)  no-repeat top center; 
	height: 36px;
	color: #006699;
	font-size: 14px;
	padding: 3px 0 0 5px;
	}
	
#left table.moduletable td, #left table.moduletable_menu td, #left table.moduletable_text td{
    background: none; 
	padding: 0 0 20px 5px;
	}
	
#left table.moduletable td form td{
	padding: 0;
	background: none;
	}

	
.leftrow {
  	width: 190px;
  	height: 100%;
  	margin-right: 0;
  	}
	
#content_middle{
	padding: 0 0 0 60px;
	float:left;
	width: 600px;
	}

.main{ 
  	text-align: left; 
  	float: left;
  	width : 600px;
 	margin: 0; 
  	padding: 0;
	}
	
#footer{
	colour:#444;
	width: 900px;
	margin: 0 auto;
  	background: none;
  	}
	
#copyright {
  	font-size: 11px;
  	font-weight: normal;
	padding: 15px 0 0 0;
	text-align: center;
  	height: 31px;
  	border-top:none;
 	}
	
td, tr, p, div{
	font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
  	font-size: 12px;
  	color: #cccccc;
	}
	
hr{
  	color: #999999;
  	height: 1px;
  	width: 100%;
	}

form{
	margin: 0; 
	padding: 0;
	}	

.back_button{
  	color: #999999;
  	font-family: Arial, Verdana, Tahoma, 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 #B4C1D1;
  	margin: 3px;
  	background-color: #EAECEE;
  	padding: 2px !important;
  	cursor: pointer;
	}

.inputbox{
	color: #54c1e5;
 	background: #ffffff;
 	border: 1px solid #B4C1D1;
 	margin: 3px;

}

h1{
	font-size: 18px;
    color: #54c1e5;
    margin: 5px 0;
}

h2{
	font-size: 16px;
    color: #666666;
    margin: 5px 0;
}

h3{
	font-size: 14px;
    color: #54c1e5;
    margin: 5px 0;
}

form#form-login{
	background: none;
	color: #fff;
	margin: 5px 0 15px 0;
	text-align:left
    }

form#form-login fieldset{
	border: none;
	}

form#form-login fieldset label{}
form#form-login ul a{}

.contact_email {
  	width: 100%;
	}

.contact_email .inputbox{
  	width: 345px;
	}

table.moduletable, table.moduletable_menu, table.moduletable_text{
	margin: 0 0 8px 0;
	width: 100%;
    background: none; 
    padding-bottom: 2px;
	}

table.moduletable th, table.moduletable_menu th, table.moduletable_text th{
    font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align: left;
	width: 100%;
    background: none; 
    color: #006699;
	padding: 2px;
    text-indent: 10px;
	line-height: 22px;
 	border-bottom: none;
	}

table.moduletable td, table.moduletable_menu td{
    padding-top: 2px;
   	}
		
.sectiontableheader {
  	font-size: 12px;
  	font-weight: normal;
  	text-transform: uppercase;
  	letter-spacing: 1px;
  	background: none; 
  	color: #F6F7F9; 
  	padding: 3px;
	}

td.sectiontableheader a{
	color: #F6F7F9;
	}

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

.sectiontableentry2{
  	vertical-align: top;
  	padding: 3px;
  	border-bottom: 1px solid #ffffff;
  	background: none;
  	line-height: 18px;
  	}

.sectiontableentry1 img{ 
	padding-top: 3px !important;
	padding-top: 1px;
	}

.sectiontableentry2 img{
 	padding-top: 3px !important;
 	padding-top: 1px;
	}

a:link, a:visited{  
  	color: #666666;
  	text-decoration: none;
  	font-weight: bold;
	}

a:hover{
  	color: #54c1e5;
  	text-decoration: none;
  	font-weight: normal;
	}
	
a.category:link, a.category:visited{
  	font-size: 16px;
  	font-weight: bold;
	}

a.readon:link, a.readon:visited{
  	color: #999999;
  	font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
  	font-size: 11px;
  	background: url(../images/readon.gif) no-repeat;
  	white-space: normal;
  	font-weight: normal;
  	padding: 1px 0 3px 18px;
  	float: right;
  	line-height: 10px;
  	text-decoration: underline;
	}

a.readon:hover{
  	color: #006699;
  	font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
  	font-size: 11px;
  	background: url(../images/readon.gif) no-repeat;
  	white-space: normal;
  	font-weight: normal;
  	padding: 1px 0 3px 18px;
	line-height: 10px;
	text-decoration: underline;
	}
[COLOR="Red"].moduletable.newsfeed {
display:block;
float:left
}

.newsfeed ul {
            display:block;
             float:left;
            }[/COLOR] 
**** I did this not sure if it right



ul{
  	margin: 2px;
  	padding-left: 10px;
  	list-style: none;
	}

li{  
  	line-height: 15px;
  	padding-left: 10px;
  	padding-top: 0;
  	background-image: url(../images/arrow2.gif) ;
  	background-repeat: no-repeat;
  	background-position: 0px 5px;
	}

table.contenttoc{
  	border: 1px solid #dcdcdc;
  	background: none;
	width: 100%;
  	padding: 5px;
  	margin-left: 2px;
  	margin-bottom: 2px;
	}

.pagenavcounter{
  	font-size: 10px;
  	color: #006699;
	}

.pagenavbar{
  	border-top: 1px solid #999999;
  	padding: 2px;
	}

.pagination span{ 
	padding: 2px; 
	}
.pagination a{ 
	padding: 2px; 
	} 

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

a.pagination:hover{
  	font-size: 11px;
  	color: #006699;
  	text-decoration: none;
	}

.small{
	font-size: 10px;
  	color: #333333;
	}

.smalldark{
  	font-size: 10px;
  	color: #333333;
	}

.createdate, .modifydate{
  	float: left;
  	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;
	}

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: #fff;
	line-height: 12px;
	font-weight: normal;
    }

.pollstableborder{
  	border-color: #999999;
  	text-align: left;
	}

.contentheading {
  	border-bottom:none;
  	font-size: 20px;
  	font-weight: bold;
  	line-height: 16px;
  	text-align: left;
  	text-indent: 0;
  	color: #54c1e5;
  	width: 100%;
  	padding: 1px;
  	margin: 3px 0px;
  	}
	
.componentheading{
  	border-bottom:none;
  	font-size: 20px;
  	font-weight: bold;
  	line-height: 16px;
  	text-align: left;
  	text-indent: 0;
  	color: #006699;
  	width: 100%;
  	padding: 1px;
  	margin: 6px 0px;
	}

td.article_column{
	padding-right: 5px;
	}

.contentdescription{ 
  	width: auto !important;
  	margin: 0;
  	padding:  0;
  	padding-top: 5px;
  	text-align: left;
	}
	
table.top2{
	background : #ffffff;
	}
	
td.bgline{
  	margin: 0px;
 	padding: 0px;
  	background: none;
  	width: 7px;
	}

.blog_more{
	margin   : 10px 0 7px 7px;
	}

.buttonheading{
	padding  : 0 2px;
	}

span.article_separator{
	display:block;
	height:15px;
	clear: both;
	}

div.caption{ 
	padding: 0 10px 0 10px; 
	}
	
div.caption img{ 
	border: 1px solid #CCC; 
	}
	
div.caption p{ 
	font-size: .90em; 
	color: #666; 
	text-align: center; 
	}

div.mosimage{  
	margin: 5px; 
	}
	
div.mosimage_caption{  
	font-size: .90em; 
	color: #666; 
	}

.caption{
	border: 1px solid #CCC; 
	padding: 3px;
	}

/*  Main Menu */
table.moduletable_menu ul, table.moduletable_menu ul li{
  	background-image: none;
  	list-slyle:none;
  	display: block;
  	width: auto;
  	margin: 1px 0px;
  	padding: 0;
  	font-size: 12px;
  	background: none;
  	}

table.moduletable_menu ul li a, table.moduletable_menu ul li a:link, table.moduletable_menu ul li a:visited{
  	display: block;
  	font-size: 12px;
  	border: none;
  	background-color: none;
  	font-weight: normal;
  	padding: 2px 0;
  	color: #666666;
  	font-weight: bold;
  	padding-left: 10px;
	}

table.moduletable_menu ul li a:hover{
  	border: none;
  	background-color: none;
  	font-size: 12px;
  	font-weight: normal;
  	color: #54c1e5;
	font-style: italic;
  	text-decoration: none;
  	padding-left: 10px;
	}
	
table.moduletable_menu ul li.active a:link, table.moduletable_menu ul li.active  a:visited{
  	color: #54c1e5;
  	border: none;
  	background-color:none;
 	font-weight: bold;
	}

table.moduletable_menu ul li ul li a:link, table.moduletable_menu ul li ul li a:visited, table.moduletable_menu ul li ul li ul li a:link, table.moduletable_menu ul li ul li ul li a:visited{
   	display: block;
   	font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
   	font-size: 11px;
   	font-weight: bold;
   	color: #999999;
   	padding: 3px 1px 3px 5px;
   	margin: 3px;
   	text-decoration: none;
   	padding-left: 15px;
   	border: none;
	}

table.moduletable_menu ul li ul li a:hover, table.moduletable_menu ul li ul li ul li a:hover{ 
	background:none;
  	font-size: 11px;
  	font-weight: normal;
  	color: #666666;
  	text-decoration: none;
  	padding-left: 15px;
	}

table.moduletable_menu ul li.active ul li a:link, table.moduletable_menu ul li.active ul li a:visited, table.moduletable_menu ul li.active ul li ul li a:link, table.moduletable_menu ul li.active ul li ul li a:visited{
   	display: block;
   	font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
   	font-size: 11px;
   	font-weight: bold;
   	color: #999999;
   	padding: 3px 1px 3px 5px;
   	margin: 3px;
   	text-decoration: none;
   	padding-left: 15px;
   	border: none;
	}

table.moduletable_menu ul li.active ul li a:hover, table.moduletable_menu ul li.active ul li ul li a:hover{ 
	background:none;
  	font-size: 11px;
  	font-weight: normal;
  	color: #666666;
  	text-decoration: none;
  	padding-left: 15px;
	}

table.moduletable_menu ul li.active ul li#current a{ 
	background:none;
  	font-size: 11px;
  	font-weight: bold;
  	color: #6284B0;
  	text-decoration: none;
  	padding-left: 15px;
	}
	
img{
	border: 0;
	}

Output from footer section of page.

Code:

<div id="footer">
                 	<table cellpadding="0" cellspacing="0" class="moduletable">
			<tr>
			<th valign="top">
				BBC Technology			</th>
		</tr>
			<tr>
			<td>
				<div style="direction: ltr; text-align: left ! important">
	<table cellpadding="0" cellspacing="0" class="moduletable">
		<tr>
		<td>
			<ul class="newsfeed"  >
							<li>
									<a href="http://www.bbc.co.uk/news/business-10813772" target="_blank">
					Chip sales boost Samsung profits</a>
								</li>
								<li>
									<a href="http://www.bbc.co.uk/news/uk-politics-10805391" target="_blank">
					Government's £6m web search bill</a>
								</li>
								<li>
									<a href="http://www.bbc.co.uk/news/technology-10805090" target="_blank">
					Google cleared of wi-fi snooping</a>
								</li>
							</ul>
		</td>
		</tr>
	</table>
</div>
			</td>
		</tr>
		</table>
		<table cellpadding="0" cellspacing="0" class="moduletable">
			<tr>
			<th valign="top">
				Local News			</th>
		</tr>
			<tr>
			<td>
				<div style="direction: ltr; text-align: left ! important">
	<table cellpadding="0" cellspacing="0" class="moduletable">
		<tr>
		<td>
			<ul class="newsfeed"  >
							<li>
									<a href="http://www.bbc.co.uk/go/rss/-/news/uk-england-tees-10811912" target="_blank">
					Cyclist is robbed at knifepoint</a>
								</li>
								<li>
									<a href="http://news.bbc.co.uk/go/rss/-/sport1/hi/cricket/counties/8858365.stm" target="_blank">
					Taylor knock sees Glos down Tykes</a>
								</li>
								<li>
									<a href="http://news.bbc.co.uk/go/rss/-/sport1/hi/football/teams/m/middlesbrough/8868845.stm" target="_blank">
					Boro rule out move for triallists</a>
								</li>
							</ul>
		</td>
		</tr>
	</table>
</div>
			</td>
		</tr>
		</table>
	
                <div id="copyright">
				Template Design by: <a href="http://www.templatedealer.ch" title="Templates" target="_blank">TemplateDealer.ch</a>
                </div> 
                                                     
</div>

                   
  
</body>
</html>

I want the RSS to display in blocks across the bottom eg
|BBC TEchnology| | Local News|
|------------------| |--------------|
|blahblah | | blah |

ect.

But I just need the settings changed in the footer as "moduletable" is refered to in other parts

TIA

Muel · 30 Jul 2010 at 10:26

Could you post the entire source code or better still provide a link to the hosted page?

I can't have a look at the page itself properly with only the footer.

hargi · 30 Jul 2010 at 10:28

Thanks for looking Mule,

Its a Joomla powered site.
http://www.hargitech.co.uk/LTT

Muel · 30 Jul 2010 at 10:38

Cheers, now I can play about with the CSS in firebug and try to solve it.

gord · 30 Jul 2010 at 10:41

I don't really think tables are appropriate for RSS lists in the footer, nonetheless, each of your tables' has 100% width, so that will be one reason they arnt next to each other.

I can't remember if a table is a block level element, so you could try applying "display: inline;" to the tables.

Just seen your requirement for this in the footer only, so:

#footer table {
width: 25% !important;
display: inline;
}

Muel · 30 Jul 2010 at 10:46

Tables shouldn't be used for that really IMO...

Here is how I solved it:

Add this block in, or add the line into the block if there already is one. I couldn't spot it though as that stylesheet appears to be over 700 lines long...

Code:

table.moduletable{
    float:left;
}

I then found this block, and removed the width:100%; setting:

Code:

table.moduletable, table.moduletable_menu, table.moduletable_text{
    margin: 0 0 8px 0;
    background: none; 
    padding-bottom: 2px;
}

And somewhere you should add this, but I can't find the block anywhere:

Code:

#footer{
    clear:both;
}

hargi · 30 Jul 2010 at 12:18

Thank you both for looking I had to use a mixuter of your solutions to make sure that the other stuff worked

Code:

#footer table.moduletable{
    float:left;
}
#footer table.moduletable, #footer table.moduletable_menu, #footer table.moduletable_text{
    width: 50% !important;;
    margin: 0 0 8px 0;
    background: none; 
    padding-bottom: 2px;
}

#footer table.moduletable th, #footer table.moduletable_menu th, #footer table.moduletable_text th{
    font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align: left;
	width: 100%;
    background: none; 
    color: #006699;
	padding: 2px;
    text-indent: 10px;
	line-height: 22px;
 	border-bottom: none;
	}

#footer{
    clear:both;
}

I know using tables is not ideal, its my first attempt with a CMS and its just a template I downloaded. I normally do it by hand.

Thanks again

gord · 30 Jul 2010 at 12:23

I didn't see it before, but you now have a nested table for the list of items.

That truly is some horrendous mark-up. Re-write your footer code! All you need is a div and a unordered list populating the list elements!

hargi · 30 Jul 2010 at 14:19

PHP:

gord,

I think its Joomla thats doing all that adding the tables and stuff.
The HTML I have is

PHP:

 <?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<!--
author: TemplateDealer.ch
copyright: Creative Commons Lizenz
-->
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

</head>

<body>

				<div id="header_top">
                
                <div id="search">
                 <form action="index.php" method="post" class="search"><input name="searchword" id="searchbox" maxlength="20" alt="Search" class="inputbox" type="text" size="20" value="search..."  onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" /><input type="hidden" name="option" value="com_search" /><input type="hidden" name="task"   value="search" /><input type="hidden" name="Itemid" value="0" /></form>
				</div>
                
                <?php if($this->countModules('user3')) : ?>
                <div id="topnav">
                <jdoc:include type="modules" name="user3" />
                </div>
                <?php endif; ?>
                
                </div>
                

				<div id="header">	
                
				<div onclick="location.href='index.php';" style="cursor: pointer;" id="logo"></div>
                
                <?php if($this->countModules('top')) : ?>
             	<div id="newsflash">
                <jdoc:include type="modules" name="top" style="table"/>
                </div>
                <?php endif; ?>
				
                </div>
                

<div id="bg_top">
                
                
                <div id="user1">
                <jdoc:include type="modules" name="user1" style="table"/>
                </div>
                
                <div id="top_middle">
                </div>
               
                <div id="user2">
                <jdoc:include type="modules" name="user2" style="table"/>
                </div>
				
			
</div>				

<div id="content">		
  
          
                <?php if($this->countModules('left')) : ?>
            	<div id="left">
                <div class="leftrow">
                <jdoc:include type="modules" name="left" style="table"/>
                </div>
            	</div>
          		<?php endif; ?>
                
<div id="content_middle">

            	<div class="main">
				<jdoc:include type="component" />
				</div>
                                
</div>

<!--
The following was added by me upuntil the ?php end
-->
 <?php if($this->countModules('right')) : ?>
            	<div id="right">
                <div class="rightrow">
                <jdoc:include type="modules" name="right" style="table"/>
                </div>
            	</div>
          		<?php endif; ?>

</div>


        
<div id="footer">
                 <jdoc:include type="modules" name="footer" style="table"/>
              <div id="copyright">
				Template Design by: <a href="http://www.templatedealer.ch" title="Templates" target="_blank">TemplateDealer.ch</a>
                </div> 
                                                     
</div>  

                   
  
</body>
</html>

gord · 30 Jul 2010 at 14:30

Find what <jdoc:include type="modules" name="footer" style="table"/> relates to and change it to stop using tables.

Unfortunately I don't use Joomla, so I can't help on the template system specifics.