Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/10/2013, 10:23
lgo80
 
Fecha de Ingreso: agosto-2013
Mensajes: 20
Antigüedad: 10 años, 8 meses
Puntos: 0
Aayuda con una especie de barra de desplazamiento en un div!

Esto lo habia puesto en javascript pero me parece que la solucion es mas de css!

Hola que tal! por favor alguien me podria ayudar lo que necesito hacer me parece que es muy facil pero no lo puedo hacer! tengo un especie de maquetado y quiero con un boton ir poniendole objetos que en este caso use input tipo button pero podria ser li, p o cualquier cosa al div nav, el tema es que quiero que esten uno al lado del otro y cuando llegue al final del div que siga para la derecha pero sin que me aparezca la barra de direccionamiento y obviamente que no se agrande el div! tiene unos botones que quiero usar como para reemplazar la barra de scroll pero ese no es mi problema todavia lo que me pasa que cuando llega al tope a la derecha va para abajo y quiero que siga horizontalmente! les paso un ejemplo simple para que lo vean solo me alcanza conque me siga horizontalmente no importa lo de los botones!

este es el archivo principal .php
Cita:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="TSRh TeaM" />
<link href="estilo.css" rel="stylesheet" type="text/css" />
<script src="jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript">
var i = 0;
function agregar(){
i++;
$('#navbot').append('<input type="button" value="'+ i +'" />');
}
</script>
<title>Sin título 2</title>
</head>

<body>

<div id="top"></div>
<div id="nav">
<ul id="navbot"></ul>
<input type="button" class="mov" id="atras" value="<" />
<input type="button" class="mov" id="adelante" value=">" />
</div>
<div id="main">
<input id="agregar" type="button" value="Agregar" onclick="agregar();" />
</div>
<div id="pie"></div>

</body>
</html>
Y este es el archivo de estilo .css:

Cita:

* {
margin:0;
padding:0;
border:0;
}

body {
background-color:silver;
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#666666;
font-size:11px;
}

#top,#nav,#main,#pie{
margin: auto;
width: 950px;
}

#top{
height: 130px;
background-color: green;
}

#nav{
width: 930px;
height: 40px;
background-color: black;
padding: 5px 10px;
position: relative;
}

#navbot input{
width: 95px;
height: 19px;
background: silver;
font-size: 15px;
text-align: center;
padding-top: 4px;
margin: 8px 5px;
}

.mov{
height: 15px;
width: 15px;
margin-left: 5px;
margin-top: 13px;
}

#navbot{
width: 885px;
height: 40px;
float: left;
background-color: #FF8000;
margin-right: 2px;
/*overflow-x: no-display;
overflow-y:hidden;*/
overflow:hidden;


}

#main{
height: 100px;
background-color: #8080C0;
padding-top: 20px;
}

#pie{
height: 30px;
background-color: black;
}
Es un ejemplo lo que estoy mandando, pero no se como hacer eso que lo necesito para una aplicacion que estoy haciendo! Si alguno tiene la amabilidad de ayudarme con esto se lo agradeceria muchisimo! un abraso y gracias de antemano!