SitePoint Sponsor |
|
User Tag List
Results 1 to 21 of 21
Thread: Not underlining some links
-
Mar 7, 2001, 16:32 #1
- 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.
-
Mar 7, 2001, 19:00 #2
- 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>
-
Mar 7, 2001, 19:05 #3
- 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.
-
Mar 8, 2001, 10:06 #4
- 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,
-
Mar 8, 2001, 22:53 #5
- 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.
-
Mar 10, 2001, 10:53 #6
- 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
-
Mar 10, 2001, 11:49 #7
- 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....
-
Mar 10, 2001, 11:59 #8
- 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
-
Mar 10, 2001, 12:04 #9
- 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
-
Mar 10, 2001, 16:23 #10
- 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...
-
Mar 13, 2001, 00:39 #11
- 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.
-
Mar 13, 2001, 06:31 #12
- 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
-
Mar 13, 2001, 07:17 #13
- 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.
-
Mar 15, 2001, 00:25 #14
- 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
-
Mar 15, 2001, 04:15 #15
- 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.comhttp://www.MachMehrDraus.de
Digital Photography and more!
-
Mar 15, 2001, 04:51 #16
- 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>
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>
HighCheats - game cheats, codes, tips and tricks for PC and various console platforms
-
Mar 15, 2001, 07:33 #17
- 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
-
Mar 15, 2001, 09:39 #18
- 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
-
Mar 15, 2001, 18:37 #19
- 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
-
Mar 15, 2001, 20:25 #20
- 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
-
Mar 16, 2001, 01:45 #21
- 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