homepage Welcome to WebmasterWorld Guest from 23.22.173.58
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Reduce the space between scrolling links
Rain_Lover



 
Msg#: 4472382 posted 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

10+ Year Member



 
Msg#: 4472382 posted 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



 
Msg#: 4472382 posted 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

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4472382 posted 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved