9 replies [Last post]
ryankn
Offline
newbie
Last seen: 11 years 7 weeks ago
Timezone: GMT-4
Joined: 2008-06-14
Posts: 7
Points: 2

I am editing the css for a preexisting template to better suit my needs. Mostly changing background images and colors, with a little bit of resizing and padding changes (since that's all I really know how to do from just clunking around css code with no instruction). But I ran into the first thing I want to do that I really just can't figure out, inserting a new image. The problem is in this picture:

As you can see the problem is in the corner. I made this image in photoshop to remedy the issue as well as a matching one for the right:

Now the issue is I can't figure out how to place it in the corner. I thought I had it figured out but apparently not. Can anyone help? I tried z-indexes briefly by adding them to the end of the code and I thought I had the padding right. Anyway here is the code for the borders from the template css folder. The stuff I added was div#page-bl and div#page-br (bottom left and bottom right).

/*********************************************************************************************************
layout
*********************************************************************************************************/
 
/* page / shadow
****************************/
div#page-l
{ max-width: 95%; min-width: 760px; padding: 0 0 0 6px; margin: 0 auto; text-align: left; font-size: 0.8em;
line-height: 150%; background: #8A950B url(../images/shadow-left.png) left top repeat-y; }
 
div#page-r
{ padding: 0 6px 0 0; background: #fff url(../images/shadow-right.png) right top repeat-y;}
 
div#page-b
{ height: 6px; line-height: 0; margin: 0 auto; font-size: 1px /*ie*/; background: transparent url(../images/shadow-bottom.png) left bottom repeat-x; }
 
<span style="font-weight:bold">div#page-bl
{ padding: 6px 6px 0 0; background: transparent url(../images/shadow-botleft.png) left bottom no-repeat; }
 
div#page-br
{ padding: 0 6px 6px 0; background: transparent url(../images/shadow-botright.png) right bottom no-repeat; }</span>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

So the bit at the bottom is

So the bit at the bottom is nested inside the element that holds the shadow on the side? You'll need to give the bottom element negative left and right margins then.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ryankn
Offline
newbie
Last seen: 11 years 7 weeks ago
Timezone: GMT-4
Joined: 2008-06-14
Posts: 7
Points: 2

not really sure what you

not really sure what you mean, the margins in there control the distance the page is from the left browser side and the other one doesn't seem to do much.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

It's pretty hard to give

It's pretty hard to give good advice with the small snippet you've provided. A look at the HTML (preferably a link to the page) would help.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ryankn
Offline
newbie
Last seen: 11 years 7 weeks ago
Timezone: GMT-4
Joined: 2008-06-14
Posts: 7
Points: 2

Well it is a css file and it

Well it is a css file and it looks like this in it's entirety. I unfortunately really can't show you the page for various reasons. Again the object is simply to make that little 6x6 pixel corner square show up on the bottom left and bottom right corners of the page so that the shadow around the page looks continuous.

/**
* @version $Id: layout.css 33 2007-09-28 12:16:13Z spook.68 $
* @package Joomla!
* @subpackage 68portal
* @copyright Copyright (c)2007 Axel Wehner. All rights reserved.
* @license GNU/GPL
**/
 
/*********************************************************************************************************
general
*********************************************************************************************************/
 
/* reset */
html, body, div, ul, ol, li, dl, dt, dd, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td
{ margin: 0; padding: 0; }
 
fieldset, img
{ border: 0; }
 
/* now we can start <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/smile.png" title="Smile" alt="Smile" class="smiley-content" /> */
html[xmlns]
{ height: auto; padding-bottom : .01em; }
 
body
{ min-height: 100%; position: relative; font-size: 1em; color: #000; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-align: center; background: #8A950B url(../images/body.png) 0 0 repeat; }
 
/* clearing
****************************/
/* you can find the ie clearing in the iefixes.css */
.clearfix:after, #header:after, #content:after, div.content-modules:after, div.blog_row:after, ul.meta:after, .filter:after,
.contentdescription:after, #footer:after, #main:after, .pagination:after
{ content: "."; display: block; height: 0; line-height: 0; clear: both; visibility: hidden; }
 
#ie_clearing { display: none }
 
.clear
{ clear:both; height: 0; line-height: 1px; }
 
/*********************************************************************************************************
layout
*********************************************************************************************************/
 
/* page / shadow
****************************/
div#page-l
{ max-width: 95%; min-width: 760px; padding: 0 0 0 6px; margin: 0 auto; text-align: left; font-size: 0.8em;
line-height: 150%; background: #8A950B url(../images/shadow-left.png) left top repeat-y; }
 
div#page-r
{ padding: 0 6px 0 0; background: #fff url(../images/shadow-right.png) right top repeat-y;}
 
div#page-b
{ height: 6px; line-height: 0; margin: 0 auto; font-size: 1px /*ie*/; background: transparent url(../images/shadow-bottom.png) left bottom repeat-x; }
 
div#page-bl
{ padding: 6px 6px 0 0; background: transparent url(../images/shadow-botleft.png) left bottom no-repeat; }
 
div#page-br
{ padding: 0 6px 6px 0; background: transparent url(../images/shadow-botright.png) right bottom no-repeat; }
 
 
/* top header
****************************/
div#top-header
{ position: relative; height: 95px; background: url(../images/top-header.png) left bottom repeat-x; border-bottom: 1px solid #fff; }
 
div#top-header h1
{ width: 240px; text-align: center; line-height: normal; margin: 0; padding: 0; }
 
div#top-header form
{ position:absolute; top: 10px; right: 10px; }
 
div#top-header form label
{ position: absolute; top: -999em; left: -999em; }
 
div#top-header form input
{ border: 1px solid #D2DEF0; padding: 0.2em; }
 
 
/* header
****************************/
div#header
{ height: 166px; font-size: 0.85em; line-height: 155%; border-bottom: 1px solid #fff; position: relative; }
 
div#header div#topmod
{ height: 166px; width: 240px; /*float: left;*/ position: absolute; top: 0; left: 0; background: #D2DEF0 url(../images/topmod.png) 0 0 no-repeat; overflow: auto; }
 
div#header div#topmod .article_separator
{ display: none; }
 
/* module layout -> template_css.css */
 
div#header div#image
{ position: relative; left: 241px; margin: 0 241px 0 0; height: 166px; background: url(../images/header-image.png) left 0 repeat-x; }
 
div#header div#image h2#slogan
{ position: absolute; right: 10px; bottom: 5px; margin: 0; color: #fff; font-size: 1.3em; letter-spacing: 0.05em; font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, sans-serif }
 
 
/* main section / content
****************************/
div#content
{ padding: 0 0 3px 0; /* padding for the #page-r background */
background: url(../images/left-column.png) left top repeat-y; }
 
body.right-col div#content,
body.no-col div#content
{ background: #fff; }
 
 
/* left sidebar
****************************/
div#content div#left-sidebar
{ float: left; width: 240px; display: block }
 
 
/* breadcrumb / pathway
****************************/
div#content div#breadcrumb
{ font-size: 0.85em; margin: 0 -10px 10px -9px; color: #fff; padding: 0.6em 0 0.5em 15px;
background: #006633 url(../images/mod-normal.png) 0 0 repeat-y; overflow: hidden; }
 
/* variable module layouts */
body.no-col div#content div#breadcrumb,
body.right-col div#content div#breadcrumb
{ margin: 0 -10px 10px -10px; }
 
/* opera padding fix */
div#content div#breadcrumb.opera
{ padding: 0.5em 0 0.45em 15px; }
 
/* breadcrumb heading */
div#content div#breadcrumb h3
{ float: left; color: #fff; font-size: 1em; margin: 0 0.5em 0 0; text-transform: none; }
 
/* breadcrumb list */
div#content div#breadcrumb ul
{ margin: 0; padding: 0; list-style: none; }
 
div#content div#breadcrumb ul li
{ float: left; margin: 0 0.5em 0 0; font-weight: bold; }
 
/* breadcrumb links */
div#content div#breadcrumb ul li a:link, div#content div#breadcrumb ul li a:visited
{ font-weight: normal; color: #fff; background: url(../images/breadcrumb.gif) 100% 80% no-repeat; padding: 0 10px 0 0; }
 
div#content div#breadcrumb ul li a:hover, div#content div#breadcrumb ul li a:active, div#content div#breadcrumb ul li a:focus
{ color: #fff; text-decoration: none; }
 
 
/* main content
****************************/
div#content div#main
{ margin: 0 10px 0 250px; line-height: 140%;}
 
/* variable module layouts */
body.right-col div#content div#main,
body.no-col div#content div#main
{ margin: 0 10px 0 10px; }
 
div#content div#main div#main-content
{ float: left; width: 68.7%; }
 
/* variable module layouts */
body.left-col div#content div#main div#main-content,
body.no-col div#content div#main div#main-content
{ width: 100%; }
 
div#content div#main div#main-content div.content-modules
{ margin: 0 0 0.5em 0; }
 
div#content div#main div#main-content div.content-modules div.float1
{ float: left; width: 49%; }
 
div#content div#main div#main-content div.content-modules div.float2
{ float: right; width: 49%; }
 
 
/* right sidebar
****************************/
div#content div#main div#right-sidebar
{ margin: 0 0 0 70%; }
 
 
/* footer
****************************/
div#content div#footer
{ font-size: 0.85em; color: #006633; margin: 1em 0 0 241px; padding: 1em;
background: #fff url(../images/footer.png) top left repeat-x; }
 
/* variable module layouts */
body.right-col div#content div#footer,
body.no-col div#content div#footer
{ margin: 1em 0 0 0;}
 
div#content div#footer p
{ margin: 0; float: right; }
 
div#content div#footer p.copyright
{ float: left; margin: 0; }
 
div#content div#footer p img
{ vertical-align: middle; }

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Tyssen wrote:A look at the

Tyssen wrote:

A look at the HTML would help.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

ryankn wrote:Well it is a

ryankn wrote:

Well it is a css file and it looks like this in it's entirety. I unfortunately really can't show you the page for various reasons.

CSS is utterly meaningless without the html it applies to. You are asking folks to read minds, here.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

ryankn
Offline
newbie
Last seen: 11 years 7 weeks ago
Timezone: GMT-4
Joined: 2008-06-14
Posts: 7
Points: 2

This is a template to a

This is a template to a joomla site, it is everything as far as I know (it is one of six css files that all have different functions, this one is called layout and controls the uh, layout), what would you want to see, the html source for the page or some other html file? The source for the page is below, I am sorry for not really knowing anything about this. The site I can show you now because the domain for the real site has been moved (this is a site that is not supposed to be released yet). http://pbs.sjafirst.com/

<!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="en-gb" lang="en-gb" dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="joomla, Joomla" />
  <meta name="description" content="Joomla! - the dynamic portal engine and content management system" />
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
  <title>Welcome to the Frontpage</title>
  <link href="/~anned/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
 
  <link href="/~anned/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
  <link href="/~anned/templates/68portal/favicon.ico" rel="shortcut icon" type="image/x-icon" />
  <script type="text/javascript" src="/~anned/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/~anned/media/system/js/caption.js"></script>
 
  <link rel="stylesheet" href="/~anned/templates/68portal/css/system.css" type="text/css" />
  <link rel="stylesheet" href="/~anned/templates/68portal/css/general.css" type="text/css" />
  <link rel="stylesheet" href="/~anned/templates/68portal/css/layout.css" type="text/css" />
 
  <link rel="stylesheet" href="/~anned/templates/68portal/css/template.css" type="text/css" />
  <link rel="stylesheet" href="/~anned/templates/68portal/css/navigation.css" type="text/css" />
    <!--[if IE]><link rel="stylesheet" href="/~anned/templates/68portal/css/iefixes.css" type="text/css" /><![endif]-->
  <style type="text/css">div#page-l { width: 100em } /* user settings */</style>
</head>
 
<body class="left-n-right-col">
 
<!-- shadow left -->
<div id="page-l">
 
    <!-- shadow right -->
 
    <div id="page-r">
 
        <!-- top header -->
        <div id="top-header">
            <h1>
                                <img src="/~anned/templates/68portal/images/logo.gif" alt="pbsvermont.com" title="pbsvermont.com" />
                            </h1>
 
            <ul id="mainlevel-nav"><li><a href="/~anned/index.php?option=com_content&amp;view=article&amp;id=25&amp;Itemid=28" class="mainlevel-nav" >About Joomla!</a></li><li><a href="/~anned/index.php?option=com_content&amp;view=article&amp;id=22&amp;Itemid=29" class="mainlevel-nav" >Features</a></li><li><a href="/~anned/index.php?option=com_newsfeeds&amp;view=newsfeed&amp;id=1&amp;feedid=1&amp;Itemid=18" class="mainlevel-nav" >News</a></li><li><a href="/~anned/index.php?option=com_content&amp;view=article&amp;id=27&amp;Itemid=30" class="mainlevel-nav" >The Community</a></li></ul>
 
            <form action="index.php" method="post">
	<div class="search">
		<input name="searchword" id="mod_search_searchword" 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='';" />	</div>
	<input type="hidden" name="task"   value="search" />
	<input type="hidden" name="option" value="com_search" />
</form>
        </div>
        <!-- //top header -->
 
        <!-- header -->
        <div id="header">
 
            <!-- topmodule -->
            <div id="topmod" >
 
                                		<div class="moduletable heading">
						<h3>Newsflash</h3>
 
 
 
 
<div class="newsflash">
 
Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web site. Manage all your content from the best CMS admin interface and in virtually any language you speak.</div>		</div>
 
 
 
            </div>
            <!-- //topmodule -->
 
            <!-- headerimage -->
            <div id="image">
                                <h2 id="slogan">
                    Vermont PBS - Bringing out the BEST in all of us...                </h2>
 
                            </div>
            <!-- //headerimage -->
 
        </div>
        <!-- //header -->
 
        <!-- content -->
        <div id="content">
 
                        <!-- left sidebar -->
 
            <div id="left-sidebar">
                		<div class="moduletable_menu heading">
						<h3>Main Menu</h3>
						<ul class="menu"><li id="current" class="first active item1"><a href="http://67.18.17.146/~anned/"><span>Home</span></a></li><li class="parent item27"><a href="/~anned/index.php?option=com_content&amp;view=article&amp;id=19&amp;Itemid=27"><span>Joomla! Overview</span></a></li><li class="item2"><a href="/~anned/index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=2"><span>Joomla! License</span></a></li><li class="item37"><a href="/~anned/index.php?option=com_content&amp;view=section&amp;id=4&amp;Itemid=37"><span>More about Joomla!</span></a></li><li class="item41"><a href="/~anned/index.php?option=com_content&amp;view=section&amp;id=3&amp;Itemid=41"><span>FAQ</span></a></li><li class="item50"><a href="/~anned/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=1&amp;Itemid=50"><span>The News</span></a></li><li class="item48"><a href="/~anned/index.php?option=com_weblinks&amp;view=categories&amp;Itemid=48"><span>Web Links</span></a></li><li class="last item49"><a href="/~anned/index.php?option=com_newsfeeds&amp;view=categories&amp;Itemid=49"><span>News Feeds</span></a></li></ul>		</div>
 
			<div class="moduletable_menu heading">
						<h3>Resources</h3>
						<ul class="menu"><li class="first item11"><a href="http://www.joomla.org"><span>Joomla! Home</span></a></li><li class="item12"><a href="http://forum.joomla.org"><span>Joomla! Forums</span></a></li><li class="item13"><a href="http://help.joomla.org"><span>Joomla! Help</span></a></li><li class="item14"><a href="http://www.opensourcematters.org"><span>OSM Home</span></a></li><li class="last item15"><a href="/~anned/administrator/"><span>Administrator</span></a></li></ul>		</div>
			<div class="moduletable_menu heading">
						<h3>Key Concepts</h3>
 
						<ul class="menu"><li class="first item40"><a href="/~anned/index.php?option=com_content&amp;view=article&amp;id=26&amp;Itemid=40"><span>Extensions</span></a></li><li class="item38"><a href="/~anned/index.php?option=com_content&amp;view=article&amp;id=24&amp;Itemid=38"><span>Content Layouts</span></a></li><li class="last item43"><a href="/~anned/index.php?option=com_content&amp;view=article&amp;id=43&amp;Itemid=43"><span>Example Pages</span></a></li></ul>		</div>
			<div class="moduletable heading">
						<h3>Login Form</h3>
 
<form action="index.php" method="post" name="form-login" id="form-login" >
		<fieldset class="input">
	<p id="form-login-username">
 
		<label for="username">Username</label><br />
		<input name="username" id="username" type="text" class="inputbox" alt="username" size="18" />
	</p>
	<p id="form-login-password">
		<label for="passwd">Password</label><br />
		<input type="password" name="passwd" id="passwd" class="inputbox" size="18" alt="password" />
	</p>
		<p id="form-login-remember">
 
		<label for="remember">Remember Me</label>
		<input type="checkbox" name="remember" id="remember" class="inputbox" value="yes" alt="Remember Me" />
	</p>
		<input type="submit" name="Submit" class="button" value="Login" />
	</fieldset>
	<ul>
		<li class="password">
			<a href="/~anned/index.php?option=com_user&amp;view=reset">
 
			Forgot your password?			</a>
		</li>
		<li class="username">
			<a href="/~anned/index.php?option=com_user&amp;view=remind">
			Forgot your username?			</a>
		</li>
				<li class="register">
			<a href="/~anned/index.php?option=com_user&amp;task=register">
 
				Create an account			</a>
		</li>
			</ul>
 
	<input type="hidden" name="option" value="com_user" />
	<input type="hidden" name="task" value="login" />
	<input type="hidden" name="return" value="aHR0cDovLzY3LjE4LjE3LjE0Ni9+YW5uZWQv" />
	<input type="hidden" name="616dec8988d544c59b46440893650cdc" value="1" />
</form>
		</div>
 
 
            </div>
            <!-- //left sidebar -->
 
            <!-- main -->
            <div id="main">
 
                <!-- breadcrumbs -->
                <div id="breadcrumb" >
                    <h3 class="here">You are here</h3>
 
 
<ul class="breadcrumbs pathway">
	<li>Home</li>
 
</ul>
                </div>
                <!-- //breadcrumbs -->
 
                <!-- main content -->
                <div id="main-content">
 
                                        <!-- content modules -->
 
                    <div class="content-modules">
 
                                                <div class="float1">
                            		<div class="module heading">
			<div>
								<h3>Latest News</h3>
								<ul class="latestnews">
	<li class="latestnews">
		<a href="/~anned/index.php?option=com_content&amp;view=article&amp;id=24:content-layouts&amp;catid=29:the-cms&amp;Itemid=38" class="latestnews">
 
			Content Layouts</a>
	</li>
	<li class="latestnews">
		<a href="/~anned/index.php?option=com_content&amp;view=article&amp;id=27:the-joomla-community&amp;catid=30:the-community&amp;Itemid=30" class="latestnews">
			The Joomla! Community</a>
	</li>
	<li class="latestnews">
		<a href="/~anned/index.php?option=com_content&amp;view=article&amp;id=1:welcome-to-joomla&amp;catid=1:latest-news&amp;Itemid=50" class="latestnews">
 
			Welcome to Joomla!</a>
	</li>
	<li class="latestnews">
		<a href="/~anned/index.php?option=com_content&amp;view=article&amp;id=42:newsflash-4&amp;catid=3:newsflash" class="latestnews">
			Newsflash 4</a>
	</li>
	<li class="latestnews">
		<a href="/~anned/index.php?option=com_content&amp;view=article&amp;id=41:newsflash-5&amp;catid=3:newsflash" class="latestnews">
 
			Newsflash 5</a>
	</li>
</ul>			</div>
		</div>
 
                        </div>
 
                                                <div class="float2">
                            		<div class="module heading">
			<div>
 
								<h3>Popular</h3>
								<ul class="mostread">
	<li class="mostread">
		<a href="/~anned/index.php?option=com_content&amp;view=article&amp;id=19:joomla-overview&amp;catid=29:the-cms&amp;Itemid=27" class="mostread">
			Joomla! Overview</a>
	</li>
	<li class="mostread">
		<a href="/~anned/index.php?option=com_content&amp;view=article&amp;id=26:extensions&amp;catid=29:the-cms&amp;Itemid=40" class="mostread">
 
			Extensions</a>
	</li>
	<li class="mostread">
		<a href="/~anned/index.php?option=com_content&amp;view=article&amp;id=5:joomla-license-guidelines&amp;catid=25:the-project&amp;Itemid=2" class="mostread">
			Joomla! License Guidelines</a>
	</li>
	<li class="mostread">
		<a href="/~anned/index.php?option=com_content&amp;view=article&amp;id=1:welcome-to-joomla&amp;catid=1:latest-news&amp;Itemid=50" class="mostread">
 
			Welcome to Joomla!</a>
	</li>
	<li class="mostread">
		<a href="/~anned/index.php?option=com_content&amp;view=article&amp;id=22:whats-new-in-15&amp;catid=29:the-cms&amp;Itemid=29" class="mostread">
			What's New In 1.5?</a>
	</li>
</ul>			</div>
		</div>
 
 
                        </div>
 
                    </div>
                    <!-- //content modules -->
 
                    <!-- component -->
 
 
<div class="blog">
 
		<h1 class="componentheading">
        Welcome to the Frontpage	</h1>
 
 
 
		<div class="leading">
 
 
 
<div class="article article1">
 
	    <ul class="buttonheading">
					<li class="pdf">
			<a href="/~anned/index.php?view=article&amp;catid=1:latest-news&amp;id=1:welcome-to-joomla&amp;format=pdf" title="PDF" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/~anned/templates/68portal/images/pdf_button.png" alt="PDF"  /></a>		</li>
 
				<li class="print">
			<a href="/~anned/index.php?view=article&amp;catid=1:latest-news&amp;id=1:welcome-to-joomla&amp;tmpl=component&amp;print=1&amp;page=" title="Print" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;"><img src="/~anned/templates/68portal/images/printButton.png" alt="Print"  /></a>		</li>
 
				<li class="email">
 
			<a href="/~anned/index.php?option=com_mailto&amp;tmpl=component&amp;link=aHR0cDovLzY3LjE4LjE3LjE0Ni9+YW5uZWQvaW5kZXgucGhwP3ZpZXc9YXJ0aWNsZSZpZD0xOndlbGNvbWUtdG8tam9vbWxh" title="E-mail" onclick="window.open(this.href,'win2','width=400,height=300,menubar=yes,resizable=yes'); return false;"><img src="/~anned/templates/68portal/images/emailButton.png" alt="E-mail"  /></a>		</li>
		    	</ul>
 
		<h2 class="contentheading">
					Welcome to Joomla!			</h2>
 
 
 
 
	<ul class="meta">
 
 
    			<li class="date createdate">
			<small>Thursday, 12 October 2006 10:00</small>
 
		</li>
 
    			<li class="date modifydate">
			<small>Last Updated ( Thursday, 08 November 2007 12:06 )</small>
		</li>
 
				<li class="author">
			<small>Written by Ryan K.</small>
		</li>
 
			</ul>
 
 
	<!-- article content -->
	<div align="left"><strong>Joomla! is a free open source framework and content publishing system designed for quickly creating highly interactive multi-language Web sites, online communities, media portals, blogs and eCommerce applications. <br /></strong></div><p><strong><br /></strong><img src="/~anned/images/stories/powered_by.png" border="0" alt="Joomla! Logo" title="Example Caption" hspace="6" vspace="0" width="165" height="68" align="left" />Joomla! provides an easy-to-use graphical user interface that simplifies the management and publishing of large volumes of content including HTML, documents, and rich media.  Joomla! is used by organisations of all sizes for Public Web sites, Intranets, and Extranets and is supported by a community of thousands of users. </p>	<!-- //article content -->
 
    	<p class="readmore">
		<a href="/~anned/index.php?option=com_content&amp;view=article&amp;id=1:welcome-to-joomla&amp;catid=1:latest-news&amp;Itemid=50" class="readon">
							Read more: Welcome to Joomla!					</a>
	</p>
 
 
</div>
		</div>
 
 
	<div class="rowsep leadingsep clear"></div>
 
 
 
		<div class="blog_row cols2">
 
 
			<div class="col0">
 
 
<div class="article article6">
 
	    <ul class="buttonheading">
					<li class="pdf">
			<a href="/~anned/index.php?view=article&amp;catid=1:latest-news&amp;id=6:we-are-volunteers&amp;format=pdf" title="PDF" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/~anned/templates/68portal/images/pdf_button.png" alt="PDF"  /></a>		</li>
 
				<li class="print">
			<a href="/~anned/index.php?view=article&amp;catid=1:latest-news&amp;id=6:we-are-volunteers&amp;tmpl=component&amp;print=1&amp;page=" title="Print" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;"><img src="/~anned/templates/68portal/images/printButton.png" alt="Print"  /></a>		</li>
 
				<li class="email">
			<a href="/~anned/index.php?option=com_mailto&amp;tmpl=component&amp;link=aHR0cDovLzY3LjE4LjE3LjE0Ni9+YW5uZWQvaW5kZXgucGhwP3ZpZXc9YXJ0aWNsZSZpZD02OndlLWFyZS12b2x1bnRlZXJz" title="E-mail" onclick="window.open(this.href,'win2','width=400,height=300,menubar=yes,resizable=yes'); return false;"><img src="/~anned/templates/68portal/images/emailButton.png" alt="E-mail"  /></a>		</li>
 
		    	</ul>
 
		<h2 class="contentheading">
					We are Volunteers			</h2>
 
 
 
 
	<ul class="meta">
 
 
    			<li class="date createdate">
			<small>Wednesday, 07 July 2004 09:54</small>
		</li>
 
 
    			<li class="date modifydate">
			<small>Last Updated ( Thursday, 08 November 2007 12:10 )</small>
		</li>
 
				<li class="author">
			<small>Written by Ryan K.</small>
		</li>
 
			</ul>
 
 
	<!-- article content -->
	<p>The Joomla! Core Team consists of volunteer developers, designers, administrators and managers who, together with a large range of Work Groups of dedicated community members have taken Joomla! to new heights in its relatively short life. This well-oiled machine is often copied but never surpassed.  Joomla! has some wonderfully talented people taking Open Source concepts to the forefront of industry standards.  Joomla! 1.5 is a major leap forward and represents the most exciting Joomla! release in the history of the project. </p>	<!-- //article content -->
 
    	<p class="readmore">
		<a href="/~anned/index.php?option=com_content&amp;view=article&amp;id=6:we-are-volunteers&amp;catid=1:latest-news&amp;Itemid=50" class="readon">
							Read more: We are Volunteers					</a>
	</p>
 
 
</div>
			</div>
 
 
			<div class="col1">
 
 
<div class="article article7">
 
	    <ul class="buttonheading">
					<li class="pdf">
			<a href="/~anned/index.php?view=article&amp;catid=1:latest-news&amp;id=7:stick-to-the-code&amp;format=pdf" title="PDF" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/~anned/templates/68portal/images/pdf_button.png" alt="PDF"  /></a>		</li>
 
				<li class="print">
 
			<a href="/~anned/index.php?view=article&amp;catid=1:latest-news&amp;id=7:stick-to-the-code&amp;tmpl=component&amp;print=1&amp;page=" title="Print" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;"><img src="/~anned/templates/68portal/images/printButton.png" alt="Print"  /></a>		</li>
 
				<li class="email">
			<a href="/~anned/index.php?option=com_mailto&amp;tmpl=component&amp;link=aHR0cDovLzY3LjE4LjE3LjE0Ni9+YW5uZWQvaW5kZXgucGhwP3ZpZXc9YXJ0aWNsZSZpZD03OnN0aWNrLXRvLXRoZS1jb2Rl" title="E-mail" onclick="window.open(this.href,'win2','width=400,height=300,menubar=yes,resizable=yes'); return false;"><img src="/~anned/templates/68portal/images/emailButton.png" alt="E-mail"  /></a>		</li>
		    	</ul>
 
		<h2 class="contentheading">
					Stick to the Code!			</h2>
 
 
 
 
	<ul class="meta">
 
 
    			<li class="date createdate">
			<small>Wednesday, 07 July 2004 12:00</small>
		</li>
 
    			<li class="date modifydate">
			<small>Last Updated ( Sunday, 25 November 2007 22:37 )</small>
		</li>
 
				<li class="author">
 
			<small>Written by Ryan K.</small>
		</li>
 
			</ul>
 
 
	<!-- article content -->
	To ensure this code release, Wilco Jansen resorted to sending rum to joint lead-developer Johan Janssens.  Johan, who's had a penchant for rum ever since the first "Pirate's of the Caribbean" movie screened, took the bait, mixed it with Cola, and here we are with our latest 1.5 release.  It looks like pirate talk will figure quite a lot in future Joomla! development! 	<!-- //article content -->
 
    	<p class="readmore">
		<a href="/~anned/index.php?option=com_content&amp;view=article&amp;id=7:stick-to-the-code&amp;catid=1:latest-news&amp;Itemid=50" class="readon">
 
							Read more: Stick to the Code!					</a>
	</p>
 
</div>
			</div>
 
 
		</div>
 
 
		<div class="blog_row cols2">
 
 
			<div class="col0">
 
 
 
<div class="article article14">
 
	    <ul class="buttonheading">
					<li class="pdf">
			<a href="/~anned/index.php?view=article&amp;catid=31:general&amp;id=14:what-is-the-ftp-layer-for&amp;format=pdf" title="PDF" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/~anned/templates/68portal/images/pdf_button.png" alt="PDF"  /></a>		</li>
 
				<li class="print">
			<a href="/~anned/index.php?view=article&amp;catid=31:general&amp;id=14:what-is-the-ftp-layer-for&amp;tmpl=component&amp;print=1&amp;page=" title="Print" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;"><img src="/~anned/templates/68portal/images/printButton.png" alt="Print"  /></a>		</li>
 
				<li class="email">
 
			<a href="/~anned/index.php?option=com_mailto&amp;tmpl=component&amp;link=aHR0cDovLzY3LjE4LjE3LjE0Ni9+YW5uZWQvaW5kZXgucGhwP3ZpZXc9YXJ0aWNsZSZpZD0xNDp3aGF0LWlzLXRoZS1mdHAtbGF5ZXItZm9y" title="E-mail" onclick="window.open(this.href,'win2','width=400,height=300,menubar=yes,resizable=yes'); return false;"><img src="/~anned/templates/68portal/images/emailButton.png" alt="E-mail"  /></a>		</li>
		    	</ul>
 
		<h2 class="contentheading">
					What is the FTP layer for?			</h2>
 
 
 
 
	<ul class="meta">
 
 
    			<li class="date createdate">
			<small>Friday, 06 October 2006 21:27</small>
 
		</li>
 
    			<li class="date modifydate">
			<small>Last Updated ( Thursday, 03 May 2007 09:39 )</small>
		</li>
 
				<li class="author">
			<small>Written by Ryan K.</small>
		</li>
 
			</ul>
 
 
	<!-- article content -->
	<p>The FTP Layer allows file operations (such as installing Extensions or updating the main configuration file) without having to make all the folders and files writable. This has been an issue on Linux and other Unix based platforms in respect of file permissions. This makes the site admin's life a lot easier and increases security of the site.</p><p>You can check the write status of relevent folders by going to ''Help-&gt;System Info" and then in the sub-menu to "Directory Permissions". With the FTP Layer enabled even if all directories are red, Joomla! will operate smoothly.</p><p>NOTE: the FTP layer is not required on a Windows host/server. </p>	<!-- //article content -->
 
 
</div>
			</div>
 
 
			<div class="col1">
 
 
 
<div class="article article16">
 
	    <ul class="buttonheading">
					<li class="pdf">
			<a href="/~anned/index.php?view=article&amp;catid=28:current-users&amp;id=16:only-one-edit-window-how-do-i-create-read-more&amp;format=pdf" title="PDF" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/~anned/templates/68portal/images/pdf_button.png" alt="PDF"  /></a>		</li>
 
				<li class="print">
			<a href="/~anned/index.php?view=article&amp;catid=28:current-users&amp;id=16:only-one-edit-window-how-do-i-create-read-more&amp;tmpl=component&amp;print=1&amp;page=" title="Print" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;"><img src="/~anned/templates/68portal/images/printButton.png" alt="Print"  /></a>		</li>
 
				<li class="email">
 
			<a href="/~anned/index.php?option=com_mailto&amp;tmpl=component&amp;link=aHR0cDovLzY3LjE4LjE3LjE0Ni9+YW5uZWQvaW5kZXgucGhwP3ZpZXc9YXJ0aWNsZSZpZD0xNjpvbmx5LW9uZS1lZGl0LXdpbmRvdy1ob3ctZG8taS1jcmVhdGUtcmVhZC1tb3Jl" title="E-mail" onclick="window.open(this.href,'win2','width=400,height=300,menubar=yes,resizable=yes'); return false;"><img src="/~anned/templates/68portal/images/emailButton.png" alt="E-mail"  /></a>		</li>
		    	</ul>
 
		<h2 class="contentheading">
					Only one edit window! How do I create &quot;Read more...&quot;?			</h2>
 
 
 
 
	<ul class="meta">
 
 
    			<li class="date createdate">
 
			<small>Friday, 06 October 2006 19:29</small>
		</li>
 
    			<li class="date modifydate">
			<small>Last Updated ( Thursday, 08 November 2007 11:03 )</small>
		</li>
 
				<li class="author">
			<small>Written by Ryan K.</small>
 
		</li>
 
			</ul>
 
 
	<!-- article content -->
	<p>This is now implemented by inserting a <strong>Read more...</strong> tag (the button is located below the editor area) a dotted line appears in the edited text showing the split location for the <em>Read more....</em> A new Plugin takes care of the rest.</p><p>It is worth mentioning that this does not have a negative effect on migrated data from older sites. The new implementation is fully backward compatible.</p>	<!-- //article content -->
 
 
</div>
			</div>
 
 
		</div>
 
 
 
 
</div>
 
					<!-- //component -->
 
                </div>
 
                <!-- //main content -->
 
                                <!-- right sidebar -->
                <div id="right-sidebar">
                    		<div class="module heading">
			<div>
								<h3>Polls</h3>
								<form class="poll poll" action="index.php" method="post" name="form2">
	<h5>Joomla! is used for?</h5>
 
    <ol>
				<li class="sectiontableentry2">
			<input type="radio" name="voteid" id="voteid1" value="1" alt="1" />
            <label for="voteid1">Community Sites</label>
		</li>
				<li class="sectiontableentry1">
			<input type="radio" name="voteid" id="voteid2" value="2" alt="2" />
            <label for="voteid2">Public Brand Sites</label>
 
		</li>
				<li class="sectiontableentry2">
			<input type="radio" name="voteid" id="voteid3" value="3" alt="3" />
            <label for="voteid3">eCommerce</label>
		</li>
				<li class="sectiontableentry1">
			<input type="radio" name="voteid" id="voteid4" value="4" alt="4" />
            <label for="voteid4">Blogs</label>
 
		</li>
				<li class="sectiontableentry2">
			<input type="radio" name="voteid" id="voteid5" value="5" alt="5" />
            <label for="voteid5">Intranets</label>
		</li>
				<li class="sectiontableentry1">
			<input type="radio" name="voteid" id="voteid6" value="6" alt="6" />
            <label for="voteid6">Photo and Media Sites</label>
 
		</li>
				<li class="sectiontableentry2">
			<input type="radio" name="voteid" id="voteid7" value="7" alt="7" />
            <label for="voteid7">All of the Above!</label>
		</li>
			</ol>
	<div class="buttons">
		<input type="submit" name="task_button" class="button send" value="Vote" />
 
		<input type="button" name="option"  class="button result" value="Results" onclick="document.location.href='/~anned/index.php?option=com_poll&amp;id=14:joomla-is-used-for'" />
	</div>
	<input type="hidden" name="option" value="com_poll" />
	<input type="hidden" name="task" value="vote" />
	<input type="hidden" name="id" value="14" />
	<input type="hidden" name="616dec8988d544c59b46440893650cdc" value="1" />
</form>			</div>
		</div>
			<div class="module heading">
 
			<div>
								<h3>Who's Online</h3>
								 We have&nbsp;1 guest&nbsp;online			</div>
		</div>
			<div class="module_text heading">
			<div>
								<h3>Advertisement</h3>
 
 
<div class="bannergroup_text">
 
	<p class="bannerheader">Featured Links:</p>
 
<ul>
	<li class="banneritem_text">
		<a href="/~anned/index.php?option=com_banners&amp;task=click&amp;bid=3" target="_blank">Joomla!</a>
<br/>
Joomla! The most popular and widely used Open Source CMS Project in the world.	</li>
	<li class="banneritem_text">
 
		<a href="/~anned/index.php?option=com_banners&amp;task=click&amp;bid=4" target="_blank">JoomlaCode</a>
<br/>
JoomlaCode, development and distribution made easy.	</li>
	<li class="banneritem_text">
		<a href="/~anned/index.php?option=com_banners&amp;task=click&amp;bid=5" target="_blank">Joomla! Extensions</a>
<br/>
Joomla! Components, Modules, Plugins and Languages by the bucket load.	</li>
	<li class="banneritem_text">
		<a href="/~anned/index.php?option=com_banners&amp;task=click&amp;bid=6" target="_blank">Joomla! Shop</a>
 
<br/>
For all your Joomla! merchandise.	</li>
</ul>
	<p class="bannerfooter_text">
		 <a href="http://www.joomla.org">Ads by Joomla!</a>	</p>
</div>			</div>
		</div>
 
                </div>
                <!-- //right sidebar -->
 
 
            </div>
            <!-- //main -->
 
                        <!-- footer -->
            <div id="ie_clearing"> </div>
            <div id="footer">
                                <p class="copyright">
                    © 2007 Copyright by xxx                </p>
 
 
                                <p class="joomla">
                    Powered by <a href="http://www.joomla.org"><img src="/~anned/templates/68portal/images/joomla.gif" alt="Joomla! CMS" /></a>
                </p>
                            </div>
            <!-- //footer -->
 
        </div>
        <!-- //content -->
 
        <div id="page-b">&nbsp;</div>
 
    </div>
    <!-- //shadow right -->
 
</div>
<!-- //shadow left -->
 
 
 
</body>
</html>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

It's like I said at the very

It's like I said at the very beginning:

div#page-b { position: relative; margin: 0 -3px }

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ryankn
Offline
newbie
Last seen: 11 years 7 weeks ago
Timezone: GMT-4
Joined: 2008-06-14
Posts: 7
Points: 2

Wow, I added those two tags

Wow, I added those two tags and that did it perfectly. I didn't think it would be that simple. I really just didn't know what you were saying to do before. Thank you for the help.