Reduce the space between scrolling links

**Rain Lover** · 07-03-2012, 09:51 PM

Hi,

Sample:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
   <style type="text/css">
	#container {width:300px; overflow-x:auto; overflow-y:hidden; white-space:nowrap;}
	img {border:0;}
   </style>
</head>
<body>
   <div id="container">
	<a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a>
   </div>
</body>
</html>

How can I reduce the space between the links to 1px?

Many thanks in advance!
Mike

**chrisranjana** · 07-04-2012, 01:55 AM

I guess making the images into a single line without newlines would be the first step

like

Code:

<a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a>

instead of

Code:

<a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a>

**hmsgoddess** · 07-05-2012, 08:36 AM

I am trying to understand exactly what it is your asking, however, I'll give you a answer as I understand your question.

My understanding of your question is that you want your links to line up next to each other like in a navigation bar, with a 1px spacing between the link boxes. If it is to be a navigation bar or similar you need to add HTML code to your links.
<div id="container">
<ul>
<li class="MyNavButton"><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
<li class="MyNavButton"><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
</ul>
</div>

The CSS for the markup above:

.MyNavButton {
display: block;
float: left;
width: 70px;
text-align: center;
position: relative;
margin-right: 1px;
}

The display must be set to block, a width must be set. This is only an example of the code I think your looking for of course adjustments would need to be made for your needs.

**Rain Lover** · 07-05-2012, 09:55 AM

Originally Posted by hmsgoddess

I am trying to understand exactly what it is your asking, however, I'll give you a answer as I understand your question.

Thanks for the answer, but I see no scrollbar. I also don't see the one-pixel margin between the images.

**hmsgoddess** · 07-05-2012, 10:27 AM

the 1 px is in the CSS between the <li> tags. I assume you me no scroll bar you couldn't see all of the code I posted.

HTML Code:

<div id="container">
<ul>
<li class="MyNavButton"><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
<li class="MyNavButton"><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
</ul>
</div>


The CSS for the markup above:

.MyNavButton {
display: block;
float: left;
width: 70px;
text-align: center;
position: relative;
margin-right: 1px;
}

Thread: Reduce the space between scrolling links

Thread Tools

Display

Reduce the space between scrolling links

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions