CSS - Menú con filter que se me resiste - No sé como ordenarlo

   
Vista:

Menú con filter que se me resiste - No sé como ordenarlo

Publicado por marlbran (3 intervenciones) el 22/12/2014 22:49:14
Hola a todos.

Ando algo desquiciado desde hace tres días con un menu que no alcanza a dominar.

Se trata de un menu para filtrar categorías de portfolio en wordpress.

Hasta ahora he logrado, más o menos, lo que buscaba, pero tengo dos problemas para los que no encuentro solución, y estoy casi convencido de que son unas tonterías en css, pero que yo, seminovato, no doy para más.

Os dejo unos pantallazos de cómo está y de cómo quisiera que estuviera.

1ª IMAGEN

pantalla1

2ª IMAGEN

pantalla2

3ª IMAGEN

pantalla3

Intentaré explicarme lo mejor posible.

En primer lugar me gustaría poder centrar el "menú" principal. Si lo intento con display=inline-block o con position=abolute se me fasticia todo lo demás y aún es más complicado solucionarlo. Así que hasta ahora sólo he conseguido que se viera más o menos bien el menú desplazado a la izquierda.

Lo otro que me trae totalmente de cabeza es que cuando abro el submenú del penúltimo item del menú ("Géneros"), el submenú se despliega correctamente (no centrado como quisiera pero bien), pero me desplaza el último item del menú principal ("Roles") por detrás del submenú que había desplegado.

Lo que necesito es que ese item de menú ("Roles") no se mueva del sitio. Que no se rompa el menú, vamos.

La verdad es que no sé si me estoy sabiendo explicar de forma comprensiva. Cualquier duda, por favor, preguntadmela. Estoy muy interesado en resolver esto lo más pronto que pueda.

Os dejo copia de todo el css que estoy usando ahora, aunque sé que estará lleno de errores.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/*==== PORTFOLIO FILTERS ====*/
 
#filters {
	margin-top: 10px;
	margin-bottom: 0px;
	text-align: center;
	display: block;
	float: none;
	z-index: 2;
	position: relative;
}
#filters ul {
	margin: 0;
	list-style: none;
	padding: 0;
}
#filters ul li {
	display: inline;
}
#filters ul li a {
	display: block;
	float: left;
	padding: 2px 5px;
	color: inherit;
	margin-right: 5px;
	margin-bottom: 5px;
	font-weight: bold;
}
#filters ul li a h3 {
	font-size: 18px;
	padding: 2px 6px 0px;
	border: 2px solid;
}
#filters ul li a:hover h3, #filters ul li a.active h3 {
	color: #FFD600;
}
 
#filters li > ul {
    display: none;
}
 
#filters li:hover > ul {
    display: inline-block;
    width: 100%;
    padding-top: 20px;
    margin-top: -27px;
}
.genre:hover {
    cursor: default;
}
.roles:hover {
    cursor: default;
}


La web, por si queréis ver en vivo lo que os comento es: http://certamen.doblerol.com

Espero que algún alma caritativa me pueda echar una mano, porque lo estoy llevando fatal. :-P
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Menú con filter que se me resiste - No sé como ordenarlo

Publicado por marlbran (3 intervenciones) el 23/12/2014 09:13:21
Por cierto, y por si ayuda, añado también la parte del php que conforma el menú. Se me olvidó agregarlo antes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!-- START PORTFOLIO FILTERING -->
   <div  id="filters" class="sixteen columns">
 
			<ul class="styled-list clearfix">
				<li><a href="#" data-filter="*" class="active"><h3><?php _e('Todos', 'doblerol'); ?></h3></a></li>
 
                                <li><a href="#" data-filter=".term-votados"><h3><?php _e('+ Votados', 'doblerol'); ?></h3></a></li>
 
				<li><a href="#" data-filter=".term-cortos-finalistas"><h3><?php _e('Cortos finalistas', 'doblerol'); ?></h3></a></li>
 
				<li class="genre"><a><h3><?php _e('Géneros', 'doblerol'); ?></h3></a>
                                        <ul>
					   <li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
					   <li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
					   <li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
					   <li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
					   <li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
					   <li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
					   <li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
					   <li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
 
					</ul></li>
 
				<li class="roles"><a><h3><?php _e('Roles', 'doblerol'); ?></h3></a>
                                        <ul>
					   <li><a href="#" data-filter=".term-2personajes"><h3>2 personajes</h3></a></li>
					   <li><a href="#" data-filter=".term-3personajes"><h3>3 personajes</h3></a></li>
					   <li><a href="#" data-filter=".term-4personajes"><h3>4 personajes</h3></a></li>
					</ul></li>
                        </ul>
 
 
 
    </div><!-- END PORTFOLIO FILTERING -->
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Menú con filter que se me resiste - No sé como ordenarlo

Publicado por xve (349 intervenciones) el 23/12/2014 09:15:15
Hola Marlbran, seria posible que nos dejaras el código html del menú? ya que con el estilo solo, no se muy bien como probarlo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Menú con filter que se me resiste - No sé como ordenarlo

Publicado por marlbran (3 intervenciones) el 23/12/2014 10:06:37
Hola, xve.

