Repeating images

hovan · #1 (**permalink**) 02-14-2008, 09:17 PM

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.

admin · #2 (**permalink**) 02-15-2008, 11:39 AM

Hello hovan,

repeating is tricky with modules and the main body
Modules have there own formatting via the the style type see CSS REF.
table XHTML Rounded -1 -2 -3 module wrappers.
bottom of page:
http://www.m65.net/article-pages-pro...-1-39.html#1_1
You may have to use two images.

AND first page about modules.
http://www.m65.net/articles-joomla!-...la-css-51.html

Also your have having server permissions issues you should check that
if you click on a link you get an error.

Please note I like help when I can but design is not part of our support.

Cheers,
Brian

hovan · #3 (**permalink**) 02-15-2008, 02:42 PM

Quote:

Also your have having server permissions issues you should check that
if you click on a link you get an error.

That's probably because I changed the page from index.php to index_2.php, but I'll check it out. I'll also check out those two links, and sorry for bugging you about a design prob.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode