Mencarta Posted February 7, 2010 Share Posted February 7, 2010 I have a bunch of links that are side by side. My links render like a list. The webpage is here: http://webhleps.zxq.net/index.css body { background-color:rgb(193,154,107); margin:0px; padding:0px; text-align:center;}#header { margin:5px 0px 0px; padding:0px; width:800px; height:200px;}#nav { margin:0px auto; background-color:rgb(222,222,222); width:800px; height:25px;}#navl { display:block; width:100px; font-size:21px; color:rgb(0,0,0); text-decoration:none;} index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>WebHelps - Home</title> <link rel="stylesheet" href="index.css" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <img id="header" src="images/header.png" alt="WebHelps" /> <!--Navigation Bar--> <div id="nav"><a id="navl" href="index.php" title="Home">Home</a><a id="navl" href="posts.php" title="Posts">Posts</a><a id="navl" href="software.php" title="Software">Software</a><a id="navl" href="contact.php" title="Contact">Contact</a></div> </body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted February 7, 2010 Share Posted February 7, 2010 You can't have the same id on more than one element, use classes instead.What is your question, anyways? Link to comment Share on other sites More sharing options...
ProblemHelpPlease Posted February 7, 2010 Share Posted February 7, 2010 The fact that you are using the same id and have it set to 100 width (presumably the idea being for each id) is most likely the cause of the links appearing under each other. Do as Ingolme suggest and give each id a different value or use classes. Link to comment Share on other sites More sharing options...
Mencarta Posted February 7, 2010 Author Share Posted February 7, 2010 Sorry if I didn't make myself clear enough. I want it to be all on the same line. I tried using classes instead, but it still puts each link on a new line. Link to comment Share on other sites More sharing options...
jeffman Posted February 7, 2010 Share Posted February 7, 2010 That's what display:block does, unless you also float the elements.The more common plan for this sort of thing uses a list element instead of div elements. Explore the following: #nav li { display: inline; list-style: none; padding-right: 20px; }#nav a,#nav a:link,#nav a:visited { color: #641C36; text-decoration: none;}#nav a:hover { color: #fff;}---<ul id="nav"> <li><a href="/">Home</a></li> <li><a href="http://www.google.com">Google</a></li> <li><a href="http://en.wikipedia.org/wiki/Main_Page">Wikipedia</a></li> <li><a href="http://www.apple.com">Apple</a></li> <li><a href="http://www.microsoft.com">Microsoft</a></li></ul> Link to comment Share on other sites More sharing options...
Mencarta Posted February 7, 2010 Author Share Posted February 7, 2010 I went with the <ul> idea and I got it working, but there is a little space that is useless. How do I get rid of that space? Link to comment Share on other sites More sharing options...
jeffman Posted February 7, 2010 Share Posted February 7, 2010 Post your code or provide a link. Link to comment Share on other sites More sharing options...
Mencarta Posted February 7, 2010 Author Share Posted February 7, 2010 The link is still the same. If you want my css its here: http://webhelps.zxq.net/index.css Link to comment Share on other sites More sharing options...
jeffman Posted February 7, 2010 Share Posted February 7, 2010 I didn't visit the first link because it's typed incorrectly.I assume you mean that big gap on the left?Most HTML elements come with default properties. Lists are automatically indented. That's what you're seeing on the left. Some browsers may use padding to achieve that, others might use margins. I like to reset padding and margins to 0 using the universal CSS selector. You could reset just the ul element if you like. Depending on the browser, you might need to reset your li elements as well.That should back the list up all the way to the left. If you need to adjust it, you'll be starting from 0, which is a good place to start.You may have other issues too if you don't change the display property of the li elements the way I showed you. float works in the browser where you're testing it, but it might not work consistently everywhere. I'm not sure. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.