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 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts

    different coloured navigation tabs

    Hello again.

    Well my first problem was solved quickly and easily, maybe you can help me with this one too.

    I'm trying to create the navigation tabs that can be seen here:

    http://www.numyspace.co.uk/~unn_t016254/index3.html

    however, as you can see, I've cheated and used rollovers, and I need to do them in CSS.

    I've been following this tutorial http://www.alistapart.com/articles/slidingdoors and have got this far before I got stuck

    http://www.numyspace.co.uk/~unn_t016...eaceindex.html

    I know I'll be able to resize stuff later so im not worried about that. What I can't figure out is the bit with the "a". on the tutorial it tells me to enter the code

    #header a {
    display:block;
    background:url("norm_left.gif")
    no-repeat left top;
    padding:5px 15px;
    }


    now, I know it's slightly more complex as my divs are not the same, and I don't want the same stylings for every list on my site. so I tried the code

    #wrapper #container #mainnavigation a {
    display:block;
    background:url("images/leftblue.gif")
    no-repeat left top;
    padding:5px 15px;
    }


    and also

    #mainnavigation a {
    display:block;
    background:url("images/leftblue.gif")
    no-repeat left top;
    padding:5px 15px;
    }


    but neither worked. I've got it to work on the right tho but I can't figure out the left!

    -------------------------------------------

    Now, here's why I'm asking the question - I want all of the tabs to be different colours anyway. So even if I worked this out, would I be able to use this method? Or am I wasting my time and should I be doing something else.

    Hope you can help, thanks in advance!

  • #2
    New Coder
    Join Date
    Jun 2009
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    oh, I hadn't put <a href> on the links. It's worked now

    However, I still don't know how to make them different colours. I'd be thankful if you knew how to do this!

    Cheers

  • #3
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello , I live close to Newcastle! Anyways, ill try to piece this together the best I can, its 3:00AM though so here goes nothing! What you would need to do to obtain different coloured pages is point each of your HTML files to a different CSS file, so each page is defined by a seperate style sheet (There are other ways but this seems to be the best possible way I can think of at the moment.) So you would need to duplicate your css file and change aspects such as background-color, this will allow you to have different colours on each page. As for the tabs its a little harder, As far as I know you are using images for the tabs so you would need to recolour the left and right hand side sections of each tab in an imaging editing suite and then use the new images for each seperate page.

    So as a quick summary.

    • Duplicate your CSS file for each individual page
    • Make sure that you point each individual HTML file to a seperate CSS file
    • Edit the CSS file which is relevant to the HTML file you are wanting to modify
    • Using an Image editing software suite recolour or re-create the tabs for each page
    • Edit the CSS to use these new images
    • Then that should be it!

  • #4
    New Coder
    Join Date
    Jun 2009
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    hi sharpshooter

    thanks for your advice. I struggled for a while to work out how to do the different coloured backgrounds and, like you, came to the conclusion that I'd have to attach different stylesheets to each page. I suppose this is not too much work but then I was reminded that you could put css styles into the <head> tags of each individual page - so I can just change the background colours like that! simple eh

    Yeah the tabs are harder. I want each individual tab to be a different colour on the same page - I've worked out how to change the right image (im using the "sliding doors" technique) by giving each individual list item a separate class, but the left image relies on the <a> tag. Can I give the <a> tags an individual class? I tried but I couldn't seem to do it. Maybe I was getting the code wrong, if someone knows I'd be greatful!

    I'll let you know if I work it out. I'm getting some help from the city council team as this is going to be used by them, so he might know


  •  

    Posting Permissions

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