WebsiteBaker Support (2.8.x) > Templates, Menus & Design

Menu CSS not showing correct

(1/2) > >>

daydreamer:
Hi This is my menu CSS how do I get menu to display correct?
I am using,
<?php show_menu2(0, SM2_ROOT, SM2_START, '<ul>' , '<li id="menu">[a][menu_title]</a>', '</li>' , '</ul>', '', ''); ?>

#menu {
    float:left;
    width:695px;
    font-size:93%;
    line-height:normal;
    border-bottom:1px solid #666;
    }
#menu ul {
    margin:0;
    padding:10px 10px 0 50px;
    list-style:none;
    }
#menu li {
    display:inline;
    margin:0;
    padding:0;
    list-style-type: none;
    }
#menu a {
    float:left;
    margin:0;
    text-decoration:none;
    background-image: url(/templates/home/images/tabs_left.png);
    background-repeat: no-repeat;
    background-position: left top;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 9px;
    }
#menu a span {
    float:left;
    display:block;
    padding:5px 15px 4px 6px;
    color:#FFF;
    background-image: url(/templates/home/images/tabs_right.png);
    background-repeat: no-repeat;
    background-position: right top;
    }
   
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu a span {float:none;}
/* End IE5-Mac hack */
#menu a:hover span {color:#FFFFFF;}
#menu a:hover {background-position:0% -42px;}
#menu a:hover span {background-position:100% -42px;} 

erpe0812:
Hi,

a link to your site woudl be helpful to see what's wrong.

rgds

erpe

marathoner:
Yup...a link would be helpful. Also, more helpful to know what you "want" it to do rather than use the term correctly since I'm sure that it's already displaying "correctly" based on how it's currently set up.

Just a guess here...but I doubt that you want to use the square brackets around your A tag. Use <a> instead of [a].

Also, I'd guess that you want to use the CSS ID "menu" around the whole menu and not at each LI tag.

Ruud:
The 4th parameter of the show_menu2 function is wrong. That might give some unexpected results.

--- Code: ---<?php show_menu2(0, SM2_ROOT, SM2_START, &#39;<ul>&#39; , &#39;<li id="menu">[a][menu_title]</a>&#39;, &#39;</li>&#39; , &#39;</ul>&#39;, &#39;&#39;, &#39;&#39;); ?>
--- End code ---
See: http://code.jellycan.com/files/show_menu2-README.txt


--- Quote from: marathoner on February 10, 2009, 10:15:37 PM ---Just a guess here...but I doubt that you want to use the square brackets around your A tag. Use <a> instead of [a].

--- End quote ---
Using the [a] instead of<a> will add the show_menu classes to the <a> tag that is generated. Nothing wrong with that.



--- Quote from: daydreamer on February 10, 2009, 03:20:17 PM ---Hi This is my menu CSS how do I get menu to display correct?

--- End quote ---
The CSS is styled using the "Sliding Doors" technique.
For this the link must be in a span tag.

An example to do that using show_menu2 is:

--- Code: ---<?php show_menu2(1,SM2_ROOT,SM2_ROOT,SM2_TRIM,&#39;[li][a]<span>[menu_title]</span></a>&#39;,&#39;</li>&#39;); ?>

--- End code ---
If this is put in within a <div id="menu"> </div>, it might just work. :wink:

Ruud

Edit: Here is a nice article on the Sliding Doors menu technique. Good for trying to understand how CSS works for you.

daydreamer:
Thanks Ruud
This worked
<?php show_menu2(1,SM2_ROOT,SM2_ROOT,SM2_TRIM,'
* [a]<span>[menu_title]</span></a>','</li>'); ?>

But for some strange reason the menu items are not linking???

Navigation

[0] Message Index

[#] Next page