4

Removing unwanted space between images

 3 years ago
source link: https://www.codesd.com/item/removing-unwanted-space-between-images.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Removing unwanted space between images

advertisements

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

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>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK