Jump to content

Spacing Between Buttons


Asfastasdark
 Share

Recommended Posts

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?

Edited by Asfastasdark
Link to comment
Share on other sites

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

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

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

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

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>

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...