/    Sign up×
Community /Pin to ProfileBookmark

Reduce the space between scrolling links

Copy linkTweet thisAlerts:
Jul 04.2012

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>[/CODE]

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

Many thanks in advance!
Mike

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@chrisranjanaJul 04.2012 — 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>[/CODE]

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>[/CODE]
Copy linkTweet thisAlerts:
@hmsgoddessJul 05.2012 — 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.
Copy linkTweet thisAlerts:
@Rain_LoverauthorJul 05.2012 — I am trying to understand exactly what it is your asking, however, I'll give you a answer as I understand your question.[/QUOTE]

Thanks for the answer, but I see no scrollbar. I also don't see the one-pixel margin between the images.
Copy linkTweet thisAlerts:
@hmsgoddessJul 05.2012 — 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.


[code=html]<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;
}[/code]
×

Success!

Help @Rain_Lover spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...