Reduce the space between scrolling links

Forum Moderators: not2easy

Message Too Old, No Replies

Reduce the space between scrolling links

Rain_Lover

2:53 am on Jul 4, 2012 (gmt 0)

Hi,

Sample:

<!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

Paul_o_b

9:04 am on Jul 4, 2012 (gmt 0)

One way to do it is to float the items and use a negative right margin on a floated parent to keep the floated items on one line.


<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
ul {
list-style:none;
margin:0;
padding:0
}
#container {
width:300px;
overflow-x:auto;
overflow-y:hidden;
}
#container ul {
float:left;
margin-right:-32767px;/* browser limit */
}
img { border:0; }
#container li {
float:left;
margin:0 1px 0 0
}
</style>
</head>
<body>
<div id="container">
<ul>
<li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
<li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
<li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
<li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
<li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
</ul>
</div>
</body>
</html>

Alternatively (but not very robustly) just close the gaps in the html between each element.

templatesofty

5:26 am on Aug 7, 2012 (gmt 0)

#container a {
margin:1px;
}
Start by using a css reset to get rid of browser defaults. Then use a css rule to specify the margins on the anchor.

[edited by: incrediBILL at 7:39 am (utc) on Aug 7, 2012]
[edit reason] removed URL, no sig links [/edit]

lucy24

7:31 am on Aug 7, 2012 (gmt 0)

Cover all possibilities. margin: 0 AND padding: 0 for both img and a in this context. And {text-decoration: none} on your img. Some browsers outline them, like the underlining on a default text link.