Header customization quirks

**tiffanyhunter2009** · 17 Jun 2010, 07:03 PM

I am trying to customize my header and the links are showing up if you hover over the spot where they would be but the images are not showing up.

the link to the store is: http://fingerprintdesignllc.com/store/

if you hover over the large blank spot right below the logo you will be able to see the links on the status bar and see what i am talking about.

here is the code i inserted:

tpl_header.php


<?php include("header.htm") ?>



header.htm

<div id="nav_bar">

<ul>

<li><a id="home" href="/" title="Home">Home</a></li>
<li><a id="store" href="/store/" title="Store">Store</a></li>
<li><a id="portfolio" href="/portfolio/" title="Portfolio">Portfolio</a></li>
<li><a id="about" href="/about/" title="About">About</a></li>
<li><a id="contact" href="#" title="Contact Us">Contact Us</a></li>

</ul></div>

style_2.css

/* removes the "bullet" before each list item*/
li {
list-style:none;
float:left;
}
A:link {
color:#000000;
text-decoration: none;
}

A:visited {
color:#000000;
text-decoration: none;
}

A:hover {
color:#000000;
text-decoration: none;
}
a {
outline: none;
}

#home
{
display: block;
width: 220px;
height: 112px;
background: url("images/home_btn.gif") no-repeat 0 0;

}

#home:hover
{
background-position: 0 -112px;
}

#home span
{
display: none;
}

#store
{
display: block;
width: 90px;
height: 112px;
background: url("images/store.gif") no-repeat 0 0;

}

#store:hover
{
background-position: 0 -112px;
}

#store span
{
display: none;
}

#portfolio
{
display: block;
width: 144px;
height: 112px;
background: url("images/portfolio.gif") no-repeat 0 0;

}

#portfolio:hover
{
background-position: 0 -112px;
}

#portfolio span
{
display: none;
}

#about
{
display: block;
width: 132px;
height: 112px;
background: url("images/about.gif") no-repeat 0 0;

}

#about:hover
{
background-position: 0 -112px;
}

#about span
{
display: none;
}

#contact
{
display: block;
width: 268px;
height: 112px;
background: url("images/contact.gif") no-repeat 0 0;

}

#contact:hover
{
background-position: 0 -112px;
}

#contact span
{
display: none;
}

#nav_bar{
height:100px;
}

the nav bar should look as it does on the site's home page:
http://fingerprintdesignllc.com/

thanks in advance for all your help

**kobra** · 17 Jun 2010, 07:22 PM

I do not see any "img src=" code???
Where are the images located - - path??

**schoolboy** · 17 Jun 2010, 08:50 PM

background: url("images/home_btn.gif") no-repeat 0 0;

Load these images into your template's images folder and reference them as:

background: url(../images/home_btn.gif) no-repeat 0 0;

(No need for double quotes).

This may or may not work... but give it a try

**tiffanyhunter2009** · 18 Jun 2010, 01:53 AM

the image source is in the css as a background image. see the css code.

thanks

**kobra** · 18 Jun 2010, 03:02 AM

the image source is in the css as a background image. see the css code.

As the css is large with many references - How about a lead
Post the tag where the image is called

**schoolboy** · 18 Jun 2010, 03:25 AM

It's here Kobra

Code:

background: url(../images/home_btn.gif)

**kobra** · 18 Jun 2010, 04:13 AM

You have
stylesheet.css
style.css
style2.css

Can you explain why??

The btn image is called in style.css in the tag "home"

Code:

#home
{
  display: block;
  width: 220px;
  height: 112px;
  background: url("images/home_btn.gif") no-repeat  0 0;

}

This is fully not within ZenCarts structure

I can not tell what it is you are attempting to do or better yet how

**schoolboy** · 18 Jun 2010, 04:27 AM

Your PAGE SOURCE shows:

Code:

