homepage Welcome to WebmasterWorld Guest from 23.22.212.158
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library : Charter : Moderator: open

CSS Forum

    
Reduce the space between scrolling links
Rain_Lover




msg:4472384		 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




msg:4472456		 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:4482438		 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




msg:4482478		 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved