XHTMLboy Posted July 30, 2010 Share Posted July 30, 2010 Hi at the moment i have been trying to learn CSS and have learned most of the selectors. But this piece of code is not displaying the links inline and think it's todo with the selector but not sure. <html> <head> <title></tite><style type="text/css"> * { margin: 0; padding: 0; } a:link {color: #000;} a:visited {color: #000;} a:hover {color:#00FFCC;} div a { display: inline; text-decoration: none; font-family: Arial; list-style-type: none; word-spacing: 2px; text-transform: capitalize; } </style></head><body> <div id="Main-Nav"> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Products</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Blog</a><li> <li><a href="#">Contact</a></li> </div></body><html> This should work, because it's a decendent. But it doesn't seem to be applying the affects i wan't. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 30, 2010 Share Posted July 30, 2010 its because the anchor is inline, but the <li> it is in, is not! try.li{display:inline;} Link to comment Share on other sites More sharing options...
XHTMLboy Posted July 30, 2010 Author Share Posted July 30, 2010 its because the anchor is inline, but the <li> it is in, is not! try.li{display:inline;}Thankyou, this has seemed to work even thow i don't get how it's worked. But thankyou Link to comment Share on other sites More sharing options...
dsonesuk Posted July 30, 2010 Share Posted July 30, 2010 anchors are already inline meaning they butt up to each other in line, li, div, p are block elements meaning they take the full width of their parent container element, and stack below each other, unless you turn them into a inline element.couple errors with your code <div id="Main-Nav"> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Products</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Blog</a><li> <li><a href="#">Contact</a></li> </div>Should be <div id="Main-Nav"><ul><!--missing open ul tag--> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Products</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Blog</a></li> <!--you have open tag instead of li closing tag --> <li><a href="#">Contact</a></li></ul><!--missing close ul tag--> </div> Link to comment Share on other sites More sharing options...
XHTMLboy Posted July 30, 2010 Author Share Posted July 30, 2010 anchors are already inline meaning they butt up to each other in line, li, div, p are block elements meaning they take the full width of their parent container element, and stack below each other, unless you turn them into a inline element.couple errors with your code <div id="Main-Nav"> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Products</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Blog</a><li> <li><a href="#">Contact</a></li> </div>Should be <div id="Main-Nav"><ul><!--missing open ul tag--> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Products</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Blog</a></li> <!--you have open tag instead of li closing tag --> <li><a href="#">Contact</a></li></ul><!--missing close ul tag--> </div> Thankyou for telling me my mistakes, it has been a wile since i learned xhtml and at some point will have to go back over some books again, but thankyou Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.