XHTMLboy Posted August 3, 2010 Share Posted August 3, 2010 Hi, i have just been trying to build a main navigation for my test website, but when i go to set the text-decoration property to none. The links still stay underlined. Please help thanks. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Links</title> <style type="text/css"> <!-- * { margin:0; padding:0;} #main-nav { font-family: Calibri; font-size: 1em; word-spacing: 20px; text-align: center; text-decoration: none; } li { display: inline; } a:link { color: #000; } a:visited { color: #000; } a:hover { color: #32CD99; } a:active, a:focus { color: #000; } --> </style> </head><body> <ul id="main-nav"> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Support</a></li> <li><a href="#">Clients</a></li> </ul></body></html> Link to comment Share on other sites More sharing options...
Synook Posted August 3, 2010 Share Posted August 3, 2010 You need to set the text-decoration for the actual anchor tags. Link to comment Share on other sites More sharing options...
ShadowMage Posted August 3, 2010 Share Posted August 3, 2010 As Synook pointed out, you need to have the text-decoration set for your a tags not their container. If you wanted to set it for all a's in the #main-nav container you could target them like this:#main-nav a {text-decoration: none;} Link to comment Share on other sites More sharing options...
XHTMLboy Posted August 3, 2010 Author Share Posted August 3, 2010 You need to set the text-decoration for the actual anchor tags.And i just did, it displays the links without the underlining, but all of the other properties don't take affect. but thanks for helping anyway Link to comment Share on other sites More sharing options...
ShadowMage Posted August 3, 2010 Share Posted August 3, 2010 What does your CSS look like now?Are the style declarations under #main-nav supposed to style your links? If so, you can leave everything the way you had it and just change the selector to the one I gave you in my last post.Ie.#main-nav {becomes$main-nav a { Link to comment Share on other sites More sharing options...
XHTMLboy Posted August 3, 2010 Author Share Posted August 3, 2010 What does your CSS look like now?Are the style declarations under #main-nav supposed to style your links? If so, you can leave everything the way you had it and just change the selector to the one I gave you in my last post.Ie.#main-nav {becomes$main-nav a {yes, i only wan't to change the links, but where i have got #main-nav in my css, it's been changed to main-nav a. i no that should only affect the links, but the properties i have given them seem to not be taking affect. But when the selecor is like #main-nav it seem's to apply some of the properties apart from the text-decoloration propertiy. Link to comment Share on other sites More sharing options...
thescientist Posted August 3, 2010 Share Posted August 3, 2010 add the properties you want to them to have to #main-nav a selector too. and so on and so forth for the pseudo classes too. If anything, let us see the latest version of your code. Link to comment Share on other sites More sharing options...
XHTMLboy Posted August 3, 2010 Author Share Posted August 3, 2010 add the properties you want to them to have to #main-nav a selector too. and so on and so forth for the pseudo classes too. If anything, let us see the latest version of your code.At the moment this is my latest code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatable" content="IE=Edge" /> <meta name="robots" contnt="Index, follow" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <title></title> <style type="text/css"> #main-nav a{ text-decoration: none; font-family: Arial; font-size: 1.2em; word-spacing: 20px; list-style-type: none; text-align: center;} li { display:inline;} a:link { color: #000;} a:visited { color:#000;} a:hover { color:#3C9;} a:active, a:focus { color: #CCC;} </style></head><body><ul id="main-nav"> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Testimonicals</a></li> <li><a href="#">Support</a></li></ul></body></html> And thanks for your help as it is very much appreciated Link to comment Share on other sites More sharing options...
ShadowMage Posted August 3, 2010 Share Posted August 3, 2010 Which properties aren't being applied? I can't see any reason why everything in your #main-nav a selector shouldn't be applied. Maybe try modifying the selector like this: #main-nav li aBTW, is the misspelling of "testimonials" deliberate? Link to comment Share on other sites More sharing options...
XHTMLboy Posted August 3, 2010 Author Share Posted August 3, 2010 Which properties aren't being applied? I can't see any reason why everything in your #main-nav a selector shouldn't be applied.BTW, is the misspelling of "testimonials" deliberate?No i'm just a crap speller, lol. But most properties work apart from text-align and word-spacing. Link to comment Share on other sites More sharing options...
ShadowMage Posted August 3, 2010 Share Posted August 3, 2010 No i'm just a crap speller, lol.OK, just checking. But most properties work apart from text-align and word-spacing.Those two won't work. You only have one word in each one so there isn't anything to space out with word-spacing. And text-align doesn't do anything for inline elements, which is what your <a> tags are. If you want fixed width links with centered text you need to set them as inline-blocks. Add this to your #main-nav a styles:display: inline-block;width: 100px; /*Or whatever you want*/You may also have to set the display of your li's to inline-block as well. I'm not sure if inline-block elements are allowed inside of inline elements. Link to comment Share on other sites More sharing options...
BlueDigit Posted August 3, 2010 Share Posted August 3, 2010 text-align won't do anything right now, since <a> fits itself to its content, leaving no space to center anything.word-spacing impacts the size of each space between words, and all the links in main-nav are only one word, so you won't see the effect. Were you thinking of letter-spacing?Edit: Hurr. Link to comment Share on other sites More sharing options...
XHTMLboy Posted August 3, 2010 Author Share Posted August 3, 2010 OK, just checking. :)Those two won't work. You only have one word in each one so there isn't anything to space out with word-spacing. And text-align doesn't do anything for inline elements, which is what your <a> tags are. If you want fixed width links with centered text you need to set them as inline-blocks. Add this to your #main-nav a styles:display: inline-block;width: 100px; /*Or whatever you want*/You may also have to set the display of your li's to inline-block as well. I'm not sure if inline-block elements are allowed inside of inline elements.Oooh thanks, it seem's to be working now. And i thought i would never find the problem. I guess i will just have to look up more on CSS. But thanks anyway Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.