Asfastasdark Posted September 10, 2009 Share Posted September 10, 2009 I have a few buttons at the side on my website, but there is a small space between each one of them that shouldn't be there. What am I doing wrong?Each of the buttons is 185x37 except the .navend buttons, which are 185x52.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"><head><meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /><meta http-equiv="Content-Language" content="en" /><meta name="description" content="" /><meta name="keywords" content="" /><meta name="copyright" content="Copyright © 2009 MyndSpace.org" /><link rel="stylesheet" type="text/css" href="style.css" /><title>MyndSpace.org | Share your Mind</title><script type="text/javascript" src="scripts.js"></script></head><body><div class="nav"><a href="index.html" id="home"><img src="images/trans.png" alt="Home" class="navend" /></a><br /><a href="showcase.html" id="showcase"><img src="images/trans.png" alt="Showcase" /></a><br /><a href="about.html" id="about"><img src="images/trans.png" alt="About" /></a><br /><a href="contact.html" id="contact"><img src="images/trans.png" alt="Contact" class="navend" /></a></div><div class="main"><div class="mainheader"></div><div class="maincontent"><div class="maintext"><p><img src="images/textwelcome.png" alt="Welcome to MyndSpace" class="title" /></p><p>This is your webrealm to share everything that is you with others at SMHS. This website will become a product of your creation—assuming an identity through your creative endeavors.</p><p><img src="images/textshare.png" alt="Share your Mind" class="title" /></p><p>Whatever interests that you have or knowledge that you possess—this is the place for you to share it with others. This project will continually grow and evolve as we all contribute.</p><p><img src="images/textldl.png" alt="Look - Discover - Learn" class="title" /></p><p>You can post anything that enriches the knowledge of others. You choose the topic—we'll even help you discover new ways to express you ideas technically. Artwork, writings, musical creations, web pages, videos, animations, powerpoints, poems, pictures, ... The list is endless!</p><p><img src="images/textinvolved.png" alt="Two ways to get involved" class="title" /></p><p>Join the MyndSpace crew, and work on the creation of the project. — or — Create and submit your creations for others to enjoy.</p></div></div><div class="mainfooter"></div></div></body></html> CSS: body {background: #101010;}.title {display: block;margin-bottom: 10px;margin-left: auto;margin-right: auto;margin-top: 10px;}.nav {float: left;}.nav a {border-width: 0px;margin: 0px;padding: 0px;}.nav img {height: 37px;width: 185px;border-width: 0px;}.nav img.navend {height: 52px;width: 185px;border-width: 0px;}a#home img {background: url("images/btnhome.png") top left no-repeat;}a#home:hover img {background: url("images/btnhomehover.png") top left no-repeat;}a#showcase img {background: url("images/btnshowcase.png") top left no-repeat;}a#showcase:hover img {background: url("images/btnshowcasehover.png") top left no-repeat;}a#about img {background: url("images/btnabout.png") top left no-repeat;}a#about:hover img {background: url("images/btnabouthover.png") top left no-repeat;}a#contact img {background: url("images/btncontact.png") top left no-repeat;}a#contact:hover img {background: url("images/btncontacthover.png") top left no-repeat;}.maincontent {background-image: url("images/mainbg.png");background-position: center;background-repeat: repeat-y;}.maintext {color: #ffffff;font-family: "Verdana", sans-serif;margin-left: 22.5%;margin-right: 22.5%;padding-bottom: 1px;padding-top: 1px;text-align: justify;text-indent: 50px;}.mainfooter {background-image: url("images/mainbottom.png");background-position: center;background-repeat: no-repeat;height: 46px;}.mainheader {background-image: url("images/maintop.png");background-position: center;background-repeat: no-repeat;height: 46px;}.menu {float: left;} And while we're at it, does anyone see anything unnecessary in my code? Link to comment Share on other sites More sharing options...
chibineku Posted September 10, 2009 Share Posted September 10, 2009 I believe HTML renders a line break in your code (not a <br />, but a real compile time line break) as a single space. Link to comment Share on other sites More sharing options...
Asfastasdark Posted September 11, 2009 Author Share Posted September 11, 2009 Nope. That wasn't it. Link to comment Share on other sites More sharing options...
jeffman Posted September 11, 2009 Share Posted September 11, 2009 The random line breaks and lack of sensible indentation is maddening. I keep staring at it trying to figure out what it's doing.You used the word button, but there are no buttons. So it took me a while to figure your "buttons" are images inside <a> elements.You say there is unwanted space. Usually, when people ask about that, it is a horizontal space, and chibineku's solution covers it.But you didn't say horizontal space. So maybe you mean a vertical space? If that's the case, you will never get anything to line up consistently if you are arranging vertical items with <br> and <p> elements. Those guys are only useful for text. Images and other elements require a whole other kind of plan. Link to comment Share on other sites More sharing options...
ravenshade Posted September 11, 2009 Share Posted September 11, 2009 Ack your code is so hard to read...get rid of the <br> tags completely, that will solve your vertical space problem. I believe the float syntax in CSS is useful for this situation. However if you can't be bothered with that, then try Tables, quick and easy for something like a navigational bar and no issues with space either. Link to comment Share on other sites More sharing options...
Asfastasdark Posted September 11, 2009 Author Share Posted September 11, 2009 I absolutely don't want to use tables if not necessary. The space I was talking about was vertical, by the way, yes. @Deirdre's Dad: I am talking about images. What do you suggest I use instead? And any general tips on my page so far, because I'm now starting to realize I'm doing a few things wrong? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 11, 2009 Share Posted September 11, 2009 lose the <br /> and use display:block; instead.problems here are. that you are using an html image tag for button? then attempting to change the background of it by using background image declaration???. not going to work.best way is to use display: block for the anchors, assign appropriate width and height, and then change background of the anchors.see below:css<style type="text/css">.nav a{display:block; height: 33px;width: 185px; background-position:top left; background-repeat: no-repeat; text-decoration:none;}.nav a.navend{height: 52px;width: 185px;}/*change images link to required*/.nav a#home:link, a#home:visited {background-image: url(button1.jpg);}.nav a#showcase:link, a#showcase:visited {background-image: url(button1.jpg);}.nav a#about:link, a#about:visited {background-image: url(button1.jpg);}.nav a#contact:link, a#contact:visited {background-image: url(button1.jpg);}.nav a#contact:hover {background-image: url(button2.jpg);}.nav a#home:hover {background-image: url(button2.jpg);}.nav a#showcase:hover{background-image: url(button2.jpg);}.nav a#about:hover {background-image: url(button2.jpg);}</style>html:<div class="nav"><a href="index.html" id="home" class="navend"></a><a href="showcase.html" id="showcase"></a><a href="about.html" id="about"></a><a href="contact.html" id="contact" class="navend"></a></div> Link to comment Share on other sites More sharing options...
Asfastasdark Posted September 11, 2009 Author Share Posted September 11, 2009 You, sir, are my God. Well... for the time being, that is. But that solved it, thanks so much . Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.