Descuadre de menú y problema con miniaturas subcategorías

[arkitroch]

Buenas, acabo de comprar una plantilla para mi web y tengo varios problemas:

 

- No me caben todas las categorías de primer nivel en el módulo "topmenu". Me saca dos categorías fuera de las barras del menú. Lo que yo quiero hacer es que la barra inferior del menú bajara un poco para que pudiesen entrar las dos categorías que se me quedan descolgadas.

He estado mirando el .php del módulo topmenu pero no encuentro nada.

 

- No entiendo que hace el tema cuando pinchas en una categoría, ya que me duplica las marcas y me crea algunas categorías llamadas "Miniaturas". Además, si pinchas por ejemplo en Perfume mujer no se ven cuadradas las subcategorías.

Aquí si que no entiendo nada. No entiendo el comportamiento del tema.

 

Por favor, a ver si me podéis echar una mano para solucionar estos problemillas, ya que ando un poco perdido.

 

La web es www.perfumeriachezlabeaute.com

 

Ayuda, por favor!!

 

Un saludo compañeros!

Edited August 30, 2012 by arkitroch (see edit history)

[shacker]

lo del menu lo puedes solucionar achicando el tamaño de la fuente

 

no encuentro donde tienes los duplicados

[arkitroch]

lo del menu lo puedes solucionar achicando el tamaño de la fuente

 

no encuentro donde tienes los duplicados

 

- Lo de achicar el tamaño de la fuente es una solución, pero me gustaría ampliar el alto del menú para que entren las dos líneas de categorías, ¿crees que será posible?

 

- Lo de los duplicados, miniaturas, y mal encuadre de las imágenes lo ves si pinchas en Perfumes Mujer por ejemplo. Cuando pinchas en Perfumes Mujer, ves todas las marcas de Perfumes Mujer pero se ven mal, algunas están duplicadas, están mal encuadradas, no entiendo que pasa.

 

Muchas gracias por tu respuesta!!

 

Un saludo!!

[dvid]

Yo modifique el ancho (Mas no el grosor) de mi menu desde modules/blocktopmenu/css/superfishmodified.css

 

Quizás te sirva.

[nadie]

Para que las subcategorías, no se descuadren, fichero:

 

/themes/boutique/css/category.css

 

Busca esto:

 

body#category #subcategories li a {
color: #282828;
float: left;
font-weight: 700;
text-align: left;
width: 100%;
font-size: 12px;
}

 

 

Y déjalo así:

 

body#category #subcategories li a {
color: #282828;
float: left;
font-weight: 700;
text-align: left;
width: 100%;
font-size: 12px;
height: 38px;
}

[arkitroch]

Para que las subcategorías, no se descuadren, fichero:

 

/themes/boutique/css/category.css

 

Busca esto:

 

body#category #subcategories li a {
color: #282828;
float: left;
font-weight: 700;
text-align: left;
width: 100%;
font-size: 12px;
}

 

 

Y déjalo así:

 

body#category #subcategories li a {
color: #282828;
float: left;
font-weight: 700;
text-align: left;
width: 100%;
font-size: 12px;
height: 38px;
}

 

¡Perfecto! Muchas gracias Victor!

 

Respecto al menú, voy a probar ahora a bajarle el font y aumentarle el ancho. A ver si consigo también que cuando pases el ratón por una categoría principal no se abra un desplegable con las subcategorías, ya que son muchas y descuadra la página. Simplemente que en el menú se vean las categorías principales y no aparezcan las subcategorías, que ya aparecen dentro en el menu del lateral izquierdo.

 

Muchas gracias por vuestra ayuda!

 

Un saludo compañeros!

[arkitroch]

Estoy intentando achicar el tamaño de la fuenta y aumentar el ancho del menú pero no hay manera. He reducido todos los font-size y ampliado todos los width (uno por uno) y no hay ningún cambio en el menú, cosa que me extraña. Tengo activado "Forzar la compilación" y nada, el menú no hace ningún cambio.

 

Os pego el código del archivo superfish-modified.css , a ver si me estoy equivocando.

 

