Foros del Web » Creando para Internet » CSS »

Como modificar Div width 100%

Estas en el tema de Como modificar Div width 100% en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/03/2010, 10:00
Avatar de j84625  
Fecha de Ingreso: junio-2008
Ubicación: Valencia
Mensajes: 170
Antigüedad: 9 años, 6 meses
Puntos: 2
Como modificar Div width 100%

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> 
__________________
Pagina de sobre los animales
Los animales

Última edición por j84625; 03/03/2010 a las 11:17
  #2 (permalink)  
Antiguo 03/03/2010, 11:30
Avatar de j84625  
Fecha de Ingreso: junio-2008
Ubicación: Valencia
Mensajes: 170
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: Como modificar Div width 100%

ya esta solucionado no vi que tenia 250 de margen :P
__________________
Pagina de sobre los animales
Los animales

Etiquetas: modificar, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:50.