Banner Along Top - Inserting Images/Buttons.

[timmle]

I have commented out the breadcrumb and left the My Account, Carts Content and Checkout along the top as i am replacing those with images instead, along with about 5 other links in that banner.

 

As the table was already there to use i thought i would take advantage of it and use it as the table and just insert 8 100px wide buttons along it side by side with links corresponding to different pages.

 

This is the code from the header...

 

<table border="0" width="100%" cellspacing="0" cellpadding="0">

<tr class="headerNavigation">

<td class="headerNavigation"><?php // echo $breadcrumb->trail(' » '); ?></td>

<td align="right" class="headerNavigation"><?php if (tep_session_is_registered('customer_id')) { ?><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_LOGOFF; ?></a>  |  <?php } ?><a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a><a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a><a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CHECKOUT; ?></a></td>

</tr>

</table>

 

In the Languages/english.php file i have replaced the text that appears on request of _HEADER_TITLE_MY_ACCOUNT for example and replaced it with an image.

 

define('HEADER_TITLE_MY_ACCOUNT', '<img src="images/my_account.gif">');

 

This works perfectly, but i seem to get a rather large white line around my image. Would i need to define a new class to replace headerNavigation? Or can this just be changed on the stylesheet. I do not wish to have any underlines or surrounding boxes around my images to appear when i hover or click as i believe it makes it look cheap and could potentially change the design layout as it is doing down.

 

Here is my stylesheet for that section...

 

TR.header {

background: #ffffff;

}

 

TR.headerNavigation {

background: #bbc3d3;

}

 

TD.headerNavigation {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

background: #bbc3d3;

color: #ffffff;

font-weight : bold;

}

 

A.headerNavigation {

color: #FFFFFF;

}

 

A.headerNavigation:hover {

color: #ffffff;

}

 

All i would like to achieve is to have the buttons side by side with no gap either side or top or bottom, but as you can see from the screenshot something seems to be seperating my practice button from the edges.

 

As well as this i would love to know if anyone has the information to hand how on hover to change the image to a slightly different coloured image. As you can see now i have actually modified the english.php file to show the button, would i need to take a different route to do a change on hover button?

 

I appreciate any imput for both of my problems, sorry for the long post, but i hope i haven't missed any vital information out.

 

[multimixer]

Option 1

Try replacing the gif image with a png.

The png you make to have a little transparent background, maybe 30%

In the stylesheet you make the A:hover to have a different background color as when active

 

Option2

You do NOT replace the text with images you leave it as it is, maybe you format the text to your liking

You create 2 png images little transparent, maybe the one 30% the other 20%, maybe with a light gradient, whatever

In your stylesheet you put one of the png's as background images for the case A:active and the other for A: hover

 

Option 2 is better because you keep having text on your page that google can read

[timmle]

Option2

You do NOT replace the text with images you leave it as it is, maybe you format the text to your liking

You create 2 png images little transparent, maybe the one 30% the other 20%, maybe with a light gradient, whatever

In your stylesheet you put one of the png's as background images for the case A:active and the other for A: hover

 

 

So with option 2, you are talking about keeping the text on the top, but with a better look and only changing the background picture. would i have to create a new class for each button?

 

 

How would i change the css stylesheet to make it do this?

 

TR.header {

background: #ffffff;

}

 

TR.headerNavigation {

background: #bbc3d3;

}

 

TD.headerNavigation {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

background: #bbc3d3;

color: #ffffff;

font-weight : bold;

}

 

A.headerNavigation {

color: #FFFFFF;

}

 

A.headerNavigation:hover {

color: #ffffff;

}

 

If i just changed the headerNavigation and kept this class for all the buttons, would i just put a background image command in for the A.headerNaviagation (this class for is an active link i think)

 

and then put a background image in for the A.headerNavigation:hover?

 

Will it change the look when hovering just by changing the background image?

 

And also how would i define the size in pixels of each individual button, without an image, because at the moment the size of the image was defining the button size, where as setting a background image in css i thought didn't change the size of the table around it where as images would.

 

Thankyou for your help, i hope you can help me further with my questions.

[multimixer]

