Grow your CSS skills. Land your dream job.

Round Navigation bar

  • # December 25, 2009 at 4:56 am

    Hello Everybody,

    plz. goto http://www.happy-hosting.com

    There you will see a navigation bar at the top below the logo.
    If you explore it with firebug, you will see that the navigation image has tree types for left round, center and right round.

    How thats done there? Can anybody explain that?

    # December 26, 2009 at 2:22 am

    it’s three images. the left side is just the corner, the middle would be a sliver of the middle part of the navigation that is repeated the full width of the menu and then the right side would be the other corner. so then you float all three images inline or code it another way. There are different methods.

    # December 27, 2009 at 11:49 am

    Yes, I know that. But I couldn’t find how it is implemented there. There is no css property for it.

    Also, can show the different ways to do it(link for it).

    # December 27, 2009 at 2:15 pm

    there is no link for that. I would do it in three divs

    <div id="leftSide">

    </div>

    <div id="middle">

    </div>

    <div id="rightSide">

    </div>

    What they did was use 1 image for the background of the nav. What you need to do is use firebug for firefox. That is the best web browser for a web designer. If you right click on the page and choose..View page info, there will be a media tab that you can click, click that and it will show you all the images that are there. The image they are using is site-nav_bg.png. then they apply this background image to the <ul> and the <h3> tags and other parts of the code. I have never seen it done this way. using firefox, right click on the page, choose…View page source. you can see there are two style sheets in the head section, click on the one called global.css and that will open up the style sheet they are using. Do a search for site-nav_bg and you will see how they coded it.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".