www.webdeveloper.com
Results 1 to 5 of 5

Thread: Reduce the space between scrolling links

  1. #1
    Join Date
    Nov 2009
    Posts
    80

    Reduce the space between scrolling links

    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>
    How can I reduce the space between the links to 1px?

    Many thanks in advance!
    Mike

  2. #2
    Join Date
    May 2004
    Location
    chennai, tamil nadu, India
    Posts
    437
    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>
    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>
    Chris, Senior Developer, Chrisranjana.com
    Php Programmers

  3. #3
    Join Date
    Jul 2012
    Location
    Florida
    Posts
    22
    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.

  4. #4
    Join Date
    Nov 2009
    Posts
    80
    Quote Originally Posted by hmsgoddess View Post
    I am trying to understand exactly what it is your asking, however, I'll give you a answer as I understand your question.
    Thanks for the answer, but I see no scrollbar. I also don't see the one-pixel margin between the images.

  5. #5
    Join Date
    Jul 2012
    Location
    Florida
    Posts
    22
    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.


    HTML Code:
    <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;
    }
    Last edited by hmsgoddess; 07-05-2012 at 10:29 AM. Reason: thought to add

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles