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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts

    Different Link Styles on Same Page?

    This is my first in-depth experience with .css so I know I'm making some mistakes (probably many) but I’m encountering some problems as I go along that I don’t quite know how to solve (working in Dreamweaver, BTW). My latest dilemma is this:

    I’ve created a style sheet and set the link attributes with the desired navbar behaviors in mind (white rollover backgrounds and whatnot which are working fine). However, there will be other links that I simply want the standard, underlined links without the fancier navbar attributes. I was not aware that in creating link styles, it’s “one size fits all,” or at least I haven’t figured out how to get different link behaviors on the same page. — According to Dreamweaver’s Help, it says to remove a style from a selection, simply click the ‘No CSS Style’ option from the palette. That doesn’t work. (?) I also thought to create a new style with different link attributes, but as far as I can tell, you can only apply ONE links style to a page; not link Style A AND link Style B.

    Please look at the following URL, see the navbar link behaviors, but then mouse over the ‘FreeFind’ link on the banner. You’ll see that I obviously don’t want the FreeFind link to have the same behavior as the navbar links, I just want a plain blue text link.

    http://www.healthdataservices.com/2006HDShome.htm

    Can anyone enlighten with a simple solution or workaround? Can I apply the (navbar) white rollover/rollout backgrounds to the table cells, independent of the link itself? If so, could you please provide me with the precise coding for this, thanks. — ALSO, I have been informed that I should create links as lists and that my current code is an abuse of tables, but for the moment the css/list code is way over my head and I’d just like to get this to work within its present context if that’s possible — thanks.

    .css code is contained below if needed.

    Thank you!

    JD

    a:link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: #000066;
    width: 182px;
    border-top: none;
    border-right: none;
    border-bottom: 1px solid #FFFFFF;
    border-left: none;
    text-decoration: none;
    line-height: 20px;
    float: left;
    text-indent: 5px;
    display: block;
    }

    a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: #000066;
    width: 182px;
    border-bottom: 1px solid #FFFFFF;
    text-decoration: none;
    line-height: 20px;
    text-indent: 5px;
    float: left;
    display: block;
    }

    a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: #006699;
    background-color: #FFFFFF;
    width: 182px;
    margin-left: 0px;
    padding-left: 0px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #FFFFFF;
    text-decoration: none;
    line-height: 20px;
    float: left;
    display: block;
    }

    .navheaders {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    color: #FFFFFF;
    width: 182px;
    line-height: 20px;
    background-color: #004284;
    margin: 0px;
    padding: 0px 0px 0px 5px;
    }

    .BkgrndImage {
    background-image: url(images/2006-NavbarArt_03.jpg);
    background-repeat: no-repeat;
    }

    .MLbkgrndImage {
    background-image: url(images/2006MLnavbarArt_04.jpg);
    background-repeat: no-repeat;
    }

  • #2
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You need to define a div id(#) or div class(.) for links you want set with differ attributes. In other words, you have defined a:link {format here} for everything that is a link. By using divisions you can group your attributes for example by using #secondary a:link {format here} (this would be identified as a div id).

    Now when you want to apply this style rule simply place the <div id="secondary"></div> around the links you want to a different style rule to. Hope this helps.

    sk

  • #3
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    SK,

    Thanks for your reply... I wonder if you could break it down just a little further for me as I'm still not quite with you on how exactly to create this new style — when you say to define a div class, how exactly is that set up in the .css dialog? Is that 'Use CSS Selector' or 'Custom Style'? - and do I define it in my existing style sheet or a new one and then attach? Then, is the correct code placement as follows:

    <div class="SecondaryLinks"><A HREF="http://www.whatever>FreeFind</A></div> ...like so?

    Could you indulge me with a simple step-by-step on this?

    Thanks, much appreciated!

    JD

  • #4
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No problem. If you're using Dreamweaver to format your stylesheet, I don't know step by step because I hardly use it. See if this helps you....

    Open your .css document and define as below....

    .secondarylinks a:link {format here}
    (same thing for a:hover or any other link properties you want to define)



    ...then in your actual html document group as such....

    <div class="secondarylinks">
    <a href="link.com">Link</a>
    </div>

    Hopefully this made more sense to you. If not, let me know and I will do my best to clarify.

  • #5
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    SK,

    ALMOST there, but there’s still one problem. – what I wasn’t getting before was the way the naming convention had to be used along with the ‘Use .CSS Selector’ option: .SecondaryLinks a:link. Very helpful, thanks! I created a new style to include link, visited and hover, and they are working SEMI-correctly, but for some reason they are still inheriting some of the attributes of my original links style, MAINLY, the white background box (on hover) even though I have set no such attributes for the secondary links. I even tried to set the secondary style attributes in opposition to the primary attributes but had only marginal success (could not get rid of the white rollover background). Please take a look at the URL below and the simple source code of the secondary style.

    http://www.healthdataservices.com/20...ndaryLinks.htm

    Do you know why these still aren’t working correctly? – Thanks so much for all your help.

    John

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    your default link styles take presedence. You need to make the links that use the white background secondary, and make default links the normal link psuedo classes.

  • #7
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Can I do that by simply swaping out the naming conventions or do I have to go through the whole exercise?

    Thanks for the insight!

    JD

  • #8
    Regular Coder
    Join Date
    Jul 2005
    Posts
    120
    Thanks
    36
    Thanked 0 Times in 0 Posts
    AE,

    Thanks for the great tip., everything works like a charm now...I simply swapped the naming conventions in the .css file, then applied the secondary style with the div tags:

    <td><div class="SecondaryLinks"><a href="http://www.medledger.com">MedLedger</a></div></td>

    Take a look:

    http://www.healthdataservices.com/20...ndaryLinks.htm

    Thanks guys for all your help!

    JD

  • #9
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you want to know anything further about how to "cascade" (because that's what you are doing), read Selectutorial
    CATdude about IE6: "All your box-model are belong to us"


  •  

    Posting Permissions

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