elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: ¿Eres nuevo? ¿Tienes dudas acerca del funcionamiento de la comunidad? Lee las Reglas Generales


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Lista que se sale del DIV, y no hay scroll
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Lista que se sale del DIV, y no hay scroll  (Leído 1,952 veces)
ccrunch


Desconectado Desconectado

Mensajes: 1.050



Ver Perfil WWW
Lista que se sale del DIV, y no hay scroll
« en: 9 Abril 2014, 20:04 pm »

Hola a todos, estoy haciendo mi web personal y me he vuelto a encontrar con problemas. Arriba del todo, tengo un div y dentro de él ul y li. Pues cuando encojo la ventana, los li se salen del div. Cómo puedo arreglar eso, que se queden dentro del div aunque se encoja la ventana?

Y por último, por qué no tengo Scroll hacia arriba/abajo cuando encojo la ventana? Pongo una captura y código.

Salu2 y gracias.

IMAGEN:
http://www.subirimagenes.com/privadas-rftjrftjf-2190697.html

CÓDIGO:
Código
  1. <div id="botones">
  2.     <ul id="menu-bar">
  3.         <li id="botones_principales"><a href="#">Principal</a></li>
  4.            <li id="botones_principales"><a href="#">Acerca de m&iacute;</a></li>
  5.            <li id="botones_principales"><a href="#">Curr&iacute;culum Vitae</a></li>
  6.            <li id="botones_principales"><a href="#">Proyectos personales</a></li>
  7.            <li id="botones_principales"><a href="#">Contacto</a></li>
  8.        </ul>
  9.    </div>


Código
  1. #botones {
  2. text-align:center;
  3. }
  4.  
  5. #botones_principales {
  6. display:inline;
  7. list-style-type:none;
  8. padding:5px;
  9.  
  10. }
  11.  
  12. #menu-bar {
  13.  width: 61%;
  14.  margin: 0px 0px 0px 0px;
  15.  padding: 5px 8px 0px 5px;
  16.  height: 39px;
  17.  line-height: 100%;
  18.  border-radius: 9px;
  19.  -webkit-border-radius: 9px;
  20.  -moz-border-radius: 9px;
  21.  box-shadow: 3px 5px 7px #666666;
  22.  -webkit-box-shadow: 3px 5px 7px #666666;
  23.  -moz-box-shadow: 3px 5px 7px #666666;
  24.  background: #8B8B8B;
  25.  background: linear-gradient(top,  #828282,  #C9C9C9);
  26.  background: -ms-linear-gradient(top,  #828282,  #C9C9C9);
  27.  background: -webkit-gradient(linear, left top, left bottom, from(#828282), to(#C9C9C9));
  28.  background: -moz-linear-gradient(top,  #828282,  #C9C9C9);
  29.  border: solid 1px #6D6D6D;
  30.  position:relative;
  31.  z-index:999;
  32. }
  33. #menu-bar li {
  34.  margin: 0px 0px 6px 0px;
  35.  padding: 0px 6px 0px 6px;
  36.  float: left;
  37.  position: relative;
  38.  list-style: none;
  39. }
  40. #menu-bar a {
  41.  font-weight: bold;
  42.  font-family: arial;
  43.  font-style: normal;
  44.  font-size: 12px;
  45.  color: #E7E5E5;
  46.  text-decoration: none;
  47.  display: block;
  48.  padding: 6px 20px 6px 20px;
  49.  margin: 0;
  50.  margin-bottom: 6px;
  51.  border-radius: 10px;
  52.  -webkit-border-radius: 10px;
  53.  -moz-border-radius: 10px;
  54.  text-shadow: 2px 2px 3px #000000;
  55. }
  56. #menu-bar li ul li a {
  57.  margin: 0;
  58. }
  59. #menu-bar .active a, #menu-bar li:hover > a {
  60.  background: #0399D4;
  61.  background: linear-gradient(top,  #EBEBEB,  #A1A1A1);
  62.  background: -ms-linear-gradient(top,  #EBEBEB,  #A1A1A1);
  63.  background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
  64.  background: -moz-linear-gradient(top,  #EBEBEB,  #A1A1A1);
  65.  color: #444444;
  66.  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  67.  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  68.  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  69.  text-shadow: 2px 2px 3px #FFFFFF;
  70. }
  71. #menu-bar ul li:hover a, #menu-bar li:hover li a {
  72.  background: none;
  73.  border: none;
  74.  color: #666;
  75.  -box-shadow: none;
  76.  -webkit-box-shadow: none;
  77.  -moz-box-shadow: none;
  78. }
  79. #menu-bar ul a:hover {
  80.  background: #0399D4 !important;
  81.  background: linear-gradient(top,  #04ACEC,  #0186BA) !important;
  82.  background: -ms-linear-gradient(top,  #04ACEC,  #0186BA) !important;
  83.  background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;
  84.  background: -moz-linear-gradient(top,  #04ACEC,  #0186BA) !important;
  85.  color: #FFFFFF !important;
  86.  border-radius: 0;
  87.  -webkit-border-radius: 0;
  88.  -moz-border-radius: 0;
  89.  text-shadow: 2px 2px 3px #FFFFFF;
  90. }
  91. #menu-bar ul {
  92.  background: #DDDDDD;
  93.  background: linear-gradient(top,  #FFFFFF,  #CFCFCF);
  94.  background: -ms-linear-gradient(top,  #FFFFFF,  #CFCFCF);
  95.  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
  96.  background: -moz-linear-gradient(top,  #FFFFFF,  #CFCFCF);
  97.  display: none;
  98.  margin: 0;
  99.  padding: 0;
  100.  width: 185px;
  101.  position: absolute;
  102.  top: 39px;
  103.  left: 0;
  104.  border: solid 1px #B4B4B4;
  105.  border-radius: 10px;
  106.  -webkit-border-radius: 10px;
  107.  -moz-border-radius: 10px;
  108.  -webkit-box-shadow: 2px 2px 3px #222222;
  109.  -moz-box-shadow: 2px 2px 3px #222222;
  110.  box-shadow: 2px 2px 3px #222222;
  111. }
  112. #menu-bar li:hover > ul {
  113.  display: block;
  114. }
  115. #menu-bar ul li {
  116.  float: none;
  117.  margin: 0;
  118.  padding: 0;
  119. }
  120. #menu-bar ul a {
  121.  padding:10px 0px 10px 15px;
  122.  color:#424242 !important;
  123.  font-size:12px;
  124.  font-style:normal;
  125.  font-family:arial;
  126.  font-weight: normal;
  127.  text-shadow: 2px 2px 3px #FFFFFF;
  128. }
  129. #menu-bar ul li:first-child > a {
  130.  border-top-left-radius: 10px;
  131.  -webkit-border-top-left-radius: 10px;
  132.  -moz-border-radius-topleft: 10px;
  133.  border-top-right-radius: 10px;
  134.  -webkit-border-top-right-radius: 10px;
  135.  -moz-border-radius-topright: 10px;
  136. }
  137. #menu-bar ul li:last-child > a {
  138.  border-bottom-left-radius: 10px;
  139.  -webkit-border-bottom-left-radius: 10px;
  140.  -moz-border-radius-bottomleft: 10px;
  141.  border-bottom-right-radius: 10px;
  142.  -webkit-border-bottom-right-radius: 10px;
  143.  -moz-border-radius-bottomright: 10px;
  144. }
  145. #menu-bar:after {
  146.  content: ".";
  147.  display: block;
  148.  clear: both;
  149.  visibility: hidden;
  150.  line-height: 0;
  151.  height: 0;
  152. }
  153. #menu-bar {
  154.  display: inline-block;
  155. }
  156.  html[xmlns] #menu-bar {
  157.  display: block;
  158. }
  159. * html #menu-bar {
  160.  height: 1%;
  161. }
  162.  


En línea

EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: Lista que se sale del DIV, y no hay scroll
« Respuesta #1 en: 9 Abril 2014, 21:35 pm »

