WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: daydreamer on February 10, 2009, 03:20:17 PM
-
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;}
-
Hi,
a link to your site woudl be helpful to see what's wrong.
rgds
erpe
-
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.
-
The 4th parameter of the show_menu2 function is wrong. That might give some unexpected results.
<?php show_menu2(0, SM2_ROOT, SM2_START, '<ul>' , '<li id="menu">[a][menu_title]</a>', '</li>' , '</ul>', '', ''); ?>See: http://code.jellycan.com/files/show_menu2-README.txt
Just a guess here...but I doubt that you want to use the square brackets around your A tag. Use <a> instead of [a].
Using the [a] instead of<a> will add the show_menu classes to the <a> tag that is generated. Nothing wrong with that.
Hi This is my menu CSS how do I get menu to display correct?
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:
<?php show_menu2(1,SM2_ROOT,SM2_ROOT,SM2_TRIM,'[li][a]<span>[menu_title]</span></a>','</li>'); ?>
If this is put in within a <div id="menu"> </div>, it might just work. :wink:
Ruud
Edit: Here is a nice article (http://www.alistapart.com/articles/slidingdoors/) on the Sliding Doors menu technique. Good for trying to understand how CSS works for you.
-
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???
-
But for some strange reason the menu items are not linking???
Have a look at the generated source of the page to see what is wrong.
It should display something like:
<ul class="menu-top">
<li class="menu-current menu-first"><a href="http://www.yourserver.com" target="_top"><span>Home</span></a></li>
<li class="menu-sibling"><a href="http://www.yourserver.com/pages/faq.php" target="_top"><span>Faq</span></a></li>
<li class="menu-sibling"><a href="http://www.yourserver.com/pages/contact.php" target="_top"><span>Contact</span></a></li>
</ul>
So a bit simplified:
<li><a href="url"><span>text</span></a></li>If it looks like that, and still doesn't work... give us a link so we can see what is going on.
Ruud
-
Looks like this
<div id="menu">
<ul class="menu-top"><li><a><span>new</span></a></li></ul>
</div>
No link there
-
Thanks got it sorted working with this
<?php show_menu2(2,SM2_ROOT,SM2_ROOT,SM2_TRIM, '<li>[a]<span>[menu_title]</span></a>','</li>'); ?>
Thanks Ruud
-
Y'r welcome,
Hope to see the result in the showcase forum some day.
Ruud