I am trying to change the position of the preview picture you see on the right to the bottom of the main panels, but am not able to!

alt text

I have made edits to the CSS to get them aligned under the main panel in a horizontal row but end up with it looking like this:

alt text

Can someone please tell me where I'm going wrong?

CSS:

#featured ul.ui-tabs-nav{ 

    position:absolute; 
    padding-top:400px; margin:0; 
    width:375px; 
}
#featured ul.ui-tabs-nav li{ 
    padding:0px 0; padding-left:0;  
    font-size:12px; 
    color:#666; 
}
#featured ul.ui-tabs-nav li img{ 
    float:left; margin:2px 5px; 
    background:#fff; 
    padding:2px; 
    border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{ 
    font-size:11px; font-family:Verdana; 
    line-height:18px; 
}
#featured li.ui-tabs-nav-item a{ 
    display:    inline; 
    height:60px; 
    color:#0088ce;  background:#fff; 
    line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{ 
    background:#f2f2f2; 
}
#featured li.ui-tabs-selected{ 
    background:url('images/selected-item.gif') top left no-repeat;  
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{ 
    background:#ccc; 

4 answers

0
points

Without seeing the actual working(not working) site it's hard to be accurate, but I'd try making the ul as wide as the main image, and also floating the li.

Answered over 6 years ago by Tony Crockford
0
points

Thanks, the whole code for the slider is:

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" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Featured Content Slider Using jQuery - Web Developer Plus  Demos</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });
</script>
</head>
<body>


        <h3>&raquo; Featured Content Slider Using jQuery</h3>

        <div id="featured" >
          <ul class="ui-tabs-nav" >
            <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1" ><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /></a></li>
          </ul>

        <!-- First Content -->
        <div id="fragment-1" class="ui-tabs-panel" style="">
            <img src="images/image1.jpg" alt="" />
             <div class="info" >
                <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
             </div>
        </div>

        <!-- Second Content -->
        <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image2.jpg" alt="" />
             <div class="info" >
                <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
                <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
             </div>
        </div>

        <!-- Third Content -->
        <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image3.jpg" alt="" />
             <div class="info" >
                <h2><a href="#" >35 Amazing Logo Designs</a></h2>
                <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
             </div>
        </div>

        <!-- Fourth Content -->
        <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image4.jpg" alt="" />
             <div class="info" >
                <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
                <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
             </div>
        </div>

        </div>
    </div>


</body>
</html>

CSS:

    #featured{ 
    width:400px; 
    padding-right:250px; 
    position:relative; 
    border:5px solid #ccc; 
    height:250px; 
    background:#fff;
}
#featured ul.ui-tabs-nav{ 
    position:absolute; 
    top:0; left:400px; 
    list-style:none; 
    padding:0; margin:0; 
    width:250px; 
}
#featured ul.ui-tabs-nav li{ 
    padding:1px 0; padding-left:13px;  
    font-size:12px; 
    color:#666; 
}
#featured ul.ui-tabs-nav li img{ 
    float:left; margin:2px 5px; 
    background:#fff; 
    padding:2px; 
    border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{ 
    font-size:11px; font-family:Verdana; 
    line-height:18px; 
}
#featured li.ui-tabs-nav-item a{ 
    display:block; 
    height:60px; 
    color:#333;  background:#fff; 
    line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{ 
    background:#f2f2f2; 
}
#featured li.ui-tabs-selected{ 
    background:url('images/selected-item.gif') top left no-repeat;  
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{ 
    background:#ccc; 
}
#featured .ui-tabs-panel{ 
    width:400px; height:250px; 
    background:#999; position:relative;
}
#featured .ui-tabs-panel .info{ 
    position:absolute; 
    top:180px; left:0; 
    height:70px; 
    background: url('images/transparent-bg.png'); 
}
#featured .info h2{ 
    font-size:18px; font-family:Georgia, serif; 
    color:#fff; padding:5px; margin:0;
    overflow:hidden; 
}
#featured .info p{ 
    margin:0 5px; 
    font-family:Verdana; font-size:11px; 
    line-height:15px; color:#f0f0f0;
}
#featured .info a{ 
    text-decoration:none; 
    color:#fff; 
}
#featured .info a:hover{ 
    text-decoration:underline; 
}
#featured .ui-tabs-hide{ 
    display:none; 
}
Answered over 6 years ago by Ajay Murthy
0
points

That's the code for the tutorial demo - you're hacking that code to make the thumbnails go under the main image, you need to adjust the widths and float the list items...

Answered over 6 years ago by Tony Crockford
0
points

Thanks for your help, will give it a go.

Answered over 6 years ago by Ajay Murthy