Código
  1. #menu-bar {
  2.   width: 61%;
  3. ...
  4. }

Creo que se entiende por que.. podes asigar pixeles(px) en vez de porcentaje(%) o utilizar media query..

Código
  1. @media screen and (max-width: 960px) {  /* Si el ancho de la pantalla es menor a 960px */
  2.   #menu-bar {
  3.       width: 61%;  /* Cambiar ancho del menu */
  4.       ...
  5.   }
  6. }

Si queres adaptar tu sitio a varias resoluciones te recomiendo buscar sobre Responsive Web Design.

Y por último, por qué no tengo Scroll hacia arriba/abajo cuando encojo la ventana? Pongo una captura y código.

No lo se, solo pusiste parte del menu...


En línea

Camarografo77

Desconectado Desconectado

Mensajes: 13


Ver Perfil
Re: Lista que se sale del DIV, y no hay scroll
« Respuesta #2 en: 9 Abril 2014, 22:18 pm »

El problema es el ancho y alto que haz definido  :-\

Que te parece esto: http://jsfiddle.net/CvHq9/

Saludos.
En línea

ccrunch


Desconectado Desconectado

Mensajes: 1.050



Ver Perfil WWW
Re: Lista que se sale del DIV, y no hay scroll
« Respuesta #3 en: 12 Abril 2014, 21:01 pm »

Hola, ya está casi todo solucionado salvo la parte del scroll.

La otra parte del CSS es:

Código
  1. #body {
  2. background-image:url('../images/145 - I0QBKpR.jpg');
  3. background-repeat:no-repeat;
  4. background-size:cover;
  5. background-attachment:fixed;
  6. margin: 0px 0px 0px 0px;
  7.  
  8. }
  9.  
  10. #principal {
  11.  
  12. position:fixed;
  13. width:80%;
  14. margin-left:10%;
  15.  
  16. }
  17.  
  18. #contenido {
  19. filter:alpha(opacity=50); opacity:0.7;
  20. background-color:#000;
  21. -webkit-box-shadow: 1px 1px 50px 2px rgba(0,0,0,1);
  22. -moz-box-shadow: 1px 1px 50px 2px rgba(0,0,0,1);
  23. box-shadow: 1px 1px 50px 2px rgba(0,0,0,1);
  24. border:dashed 1px yellow;
  25. }
En línea

basickdagger


Desconectado Desconectado

Mensajes: 650


System.out.println("this is weird as fuck");


Ver Perfil
Re: Lista que se sale del DIV, y no hay scroll
« Respuesta #4 en: 14 Abril 2014, 17:02 pm »


hola ya probaste aplicando

Código
  1. #div_del_problema{
  2. min-height:150px;
  3. overflow:auto;
  4. }
  5.  

saludos
En línea

ccrunch


Desconectado Desconectado

Mensajes: 1.050



Ver Perfil WWW
Re: Lista que se sale del DIV, y no hay scroll
« Respuesta #5 en: 16 Abril 2014, 19:13 pm »

Hola, no era eso pero ya lo tengo solucionado.

En la capa problemática tenía la propiedad CSS:
Código
  1. position:fixed;

La he quitado y ya hay scroll cuando tiene que haberlo.

Salu2 y gracias.
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
PROBLEMA CON SCROLL BAR
Diseño Gráfico
SCUD2 1 1,827 Último mensaje 24 Diciembre 2004, 18:47 pm
por DownRate
Scroll
Programación Visual Basic
Piojoman 0 1,534 Último mensaje 20 Octubre 2005, 16:56 pm
por Piojoman
Cargar Lista de un fichero con fseek a una lista auxiliar en el programa.
Programación C/C++
samur88 1 3,092 Último mensaje 12 Mayo 2011, 23:25 pm
por samur88
España sale de la lista negra de la piratería de Estados Unidos
Noticias
wolfbcn 0 1,329 Último mensaje 1 Mayo 2012, 02:38 am
por wolfbcn
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines