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

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

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!

faillure · #2 (**permalink**) 28/10/2013, 15:43

La falta de puntos, comas y otros signos de puntuación hacen incomprensible tu parrafada.
No obstante me atrevo a sugerir que si lo quieres hacer con css necesitas usar las multicolumnas css o el flexbox (flex-direction o flex-flow).

pzin · #3 (**permalink**) 29/10/2013, 02:13

Confirmo la dificultad de entenderte.

Re-re-releyendo llego a la conclusión que lo que quieres es tener un contenido uno al lado del otro y que no baje a la siguiente linea sino que siga...

¿Algo así?

Código HTML:

Ver original<div id="contenedor">
  <div>Hola</div>
  <div>Hola</div>
  <div>Hola</div>
</div>

Código CSS:

Ver originaldiv#contenedor {
  white-space: nowrap;
  x-overflow: scroll;
}
 
div#contenedor div {
  display: inline-block;
}

lgo80 · #4 (**permalink**) 29/10/2013, 11:06

Muchisimas gracias pzin! y tambien a faillure, lo que queria era lo que dijo pzin y lo probe y era eso la combinacion de nowrap y el inline-block, sabia que era una pavada, y disculpen mi redaccion es muy mala tengo que tratar de mejorarla les agradesco mucho a los 2 saludos y que les vaya bien!!