pseduo classes en css
4 seguidores
Hola, estoy con el menu que me dió meddle,
pues es mas complicado de que creía.
es un menú, una lista y hay muchos niveles diferentes,
Y tengo un lio con los a:hover etc.
Tengo de antes una regla a, a:hover etc,
se puede poner varias classes en uno?
Algo como así:
ul.level1, ul.level3, ul.level2 a:hover {
border-color:gray;
color:black;
background-color:#FFFF66;
He probado pero no me funciona.
gandalias
No se que quieres hacer pero
<ul class="level1">pruebas1</ul>
<ul class="level2"><a href="index.php">pruebas2</a></ul>
<ul class="level3">pruebas3</ul>
a mi si que me funciona poniendolas todas...
set tonterias_espannolas=ON
Despues de leer otras zonas del foro, uno llega a "Programación Cliente" y se encuentra con "poesia" al leer cuestiones de CSS... ¿no es cierto?. jajajaja... la estructura de los post esta en versos. jajajaja
Los viernes me van a matar
QUIERO SALIIIIIIIIIR YAAAAAAA
¡¡¡TODO EL MUNDO TOCANDO PARMAS!!!
set tonterias_espannolas=OFF
salu!!!
helenp
[quote="gandalias"]No se que quieres hacer pero
<ul class="level1">pruebas1</ul>
<ul class="level2"><a href="index.php">pruebas2</a></ul>
<ul class="level3">pruebas3</ul>
gracias pero no me habre explicado bien,
es para los links,........ y para no hacer un a:hover para cada uno,
poner varios en uno,
algo como así:
ul.level1, ul.level3, ul.level2 a:hover { border-color:gray;
color:black;
background-color:#FFFF66;
gandalias
¿Asi te vale?... Yo es que estoy con esto del CSS volviendome un poco tarumba!!!
.menu a:hover{
border-color:gray;
color:black;
background-color:#FFFF66;
}
.menu.ul.level1 {
background-color: #ff0000;
}
.menu.ul.level2 {
background-color: #00ff00;
}
.menu.ul.level3 {
background-color: #0000ff;
}
<div class="menu">
<ul class="level1">pruebas1</ul>
<ul class="level2"><a href="index.php">pruebas2</a></ul>
<ul class="level3">pruebas3</ul>
</div>
por ejemplo... no se si es por donde vas tu...
salu2!
dirarck
Espero haber entendido tu pregunta:
<fieldset><ul class="level1">pruebas1</ul>
<ul class="level2">pruebas2</ul>
<ul class="level3">pruebas3</ul> </fieldset>
Eso no creo k sea muy correcto.
por lo k veo no hace falta que especifiques las clases de los ul, puedes hacer esto .menu ul li a:hover{....}, de esta manera aplicas la herencia en css, todos los a que estén en menu sufriran esos cambios cuando el ratón esté encima, de todas formas el selector lo puedes poner de muchas formas, creo que ese te va bien.
helenp
esto .menu ul li a:hover{....}, de esta manera aplicas la herencia en css
gracias, pero no creo que me sirva,
ya que en el nivel 1 tengo unos botones, y no van a tener backgroundcolor etc. eso lo quiero para los submenus
Para la fuentes si se puede, poner varios para la misma regala:
li.level1 {font-family:Times New Roman, Times, serif; font-size:16px; font-weight:bold;}
ul.level3,ul.level2,ul.level4 {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight:bold;
El codigo es un lio,
si lo quieren ver, es aquí, ojo aun me queda mucho.....
Usuario desconocido
pon un enlace pa ver que es lo que quieres conseguir, porque aun no te he entendido
helenp
Perdon, se me olvidé de pegarla....... http://www.marbellasunrentals.com/pruebamenu.htm
joseflorido
Creoq ue lo que quieres es darle unos estilos a los li de un ul y otros estilos a los li del resto de los ul, no?
Osea que en el menu principal no salga el fondo amarillo pero en los submenus si, no?
para eso lo que yo haria es definir una regla para cada nivel de anidamiento de los ul, con selectores contextuales y sin clases ni id's, tal que asi:
html:
[code]
<ul>
<li><a href="#">uno</a></li>
<li><a href="#">uno</a></li>
<li>
<ul>
<li><a href="#">dos</a></li>
<li><a href="#">dos</a></li>
<li>
<ul>
<li><a href="#">tres</a></li>
<li><a href="#">tres</a></li>
</ul>
</li>
</ul>
</li>
</ul>
css:
a{
background-color: #fff;
}
ul li a:hover{
background-color: #fff;
}
ul ul li a:hover{
background-color: #FFFF33;
}
ul ul ul li a:hover{
background-color: #009900;
}
Con este relio se consigue que el color de fondo de los enlaces en cada nivel sea distinto :)
Usuario desconocido
porque no haces esto:
en el principal pones <ul id="level1">, y asi sucesivamente con el resto de submenus, para que los tengas identificados en lugar de atribuidos a clases, de esta manera el selector para el nivel 1 quedaría asi:
<code>#level1 {.....}</code>
luego para el segundo nivel haces esto
<code><ul id="level2" class="subitem"></code>
y de esa manera todos los subitems tienen la misma clase.
<code> ul .subItems {
border:2px solid #9d9da1;
background:white;
list-style:none; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight:bold;
}</code>
También tienes la posibilidad de hacer esto
<code><ul class="level2, subitem"></code>, pero nunca lo he probado y no se que compatibilidad tiene el explorer con esto.
helenp
Gracias,
hice lo que dijo invitado, cambié los nombres de todos, y solo funciono lo del color amarillo, el text-decoration seguía igual.
asi que me vino la solucion, quiza habrá mejor,
ponerle un class nuevo directamente al href,
asi que tiene una clase en la li y otra en el href.
Verlo en http://www.marbellasunrentals.com/pruebamenu.htm
al final no esta quedando mal,,,,, pero me queda mucho para meter y cambiar.
Ya no veo nada creo, no sé porque al pasar el ratón encima de los botones se va el texto....... no veo nada mal.
dirarck
ok, de esa manera, también podrás hacer referencia a los elementos que tengas identificados desde un script.
PD: oye que invitado era yo :P jejeje
dirarck
oye una cosa, la finalidad de css es darle un estilo a la estructura que te proporciona XHTML, de esa manera, &nbps; es para poner un espacio, pero no es bueno utilizarlo para espaciar como haces tu en:
<a class="nivel1" href="index.htm">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home</a>, eso lo puedes hacer desde css, sólo tienes que buscar la forma, CSS 1: http://html.conclase.net/w3c/css1-es.html
CSS 2: http://www.sidar.org/recur/desdi/traduc/es/css/cover.html, hacer uso de los espacios como lo estás haciendo tu(y como sigue haciendo mucha gente que no conoce las ventajas de css) es lo mismo que utilizar las tablas para formatear un documento.
dirarck
acabo de leer algunas partes de tu código, y veo que eres nuevilla en CSS, no lo sabia, bueno pues en los dos links de encima tiene las recomendaciones del w3c para css nivel 1 y 2, mirate lo de la herencia para que veas como haciendo esto:
<code> a.nivel1 {
text-align: center;
text-decoration:none;
}
a.nivel1:link {
text-decoration:none; font-weight:bold;
}
a.nivel1:visited { text-decoration:none; font-weight:bold;
}
a.nivel1:hover { text-decoration:none; font-weight:bold; }</code> te puedes ahorrar muchas líneas innecesarias que ahora mismo estoy viendo en tu código, aparte con eso tb te ahorras los nbsp de antes :P, suerte y un saludo
helenp
gracias, dirarck
vaya menu que me dió meddle,....me he tirado todo el día,
es que tenía una estructura.......
tenia una clase folder, y la usaba tanto para dos li en nivel uno como para dos li en nivel dos.........
El menu hasta ahora parece estupenda.
Estoy contenta si consigo quitar el menu que tenía que tenia un javascript de 30 kb. mas otro script de 6.24 kb para el menu
Hay una cosa que no entiendo, hice una chapuza para arreglarlo, es esto:
inicialmente todas las "cajas" de la lista tenia un ancho de width:150px;
y estaba colocado desde left a: left:120px; /* IE */
Ahora yo hice la primera caja a medida del boton 100 px., y cambié la distancia desde left a 100, en IE venian perfectamente colocados los submenus, pero en mozilla, opera etc, venia el submenu a la distancia de antes, o sea 120px, y claro no se podría ir al submenu, al estar separado........
Así que dejé el anho de la primera caja a 150px, asi aunque visualmente solo mide 100 se puede llegar al submenu.
He mirado el java, pero no veo nada alli, es que no se javascript, pero en ningun lugar pone if mozillla.........normalmente suele poner cosas así para los hacks.
helenp
Hola,
He probado a meter lo de text-align,
a.nivel1 {
text-align: center;
text-decoration:none;
}
y funciona........a medias, ya que por el problema de mozilla que comenté en post anterior, tuve que poner width 150 en vez de 120, si pongo width 120 centra, pero no funciona menus en mozilla, opera etc.
Otro problema más grave, los botones no tienen la misma distancia, la primera tiene menos distancia a la segunda, que el resto.
En este he quitado los <li></li> que puse para separarlos,: http://www.marbellasunrentals.com/pruebamenu2.htm
este es la de antes: http://www.marbellasunrentals.com/pruebamenu.htm
En ambos diferencia la distancia, con el padding o margin funciona separarlos, pero solo la imagen, el texto sigue donde estaba, y con la misma diferencia de distancia.
¿Porque podrá ser?
helenp
Intendando averiguar el porqué de la diferencia de distancia, he averiguado, que los de nivel 1 (botones), los que llevan un submenu que sale al pasar el ratón encima, llevan un <ul> que se cierra </ul> automaticamente hace un pequeño espacio.
Es complicado, pero es por cerrar con </ul>,
porque en vista previa en dreamveawer, al seleccionar el espacio por debajo, me lleva a </ul>.
y claro si quito </ul> no funciona nada.......
helenp
Por fin........
solucionado diferencia altura,
chapuzeando: li.margin,li.folderbuttons {height: 40px; }