Hola no soy un experto con las div por lo tanto pido ayuda ahora estoy luchando por hacer que el slider se adapte al tamaño del navegador width 100%
Código HTML:
#featured{
width:800px;
padding-right:250px;
position:relative;
height:250px;
float: right;
border: 10px solid #006BAF;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0;
left:800px;
list-style:none;
padding:0;
margin:0;
width:250px;
height: 250px;
background-color: #006BAF;
}
#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;
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-position: left top;
}
/* fondo selec */
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background-color: #006BAF;
color: #FFF;
}
#featured .ui-tabs-panel{
width:800px;
height:250px;
position:relative;
text-align: right;
background-color: #006BAF;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px;
left:0;
height:70px;
background: url('images/transparent-bg.png');
width: 800px;
}
#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;
}
Código HTML:
<html>
<head>
<title>slider</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="slider/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>
<div id="featured" >
<div id="fragment-1" class="ui-tabs-panel" style="">Contenido 01</div>
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1">
<a href="#fragment-1">
<img src="slider/images/image1-small.jpg" alt="" />
<span>Menu 01</span>
</a>
</li>
<li class="ui-tabs-nav-item" id="nav-fragment-2">
<a href="#fragment-2">
<img src="slider/images/image2-small.jpg" alt="" />
<span>Menu 02</span>
</a>
</li>
<li class="ui-tabs-nav-item" id="nav-fragment-3">
<a href="#fragment-3">
<img src="slider/images/image3-small.jpg" alt="" />
<span>Menu 03</span>
</a>
</li>
<li class="ui-tabs-nav-item" id="nav-fragment-4">
<a href="#fragment-4">
<img src="slider/images/image4-small.jpg" alt="" />
<span>Menu 04</span>
</a>
</li>
</ul>
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">Contenido 02</div>
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">Contenido 03</div>
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">Contenido 04</div>
</div>
</body>
</html>