<!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" dir="ltr" lang="en">
<head>
<title>Fingerprint Design, LLC</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="Egg Designs Wall Art Portraits ecommerce, open source, shop, online shopping, egg, designs, egg designs, wall art, wall, art, portraits, custom, unique " />
<meta name="description" content="Fingerprint Design, LLC :  - Egg Designs Wall Art Portraits ecommerce, open source, shop, online shopping, egg, designs, egg designs, wall art, wall, art, portraits, custom, unique" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="author" content="The Zen Cart&trade; Team and others" />
<meta name="generator" content="shopping cart program by Zen Cart&trade;, http://www.zen-cart.com eCommerce" />

<base href="http://fingerprintdesignllc.com/store/" />

<link rel="stylesheet" type="text/css" href="includes/templates/CUSTOM/css/style.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/CUSTOM/css/stylesheet.css" />
</head>

<body id="indexHomeBody">

<div id="mainWrapper">



<!--bof-header logo and navigation display-->

<div id="headerWrapper">
<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
    <li><a href="http://fingerprintdesignllc.com/store/">Home</a></li>

    <li><a href="http://fingerprintdesignllc.com/store/index.php?main_page=login">Log In</a></li>

</ul>
</div>
<div id="navMainSearch"></div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->

<!--bof-branding display-->
<div id="logoWrapper">
    <div id="logo"><a href="http://fingerprintdesignllc.com/store/"><img src="includes/templates/CUSTOM/images/" alt="" /></a></div>
</div>
<br class="clearBoth" />

<!--eof-branding display-->


<!--eof-header logo and navigation display-->

    <!--bof custom nav bar -->
<!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; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style_2.css"/>

<title>Untitled Document</title>
</head>

TWO HTML HEADERS...

Try this...

tpl_header.php

PHP Code:


<!--bof custom nav bar -->
<?php include("my_menu_header.php") ?>

<!--eof custom nav bar -->

my_menu_header.php (making absolutely sure NOT to put any headers in here... just what's below...)

PHP Code:


<div id="nav_bar">
<!--Giving the unordered list a class of nav-links allows us to target it with CSS and not have other unordered lists in the web page affected. Note that the last list item has a class of borderx2, which basically means "border times two"; this is because our PSD web layout mockup had separators in between each navigation link and when we add our CSS styles later on, we&#8217;ll give the last item a 1px border on the left and the right (hence border x 2). -->
<ul>

<li><a id="home" href="/" title="Home"><span>Home</span></a></li>
<li><a id="store" href="/store/" title="Store"><span>Store</span></a></li>
<li><a id="portfolio" href="/portfolio/" title="Portfolio"><span>Portfolio</span></a></li>
<li><a id="about" href="/about/" title="About"><span>About</span></a></li>
<li><a id="contact" href="#" title="Contact Us"><span>Contact Us</span></a></li>

</ul></div><!--end nav_bar -->

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Then... you have a "rogue" stylesheet called "style_2.css#2"... Get rid of it completely.

**tiffanyhunter2009** · 18 Jun 2010, 04:36 AM

Originally Posted by kobra

As the css is large with many references - How about a lead
Post the tag where the image is called

there are 5 tabs in the nav bar so i will reference the "home" button css:

#home
{
display: block;
width: 220px;
height: 112px;
background: url("/images/home_btn.gif") no-repeat 0 0;

}

#home:hover
{
background-position: 0 -112px;
}

#home span
{
display: none;

this works perfectly in HTML and i am new at php and zen cart. i am sorry if i am coming off frustrated but i am frustrated with the code not you guys! thank you so much for helping me with this!!!!

**tiffanyhunter2009** · 18 Jun 2010, 04:45 AM

all stylesheets except style_2.css were already there in the template i downloaded from zencart templates. i added style_2.css just for easy troubleshooting since i didnt know what stylesheet the template was calling. i am using an include tag which may not be the right way to go on this. i am so frustrated i dont even think correct code is going through my head at this point!

Thread: Header customization quirks

Thread Tools

Search Thread

Display

Header customization quirks

Re: Header customization quirks

Re: Header customization quirks

Re: Header customization quirks

Re: Header customization quirks

Re: Header customization quirks

Re: Header customization quirks

Re: Header customization quirks

Re: Header customization quirks

Re: Header customization quirks

Similar Threads

USPS January 17 2016 K8 - Support Quirks

Header customization

Hidden BOM throwing IE into quirks mode

Header Customization

Posting Permissions