Jump to content

Recommended Posts

I have hit a brick wall with this coding.

So... id like to know how to remove the spacing from in between the two navigation links. There a large gap, which is somehow active and id like to remove the gap so there is less of a space between the two links. Here is the code: Just paste the following code into this website: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

#nav, #nav ul {

padding: 0;
margin: 0;
list-style: none;

}

#nav a {
display: block;
width: 10em;

}

#nav li {
float: left;
width: 10em;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
}


</style>
</head>

<body>
<ul id="nav">
<li><a href="#">Percoidei</a>
	<ul>
		<li><a href="#">Remoras</a></li>
		<li><a href="#">Tilefishes</a></li>
		<li><a href="#">Bluefishes</a></li>
		<li><a href="#">Tigerfishes</a></li>
	</ul>
</li>

<li><a href="#">Anabantoidei</a>
	<ul>
		<li><a href="#">Climbing perches</a></li>
		<li><a href="#">Labyrinthfishes</a></li>
		<li><a href="#">Kissing gouramis</a></li>
		<li><a href="#">Pike-heads</a></li>
		<li><a href="#">Giant gouramis</a></li>
	</ul>
</li>

<!-- etc. -->

</ul>
</body>
</html>

Help would be greatly appreciated! Thank You

Link to comment
https://forums.phpfreaks.com/topic/265083-hi-guys-really-stuck-here/
Share on other sites

The spacing is made through the '10em' width on the <li>, therefore reduce the width value.

 

Thank you for your reply. Yes i know that part, but changing the value or leaving it as it is results in all of the navigation links having the same equal widths of 10em or the changed value. I want to be able to change or specify the width of each navigation link depending on their actual size. any ideas?

 

 

I want to be able to change or specify the width of each navigation link depending on their actual size. any ideas?

 

Then give each list item it's own class and style the class.  It's the best way to do what you're (unreasonably) wanting to do.  You could also do li:nth-child() to target patterns

The spacing is made through the '10em' width on the <li>, therefore reduce the width value.

 

Thank you for your reply. Yes i know that part, but changing the value or leaving it as it is results in all of the navigation links having the same equal widths of 10em or the changed value. I want to be able to change or specify the width of each navigation link depending on their actual size. any ideas?

 

Perhaps add padding and margin instead of width

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.