Since the class "headernavigation" is used also for the breadcrumbs, and I don't remember for what else, it would be better to create a new one, called ie .button1

 

for this class you could apply some rules like here:

a.button1 , a.button1:link, a.button1:visited {
height:30px;
border:0px solid #000;
margin-top:2px;
text-align:left;
text-decoration:none;
color:#000066;
padding-left: 20px;
background-color: #B5D5FF;
background-image: url(images/1001green/header_backround1.png);
background-repeat: repeat-x;
background-position: center;
}

a.button1:hover {
color:#ffffff;
background-color: #87AB6B;
       background-image: url(images/1001green/header_backround2.png);
background-repeat: repeat-x;
background-position: center;
}

a.button1:active {
color:#fff; 
background:#c00;
}

 

Of course you adjust margins etc as you like.

Regarding the size you set just the height, width should be adjustable according to the word lenght

The point is that for the situations "active" and "hover" you set different background colors and images.

 

In photoshop:

Background images should be .png and transparent, otherwise the background color wont take effect. Best would be to have them with a gradient overlay, lets say from black to transparent, then in photoshop you set fill to 0 and occupancy to maybe 30%. For version hover, you just click on "reverse", so you have the shadow at the down part

 

Then you set a canvas size with a width of 1px and save it as png, each version separate.

 

Last thig is to call your new class in the.php file, but just for the buttons ie

<a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" class="button1"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>

 

PS. the height of the line should expand according to the height in button1, if not then set a height for class headernavigation, since I work only with div's, I don't remember exactly

 

Anyway, you need to play around a little with this till you get it

[timmle]

Since the class "headernavigation" is used also for the breadcrumbs, and I don't remember for what else, it would be better to create a new one, called ie .button1

 

for this class you could apply some rules like here:

a.button1 , a.button1:link, a.button1:visited {
height:30px;
border:0px solid #000;
margin-top:2px;
text-align:left;
text-decoration:none;
color:#000066;
padding-left: 20px;
background-color: #B5D5FF;
background-image: url(images/1001green/header_backround1.png);
background-repeat: repeat-x;
background-position: center;
}

a.button1:hover {
color:#ffffff;
background-color: #87AB6B;
       background-image: url(images/1001green/header_backround2.png);
background-repeat: repeat-x;
background-position: center;
}

a.button1:active {
color:#fff; 
background:#c00;
}

 

Of course you adjust margins etc as you like.

Regarding the size you set just the height, width should be adjustable according to the word lenght

The point is that for the situations "active" and "hover" you set different background colors and images.

 

In photoshop:

Background images should be .png and transparent, otherwise the background color wont take effect. Best would be to have them with a gradient overlay, lets say from black to transparent, then in photoshop you set fill to 0 and occupancy to maybe 30%. For version hover, you just click on "reverse", so you have the shadow at the down part

 

Then you set a canvas size with a width of 1px and save it as png, each version separate.

 

Last thig is to call your new class in the.php file, but just for the buttons ie

<a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" class="button1"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>

 

PS. the height of the line should expand according to the height in button1, if not then set a height for class headernavigation, since I work only with div's, I don't remember exactly

 

Anyway, you need to play around a little with this till you get it

 

 

Thankyou for your reply, that answers all but one question i have which i appreciate. When this is set the word always sits on the baseline of the table. I've tried vertical-align in css but it doesn't seem to move the text into the centre vertically. How would i get the text to sit in the center vertically, as i have seen many things about line-height and vertical-align but nothing seems to work.

 

Can anyone offer anything?

[multimixer]

Thankyou for your reply, that answers all but one question i have which i appreciate. When this is set the word always sits on the baseline of the table. I've tried vertical-align in css but it doesn't seem to move the text into the centre vertically. How would i get the text to sit in the center vertically, as i have seen many things about line-height and vertical-align but nothing seems to work.

 

Can anyone offer anything?

 

There are 3 ways to do it:

 

1) If you have a single line text, then the best is you play around with line-height: set a size for the text and make the line-height to be double or something like ths

2) Otherwise just use padding

3) Or you wrap everything into a table, there you can use the vertical-align