WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: Ogierini on January 30, 2010, 10:48:42 AM

Title: menu round corners
Post by: Ogierini on January 30, 2010, 10:48:42 AM

 hi there,

Still working on my writers website....
I would like my menu to have round corners, like the campsite vossenjacht of Bramus. :roll:

In fact I shoud only have round corners on the top level menu and on the bottem level menu.... I thought of doing this with images, but maybe somebody has a better suggestion?

This is the site sofar: www.o-pen.nl/cms

this is my css for the top menu

Code: [Select]

#nav ul li {

    display: inline;

    line-height: 16px;

    list-style: none;

}

#nav ul li a {

    color: #FFF;

    display: block;

    padding: 5px;

    text-decoration: none;

    width: 169px;

    margin-left: 1px;

    background-color: #92278F;

    border-bottom-width: 1px;

    border-bottom-style: solid;

    border-bottom-color: #CCC;

    border-right-width: 1px;

    border-right-style: solid;

    border-right-color: #92278f;

}
thanks for helping out.

Irene

Title: Re: menu round corners
Post by: crnogorac081 on January 30, 2010, 11:24:06 AM

Hi irene,

Try this (http://www.dynamicdrive.com/style/csslibrary/item/corp_blue_css_menu/) link. On that site you may find some menu you like.. Copy css code and pictures to your site and adapt show menu call..

all best,
Ivan

Title: Re: menu round corners
Post by: Ogierini on January 30, 2010, 02:19:56 PM

Hi Ivan,

Didn't see what I had in mind. Could you take a look:
www.o-pen.nl/cms
This is what I want only the Home Nedelands picture should be the other way around.......

Title: Re: menu round corners
Post by: crnogorac081 on January 30, 2010, 03:07:35 PM

try to style with menu-last , I belive that is the class..

Title: Re: menu round corners
Post by: Ogierini on January 30, 2010, 04:25:04 PM

Hi,
  :? unfortunately it doesn't work... 
Should that be like this?

Code: [Select]

}
#nav li a:hover menu-last{
    background-color: #FFF;
    background-repeat: no-repeat;
    background-position: right center;
    color: #92278f;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #92278f;
    background-image: url(images/menu/menuonder.gif);
}

Title: Re: menu round corners
Post by: crnogorac081 on January 30, 2010, 04:41:46 PM

could you post your showmenu code

Title: Re: menu round corners
Post by: Ogierini on January 30, 2010, 04:50:49 PM

That is like folowing:

Code: [Select]

<div id="column1">
        <div id="nav">
            <? if(SHOW_MENU) page_menu(); ?>
        </div>

Title: Re: menu round corners
Post by: crnogorac081 on January 30, 2010, 05:07:21 PM

Hi,

if you searched a forum, you would see that page_menu(); is very old menu function. From the source code on your page, I dont see that this page_menu is generating classes you need (like menu first, menu last..etc..). So you should replace page_menu with show_menu or show_menu2 instead.  Search the forum a little, there are a lot of examples.. Also you can see SM2 demo here: http://www.websitebakers.de/sm2/pages/enterprise.php

all best,
Ivan

 

Title: Re: menu round corners
Post by: Ogierini on January 30, 2010, 05:10:33 PM

Thanks so far
I'll  look into it......

Title: Re: menu round corners
Post by: crnogorac081 on January 30, 2010, 05:13:09 PM

for a start, just replace show_menu2();  instead page_menu();

Title: Re: menu round corners
Post by: Ogierini on January 30, 2010, 08:04:28 PM

I tried, but then the menu is al messed up. I also saw that it is not supported bij IE6, but this is
a strong demand of my client, to make it work in IE6 as well, so, I guess I'll make a background picture to solve my issue.

Thanks anyway......

Title: Re: menu round corners
Post by: crnogorac081 on January 30, 2010, 09:37:16 PM

you can make with with table...chech images,css and menu call in round template (wb defult)

cheers

and tell your client to update his browser

Title: Re: menu round corners
Post by: Ogierini on January 31, 2010, 01:51:34 PM

Thanks,

my client doesn't use IE6 but there are a lot of businesses dat still do.....

Title: Re: menu round corners
Post by: crnogorac081 on January 31, 2010, 02:59:53 PM

I see you are still using page_menu instead show_menu by your classes:

Code: [Select]

   <div id="column1">
        <div id="nav">

           
<ul>
<li class="menu_current"><a href="http://www.o-pen.nl/cms" target="_top"  class="menu_current"> Home English </a></li>
<ul>
<li class="menu_default"><a href="http://www.o-pen.nl/cms/pages/home-english/business.php" target="_top"  class="menu_default"> Business </a></li>
<li class="menu_default"><a href="http://www.o-pen.nl/cms/pages/home-english/personal.php" target="_top"  class="menu_default"> Personal </a></li>
<li class="menu_default"><a href="http://www.o-pen.nl/cms/pages/home-english/about-o-pen.php" target="_top"  class="menu_default"> About O-PEN </a></li>
<li class="menu_default"><a href="http://www.o-pen.nl/cms/pages/home-english/the-best-story.php" target="_top"  class="menu_default"> The Best Story </a></li>
<li class="menu_default"><a href="http://www.o-pen.nl/cms/pages/home-english/portfolio.php" target="_top"  class="menu_default"> Portfolio </a></li>
<li class="menu_default"><a href="http://www.o-pen.nl/cms/pages/home-english/contact.php" target="_top"  class="menu_default"> Contact </a></li>
</ul>
<li class="menu_default"><a href="http://www.o-pen.nl/cms/pages/home-nederlands.php" target="_top"  class="menu_default"> Home Nederlands </a></li>
</ul>        </div>

I see that all clasess except current menu, where class is menu_current are menu_default.. That is why the css you wrote in 4th post isnot working.. Simply, the page_menu function is not generating menu_last class.. I belive that is why it is depreciated..