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:
<div id="botones">
<ul id="menu-bar">
<li id="botones_principales"><a href="#">Principal</a></li>
<li id="botones_principales"><a href="#">Acerca de mí</a></li>
<li id="botones_principales"><a href="#">Currículum Vitae</a></li>
<li id="botones_principales"><a href="#">Proyectos personales</a></li>
<li id="botones_principales"><a href="#">Contacto</a></li>
</ul>
</div>
#botones {
text-align:center;
}
#botones_principales {
display:inline;
list-style-type:none;
padding:5px;
}
#menu-bar {
width: 61%;
margin: 0px 0px 0px 0px;
padding: 5px 8px 0px 5px;
height: 39px;
line-height: 100%;
border-radius: 9px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
box-shadow: 3px 5px 7px #666666;
-webkit-box-shadow: 3px 5px 7px #666666;
-moz-box-shadow: 3px 5px 7px #666666;
background: #8B8B8B;
background: linear-gradient(top, #828282, #C9C9C9);
background: -ms-linear-gradient(top, #828282, #C9C9C9);
background: -webkit-gradient(linear, left top, left bottom, from(#828282), to(#C9C9C9));
background: -moz-linear-gradient(top, #828282, #C9C9C9);
border: solid 1px #6D6D6D;
position:relative;
z-index:999;
}
#menu-bar li {
margin: 0px 0px 6px 0px;
padding: 0px 6px 0px 6px;
float: left;
position: relative;
list-style: none;
}
#menu-bar a {
font-weight: bold;
font-family: arial;
font-style: normal;
font-size: 12px;
color: #E7E5E5;
text-decoration: none;
display: block;
padding: 6px 20px 6px 20px;
margin: 0;
margin-bottom: 6px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
text-shadow: 2px 2px 3px #000000;
}
#menu-bar li ul li a {
margin: 0;
}
#menu-bar .active a, #menu-bar li:hover > a {
background: #0399D4;
background: linear-gradient(top, #EBEBEB, #A1A1A1);
background: -ms-linear-gradient(top, #EBEBEB, #A1A1A1);
background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
background: -moz-linear-gradient(top, #EBEBEB, #A1A1A1);
color: #444444;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
background: none;
border: none;
color: #666;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover {
background: #0399D4 !important;
background: linear-gradient(top, #04ACEC, #0186BA) !important;
background: -ms-linear-gradient(top, #04ACEC, #0186BA) !important;
background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;
background: -moz-linear-gradient(top, #04ACEC, #0186BA) !important;
color: #FFFFFF !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul {
background: #DDDDDD;
background: linear-gradient(top, #FFFFFF, #CFCFCF);
background: -ms-linear-gradient(top, #FFFFFF, #CFCFCF);
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
background: -moz-linear-gradient(top, #FFFFFF, #CFCFCF);
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 39px;
left: 0;
border: solid 1px #B4B4B4;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 2px 2px 3px #222222;
-moz-box-shadow: 2px 2px 3px #222222;
box-shadow: 2px 2px 3px #222222;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-bar ul a {
padding:10px 0px 10px 15px;
color:#424242 !important;
font-size:12px;
font-style:normal;
font-family:arial;
font-weight: normal;
text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
* html #menu-bar {
height: 1%;
}
#menu-bar {
width: 61%;
...
}Creo que se entiende por que.. podes asigar pixeles(px) en vez de porcentaje(%) o utilizar media query..
@media screen and (max-width: 960px) { /* Si el ancho de la pantalla es menor a 960px */
#menu-bar {
width: 61%; /* Cambiar ancho del menu */
...
}
}Si queres adaptar tu sitio a varias resoluciones te recomiendo buscar sobre
Responsive Web Design.
Cita de: ccrunch en 9 Abril 2014, 20:04 PM
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...
El problema es el ancho y alto que haz definido :-\
Que te parece esto: http://jsfiddle.net/CvHq9/
Saludos.
Hola, ya está casi todo solucionado salvo la parte del scroll.
La otra parte del CSS es:
#body {
background-image:url('../images/145 - I0QBKpR.jpg');
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed;
margin: 0px 0px 0px 0px;
}
#principal {
position:fixed;
width:80%;
margin-left:10%;
}
#contenido {
filter:alpha(opacity=50); opacity:0.7;
background-color:#000;
-webkit-box-shadow: 1px 1px 50px 2px rgba(0,0,0,1);
-moz-box-shadow: 1px 1px 50px 2px rgba(0,0,0,1);
box-shadow: 1px 1px 50px 2px rgba(0,0,0,1);
border:dashed 1px yellow;
}
hola ya probaste aplicando
#div_del_problema{
min-height:150px;
overflow:auto;
}
saludos
Hola, no era eso pero ya lo tengo solucionado.
En la capa problemática tenía la propiedad CSS:
position:fixed;
La he quitado y ya hay scroll cuando tiene que haberlo.
Salu2 y gracias.