CSS Question - Multiple Background Images

[fierystorm]

Hey Glenn,

No worries, I just returned myself. Trying to figure this out now though

Thanks again!

[gjh42]

"I had attempted to add a div line by this method:

<div id="navEZPagesTopRight">
</div>

inside the ez header nav bar within the tpl_header.php file."

How about posting that section of the file as modified, so we can see exactly what you did? Use [php] and [/php] tags around the code.

[fierystorm]

Hey Glenn,

I've attempted to do work the file a couple of times now but the 'div' keeps either cutting my image in half and not repeating it or adding a new line. Here is my current code which cuts the image in half horizontally and not adds the code across - hopefully I am posting the code as you asked.

<?php
/**
 * Page Template
 *
 * Displays EZ-Pages Header-Bar content.<br />
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_ezpages_bar_header.php 3377 2006-04-05 04:43:11Z ajeh $
 */

  /**
   * require code to show EZ-Pages list
   */
  include(DIR_WS_MODULES . zen_get_module_directory('ezpages_bar_header.php'));
?>
<?php if (sizeof($var_linksList) >= 1) { ?>
<div id="navEZPagesTop">
<div id="navEZPagesTopRight">
<?php for ($i=1, $n=sizeof($var_linksList); $i<=$n; $i++) {  ?>
  <a href="<?php echo $var_linksList[$i]['link']; ?>"><?php echo $var_linksList[$i]['name']; ?></a><?php echo ($i < $n ? EZPAGES_SEPARATOR_HEADER : '') . "\n"; ?>
<?php } // end FOR loop ?>
</div>
<?php } ?>

I also added an entry into my css just underneath the current entry. Here is both the original and the one I added:

#navEZPagesTop {
background-color: #abbbd3;
background-image: url(../images/side_top_heading_5.gif);
background-repeat: repeat-x;
background-position: top left;
min-height: 20px;
font-size: 1.10em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

#navEZPagesTopRight {
background-color: #abbbd3;
background-image: url(../images/tile_back1.gif);
background-repeat: no-repeat;
background-position: top right;
font-size: 1.10em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

Thanks again!

[gjh42]

The original file has

<?php if (sizeof($var_linksList) >= 1) { ?>
<div id="navEZPagesTop">
<?php for ($i=1, $n=sizeof($var_linksList); $i<=$n; $i++) {  ?>
  <a href="<?php echo $var_linksList[$i]['link']; ?>"><?php echo $var_linksList[$i]['name']; ?></a><?php echo ($i < $n ? EZPAGES_SEPARATOR_HEADER : '') . "\n"; ?>
<?php } // end FOR loop ?>
</div>
<?php } ?>

so your added div should look like

<?php if (sizeof($var_linksList) >= 1) { ?>
<div id="navEZPagesTop">
<div id="navEZPagesTopRight"> 
<?php for ($i=1, $n=sizeof($var_linksList); $i<=$n; $i++) {  ?>
  <a href="<?php echo $var_linksList[$i]['link']; ?>"><?php echo $var_linksList[$i]['name']; ?></a><?php echo ($i < $n ? EZPAGES_SEPARATOR_HEADER : '') . "\n"; ?>
<?php } // end FOR loop ?>
</div>
</div>
<?php } ?>

#navEZPagesTop {
background-color: #abbbd3;
background-image: url(../images/side_top_heading_5.gif);
background-repeat: repeat-x;
background-position: top left;
min-height: 20px;
font-size: 1.10em;
font-weight: bold;
margin: 0em;
padding: 0.5em;/*you don't want uniform padding - only on one side*/
}

#navEZPagesTopRight {
background-color: #abbbd3;/*this might cover some of the first bg image, depending on exactly how you have the parts arranged*/
background-image: url(../images/tile_back1.gif);
background-repeat: no-repeat;
background-position: top right;
font-size: 1.10em;/*this will double the size effect - eliminate this one*/
font-weight: bold;/*inherited - unnecessary*/
margin: 0em;
padding: 0.5em;
}

[fierystorm]

Hey Glenn,

Thanks for that information. It worked great - until I attempted to add the left corner. Now, both of my side corners are cut off horizontally in the middle. I'm convinced it has something to do with the CSS settings and I've taken a day to try and figure things out but I keep running into snags. Mind checking my 'math' for me? It's probably something so simple it's ridiculous, but no matter how much I play with the settings, I can only get the right side and top ones to work correctly.

