SitePoint Sponsor

User Tag List

Results 1 to 21 of 21

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2000
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am trying to incorporate a horizontal navigation bar on my Web site with non-underlined links. Since I want all of my other links underlined, what do I need to do to make some links sans underlines. Is it possible? Any help you can give me is greatly appreciated.
    Joanne Glasspoole
    www.glasspoole.com

  2. #2
    SitePoint Wizard dominique's Avatar
    Join Date
    Dec 2000
    Location
    orbis terrarum
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The stuff in blue-bold-italic is what you have to add to your page. It uses Cascading Style Sheets (CSS) to acheive the effect you want.

    Code:
    <html>
    <head>
    <title>No Underlines</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    .nav {  text-decoration: none}
    -->
    </style>
    </head>
    
    <body bgcolor="#FFFFFF" text="#000000">
    <p><a href="hey.html" class="nav">Hello World!</a></p>
    </body>
    </html>
    Greater explanation can be given if you still have some questions. I hope this is what you were looking for.

  3. #3
    SitePoint Addict gthorley's Avatar
    Join Date
    Oct 2000
    Location
    Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great reply.

    If sitepoint ever gives out awards you should get one.

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2000
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dominique,

    Would I add the class: nav to all of my links in the navigation bar (as you did in the example)? Is it possible to just note it once? I was looking in my CSS book last night and was thinking of setting the CSS for my navbar as an ID. Would that be the same as a class?

    Thanks for your help,
    Joanne Glasspoole
    www.glasspoole.com

  5. #5
    SitePoint Wizard dominique's Avatar
    Join Date
    Dec 2000
    Location
    orbis terrarum
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Too bad I can't follow up my great response with another one, but I don't know enough about CSS to help you more.

    I was trying some stuff with <span> but I couldn't get it working. I know there is something with ID but I'm unfamiliar with it.

    Maybe someone else knows. As for me I always use class="" with my links.

  6. #6
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll try to help.
    I'll just give you a general solution, though not viable if you use CSS extensively.

    To remove the lines in links, do this:

    <style type="text/css">
    a:link { text-decoration : none; }
    a:hover { text-decoration : none; }
    a:visited { text-decoration : none; }
    </style>

    do note that with this, all links, regardless of whether the link is in your horizontal table or not, all links will not have the underline option.

    an alternative would be:

    <style type="text/css">
    a.sidebar:link { text-decoration : underline; }
    a.sidebar:hover { text-decoration : underline; }
    a.sidebar:visited { text-decoration : underline; }
    </style>

    all links you want without underlining, you add this code:

    class="sidebar"

    eg: <a class="sidebar" href="#">hello</a>

    If you have any more problems, or that i didn't answer your question, please feel free to ask more! we're here to help =)
    Last edited by lynlimz; Mar 10, 2001 at 12:01.
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  7. #7
    SitePoint Wizard dominique's Avatar
    Join Date
    Dec 2000
    Location
    orbis terrarum
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Although your code acheives the desired effect lynlimz, it still requires you to add class="" to every link in the nav bar, which is what we were trying to avoid.

    Maybe there is no other way to do it....

  8. #8
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes.
    In standards compliance sake, ther is no other way.
    However, you could do this.
    before the navigational tbale begins,
    you add this before your navigational bar.
    this is making use of the fact that the latter styles reside over the original file.

    <style type="text/css">
    a:link { text-decoration : none; }
    a:hover { text-decoration : none; }
    a:visited { text-decoration : none; }
    </style>

    after that, when the navigational bar is done with, you just add the code again, this time replace 'none' with 'underline'
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  9. #9
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh yes.
    Another alternavtive would be using images for the navigational menu =)


    sorry, but I can't think of a more viable solution.
    thats all i have in my brain... ( if i had one )

    i';ve listed the most efficient ways/methods already
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  10. #10
    SitePoint Wizard dominique's Avatar
    Join Date
    Dec 2000
    Location
    orbis terrarum
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd stick with adding class="" to the links since it's more standards compliant and loads a lot faster than images.

    It isn't all that big of a deal anyway...

  11. #11
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    dominique is right

    lynlimz's method of redefining everything is not very standards compliant.

    You should always test your html/styles on all browsers. Netscape handles things differently. In some cases, the same term in Netscape has a totally different name so both versions need to be included in order to be compatible with both browsers.

    Test all the way down to version 4. Some people still use IE4 or NS4 - in fact quite a lot of visitors to my sites use NS4.

  12. #12
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mmj,

    My first post was directed at being standards compliance. But the problem is they want not to place class="" which is simply unavoidable if you want to use style sheets extensively. Specifically having different styles for different links in different areas of the page.

    In terms of compatibility, all my methods work in versions 4.0 and above, including mozilla.
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  13. #13
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    lynlimz, I have no problem with this.

    I have also used this technique in headers and navigation bars, etc.

    I was just emphasising the need to make sure something works in all of the various browsers, especially when CSS is involved. I was also illustrating the fact that even though some conventions are not standards compliant, they may sometimes be accepted by the major browsers anyway.

    My comments were directed towards jglasspoole, just as a helpful reminder that when experimenting with new CSS things, it is good to check cross-browser compatibility.

    A while ago, I designed a navigation bar that was to be included in many pages. Rather than allocate all the links to custom styles I just changed the default <A> styles within the head section (as you described) and redifined these defaults below the navigation bar. Thankfully, it worked.

  14. #14
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah. Definitely.

    Thanks!
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  15. #15
    SitePoint Enthusiast
    Join Date
    Sep 2000
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    check out my website and grab the css file by yourself, it works,

    rgds
    Markus
    http://www.webtipz.com
    http://www.MachMehrDraus.de
    Digital Photography and more!

  16. #16
    Gong!
    Join Date
    May 2000
    Location
    Helsinki, Finland
    Posts
    229
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by lynlimz
    <style type="text/css">
    a:link { text-decoration : none; }
    a:hover { text-decoration : none; }
    a:visited { text-decoration : none; }
    </style>
    If you want to follow the standards, the order of link elements specified in CSS file (either external or via style tag) has a matter, correct order is:
    Code:
    <style type="text/css">
    A:link    { color: red }    /* unvisited links */
    A:visited { color: blue }   /* visited links   */
    A:hover   { color: yellow } /* user hovers     */
    A:active  { color: lime }   /* active links    */
    </style>
    Direct quote from CSS2 specification: Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.
    HighCheats - game cheats, codes, tips and tricks for PC and various console platforms

  17. #17
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeha./ I forgot about the arrangement.

    In IE, it will still work. However, Mozilla browsers fail in the coloring when the order is incorrect
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  18. #18
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmahonen...

    Thanks...I didn't know that and I consider myself very skilled at CSS.

    to address the issue of ID over class...ID has a greater specificity than does class. YOU would use ID if you wanted to assign a very high specificity to an object. One that will override nearly ANY other style that could be inherited from another (parent) object.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  19. #19
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm..Thanks for that tip creole.
    Certainly makes things easier eh?
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  20. #20
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it certainly does...how are you doing by the way lynlimz? I haven't talked to you in a while/
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  21. #21
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah. Same here. In fact, to be alittle off-topic, I'
    ve not been active in sitepoint for 2 weeks or more. Been extremely busy with my projects and work.
    However, I'm getting more free time...hmm..so here I am! ehehz. =)
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein


Bookmarks

Posting Permissions

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