Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question How do i save time using css classes when it comes to website navigation links?

    I'm looking for a really basic bit of information but i can't seem to find it
    you see at the moment my navigation bar it defined in the html like this
    <div id="navbarone">
    <ul>
    <li><a href="http://c3it.webuda.com/">Home</a></li>
    <li><a href="http://www.amazon.co.uk/">Why green it?</a></li>
    <li><a href="http://www.youtube.com/">SMARTER THINKING</a></li>
    <li><a href="http://www.youtube.com/">NEWS AND EVENTS</a></li>
    <li><a href="http://www.youtube.com/">FUTURE PROJECTS</a></li>
    <li><a href="http://www.youtube.com/">OTHER SERVICES</a></li>
    </ul>
    </div>


    All direct links, now i also have second navigation menu and many many pages so i realise adapting the links for each page is going to be pretty time consuming. I'm sure i read something about using css classes or some such so that the links adapt depending on what page your on (for example the page your on being highlighted in the menu) that would also (if i understood it correctly) make life easier when linking up all the webpages..

    Either way i'd really appreciate some more info on this or a link to a site that talks about this from the basics up! I think i'm just not googling the right things!
    Last edited by hugb0t; 07-30-2010 at 12:41 AM. Reason: resolved

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    CSS does not control page content, such as the href of anchors. It only controls page styling, such as colors and fonts.

    Now, if you're wanting to highlight the link for the current page, yes - you can style that with CSS. But you can't determine which page you're on with either HTML or CSS. Your server side language (PHP, ASP) does that and can insert 'class="active"' (or something similar) where necessary.
    Are you a Help Vampire?

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    One popular method is to use a class on the body tag that matches the class on the menu item. So, for example, using your code as a rough base - we give each navigation link a class:

    Code:
    <div id="navbarone">
      <ul>
        <li><a href="http://c3it.webuda.com/" class="home">Home</a></li>
        <li><a href="http://www.amazon.co.uk/" class="green">Why green it?</a></li>
        <li><a href="http://www.youtube.com/" class="smarter">SMARTER THINKING</a></li>
        <li><a href="http://www.youtube.com/" class="news">NEWS AND EVENTS</a></li>
        <li><a href="http://www.youtube.com/" class="future">FUTURE PROJECTS</a></li>
        <li><a href="http://www.youtube.com/" class="services">OTHER SERVICES</a></li>
      </ul>
    </div>
    And your CSS to activate this "current page" marker system would be something like this:
    Code:
    body.home #navbarone a.home,
    body.green #navbarone a.green,
    body.smarter #navbarone a.smarter,
    body.news #navbarone a.news,
    body.future #navbarone a.future,
    body.services #navbarone a.services
    {background-color:#f00;}
    Then, on the home page you would have code like this:
    Code:
    <body class="home">
    ...
    <div id="navbarone">
      <ul>
        <li><a href="http://c3it.webuda.com/" class="home">Home</a></li>
        <li><a href="http://www.amazon.co.uk/" class="green">Why green it?</a></li>
        <li><a href="http://www.youtube.com/" class="smarter">SMARTER THINKING</a></li>
        <li><a href="http://www.youtube.com/" class="news">NEWS AND EVENTS</a></li>
        <li><a href="http://www.youtube.com/" class="future">FUTURE PROJECTS</a></li>
        <li><a href="http://www.youtube.com/" class="services">OTHER SERVICES</a></li>
      </ul>
    </div>
    Then all you have to keep track of is setting the body to have a class that triggers the style rule.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • The Following 2 Users Say Thank You to Rowsdower! For This Useful Post:

    hugb0t (07-30-2010), tomws (07-29-2010)

  • #4
    New Coder
    Join Date
    Dec 2009
    Posts
    96
    Thanks
    1
    Thanked 2 Times in 2 Posts
    I've just read your post four times and I'm still trying to figure out if you're looking for information to style the links or to store the links on a seperate page. The part where you're talking about classes, you are talking about styling the links itself. But before that you were actually talking about an easier way to change links without having to go through endless pages to change something.

    About the styling, take the advice from Rowsdower!. But if you're talking about moving links to a seperate file, you should use php. If you wanna know how to do that...that's easy. Just place all of your links in a seperate file and call it Menu or whatever.

    Then go to the place where you'd like to have your links on the pages and use the following php line:

    PHP Code:
    <? include ("../../Layout_Files/Menu.txt"); ?>
    Be sure to save your main pages (where you've used the php lines) with the .php extention.

    Was that what you were looking for? Or maybe both? :P

  • Users who have thanked Bar2aYunie for this post:

    hugb0t (07-30-2010)

  • #5
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Thumbs up

    Sorry i wasn't clearer , yeah i was looking for both! And You guys have been brillo as allways~

    Thanks to Rowsdower!, for the taking the time to give me quick tutorial, just the info i was trying to find. And also Bar2aYunie for taking the time to decipher my post and pointing me towards php, now i know what to look for i'll get stuck straight into it thanks

  • #6
    New Coder
    Join Date
    Dec 2009
    Posts
    96
    Thanks
    1
    Thanked 2 Times in 2 Posts
    You're very welcome.

    On my site, I had around 800 pages a few years ago (with navigation links nested on all pages.... ) and then I needed to add a link...... problem...

    hahaha, so I started looking for another solution. This was the best solution and I didn't only added in the links, but also the whole layout itself. Then, as I had to change 800 pages anyway, I took the time to delete all of the css I had in there for the table layouts and stuff, and placed in the external style sheet. It took me months to sort everything out, but when I was done, it saved me hours, months, maybe even years of work when I added more and more pages.

    I now have around 2000 pages and I'm still happy I took the time then to get everything sorted out, cleaned of code and seperate layout, navigation and css files. Whenever I see somebody else in a rather similar situation, I have a huge urge to tell them about this particular simple php line to save hours of work lateron!

    Good luck with your pages!

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    <li><a href="http://c3it.webuda.com/">Home</a></li>
    <li><a href="http://www.amazon.co.uk/">Why green it?</a></li>
    <li><a href="http://www.youtube.com/">SMARTER THINKING</a></li>
    <li><a href="http://www.youtube.com/">NEWS AND EVENTS</a></li>
    <li><a href="http://www.youtube.com/">FUTURE PROJECTS</a></li>
    <li><a href="http://www.youtube.com/">OTHER SERVICES</a></li>
    Hope all the links are internal in your case and the above is just some sample code.
    Last edited by abduraooft; 07-30-2010 at 03:00 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •