Como modificar Div width 100%

j84625 · #1 (**permalink**) 03/03/2010, 10:00

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>

j84625 · #2 (**permalink**) 03/03/2010, 11:30

ya esta solucionado no vi que tenia 250 de margen :P