This is the entry I made in my tpl_ezpages_bar_header.php based on what I believe you were trying to show me.

<?php if (sizeof($var_linksList) >= 1) { ?>
<div id="navEZPagesTop">
<div id="navEZPagesTopRight"> 
<div id="navEZPagesTopLeft"> 
<?php for ($i=1, $n=sizeof($var_linksList); $i<=$n; $i++) {  ?>
  <a href="<?php echo $var_linksList[$i]['link']; ?>"><?php echo $var_linksList[$i]['name']; ?></a><?php echo ($i < $n ? EZPAGES_SEPARATOR_HEADER : '') . "\n"; ?>
<?php } // end FOR loop ?>
</div>
</div>
</div>
<?php } ?>

And here is the CSS which I'm convinced is the culprit due to where I believe I messed up. I 'think' it has something to do with padding settings.

#navEZPagesTop {
	background-color: #abbbd3;
	background-image: url(../images/side_top_heading_5.gif);
	background-repeat: repeat-x;
	background-position: center left;
	min-height: 30px;
	font-size: 1.10em;
	font-weight: bold;
	margin: 0.0em;
	padding-top: 0.0em;
	}
	
#navEZPagesTopRight {
	background-image: url(../images/tile_back1.gif);
	background-repeat: no-repeat;
	background-position: top right;
	margin: 0em;
	padding-right: 0.5em;
	}

#navEZPagesTopLeft {
	background-image: url(../images/tile_back2.gif);
	background-repeat: no-repeat;
	background-position: top left;
	margin: 0em;
	padding-left: 0.0em;
	}

Thanks again, Glenn, for your help and patience! I know I almost have it!

[gjh42]

The problem would most likely be in the padding for various elements. I don't have time right now to look at it - be back later.

[fierystorm]

Hey Glenn,

Yep I'm convinced it has something to do with the padding but I'm still stumped on the correction setup. I'm going to keep at it though

Thanks again, Glenn! I'm looking forward to figuring this out

[gjh42]

There's nothing inherently wrong with the divs or their styling as you show it. I would have to see your site to know exactly what the images look like and how they are not working.

If the problem is that the repeated bg is taller than the ends, that would probably be due to the
min-height: 30px;
being in the outermost div. This allows the inner ones to be only as tall as the content requires. Put it in the innermost div so it holds them all open the same.

[fierystorm]

Hey Glenn,

You were spot on! I did what you suggested and it worked perfectly!! You're awesome, Glenn!!

So, for anyone else who might be interested now or later... the following is what Glenn showed me to do.

In my tpl_ezpages_bar_header.php file (as I was attempting to do this within my ezpages header bar), the following changes were made:

  include(DIR_WS_MODULES . zen_get_module_directory('ezpages_bar_header.php'));
?>
<?php if (sizeof($var_linksList) >= 1) { ?>
<div id="navEZPagesTop">
<div id="navEZPagesTopRight"> (<----added this)
<div id="navEZPagesTopLeft">  (<----added this)
<?php for ($i=1, $n=sizeof($var_linksList); $i<=$n; $i++) {  ?>
  <a href="<?php echo $var_linksList[$i]['link']; ?>"><?php echo $var_linksList[$i]['name']; ?></a><?php echo ($i < $n ? EZPAGES_SEPARATOR_HEADER : '') . "\n"; ?>
<?php } // end FOR loop ?>
</div>
</div> (<----added this)
</div>(<----added this)
<?php } ?>

And in my CSS file for my template, I made these changes by adding additional entries that corresponded to my php file:

#navEZPagesTop {
	background-color: #abbbd3;
	background-image: url(../images/side_top_heading_5.gif);
	background-repeat: repeat-x;
	background-position: center left;
	min-height: 30px;
	font-size: 1.10em;
	font-weight: bold;
	margin: 0.0em;
	padding-top: 0.0em;
	}
	
#navEZPagesTopRight {
	background-image: url(../images/tile_back1.gif);
	background-repeat: no-repeat;
	background-position: top right;
	min-height: 30px;
	margin: 0em;
	padding-right: 0.5em;
	}

#navEZPagesTopLeft {
	background-image: url(../images/tile_back2.gif);
	background-repeat: no-repeat;
	background-position: top left;
	min-height: 30px;
	margin: 0em;
	padding-left: 0.0em;
	}

Works great!