webdevRefinery Forum: Reduce the space between scrolling links - webdevRefinery Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Rate Topic: -----

User is offline Hermes 

  • Group: Members
  • Posts: 77
  • Joined: 02-May 11

Posted 03 July 2012 - 09:50 PM (#1)

Reduce the space between scrolling links


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
0

User is offline ianonavy 

  • Group: Members
  • Posts: 685
  • Joined: 14-April 10
  • Expertise:HTML,CSS,Java,Javascript,Python

Posted 03 July 2012 - 10:29 PM (#2)

This isn't really much of a solution, by try removing the line breaks between each 
<a>
tag. 
reputation += 1 if post.is_helpful else 0
0

User is online TheEmpty 

  • I say words in sequences.
  • Group: Members
  • Posts: 5154
  • Joined: 02-October 10
  • Expertise:HTML,CSS,PHP,Java,Javascript,Python,Ruby on Rails,SQL

Posted 03 July 2012 - 10:34 PM (#3)

It's like text padding or something. But you should be using a ul for this.
Reserved.
0

User is offline Hermes 

  • Group: Members
  • Posts: 77
  • Joined: 02-May 11

Posted 03 July 2012 - 10:48 PM (#4)

View Postianonavy, on 03 July 2012 - 10:29 PM, said:

This isn't really much of a solution, by try removing the line breaks between each 
<a>
tag.


Not a bad idea, but I'd prefer to control the space with CSS.
0

User is online TheEmpty 

  • I say words in sequences.
  • Group: Members
  • Posts: 5154
  • Joined: 02-October 10
  • Expertise:HTML,CSS,PHP,Java,Javascript,Python,Ruby on Rails,SQL

Posted 03 July 2012 - 11:40 PM (#5)

View PostHermes, on 03 July 2012 - 10:48 PM, said:

Not a bad idea, but I'd prefer to control the space with CSS.

Yes, you would do it with CSS still ;)

%ul
  %li One
  %li Two



li {
  display: inline;
  list-style-type: none;
  padding-right: 5px;
}


or if you're after vertical, which your code doesn't show.

li {
  padding: 0;
  margin: 0 0 0 1px;
}

Reserved.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

2 User(s) are reading this topic
0 members, 2 guests, 0 anonymous users


IPB Skins by Skinbox

Enter your sign in name and password

Sign in options
  Or sign in with these services