[SOLUCIONADO] Ayuda con una especie de barra de desplazamiento en un div!

lgo80 · #1 (**permalink**) 26/10/2013, 23:00

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!

IsaBelM · #2 (**permalink**) 27/10/2013, 14:32

si te he entendido, puesto que se te han olvidado los signos de puntuación, el problema que te ocupara ahora mismo se soluciona con css. al selector #nav le añades overflow: hidden y el width lo cambias a auto

lgo80 · #3 (**permalink**) 27/10/2013, 20:11

Gracias por la respuesta IsaBelM pero no se me arreglo el problema! Calculo que me quisiste decir que lo agregara en el selector navbot cosa que lo hice y me sigue pasando lo mismo! igual por las dudas lo probe en el nav pero se me corre de lugar el div queda mal! y tampoco funciona! es muy raro, el tema es simple la solucion parece que no jeje este ejemplo lo que hace es agregar en el selector navbot botones uno al lado del otro cuando llega al limite del div horizontalmente lo que yo quiero es que siga horizontalmente pero lo que hace como que pasa a otra linea y hace otra hilera uno al lado del otro! Como que respeta el tamaño del width pero no del height! ya probe varias cosas pero no puedo!