删除图像之间不需要的空间

Question

My problem is in my navigation bar, which can be found here: http://grupocoral.netai.net/

There is a space between those images and i want to remove it. How can I do it?

Javascript Code:

function swap(element, image) {
  element.src = image;
}

And the html code:

<div id="navbar"><a href="index.php"><img src="images/homeover.png"></a>
<a href="membros.php"><img src="images/membros.png" onmouseover="swap(this, 'images/membrosover.png');" onmouseout="swap(this, 'images/membros.png');"></a>
<a href="canticos.php"><img src="images/canticos.png" onmouseover="swap(this, 'images/canticosover.png');" onmouseout="swap(this, 'images/canticos.png');"></a>
<a href="celeb.php"><img src="images/celebracoes.png" onmouseover="swap(this, 'images/celebracoesover.png');" onmouseout="swap(this, 'images/celebracoes.png');"></a>
<a href="contactos.php"><img src="images/contactos.png" onmouseover="swap(this, 'images/contactosover.png');" onmouseout="swap(this, 'images/contactos.png');"></a>
</div>

Just in case, navbar CSS code:

#navbar{
    width: 1280px;
    margin: 0 auto;
    height: 40px;
    horizontal-align: center;
    padding:inherit;
}

By the way, do you know any other way of making a menu like that without JS?

Thanks, langel

Answer 1

It's due to the white space in your code. Remove the white space between your links and that should clear it up.

In other words, change your HTML block of navigation to:

<div id="navbar"><a href="index.php"><img src="images/homeover.png"></a><a href="membros.php"><img src="images/membros.png" onmouseover="swap(this, 'images/membrosover.png');" onmouseout="swap(this, 'images/membros.png');"></a><a href="canticos.php"><img src="images/canticos.png" onmouseover="swap(this, 'images/canticosover.png');" onmouseout="swap(this, 'images/canticos.png');"></a><a href="celeb.php"><img src="images/celebracoes.png" onmouseover="swap(this, 'images/celebracoesover.png');" onmouseout="swap(this, 'images/celebracoes.png');"></a><a href="contactos.php"><img src="images/contactos.png" onmouseover="swap(this, 'images/contactosover.png');" onmouseout="swap(this, 'images/contactos.png');"></a>    </div>

Answer 2

Inline elements like these are whitespace dependent, which means that browsers will render some whitespace between them.

to counter this you can either run all your elements together on one line

<a href="#">link</a><a href="#">link</a>

or block the closing and opening tags

<a href="#">
     link</a><a href="#">
</a>
<a href="#">
     link</a><a href="#">
</a>

:)

Answer 3

This keeps my code clean and it removes the whitespaces in the code.

<a><img src="" /></a><!-- 
--><a><img src="" /></a><!-- 
--><a><img src="" /></a><!-- 
--><a><img src="" /></a>

Answer 4

to remove the space just remove the break line between the anchor ex:

and i suggest to use the css without the js :

<div id="navbar">
<a class="home" href="#"></a><a href="" class="member"></a>....
</div>

CSS :

#navbar a{display:inline-block;margin:0;}
#navbar a.member{background:url(images/member.png) no-repeat 0 0}
#navbar a.member:hover{background:url(images/memberhover.png) no-repeat 0 0}

Answer 5

You do have an alternative option to your javascript image swap. You can use the CSS :hover in combination with background-image .

dabblet example: http://dabblet.com/gist/2253898

CSS:

#Membros{
    background-image:url('http://grupocoral.netai.net/images/membros.png');
    width:240px;
    height:40px;
}
#Membros:hover {
    background-image:url('http://grupocoral.netai.net/images/membrosover.png');
}

HTML

<a href="index.php"><div id="Membros"></div></a>

I hope this helps!

Answer 6

By the way, do you know any other way of making a menu like that without JS?

Yes, here is an example , I've used one of your background image link with 'Home' on it, you should use only one image without any text label on it.

Answer 7

您也可以使用：hover css伪类来改变背景，使用：hover css伪类来改变背景，但是即使在JS被禁用时它也会使这个菜单工作css_pseudo_classes