¡Hola a todos! Soy nuevo en el foro y no sé bien dónde debería publicar esto. Se supone un tema de estilos en CSS así que lo pongo aquí.
En este foro he encontrado siempre muchas soluciones a mis problemas, así que he pensando registrarme
Y bueno pues tengo una pregunta y mi problema es este. Llevo unas 3 semanas con Blog, me propusieron que si tenía canal en YouTube me hiciera un Blog también, y lo hice. Llevo todas estas semanas trabajando el diseño, y pues ahora estaba trabajando en el menú
Hasta aquí bien:
Mi problema es que el menú ha quedado muy bien, pero desde pantallas más pequeñas con poca resolución, se corta el menú, (el ejemplo lo doy poniendo más pequeña la ventana del navegador):
Y eso no sería un gran problema de diseño, no me importaría, pero lo que pasa es que los submenús se ven cortados, y aunque mueva la scrollbar inferior, el menú se no se mueve con el blog, supongo que por el
position:fixed; y quizá los 50px de margen izquierdo.
/* --------- He hecho este vídeo para explicarme mejor. --------- */
https://docs.google.com/file/d/0B70FyI2avUKbalNBVXpmQWNFQkk/edit?usp=sharing
Quiero mantener la propiedad position:fixed; ya que quiero que sea un menú flotante, pero ahí creo que radica el problema.
Por cierto os dejo el código de estilos aquí, el del blog de pruebas lo tengo un poco loco pero en el blog 'verdadero' lo tengo más ordenado:
Código HTML:
/* Menu horizontal con buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú */
height:25px;
padding-left:14px;
background: -webkit-gradient(linear, left top, left bottom, from(#23528c), to(#02306a)); /* Degradado de Chrome */
background: -moz-linear-gradient(top, #23528c, #02306a); /* Degradado de Mozilla */
border-radius:20px; /* Bordes redondeados de la barra principal */
border:1px solid #eeeeee; /* TRAZO DEL BORDE DE LA BARRA PRINCIPAL */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#23528c', endColorstr='#02306a'); /*Degradado de IE */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:25px;
position:relative;
z-index:5;
font-family:"Verdana", "Arial", "Lucida Grande","Tahoma";
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:25px;
line-height:24px;
color:#fff;
text-decoration:none;
font-family:"Verdana", "Arial", "Lucida Grande","Tahoma";
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
background: -webkit-gradient(linear, left top, left bottom, from(#23528c), to(#02306a)); /* Degradado de Chrome */
background: -moz-linear-gradient(top, #23528c, #02306a); /* Degradado de Mozilla */
border-right:1px solid #eeeeee; /* TRAZO DEL BORDE DE LA IZQUIERDA EN CADA ENLACE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#23528c', endColorstr='#02306a'); /*Degradado de IE */
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:25px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:25px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu li:hover ul.sub {
left:0;
top:24px;
background:#112853; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
background: -webkit-gradient(linear, left top, left bottom, from(#23528c), to(#02306a)); /* Degradado de Chrome */
background: -moz-linear-gradient(top, #23528c, #02306a); /* Degradado de Mozilla */
border-radius:5px; /* Bordes redondeados de la barra principal */
border:1px solid #eeeeee; /* TRAZO DEL BORDE DE LA BARRA PRINCIPAL */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#23528c', endColorstr='#02306a'); /*Degradado de IE */
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
clear:left;
width:auto;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:auto;
line-height:30px;
text-indent:5px;
color:#fff;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Color de fondo del submenú */
background: transparent url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcSPpqlI/AAAAAAAABSc/RseHiYluzAM/arrow_over.gif) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#2580a2; /* Color de fondo al pasar el cursor */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */
background:#2580a2 url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcSPpqlI/AAAAAAAABSc/RseHiYluzAM/arrow_over.gif) 185px 10px no-repeat; color:#fff;}
.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: transparent; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:auto;
z-index:4;
height:auto;
background: -webkit-gradient(linear, left top, left bottom, from(#23528c), to(#02306a)); /* Degradado de Chrome */
background: -moz-linear-gradient(top, #23528c, #02306a); /* Degradado de Mozilla */
border-radius:5px; /* Bordes redondeados de la barra principal */
border:1px solid #eeeeee; /* TRAZO DEL BORDE DE LA BARRA PRINCIPAL */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#23528c', endColorstr='#02306a'); /*Degradado de IE */
}
#search {
width: 228px; /* Ancho del buscador */
height: 20px;
float: right;
text-align: center;
margin-top: 2px;
margin-right: 3px;
/* Imagen de fondo del buscador */
background: url(https://googledrive.com/host/0BzPE8S1zSD2WWGs3WThoZV9TOXc) no-repeat;
}
#search-box {
margin-top: 2px;
width: 95%;
border:0px;
background: transparent;
text-align:center;
}
/*----------- Hacer flotante la barra Horizontal -------------*/
.barracentroArriba {
position:fixed;
font-family: Verdana, Tahoma, Arial;
font-size: 1.5ex;
float:left;
z-index: 10000;
height:auto;
top: -2px;
left:50px;
right:60px;
bottom:auto;
text-align: center;
vertical-align: middle;
padding:2px;
}
¿Alguna solución?
He leído las normas del foro así que prefiero no poner el enlace al blog ©
Gracias por vuestra ayuda
