1,105,232 Community Members

How do I reduce spacing

Member Avatar
trishfernan
Newbie Poster
14 posts since Jan 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

In this example how do I reduce the spacing (please refer the image)

Example1

CODINGS

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel="stylesheet" href="Slider.css">
        <script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
        <script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.0-packed.js"></script>
        <script type="text/javascript" language="javascript" src="helper-plugins/jquery.mousewheel.min.js"></script>
        <script type="text/javascript" language="javascript" src="helper-plugins/jquery.touchSwipe.min.js"></script>
        <script type="text/javascript" language="javascript" src="helper-plugins/jquery.transit.min.js"></script>
        <script type="text/javascript" language="javascript" src="helper-plugins/jquery.ba-throttle-debounce.min.js"></script>

        <script type="text/javascript" language="javascript">
            $(function() {

                //  Basic carousel, no options
                $('#foo0').carouFredSel();

                //  Basic carousel + timer, using CSS-transitions
                $('#foo1').carouFredSel({
                    auto: {
                        pauseOnHover: 'resume',
                        progress: '#timer1'
                    }
                }, {
                    transition: true
                });

                //  Scrolled by user interaction
                $('#foo2').carouFredSel({
                    auto: false,
                    prev: '#prev2',
                    next: '#next2',
                    pagination: "#pager2",
                    mousewheel: true,
                    swipe: {
                        onMouse: true,
                        onTouch: true
                    }
                });

                //  Variable number of visible items with variable sizes
                $('#foo3').carouFredSel({
                    width: 360,
                    height: 'auto',
                    prev: '#prev3',
                    next: '#next3',
                    auto: false
                });

                //  Responsive layout, resizing the items
                $('#foo4').carouFredSel({
                    responsive: true,
                    width: '100%',
                    scroll: 2,
                    items: {
                        width: 400,
                    //  height: '30%',  //  optionally resize item-height
                        visible: {
                            min: 2,
                            max: 6
                        }
                    }
                });

                //  Fuild layout, centering the items
                $('#foo5').carouFredSel({
                    width: '100%',
                    scroll: 2
                });

            });
        </script>

    </head>
    <body>

                <table>
  <tr>
    <td id="tb1" class="clearfix">
                <a id="prev2" class="button" href="#"></a>                </td>
    <td id="tb2" class="list_carousel">
                <div id="foo2">
                    <div id="ul" ></div>
                    <div id="ul" ></div>
                    <div id="ul" ></div>
                    <div id="ul" ></div>
                    <div id="ul" ></div>
                    <div id="ul" ></div>
                    <div id="ul" ></div>
                    <div id="ul" ></div>
                    <div id="ul" ></div>
                    <div id="ul" ></div>
                    <div id="ul" ></div>
                    <div id="ul" ></div>
                    <div id="ul" ></div>
                </div></td>
    <td id="tb1" class="clearfix">
      <a id="next2" class="button" href="#"></a>
    </td>
  </tr>
</table>

        <br />
    </body>
</html>

CSS

body, div, p {
                font-family: Arial, Helvetica, Verdana;

            }
            #prev2 {

    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    text-decoration: none;
}

#prev2:before, #prev2:after {
    display: block;
    height: 8px;
    margin-top: -6px;
    position: absolute;
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 9px;
    top: 50%;
    width: 0;
}

#prev2:after {
    margin-top: -1px;
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

#prev2:hover, #prev2:focus,
#prev2:hover:before, #prev2:hover:after,
#prev2:focus:before, #prev2:focus:after {
    color: #000;
}

            a {

    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding: 10px 25px 10px 10px;
    position: relative;
    text-decoration: none;
}

a:before, a:after {
    border-right: 2px solid;
    content: '';
    display: block;
    height: 8px;
    margin-top: -6px;
    position: absolute;
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    right: 9px;
    top: 50%;
    width: 0;
}

a:after {
    margin-top: -1px;
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

a:hover, a:focus,
a:hover:before, a:hover:after,
a:focus:before, a:focus:after {
    color: #000;
}


            .list_carousel #ul {

                border: 1px solid #999;
                width: 135px;
                height: 135px;
                margin: 22px;
                display: block;
                float: left;
            }

            #tb1 {
            width:35px;

            }
            #tb2 {
            height:150px;
            width:815px;
            }
            .clearfix {
                float: none;
                clear: both;
                }
            .button {
                float: left;
                margin-left: 10px;
                font-size: 15px;
                font-family: Arial;
                height:25px;
                color: #ffffff;
                font-size: 35px;
                padding: 10px;
                text-decoration: none;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
                -webkit-box-shadow: 0px 0px 1px #666666;
                -moz-box-shadow: 0px 0px 1px #666666;
                box-shadow: 0px 1px 0px #666666;
                text-shadow: 1px 1px 3px #666666;
                background: #696969;

            }
            .button:hover {
                background: #7a797a;
            }

            .timer {
                background-color: #999;
                height: 6px;
                width: 0px;
            }
Attachments
Member Avatar
stbuchok
Posting Shark
957 posts since May 2011
Reputation Points: 123 [?]
Q&As Helped to Solve: 142 [?]
Skill Endorsements: 2 [?]
 
0
 

My guess would be line 86 of your CSS. It would be easier to tell you if you had an example online.

Member Avatar
JorgeM
IT Addict
6,381 posts since Dec 2011
Reputation Points: 567 [?]
Q&As Helped to Solve: 953 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
0
 

I took a look at your code. It appears that you have a table that holds the "prev" icon in the first column, your content in the second, and the "fwd" icon in the third.

The width of the second column is what is creating this extra space. You currently have these cells to a width of 815px;

For example, set #tb2 to a width of say 750px and you will see the "fwd" icon move to the left.

#tb2 {
height:150px;
width:750px;
}

Also, I noticed that you have ID "tb1" used twice (lines 79 & 97) in your HTML code. Technically, you should change that to a class.

In your CSS code, you would change it to .tb1 and your HTML would be...
<td class="tb1 clearfix">

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article