Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

Vertical and Horizontal Css Navigation

  • 12-11-2008 04:04PM
    #1
    Little Miss *
    Closed Accounts Posts: 16 ✭


    I am updated my web site, currently I have a horizontal navigation bar on my home page which is css based, linking to different pages on my website. I want to also have a vertical navigation bar on the home page listing the products I do for quick links to a product page with a little description on these, I have tried inserting my other css to create the vertical nav bar but each time i do my main navigation bar changes too the style of the vertical nav bar. The horizontal nav bar is used throughout my website the vertical nav bar I only want on my home page. Anyone know what the problem my be and how to solve this. Thanks


Comments

  • #2
    DonkeyStyle \o/
    Closed Accounts Posts: 7,144 ✭✭✭DonkeyStyle \o/


    I'd say both pieces of CSS are either styling generic elements without much specificity (ul, li, etc.), or there's a naming conflict with your classes or ids.
    You need to have a look at the html for the menus and see where they're similar.
    What I'd do is assign a class or id to the div containing your vertical nav, then modify the CSS for that menu to include the class or id name.

    For example if you had... 
    ul {
/*CSS HERE*/
}

[...]

<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

    You could make the CSS unique to that div by doing... 
    [b]#mymenu[/b] ul {
/*CSS HERE*/
}

[..]

<div[b] id="mymenu"[/b]>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

    The rule #mymenu ul will be able to work on that menu without effecting all ul's.

    [moved to Web Development & Design]


Advertisement