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 to the CF scene
    Join Date
    Jun 2009
    Location
    Minnesota
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool attempting to style multiple types of links and lists

    I have multiple ways that links (and/or ul's and li's) need to look -- depending on what "container id" they are placed in (whether a div or a table, tr, td, etc.), such as the main nav, footer nav, standard links and lists within the body copy, etc.

    I'm confused as to why my styles seem to go and inherit details from other styles if they're not defined within their own (and sometimes even if they are defined?). Example: I have some links that appear as a type of header navigation, and are defined in #purpleTOP a:link, a:visited & #purpleTOP a:hover. They take on the style characteristics of my #secondaryNAV a:link, a:visited & #secondaryNAV a:hover, in that they "float left" and turn the blue color specified for the secondaryNAV (even though white is the specified color for #purpleTOP a:link, a:visited.

    Another example: I have the 'generic' ul and li styled to have an arrow image for it's bullet. For my main navigation ul and li, the style is set to "none", but it still is using the arrow.

    This causes a ton of chaos especially when it comes to padding or margin for links. And i'm hoping there's an easier way for me to achieve what i'm going for.

    I'm just wondering if i'm relying on the id more than i should be? Should i be using classes and styling EVERY link? (seems more code heavy then i'd like..)

    Thoughts?

    (I'm attaching the css files that are attached to my site's template. I eliminated a lot of the information that was obviously not causing issues.)
    Attached Files Attached Files
    Last edited by margo09; 06-09-2009 at 09:22 PM. Reason: adding css example files

  • #2
    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
    Quote Originally Posted by margo09 View Post
    I have multiple ways that links (and/or ul's and li's) need to look -- depending on what "container id" they are placed in (whether a div or a table, tr, td, etc.), such as the main nav, footer nav, standard links and lists within the body copy, etc.

    I'm confused as to why my styles seem to go and inherit details from other styles if they're not defined within their own (and sometimes even if they are defined?). Example: I have some links that appear as a type of header navigation, and are defined in #purpleTOP a:link, a:visited & #purpleTOP a:hover. They take on the style characteristics of my #secondaryNAV a:link, a:visited & #secondaryNAV a:hover, in that they "float left" and turn the blue color specified for the secondaryNAV (even though white is the specified color for #purpleTOP a:link, a:visited.

    Another example: I have the 'generic' ul and li styled to have an arrow image for it's bullet. For my main navigation ul and li, the style is set to "none", but it still is using the arrow.

    This causes a ton of chaos especially when it comes to padding or margin for links. And i'm hoping there's an easier way for me to achieve what i'm going for.

    I'm just wondering if i'm relying on the id more than i should be? Should i be using classes and styling EVERY link? (seems more code heavy then i'd like..)

    Thoughts?

    (I'm attaching the css files that are attached to my site's template. I eliminated a lot of the information that was obviously not causing issues.)
    Hello and welcome to the forums. Things usually go better if we can see a live test page somewhere on the web or at the very least your full HTML and CSS (you can paste them into the forum enclosed in [CODE][/CODE] tags). Only then can we begin to see the root of your troubles. If you need some free hosting check out the links in my signature for two very easy and very free options.

    Before linking us to your page or posting code, however, please head over to the HTML validator (http://validator.w3.org/) and fix up any validation errors that you might have. This will save us a step in the process and is good practice at all times anyway.
    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

  • #3
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    You have a <style> tag in your nav.css file. Try removing it.

  • #4
    New to the CF scene
    Join Date
    Jun 2009
    Location
    Minnesota
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Test site link - VERY rough. work in progress :)

    i still need to go through and fix a LOT on the site (it's majorly incomplete). and http://validator.w3.org points out a ton of errors.
    Last edited by margo09; 06-11-2009 at 03:47 PM.


  •  

    Tags for this Thread

    Posting Permissions

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