/*** ESSENTIAL STYLES ***/
.sf-contener {clear: both;margin: 98px 0 0;}
.sf-right {
 float:right;
 margin-right:14px;
 width:7px;
}
.sf-menu, .sf-menu * {list-style: none;}
ul.sf-menu {
padding:0;
width:980px;/* 980 */
background:url(../img/menu_bg.png) no-repeat left top;
height:42px;
line-height:42px;
font-family:arial;
font-size:13px;
font-weight:normal!important;
margin-top:30px;
float:left;
}
div.border {
/*border-bottom:1px solid #ccc;
width:100%;
margin-top:35px;*/
}
.sf-menu ul {
position:absolute;
top:-999em;
width:10em; /* left offset of submenus need to match (see below) */
background:url(../img/sub_bg.png);
margin-left:9px;
z-index:9999;
}
.sf-menu ul li {
width:100%;
}
.sf-menu li:hover {
visibility:inherit; /* fixes IE7 'sticky bug' */
}
.sfHover {
color:#000!important;
}
.sf-menu li:hover a{
color:#000;
}
.sf-menu li:hover li a {
color:#fff;
}
.sf-menu li {
float: left;
   padding: 0px;
   position: relative;
   width: 156px;
   z-index: 998;
text-align:center;
}
.sf-menu li:first-child {
width:150px;
padding: 0;
}
.sf-menu li li, .sf-menu li li:first-child {
padding:0 0 0 4px;
width: 155px;
font-family:arial;
font-size:12px;
font-weight:normal!important;
text-align:left;
}
.sf-menu li li a {
font-family:arial;
font-size:12px;
font-weight:normal!important;
background:none;
line-height:25px;
height:25px;
color:#fff!important;
}
.sf-menu li li a:hover {
background:none;
}
.sf-menu a {
display:block;
position:relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left:0;
top:35px; /* match top ul list item height */
z-index:99;
width:auto;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top:-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left:100%; /* match ul width */
top:55px;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top:-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left:100%; /* match ul width */
top:0;
}
/*** DEMO SKIN ***/
.sf-menu {
margin-bottom: 1em;
margin:0 auto;
}
.sf-menu a {
display:block;
margin-right:2px;
padding: 5px 0 5px 0px;
line-height:35px;
border:0;
text-decoration:none;
}
.sf-menu a:hover, .sf-menu a:visited {
}
.sf-menu a li a {
line-height:22px;
}
.sf-menu a   { /* visited pseudo selector so IE6 applies text colour*/
white-space:nowrap;
font-family:'Oswald', Arial;
text-transform:uppercase;
}
.sf-menu a:hover {colocr:#F16E50}
.sf-menu li li {background:none;}
.sf-menu li li:hover {background:none;}
/*** arrows **/
.sf-menu a.sf-with-ul {
min-width:1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
overflow:hidden;
display:block;
position:absolute;
top:1.05em; /* IE6 only */
right:10px;
width:10px;
height:55px;
text-indent:-999em;
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
top:11px;
background-position:0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern browsers*/
}
/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
background:#3b362e; /* arrow hovers for modern browsers*/
}
/*** shadows for all but IE6 ***/
.sf-shadow ul {
padding:0 8px 9px 0;

}
li.sf-search {
 float:right;
 line-height: 25px;
 background:inherit;
}
li.sf-search input {
 margin-top:4px;
 padding:3px 0 3px 20px;
 -moz-border-radius:0 5px 5px 0;
 background:url(../img/search.gif) no-repeat left center #fff;
 border:none;
}

 

Ya he modificado todos los valores y nada

[Rubén]

Mi recomendación (no es una orden ni obligación que conste) es que está perfecta la web como está, me encanta el diseño y por ahora yo no veo ningún error, será cosa de mirarla a fondo

[nadie]

El tamaño de la fuente, de los elementos de primer nivel del menu, lo puedes cambiar en el fichero:

 

/themes/boutique/css/global.css

 

Aquí:

 

.ddsmoothmenu ul#topnav li a {
display: block;
float: left;
color: #BEA27D;
font-size: 12px;
font-weight: bold;
font-family: "Oswald", Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 3px 18px;
margin: 0;
text-transform: uppercase;
line-height: 36px;
}

[shacker]

recuerda deshabilitar la cache desde preferencias para ver los cambios por las dudas

[arkitroch]

Mi recomendación (no es una orden ni obligación que conste) es que está perfecta la web como está, me encanta el diseño y por ahora yo no veo ningún error, será cosa de mirarla a fondo

 

Gracias por tu comentario excellencedogs . A mi me gusta mucho el diseño, pero lo que no me gusta es que cuando pasas el ratón por encima de una categoría de primer nivel, se abra el desplegable con las subcategorías, porque en algunas categorías de primer nivel tengo más de 30 subcategorías y el desplegable es demasiado largo, jodiendo la estética de la web.

 

¿Cómo puedo hacer para que cuando pase el ratón por encima de la categoría de primer nivel NO se abra el desplegable con las subcategorías?

 

El tamaño de la fuente, de los elementos de primer nivel del menu, lo puedes cambiar en el fichero:

 

/themes/boutique/css/global.css

 

Aquí:

 

.ddsmoothmenu ul#topnav li a {
display: block;
float: left;
color: #BEA27D;
font-size: 12px;
font-weight: bold;
font-family: "Oswald", Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 3px 18px;
margin: 0;
text-transform: uppercase;
line-height: 36px;
}

 

Muchas gracias Victor! Ya lo tengo todo en una linea, pero no consigo centrarlo. He probado align:center; y cosas así pero nada

 

recuerda deshabilitar la cache desde preferencias para ver los cambios por las dudas

 

Gracias por el comentario, hasta que no lo he hecho no veía los cambios jeje.

 

------

 

Lo que quiero ahora es quitar el desplegable de subcategorías e intentar centrar el menú. A ver si lo conseguimos! jaja

 

Muchas gracias por vuestra ayuda!!

[nadie]

Gracias por tu comentario excellencedogs . A mi me gusta mucho el diseño, pero lo que no me gusta es que cuando pasas el ratón por encima de una categoría de primer nivel, se abra el desplegable con las subcategorías, porque en algunas categorías de primer nivel tengo más de 30 subcategorías y el desplegable es demasiado largo, jodiendo la estética de la web.

 

¿Cómo puedo hacer para que cuando pase el ratón por encima de la categoría de primer nivel NO se abra el desplegable con las subcategorías?

 

 

 

Muchas gracias Victor! Ya lo tengo todo en una linea, pero no consigo centrarlo. He probado align:center; y cosas así pero nada

 

 

 

Gracias por el comentario, hasta que no lo he hecho no veía los cambios jeje.

 

------

 

Lo que quiero ahora es quitar el desplegable de subcategorías e intentar centrar el menú. A ver si lo conseguimos! jaja

 

Muchas gracias por vuestra ayuda!!

 

Centrar el menú:

 

Fichero:

 

/themes/boutique/css/global.css

 

Buscar esto:

 

.ddsmoothmenu {
height: 42px;
position: relative;
font-size: 12px;
z-index: 100;
text-align: left;
}

 

Y por ejemplo lo dejas así:

 

.ddsmoothmenu {
height: 42px;
position: relative;
font-size: 12px;
z-index: 100;
text-align: left;
padding-left: 9px;
}

[arkitroch]

Perfecto!

 

Ahora voy a ver cómo puedo hacer para que no salga el desplegable de las subcategorías.

[arkitroch]

Solucionado.

 

Lo que he hecho ha sido añadir links (Add Menu Top Link), en vez de seleccionar las categorías del catálogo. Espero que le sirva a alguién más de ayuda.

 

Doy el tema por cerrado.

[nadie]

Perfecto!

 

 

Un placer ayudarte y servirte

 

Un saludo y recuerda que estaremos en el foro, para guiarte por este mundo oscuro y tenebroso.

[shacker]

muchas gracias por compartir la solucion

[arkitroch]

Despues de dar el tema por solucionado me acabo de dar cuenta que en Internet Explorer me siguen apareciendo dos categorías fuera del menu (por debajo). En Chrome y Mozilla se ven bien.

 

