Navigation main changes

[fusionsp]

I think its finally straightened out. Now for the buttons. I have searched all over for tutorials on the sliding door buttons. I really think my main issue is from the template I started with. There is soo much useless code I have been removing since I started my site.

Here is my current css file that i have for the buttons.

/* SilverFish Customizations */
body {margin: 0; font-family: verdana, arial, helvetica, sans-serif; font-size: 62.5%; color: #000000; margin: 0px 0px 50px 0px; color: #333; background-color: #ffffff;}
body#popupShippingEstimator, body#popupImage, body#infoShoppingCart, body#popupCVVHelp {background:none;}

#mainWrapper {background-color: #ffffff; text-align: left; width: 100%; vertical-align: top; border: none ; margin: 0px;}
table { font-size: 100% }

#navFusionWrapper {background-color: #ffffff; margin: 0; padding: 0; width: 100% }

/*
header
*/


#navMainWrapper {width: 100%; background-color: #ffffff; margin: 0; padding: 0;}

#navMain {
text-align: center;
list-style: none;
margin: 0px; 
width: 100%; 
color: #ffffff; 
background-color: #000030; 
font-size: 93%;}

#navMain ul { 
margin: 2px 0; 
width: 100%;
padding: 5px; 
list-style: none;
 text-align: center;
 line-height: 3.5em; 
 text-align: center;

 }

#navMain ul li {
display: inline;
font-size: 13px; 
font-weight: bold; 
text-transform: uppercase; 
color: #ffffff; 
text-align: center;

 }
#navMain ul li a  {
text-align: center;
text-decoration: none; 
padding: 4px 15px 0 0; 
margin: 0; 
margin-right: 8px;
color: #ffffff; 

}

#navMain ul li a span {
text-align: center;
padding-right: 15px;
display: inline;
margin-top: -4px;
height: 24px;
}

#navMain ul li a {
color: #ffffff;
background: url(../images/button_normal_header.gif) no-repeat top right;
}

#navMain ul li a:hover {
color: #ffffff;
background: url(../images/button_over_header.gif) no-repeat top left;
}

[niccol]

hey, well done! It's a list.

Remind me what you actually want it to look like.

[fusionsp]

hey, well done! It's a list.

Remind me what you actually want it to look like.

Hey sorry but I had changed shifts at my job and for a while I was working nights. But Im back now.

I just want there to be buttons across the top. Now, it displays a partial button that I set up using a sliding door style. I can see it switch back and forth like its trying to do it right, but i just cant get it right. If possible, I would like even a gel button?
But its only part of the button. It doesnt look like the button i actually created??
Im so frustrated, Im debating finding a new template that already has buttons across the top and starting over.

[niccol]

The problem that you are having is that when you define the <li>s as inline you cannot control their size, or the size of anything inside them. To control their size they need to be blocks rather than inline. But if they are blocks then they align vertically.

This is the problem right?

One fix is to define the <li> tags as inline-block. Huh? Inline-block is a type of display that has some of the characteristics of each type of display.

There are other options. A good display of some of the less used display settings and their problems with browser support is shown at http://www.brunildo.org/test/shrink-to-fit.html.

Inline-block works on the majority of browsers with a few hacks. But you'll need to test on as many as you can.

Try getting rid of what you have and trying this as a start. As soon as you can define the size of the <a> tags then the sliding door / sprite approach will work fine.

#navMain ul { 
display:block;
margin: 2px 0; 
list-style: none;
 text-align: center;
 line-height: 3.5em; 
 }

#navMain ul li {
position:relative;
display: inline-block;
width:160px;
font-size: 13px; 
font-weight: bold; 
text-transform: uppercase; 
color: #ffffff; 
border:1px red solid;
zoom:1;
*display: inline;
 }

#navMain ul li a  {
display:block;
width:100%;
height:100%;
text-align: center;
text-decoration: none; 
color: #ffffff; 
}

Your going to find some problems with browsers but all the hacks for the various browsers are out there. eg http://flipc.##########################/2009/02/da...ine-block.html Basically with ie you need to trigger hasLayout. Desribing that is a bit beyond this post!

Another way of approaching the whole problem is to use a float:left to make all the <li>s to align horizontally. This works really well but the problem that you have is trying to get the block of <li>s to align in the center of the page. It tend to do this but then very few of my pages are symmetrical anyway.

[fusionsp]

hmm, wierd? Ok I changed the code to what you wrote and now the buttons I made partially show up at the bottom of the text. But the lines still have this wierd border around them that I am not sure where it came from.

I can see it switching to the highlighted button too. But why is my button hid below the text?

[niccol]

Hi,

Sorry for the delay I have been away and actually still am not back on my machine.

Can you attach the background image that you are using to your next post please? Thanks!

[fusionsp]

Hi,

Sorry for the delay I have been away and actually still am not back on my machine.

Can you attach the background image that you are using to your next post please? Thanks!

are you talking about my avatar?

Anyways, I believe i have finally achieved some version of what i was looking for. Now i need to work on the actual button image.

Thanks by the way for all your efforts. One last question, I am having issues with the last button on the ezpage section. Here is what the code looks like. I cant seem to place the <span> in the right place??

<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">

 <ul>
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo  '<span>' . HEADER_TITLE_CATALOG . '</span>'; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo '<span>' . HEADER_TITLE_LOGOFF . '</span>'; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo '<span>' . HEADER_TITLE_MY_ACCOUNT . '</span>'; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo '<span>' . HEADER_TITLE_LOGIN . '</span>'; ?></a></li>
<?php } } ?>

<li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo '<span>' . HEADER_TITLE_CART_CONTENTS . '</span>'; ?></a></li>
<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
        <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo '<span>' . HEADER_TITLE_CHECKOUT . '</span>'; ?></a></li>
<?php }?>




<!--bof-header ezpage links-->
<li><?php if  (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) {  ?>
<?php echo '' ;
      require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php');  ?>
<?php }   ?></li>
<!--eof-header ezpage links-->
</ul>


<!--eof-navigation display-->
</div></div>

[niccol]

No I was asking to see the image that you were using as the background for the buttons as I suspected that the image itself was part of your problem.

To put a span in the same place as the other links you are going to have to edit:

tpl_ezpages_bar_header.php

Which is called in the line:

require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php');  ?>

[fusionsp]

wow finally...thanks for all your help. its not exactly what I wanted, but at least now I can make the images look better.