Menú en Blog, no se ve completo en otras resoluciones, quiero mantener position:fixed

rbnncls · #1 (**permalink**) 19/09/2013, 14:07

¡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

pzin · #2 (**permalink**) 19/09/2013, 14:29

Bienvenido al foro.

Sólo te faltó un audiobook para explicar el problema.

¿Cómo quieres que se comporte el menú cuando en resoluciones pequeñas? Si quieres que mantenga el mismo aspecto, puedes indicar al elemento contenedor del menú que tenga un ancho mínimo específico. Por ejemplo:

Código CSS:

Ver original#menuWrapper {
  width: 100%;
  min-width: 960px;
}

Si quieres que se comporte de otro forma, tendrás que explicar como. Porque si los elementos no caben, en principio irán hacia abajo, claro.

rbnncls · #3 (**permalink**) 20/09/2013, 14:53

¡Gracias por tu ayuda!

Esa solución ya la tenía, simplemente especificando el ancho de la página, el problema es que el menú es dinámico o no sé cómo expresarlo, quiero decir que tiene la propiedad fixed, y el problema es que los submenús no se ven ni aunque mueva el scrollbar ya que el menú se sigue manteniendo en su posición de forma estática

En fin, he pensado dejarlo estático para no darme más problemas, así le den uso a la flechita "Volver arriba", jajaja

Gracias igualmente. Aunque dejaré el tema abierto por si alguien responde alguna solución, ya lo que me queda es la intriga y la curiosidad de resolverlo.