Lo que hice fue, siguiendo las indicaciones de Victor, bajar el tamaño de la fuenta y achicar el margen entre cada una de las categorías.

 

¿Qué puedo hacer para que en Internet Explorer también se vea bien, si se me ve bien en el resto de navegadores?

 

Un saludo compañeros!

Edited August 27, 2012 by arkitroch (see edit history)

[nadie]

Despues de dar el tema por solucionado me acabo de dar cuenta que en Internet Explorer me siguen apareciendo dos categorías fuera del menu (por debajo). En Chrome y Mozilla se ven bien.

 

Lo que hice fue, siguiendo las indicaciones de Victor, bajar el tamaño de la fuenta y achicar el margen entre cada una de las categorías.

 

¿Qué puedo hacer para que en Internet Explorer también se vea bien, si se me ve bien en el resto de navegadores?

 

Un saludo compañeros!

 

A mi en IE9 se me ve bien.

 

Un Saludo

[nadie]

Prueba introducir, esto:

 

<meta http-equiv="X-UA-Compatible" content="IE=9" />

 

En el fichero header.tpl de tu plantilla, debajo de:

 

 <meta name="robots" content="{if isset($nobots)}no{/if}index,follow" />

 

 

No se te olvide forzar compilación.

[arkitroch]

A mi en IE 8 se me ve así:

 

 

Victor, a ver si puedes mirarme en este enlace por ejemplo si el footer lo ves centrado o lo ves vertical, porque yo desde IE8 lo veo vertical, a ver si va a ser problema mio también...

 

http://www.perfumeriachezlabeaute.com/66-perfumes-ninos

 

¿Qué puedo hacer entonces con lo del menu para que se vea bien en IE 8 tambien?

 

Un saludo y gracias por responder.

[shacker]

si el menu es un modulo, fijate que las css y js de los modulos sean llamados con addjs y addcss, sino los carga e nun tpl directo y esto hace que se vea mal

[arkitroch]

si el menu es un modulo, fijate que las css y js de los modulos sean llamados con addjs y addcss, sino los carga e nun tpl directo y esto hace que se vea mal

 

Gracias por tu respuesta shacker. El menu es un módulo, pero no encuentro lo que dices. En el archivo .php del modulo llama al tpl de la siguiente manera:

 

public function hooktop($param)
 {
 global $smarty;
 $this->makeMenu();
 $smarty->assign('MENU_SEARCH', Configuration::get('MOD_BLOCKTOPMENU_SEARCH'));
 $smarty->assign('MENU', $this->_menu);
 $smarty->assign('this_path', $this->_path);
   return $this->display(__FILE__, 'blocktopmenu.tpl');
 }

 

Esa es la única llamada que hay en el archivo .php al tpl del módulo. No hay ninguna llamada al css del mismo.

 

Por otro lado, en el archivo tpl del módulo si encuentro una llamda al css:

 

<script type="text/javascript" src="{$this_path}js/hoverIntent.js"></script>
    <script type="text/javascript" src="{$this_path}js/superfish-modified.js"></script>
    <script type="text/javascript" src="{$this_path}js/ddsmoothmenu.js"></script>
    <script type="text/javascript" src="{$this_path}js/menu.js"></script>
    <link rel="stylesheet" type="text/css" href="{$this_path}css/superfish-modified.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="{$this_path}css/ddsmoothmenu.css" media="screen"/>  

 

¿Son correctas esas llamadas?

 

Respecto a la solución de Victor:

 

Prueba introducir, esto:

 

<meta http-equiv="X-UA-Compatible" content="IE=9" />

 

En el fichero header.tpl de tu plantilla, debajo de:

 

 <meta name="robots" content="{if isset($nobots)}no{/if}index,follow" />

 

 

No se te olvide forzar compilación.

 

Probé y no hubo modificación alguna, forzando compilación y borrando cookies y cache por si acaso.

 

Lo que más me fastidia es que se vea bien en IE9 (ya lo he comprobado yo tambien desde otro pc) pero no se vea en el IE8. Vaya mie.*!./ de navegador...

 

A ver si me ayudais para conseguir que la web se vea bien en IE, que es el único navegador que me falta!!

 

PD: Los cambies que realize en global.css para achicar el tamaño de la fuente del menu y la separacion entre categorías quedaron así:

 

}
.ddsmoothmenu{
height: 42px;
position: relative;
font-size: 12px;
z-index: 100;
text-align: left;
padding-left: 9px;
}

 

Un saludo compañeros!!!

[arkitroch]

Modificando los datos del menu en el global.css consigo dejar bien el menu para IE, pero ahora se me descuadra en Chrome y Firefox.

 

Os pego el código del menu, porque he visto dónde podría estar el error:

 

/*Top Menu*/
.navigation {
 padding:0;
width:950px;/* 980 */
background:url(../img/headerlinks-bg.gif) repeat-x bottom left;
height:42px;
line-height:42px;
font-family:"oswald", Arial, Helvetica, sans-serif;
border-bottom:1px solid #BEA27D;
border-top:1px solid #BEA27D;
font-size:14px;
font-weight:normal!important;
margin-top:6px;
float:left;
clear:both;
box-shadow: 0 0 20px #EDEDED;

}
.ddsmoothmenu{
height: 32px;
position: inherit;
font-size: 8px;
z-index: 100;
text-align: center;
padding-left: 5px;
}
.topmenu-right{
float: none;
margin: 0px 0 0;
}
/*Top level list items*/
.ddsmoothmenu ul#topnav {
margin:0 auto;
padding:0;
}
.ddsmoothmenu ul#topnav li {
display:block;
float:left;
list-style:none;
position:relative;
line-height:21px;
}
.ddsmoothmenu ul#topnav li:first-child {
border-left:none;
}
.ddsmoothmenu ul#topnav li a {
display: block;
float: right;
color: #BEA27D;
font-size: 11px;
font-weight: bold;
font-family: "Oswald", Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 2px 7px;
margin: 0;
text-transform: uppercase;
line-height: 36px;
}
.ddsmoothmenu ul#topnav li:hover a {
color:#fff;
background-color:#BEA27D;
text-shadow:#fff 0px 0px 10px;
}
.ddsmoothmenu ul#topnav ul.children {
position:absolute;
display:none;
width:179px; 
top:42px !important;
left:0;
z-index:9999;
padding:12px 0px 5px 0px;
margin:0;
background:#BEA27D;
border:none;
border-radius:0px 0px 5px 5px;
float:left;
text-shadow:none;
}
.ddsmoothmenu ul#topnav ul.children li ul.children {
   background: #AA8E80;
border:none;
border-radius:5px;
   padding: 2px 0;
}
.ddsmoothmenu ul#topnav ul.children li {
float:left;
clear:both;
border-top:1px dotted #fff;
} 
.ddsmoothmenu ul#topnav ul.children li:first-child {
border-top:none;
}
.ddsmoothmenu ul#topnav ul.children a, .ddsmoothmenu ul#topnav li:hover ul.children a {
display:block;
width:160px;
height:auto;
padding:4px 4px 5px 15px;
float:left;  
font-size:12px;
font-weight:normal;
background:none;
text-align:left;
text-transform:none;
color:#fff;
border:none;
text-shadow:none;
}   
.ddsmoothmenu ul#topnav ul.children a:hover, .ddsmoothmenu ul#topnav li:hover ul.children li {
background:none;
text-shadow:none;
}
.ddsmoothmenu ul#topnav ul.children li a:hover {
background:#A98C6B;
color:#fff;
text-shadow:none;
}
.ddsmoothmenu ul#topnav li ul.children li ul li a:hover {

   width:153px;
}
.ddsmoothmenu ul#topnav li ul.children li ul li {
   margin-left: 7px;
   width:172px;
text-shadow:none;
}
* html .ddsmoothmenu ul#topnav li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/

 

Fijaros en las dos últimas lineas "Holly Hack for IE" No entiendo que significa ese 1%, pero es posible que el problema venga de por ahí, porque en Internet Explorer se ve diferente de Chrome y Firefox. Si lo ajusto para Chrome y Firefox se ve mal en IE, y viceversa.

[arkitroch]

¿Nadie puede ayudarme?