Si, el código está justo encima de tu respuesta. No obstante te lo dejo de nuevo aquí:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!-- START PORTFOLIO FILTERING -->
   <div  id="filters" class="sixteen columns">
 
			<ul class="styled-list clearfix">
				<li><a href="#" data-filter="*" class="active"><h3><?php _e('Todos', 'doblerol'); ?></h3></a></li>
 
                                <li><a href="#" data-filter=".term-votados"><h3><?php _e('+ Votados', 'doblerol'); ?></h3></a></li>
 
				<li><a href="#" data-filter=".term-cortos-finalistas"><h3><?php _e('Cortos finalistas', 'doblerol'); ?></h3></a></li>
 
				<li class="genre"><a><h3><?php _e('Géneros', 'doblerol'); ?></h3></a>
                                        <ul>
					   <li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
					   <li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
					   <li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
					   <li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
					   <li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
					   <li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
					   <li><a href="#" data-filter=".term-comedia"><h3>Comedia</h3></a></li>
					   <li><a href="#" data-filter=".term-absurdo"><h3>Absurdo</h3></a></li>
 
					</ul></li>
 
				<li class="roles"><a><h3><?php _e('Roles', 'doblerol'); ?></h3></a>
                                        <ul>
					   <li><a href="#" data-filter=".term-2personajes"><h3>2 personajes</h3></a></li>
					   <li><a href="#" data-filter=".term-3personajes"><h3>3 personajes</h3></a></li>
					   <li><a href="#" data-filter=".term-4personajes"><h3>4 personajes</h3></a></li>
					</ul></li>
                        </ul>
 
 
 
    </div><!-- END PORTFOLIO FILTERING -->


Ojalá me puedas ayudar, porque estoy que no me aclaro de qué puede estar fallando.
De cualquier forma , muchas gracias por responderme.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema

Menú con filter que se me resiste - No sé como ordenarlo

Publicado por txema (6 intervenciones) el 27/12/2014 20:56:37
Hola marlbran:

Había visto tu mensaje y no he tenido tiempo de entretenerme con él.

Había cosas que me desencuadraban:
- <h3> en lista, que es elemento en bloque y forzado a estar en línea. ¿Podría ser éste el origen del salto que tenías?
- Los estilos los aplicabas al ID del <div>. ¿No será mejor trabajar con, en tu caso, la class de <ul> inicial ?

En fin, que tomando un viejo menú mío, (sin los estilos propios tuyos) he armado esto (por razones obvias de pasarlo a HTML, he simplificado / pasado a títulos las secciones de código PHP:

Dejo a tu cargo recomponer el formato del texto (trasladando los tamaños y formas del viejo <h3>, recuadros, o la óptima diagramación de estilos. He dejado los :hover con un ligero cámbio de base (de mi trabajo original) para que puedas situarte en ellos.

Ahí va:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Menú marlbran">
    <title>Menú marlbran</title>
	<script>
	</script>
	<style>
/*==== PORTFOLIO FILTERS ====*/
  .styled-list {
	position: relative;
	margin: 0;
	padding: 0;
	text-align: center;
	display: block;
	z-index:2;
  }
  .styled-list > li {
    list-style-type:none;
	float:left;
	margin:0;
	padding:0;
	width:150px;
	height: 20px;
    display:block;
	text-decoration:none;
  }
  .styled-list > li a {
    margin:0px;
	padding:0px;
	color: #1E1E1E;
	text-align: center;
	border-bottom:5px solid #1E1E1E;
    display:block;
	text-decoration:none;
  }
  .styled-list > li a:hover{
	padding:0;
    font-weight: bold;
	color: #5A783C;
	border-bottom:5px solid #5A783C;
    display:block;
  }
  .styled-list > li:hover > ul {
    display:block;
  }
  .styled-list > li ul {
    position:absolute;
	width:750px;
    left: 0;
    margin:0px;
	padding:0px;
	display:none;
  }
  .styled-list > li ul li{
    position:relative;
    list-style-type:none;
	float:left;
	margin:0;
	padding:0;
	width:150px;
	height: 25px;
	text-decoration:none;
    display: block;
  }
  .styled-list > li ul li a {
    margin:0;
	padding:0;
	background-color: rgba(255,255,255,1.0);
	color: #1E1E1E;
	text-align: center;
	border-bottom:5px solid #1E1E1E;
    display:block;
	text-decoration:none;
  }
  .styled-list > li ul li a:hover{
	padding:0;
    font-weight: bold;
	border-bottom:5px solid #5A783C;
    display:block;
  }
	</style>
  </head>
  <body>
    <!-- START PORTFOLIO FILTERING -->
   <div  id="filters" class="sixteen columns">
        <nav>
			<ul class="styled-list clearfix">
				<li><a href="#" data-filter="*" class="active">Todos</a></li>
                <li><a href="#" data-filter=".term-votados">Votados</a></li>
				<li><a href="#" data-filter=".term-cortos-finalistas">Cortos finalistas</a></li>
				<li class="genre"><a>Géneros</a>
                    <ul>
					   <li><a href="#" data-filter=".term-absurdo">Absurdo</a></li>
					   <li><a href="#" data-filter=".term-comedia">Comedia</a></li>
					   <li><a href="#" data-filter=".term-absurdo">Absurdo</a></li>
					   <li><a href="#" data-filter=".term-comedia">Comedia</a></li>
					   <li><a href="#" data-filter=".term-absurdo">Absurdo</a></li>
					   <li><a href="#" data-filter=".term-comedia">Comedia</a></li>
					   <li><a href="#" data-filter=".term-comedia">Comedia</a></li>
					   <li><a href="#" data-filter=".term-absurdo">Absurdo</a></li>
					</ul>
				</li>
				<li class="roles"><a>Roles</a>
                    <ul>
					   <li><a href="#" data-filter=".term-2personajes">2 personajes</a></li>
					   <li><a href="#" data-filter=".term-3personajes">3 personajes</a></li>
					   <li><a href="#" data-filter=".term-4personajes">4 personajes</a></li>
					</ul>
				</li>
            </ul>
	</nav>
    </div><!-- END PORTFOLIO FILTERING -->
  </body>
</html>

Nos cuentas.

P.D.: Cuesta un tiempo ordenar tu HTML original. Es importante para ver más rápido las cosas (y ver muchas veces los fallos)

Feliz año nuevo // Urte berri on
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar