Hi, I've been trying to design a template, and I've been running into a problem that I can't seem to fix. I'm trying to use a repeating image on my sidebar and main body background, but each time it seems to overflow and a single stripe of the image is seen at the bottom. You can see this problem at
My Site, and here is my CSS:
Code:
#wrapper {
width: 800px;
padding: 10px;
margin: 0 auto;
}
#header {
width: 800px;
height: 177px;
}
#leftsidebar { width: 227px; float: left;
background-image:url(../images/sidebar_middle.png);
background-repeat:repeat-y;
background-color: #4d4d4d;
margin: 0;
}
#lsbtop {height: 48px; background-image:url(../images/sidebar_top.png); background-repeat:no-repeat;}
#lsbmid {height: auto; width: 210px; padding: 0; padding-left: 10px; }
#lsbbot {height: 33px; background-image:url(../images/sidebar_bottom.png); background-repeat: no-repeat;}
#maincontent { width: 526px; float: left;
background-image:url(../images/body_rep.png);
background-repeat:repeat-y;
background-color: #4d4d4d;
margin: 0;
}
#bodtop {height: 48px; background-image:url(../images/body_top.png); background-repeat:no-repeat;}
#bodmid {height: auto; width: 475px; padding-left: 25px; }
#bodbot {height: 33px; background-image:url(../images/body_bot.png); background-repeat: no-repeat;}
#navibar { height: 70px; width: 780px; background-image:
url('../images/nav_rep.png');
background-repeat: repeat-x;
font-size:18px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#333333;
}
img.left {float:left;}
img.right {float: right;}
/* ###################### LAYOUT SETTINGS ############################## */
/* Add Custom Menus */
ul.navig
{
float:left;
width:800px;
padding:0;
margin:0;
margin-left: -1px;
list-style-type:none;
}
a.men
{
float:left;
text-decoration:none;
color:#FF6600;
padding:01.2em 0.6em;
}
a.men:hover {background-color:#ff3300}
li.navimen{display:inline}
/* Add Custom Menus */
/*##################### NAVIGATION SECTION #####################*/
And Here's my index.php file:
Code:
<?php
/**
* @Template Name:
* @Version: 1.12
* @Package: A Joomla 1.0.X template
* @Copyright: (C) 2007 by Brian Diaz Media 65
* @License: http://www.m65.net/
**/
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
$iso = split( '=', _ISO ); echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php if ($my->id) {initEditor();}?>
<link href="<?php echo "$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css";?>" rel="stylesheet" type="text/css" media="all" />
<link rel="shortcut icon" href="<?php echo "$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/favicon.ico"; ?>" />
<!-- This so you can see the css styles in DW you can delete file once editing Template is complete-->
<link href="css/template_css.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="wrapper">
<div id="header"><img src="images/header.png" alt="Plague Publishing" width="800" height="177" /></div>
<div id="navibar">
<ul class="navig"><img class="left" src="images/nav_left.png" />
<li class="navimen"><a class="men"href="#">Home</a></li>
<li class="navimen"><a class="men"href="#">About</a></li>
<li class="navimen"><a class="men"href="#">eBooks</a></li>
<li class="navimen"><a class="men"href="#">Programs</a></li>
<li class="navimen"><a class="men"href="#">Services</a></li>
<li class="navimen"><a class="men"href="#">Blog</a></li>
<li class="navimen"><a class="men"href="#">Contact</a></li>
<li class="navimen"><a class="men"href="#">Links</a></li>
<li class="navimen"><img class="right" src="images/nav_right.png" /></li>
</ul>
</div>
<div id="leftsidebar">
<div id="lsbtop"></div>
<div id="lsbmid">
<?php if (mosCountModules('left')>0) mosLoadModules('left',-3); ?>
</div>
<div id="lsbbot"></div></div>
<div id="maincontent">
<div id="bodtop"></div>
<div id="bodmid">
<?php mosMainBody(); ?>
</div>
<div id="bodbot"></div>
</div>
</div>
-
</body>
</html>
Any help you could give me would be appreciated! Thanks a lot.