Foros del Web » Creando para Internet » CSS »

Recomendaciones para css en un menú.

Estas en el tema de Recomendaciones para css en un menú. en el foro de CSS en Foros del Web. Buenas noches, Tengo un menú en una web, que está compuesto por un div con un ulk y varios li, cada li tiene un texto ...
  #1 (permalink)  
Antiguo 13/08/2008, 13:53
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 9 años, 6 meses
Puntos: 0
Recomendaciones para css en un menú.

Buenas noches,

Tengo un menú en una web, que está compuesto por un div con un ulk y varios li, cada li tiene un texto que es a su vez un enlace. El caso es que estoy pensando la forma de hacer que cambie a la vez el colro de fondo del li y el del texto del link, ya que tal y como lo tengo ahora, al ponerme encima del li, cambia su color de fondo pero si no estoy justo encima del texto con el enlace no cambia el color del texto.

Pongo unas imágenes y los css a ver si se entiende mejor.


Código HTML:
<div id="contenedor">
	<div id="columnaizquierda">
    	<ul>
            <li class="col1">
            	<a href="../index.asp">Inicio</a></li>
            <li class="col1">
            	<a href="../noticiasDiv.asp">Noticias</a></li>
            <li class="col1">
            	<a class="col1" href="../pruebasDiv.asp">Pruebas</a></li>
            <li class="col1">
            	<a href="../contacto.asp">Contacto</a></li>
            <li class="col1">
            	<a href="../comparativaDiv.asp">Comparativa</a></li>
            <li class="col1">
            	<a href="../linksDiv.asp">Links</a></li>
            <li class="col1">
            	<span class="col1"><a href="../usuariosDiv.asp">Zona de usuarios</a></span></li>
         </ul> 
Estilo.css
Código HTML:
#columnaizquierda{
	float: left;
	width: 170px;
	margin-top:4px;
	margin-left: 3px;
	margin-right: 3px;
	text-align: left;
	/*padding: 2px;*/
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	/*background-color:#000000;*/
	list-style-type: none;
	color:#FFFFFF;
	height:360px;
}
#columnaizquierda ul{
	list-style-type: none;
	background-color:#FFFFFF;
	color:#FFFFFF;
	margin:0px;
	padding:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px
	vertical-align:top;
}
#columnaizquierda ul li{
	background-color:#800001;
	color:#000000;
	padding:3px;
	margin-bottom:4px;
	margin-left:0px;
	margin-right:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border: 1px solid #000000;
	text-align:left;
	width:162px;
	list-style-type: none;
	text-decoration:none;
	font-weight:bold;
}
.col1 a{
	color:#FFFFFF;
	text-decoration:none;
}
.col1 a:link{
	color:#FFFFFF;
	text-decoration:none;
}
.col1 a:hover{
	color:#800001;
	text-decoration:none;
}
#columnaizquierda ul li.col1:hover, #columnaizquierda ul li:hover {
	background-color:#FFFFFF;
	color:#80001;
	list-style-type: none;
	text-decoration:none;
}
#columnaizquierda ul li.col1:a, #columnaizquierda ul li:a {
	background-color:#800001;
	color:#000000;
	text-decoration:none;
}
#columnaizquierda ul li.col1:link, #columnaizquierda ul li:link {
	background-color:#800001;
	color:#000000;
	text-decoration:none;
}
Aquí pongo las imágenes, la primera es el menú tal cual aparece sin tocar nada, la segunda es el hover del li sin tocar el texto, la tercera es el hover encima del link del texto. Lo que quiero saber es si puedo hacer que el texto del link cambie de color al ponerme en el li o si solamente tengo que elegir un color para el texto que sea visible en los 2 estados, negro por ejemplo y ya está.

http://i524.photobucket.com/albums/cc328/s7474/css.jpg

Agradecería mucho cualquier ayuda o sugerencia.
  #2 (permalink)  
Antiguo 13/08/2008, 14:14
 
Fecha de Ingreso: agosto-2002
Mensajes: 74
Antigüedad: 15 años, 3 meses
Puntos: 1
Respuesta: Recomendaciones para css en un menú.

Hola

Yo estot tratando de hacer exactamente lo mismo que tu, salvo que en vez de etiquetas <li> son etiquetas <p>

Había pensado hacerlo usando las propiedades onmouseover y onmouseout

Quedaría algo así

Código HTML:
<li class="col1" onmouseover="this.class='ClaseEncima' onmouseout="this.class='col1'> 
Peroooo no funciona, y me da que es por el this.class ...

Por cierto, si en vez de con <li> o con <p> lo haces con un <div> para cada menú y usando el codigo de antes asi que funciona.


Si a alguien se le ocurre algo mejor estaremos muy agradecidos.
  #3 (permalink)  
Antiguo 13/08/2008, 14:17
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Exclamación Respuesta: Recomendaciones para css en un menú.

El código que pusiste Garet, no funciona primero porque las comillas están mal, y segundo porque es className y no class.

Pero eso es Javascript, y al parecer el usuario que publicó el tema quería hacerlo con CSS.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #4 (permalink)  
Antiguo 13/08/2008, 16:37
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Recomendaciones para css en un menú.

Tendrías que poner medidas específicas para los links también, de otra forma sólo se modifica el fondo de texto en el link y no de toda el área donde aparece.

Código:
.col1 a {
    color: #fff;
    background-color: #800001;
    text-decoration: none;
    width: 200px;
    height: 20px;
}

.col1 a:hover {
    color: #800001;
    background-color: #fff;
}
Si es esto lo que buscas, ya sólo quedaría ajustar posición y alineación del texto, tal vez usando span.
  #5 (permalink)  
Antiguo 13/08/2008, 16:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Recomendaciones para css en un menú.

Lo que debes hacer es no dar el tamaño a los elementos de lista (li), sino a los enlaces (a).

Prueba con estos estilos en lugar de los tuyos:

Cita:
#columnaizquierda{
float: left;
width: 170px;
margin-top:4px;
margin-left: 3px;
margin-right: 3px;
text-align: left;
/*padding: 2px;*/
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
/*background-color:#000000;*/
list-style-type: none;
color:#FFFFFF;
height:360px;
}
#columnaizquierda ul{
list-style-type: none;
background-color:#FFF;
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px
}
#columnaizquierda ul li{
margin:0 0 4px 0;
font-weight:bold;
}
.col1 a{
color:#FFF;
text-decoration:none;
background-color:#800001;
border: 1px solid #000;
width:162px;
padding:3px;
display: block;
}
.col1 a:hover{
color:#800001;
background-color:#FFF;
}
A ver qué tal.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 14/08/2008, 09:43
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Recomendaciones para css en un menú.

¡Muchas gracias a todos, sois unos cracks!

Efectivamente poniendo la anchura a los enlaces en vez de a los elementos de lista, enlace ocupa lo que tiene que ocupar y queda perfecto.

He usado tu código Mikmoro y va de maravilla, muchas gracias.
  #7 (permalink)  
Antiguo 14/08/2008, 10:44
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Recomendaciones para css en un menú.

De nada, es un placer.

Saludos.
__________________
Visita mi nueva web idplus.org
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:31.