Foros del Web » Creando para Internet » CSS »

estilos distintos entre <li>

Estas en el tema de estilos distintos entre <li> en el foro de CSS en Foros del Web. Hola, Tengo en una capa definido un estilo para los <li> pero como puedo conseguir que algunos de esos <li> tengan un estilo diferente sin ...
  #1 (permalink)  
Antiguo 29/08/2009, 08:46
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
estilos distintos entre <li>

Hola,

Tengo en una capa definido un estilo para los <li> pero como puedo conseguir que algunos de esos <li> tengan un estilo diferente sin que hereden los de la capa?
  #2 (permalink)  
Antiguo 29/08/2009, 09:05
Avatar de allvipdomains  
Fecha de Ingreso: agosto-2009
Ubicación: España
Mensajes: 40
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: estilos distintos entre <li>

Defines un id al elemento <li> del siguiente modo: <li id="nombre">

Luego en el CSS defines las propiedades del id nombre:
#nombre{
color:#000000;
font-size:28px;
}

Y ya está, estilos diferenciados. Espero que te sirva.
  #3 (permalink)  
Antiguo 29/08/2009, 10:26
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: estilos distintos entre <li>

para darle estilos a todos los li dentro de tu div podrías hacer esto

#mi_capa li{}

pero si lo que quieres es personalizar cada li tendrías que asignarle una clase a cada li como te dice allvipdomains
  #4 (permalink)  
Antiguo 31/08/2009, 01:21
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: estilos distintos entre <li>

Me sigue heredando los estilos de <li>. Este es el codigo:

Cita:

<div id="nav">
<ul>
<li><a href="link1.php">Link1</a></li>
<li><a href="link2.php" >Link2</a></li>

<li id="nav_corto"><a href="link3.php>Link3</a></li>
<li id="nav_corto"><a href="link4.php">Link4</a></li>
</ul>
</div>
Necesito que me coja la imagen de la linea de codigo que he puesto en rojo.

Los estilos que doy a los 2 <li> son estos:

Cita:

#nav {width:994px; overflow:hidden; text-align:right;}
.naranja #nav{background:url(f_nav_naranja.gif) left bottom repeat-x;}

#nav ul {float:left; height:33px;}
#nav li {float:left; width:120px; margin:0px 2px; text-align:center; display:block; font:normal 12px Arial, Helvetica, sans-serif; color:#FFF; height:29px; line-height:31px;}
.naranja #nav li {background:url(pest_naranja2.gif) 0 0 no-repeat;}

#nav li a {
background:url(pest_off.gif) 0 0 no-repeat;
text-align:center;
display:block;
font:normal 12px Arial, Helvetica, sans-serif;
color:#9D4A00;
text-decoration:none;
height:29px;
line-height:31px;

#nav_corto {
float:left;
width:78px;
text-align:center;
display:block;
font:normal 12px Arial, Helvetica, sans-serif;
color:#9D4A00;
background:url(pest_off_corta2.gif) 0 0 no-repeat;
text-align:center;
text-decoration:none;
height:29px;
line-height:31px;
margin-left: 2px;
margin-right: 2px;
}
#nav_corto a{
text-align:center;
display:block;
font:normal 12px Arial, Helvetica, sans-serif;
color:#9D4A00;
text-decoration:none;
height:29px;
line-height:31px;
}
  #5 (permalink)  
Antiguo 31/08/2009, 08:14
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: estilos distintos entre <li>

Quizás esto te sirva de guía
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Kseso? jugando con css</title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin: 0; padding:0; outline: none; border: 0;}
  7. body {background: #3333FF;}
  8. #ejemplo {margin: 20px 0 0 20px;}
  9. #ejemplo ul { }
  10. #ejemplo ul li {display: block; list-style-type: none; width: 15em;}
  11.  
  12. #ejemplo ul li a {display: block; padding: 10px 5px; text-decoration: none;color:#cdcdcd; border: 1px solid #CCFFFF;}
  13. #ejemplo ul li a.verde {background: #666600; color: #66FF00;}
  14. #ejemplo ul li a.azul {background: #0000CC; color: #99CCFF; text-align: right;}
  15. #ejemplo ul li a.gris {background: #330000; color:#cdcdcd; text-align: center;}
  16.  
  17. #ejemplo ul li a:hover {text-decoration: none; border: 1px solid #868686;}
  18. #ejemplo ul li a:hover.verde {background: #66FF00; color: #666600;}
  19. #ejemplo ul li a:hover.azul {background: #99CCFF;; color: #0000CC;}
  20. #ejemplo ul li a:hover.gris {background: #cdcdcd; color: #330000;}
  21. </head>
  22. <div id="ejemplo">
  23. <ul>
  24. <li>
  25. <a class="verde" href="#">Item verde</a>
  26. </li>
  27. <li>
  28. <a class="gris" href="#">Item gris</a>
  29. </li>
  30. <li>
  31. <a class="azul" href="#">Item azul</a>
  32. </li>
  33. </ul>
  34. </div>
  35. </body>
  36. </html>
Como verás, he optado por diferenciar los elementos actuando sobre los enlaces ('a'). Se podría haber hecho sobre los li.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 31/08/2009, 10:48
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: estilos distintos entre <li>

Hola
Bueno, después de Kseso?. solo un comentario a tu codigo Laika:

Cita:
<div id="nav">
<ul>
<li><a href="link1.php">Link1</a></li>
<li><a href="link2.php" >Link2</a></li>

<li id="nav_corto"><a href="link3.php>Link3</a></li>
<li id="nav_corto"><a href="link4.php">Link4</a></li>
</ul>
</div>
Fíjate que tienes dos elementos con el mismo id, y si no tengo mal entendido eso no es correcto, cada id debe ser único. Tal vez podrías reemplazar "id" por "class".
Pero antes de aplicar esto, te recomiendo que leas lo de kseso? que seguro tiene una respuesta más profunda y sobre todo correcta.
Un saludo
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #7 (permalink)  
Antiguo 01/09/2009, 02:51
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: estilos distintos entre <li>

Hola, sigo sin conseguirlo. Es un sistemad e navegacion por pestañas en el que cada pestaña es un <li>. He querido hacer 3 pestañas con diferente imagen de fondo porque son mas estrechas que las 3 primeras.

El problema es que ahora si que veo las 3 pestaña de la clase nav_corto2 pero detras de ellas se ve la imagen "pest_color.gif". Esta imagen es la que tiene la pestaña cuando estás en su pagina. Es de otro color para saber en cuál estás.

Automaticamente cuando no tiene un enlace una pestaña se pone la de otro color y si tiene un enlace se ve esta otra foto: "pest_off.gif".

También el problema que tengo aparte de que por debajo se siga viendo la otra foto, es que me sigue respetando el espacio entre <li> y <li> que tienen los <li> grandes, no me coge el del pequeño.

Este es el codigo:

Código:
#nav {width:994px; overflow:hidden; text-align:right;}
.miestilo #nav {background:url(fondo_nav.gif) left bottom repeat-x;}

#nav ul {float:left; height:33px;}
#navn li {float:left; width:120px; margin:0px 2px; text-align:center; display:block; font:normal 12px Arial, Helvetica, sans-serif; color:#FFF; height:29px; line-height:31px;}
.miestilo #nav li {background:url(pest_color.gif) 0 0 no-repeat;}

#nav li a {
	background:url(pest_off.gif) 0 0 no-repeat;
	text-align:center;
	display:block;
	font:normal 12px Arial, Helvetica, sans-serif;
	color:#9D4A00;
	text-decoration:none;
	height:29px;
	line-height:31px;
}
#nav li a:hover {
	color:#000;
	}

.nav_corto2 {
	float:left;
	width:78px;
	text-align:center;
	display:block;
	font:normal 12px Arial, Helvetica, sans-serif;
	color:#9D4A00;
	background:url(pest_off_corta2.gif) 0 0 no-repeat;
	text-align:center;
	text-decoration:none;
	height:29px;
	line-height:31px;
	margin-left: 2px; 
	margin-right: 2px;
}
.nav_corto2 a{
	text-align:center;
	display:block;
	font:normal 12px Arial, Helvetica, sans-serif;
	color:#9D4A00;
	text-decoration:none;
	height:29px;
	line-height:31px;
}
.nav_corto2 a:hover {
	color:#000;
	}
Código:
<body class="miestilo">
    
      <div id="nav">
        <ul>
    <li><a href="link1.php">Link1</a></li>
    <li><a href="link2.php">Link2</a></li>
    <li><a href="link3.php">Link3</a></li>
    <li><a class="navegacion_corto2" href="link4.php">Link4</a></li>
    <li><a class="navegacion_corto2" href="link5.php">Link5</a></li>
    <li><a class="navegacion_corto2" href="link6.php">Link6</a></li>   
    </ul>
    
      </div>
  #8 (permalink)  
Antiguo 01/09/2009, 05:27
Avatar de allvipdomains  
Fecha de Ingreso: agosto-2009
Ubicación: España
Mensajes: 40
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: estilos distintos entre <li>

Prueba a definir otra class para los <li> largos en ligar de poner ese codigo para nav li a {}

Puede que ahi esté el problema.
  #9 (permalink)  
Antiguo 01/09/2009, 05:47
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: estilos distintos entre <li>

Laika, si esos estilos "cortos" los vas a utilizar sólo en ese menú, haz tal como te indicaba en mi ejemplo:
Código css:
Ver original
  1. #nav li a.nav_corto2 {
  2.         text-align:center;
  3.     display:block;
  4.     font:normal 12px Arial, Helvetica, sans-serif;
  5.     color:#9D4A00;
  6.     text-decoration:none;
  7.     height:29px;
  8.     line-height:31px;
  9. }
  10. #nav li a:hover.nav_corto2 {
  11.     color:#000;
  12.     }

Reseñar que en estás definiciones, sólo tienes que marcar las propiedades particulares de '.nav_corto2'.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 01/09/2009, 07:12
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: estilos distintos entre <li>

He puesto tal y como me dices (negrita) pero es que me sigue herendando estas propiedades y cada <li> se me crea con la anchura de 120.

Además debajo de las pestañas mas cortas se ve que aparece la foto: "pest_naranja2.gif" que no debe aparecer.

He puesto en rojo lo queme da problemas.

Código:
#nav {width:994px; overflow:hidden; text-align:right;}
.miestilo #nav {background:url(fondo_nav.gif) left bottom repeat-x;}

#nav ul {float:left; height:33px;}
#navn li {float:left; width:120px; margin:0px 2px; text-align:center; display:block; font:normal 12px Arial, Helvetica, sans-serif; color:#FFF; height:29px; line-height:31px;}
.miestilo #nav li {background:url(pest_color.gif) 0 0 no-repeat;}

#nav li a {
	background:url(pest_off.gif) 0 0 no-repeat;
	text-align:center;
	display:block;
	font:normal 12px Arial, Helvetica, sans-serif;
	color:#9D4A00;
	text-decoration:none;
	height:29px;
	line-height:31px;
}
#nav li a:hover {
	color:#000;
	}

#nav li a.navegacion_corto2 {
	float:left;
	width:78px !important;
	text-align:center;
	display:block;
	font:normal 12px Arial, Helvetica, sans-serif;
	color:#9D4A00;
	background:url(pest_off_corta2.gif) 0 0 no-repeat;
	text-align:center;
	text-decoration:none;
	height:29px;
	line-height:31px;
	margin-left: 0px; 
	margin-right: 0px;
      }
	  
#nav li a:hover.navegacion_corto2 {
          color:#000;
          } 
  #11 (permalink)  
Antiguo 01/09/2009, 07:45
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: estilos distintos entre <li>

En primer lugar, tienes un"error de dedo" aquí:
Cita:
#navn li {float:le...
se te ha escapado una "ene"

Sobre los tamaños:
Aplicas una anchura a los "#nav li" de 120px. Esa anchura no la corrijes, pues actúas sobre los enlaces al aplicar la clase ".navegacion_corto2" (width:78px !important;)

¿Qué ocurre? Que tienes un li de una anchura y con su fondo mayor que el enlace que contiene. El fondo del enlace se sobrepone al del "li" sólo hasta donde llega el enlace.

Solucción:
Hay varias posibles.
Una sería que no asignes tamaño a los "li" y que sean los enlaces ("a") quienes lo tengan. Y que cuando apliques la segunda clase para distinguirlos te asegures de qué tamaño le das.

Un saludo

P.D.: todo sería más fácil y concreto a tu caso si pudieses poner en línea tu página.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #12 (permalink)  
Antiguo 01/09/2009, 07:58
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: estilos distintos entre <li>

Acabo de hacer eso y se ve bien pero en IE6 me sigue saliendo la imagen de fondo con la anchura anterior.

Asi me ha quedado ahora el codigo:

Código:
#nav li {float:left; margin:0px 2px; text-align:center; display:block; font:normal 12px Arial, Helvetica, sans-serif; color:#FFF; height:29px; line-height:31px;}

/*Anulado
.miestilo #nav li {background:url(pest_color.gif) 0 0 no-repeat;}
*/

#nav li a {
	width:120px; 
	background:url(pest_off.gif) 0 0 no-repeat;
	text-align:center;
	display:block;
	font:normal 12px Arial, Helvetica, sans-serif;
	color:#9D4A00;
	text-decoration:none;
	height:29px;
	line-height:31px;
}
#nav li a:hover {
	color:#000;
	}
¿Alguna idea?
  #13 (permalink)  
Antiguo 01/09/2009, 08:14
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: estilos distintos entre <li>

Deja así tus estilos:

Código css:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <head>
  4. <title>Kseso? jugando con css</title>
  5. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  6. <style type="text/css">
  7. * {margin: 0; padding:0; outline: none; border: 0;}
  8. #nav {width:994px; overflow:hidden; text-align:right;}
  9. #nav ul {float:left;}
  10. #nav li {
  11.   float:left;
  12.   margin:0px 2px;
  13.   text-align:center;
  14.   font:normal 12px Arial, Helvetica, sans-serif;
  15.   color:#FFF;
  16.   border: 1px solid #000;
  17.   background: url(pest_color.gif) no-repeat; list-style-type: none;}
  18.  
  19. #nav li a {
  20.     background: #cdcdcd url(pest_off.gif) 0 0 no-repeat;
  21.     text-align:center;
  22.     display:block;
  23.     font:normal 12px Arial, Helvetica, sans-serif;
  24.     color:#9D4A00;
  25.     text-decoration:none;
  26.     height:29px;
  27.     width: 120px;
  28.     line-height:31px;
  29. }
  30. #nav li a:hover {
  31.     color:#000;
  32.     }
  33.  
  34. #nav li a.navegacion_corto2 {
  35.     float:left;
  36.     width:78px;
  37.     text-align:center;
  38.     display:block;
  39.     font:normal 12px Arial, Helvetica, sans-serif;
  40.     color:#9D4A00;
  41.     background:red url(pest_off_corta2.gif) 0 0 no-repeat;
  42.     text-align:center;
  43.     text-decoration:none;
  44.     height:29px;
  45.     line-height:31px;
  46.     margin-left: 0px;
  47.     margin-right: 0px;
  48.       }
  49.      
  50. #nav li a:hover.navegacion_corto2 {
  51.   color:#000;
  52. }
  53. </style>
  54. </head>
  55. <body>
  56.   <div id="nav">
  57.     <ul>
  58.       <li><a href="link1.php">Link1</a></li>
  59.       <li><a href="link2.php">Link2</a></li>
  60.       <li><a href="link3.php">Link3</a></li>
  61.       <li><a class="navegacion_corto2" href="link4.php">Link4</a></li>
  62.       <li><a class="navegacion_corto2" href="link5.php">Link5</a></li>
  63.       <li><a class="navegacion_corto2" href="link6.php">Link6</a></li>  
  64.     </ul>  
  65.   </div>
  66. </body>
  67. </html>
No lo he revisado a fondo, ¿vale?
He colocado un dorde y un fondo plano para ver dónde está cada elemento, pues no contamos con tus fondos de imagen (suprímelos).
El tema de ie6 no lo he mirado, pero supongo que tendrá que ver con que no hace caso al "!important"

Editado para actualizar el código
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 02/09/2009 a las 03:13
  #14 (permalink)  
Antiguo 02/09/2009, 01:50
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: estilos distintos entre <li>

Ok,

Ahora ya veo los bordes y colores de fondo que has puesto pero necesito que se vea también bien en Internet Explorer 6.

Parece que no hace caso de estos 2 !important que están en rojo:

Código:
#nav li a.navegacion_corto2 {

	float:left;
    width:78px !important;
    text-align:center;
    display:block;
    font:normal 12px Arial, Helvetica, sans-serif;
    color:#9D4A00;
    background:red url(pest_off_corta2.gif) 0 0 no-repeat !important;
    text-align:center;
    text-decoration:none;
    height:29px;
    width: 120px;
    line-height:31px;
    margin-left: 0px;
    margin-right: 0px;
      }
¿Que puedo hacer para que se vea bien en IE6?
  #15 (permalink)  
Antiguo 02/09/2009, 02:17
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: estilos distintos entre <li>

Vaya un despiste mutuo, Laika:
Cita:
#nav li a.navegacion_corto2 {
float:left;
width:78px !important;
text-align:center;
display:block;
font:normal 12px Arial, Helvetica, sans-serif;
color:#9D4A00;
background:red url(pest_off_corta2.gif) 0 0 no-repeat !important;
text-align:center;
text-decoration:none;
height:29px;
width: 120px;
line-height:31px;
margin-left: 0px;
margin-right: 0px;
}
Si juntamos, como te decía, que que el "!important" no le importa a ie6 y encima le decimos después que su anchura sea mayor, pues tendremos que convenir que en este caso la culpa es sólo nuestra
Deja sólamente "width: 78px" y retira el "!important" también del fondo.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #16 (permalink)  
Antiguo 02/09/2009, 02:38
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: estilos distintos entre <li>

Misterio:

Me sigue saliendo en IE6 la imagen ancha de fondo y la he puesto en comentario en todo la hoja de estilos y no se como puede seguir saliendo...

El estilo que me comentabas me ha queaddo así:

Código:
#navegacion li a.navegacion_corto2 {

	float:left;
    width:78px;
    text-align:center;
    display:block;
    font:normal 12px Arial, Helvetica, sans-serif;
    color:#9D4A00;
    background:red url(pest_off_corta2.gif) 0 0 no-repeat;
    text-align:center;
    text-decoration:none;
    height:29px;
    line-height:31px;
    margin-left: 0px;
    margin-right: 0px;
      }
Y con lo que me urge solucionar esto...que locura
  #17 (permalink)  
Antiguo 02/09/2009, 03:12
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: estilos distintos entre <li>

Pues lo cierto es que ya no se ni qué tienes, ni cómo, o qué modificaciones has realizado, o si haya otro código que por herencia afecte. Es el problema de no poder ver tu código en línea.

¿O quizás haya entendido yo mal lo que buscas realizar?
Así es como yo lo estoy viendo en ie6 (ietester), unos con un ancho de mayor que los otros:

Por si fuese eso, edito de nuevo en unos minutos el comentario #13 y coloco el código. Ya miras a ver qué diferencias puede haber entre el que tú utilizas y este otro, ¿vale?

Como te decía, creo que estamos dando palos de ciego ya que no tenemos la certeza absoluta de utilizar el mismo código (o el mismo pedazo).

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #18 (permalink)  
Antiguo 02/09/2009, 03:27
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: estilos distintos entre <li>

Aqui te dejo el codigo (todo el css) con las modificaciones realizadas. Yo también lo esoy probando con el IETester asi que genial par alos 2.

A ver si le evs aqui el fallo....:

Código:
@charset "utf-8";
body {margin:12px 0 0 0; padding:0px; font:normal 12px Arial, Helvetica, sans-serif; color:#454545;}

/*NORMALIZO*/

h1, h2, h3, h4, h5, p {margin:0px; padding:0px;}
ul {margin:0px; padding:0px; list-style:none;}
li {margin:0px; padding:0px;}
/*------------*/

.naranja { background:#fff7b5 url(f_naranja.gif) 0 0 repeat-x;}

#cabecera {width:995px; overflow:hidden; margin-bottom:10px;}

#footer { width:1001px; font:normal 12px Arial, Helvetica, sans-serif; color:#000; margin-bottom:15px;}
#footer .firma {margin-top:15px; border-top:1px dotted #999; padding-top:15px; font:normal 10px Arial, Helvetica, sans-serif; color:#666}
#footer .firma a {color:#666;}
.cierre_izq {
	width:740px;
	font:normal 10px Arial, Helvetica, sans-serif;
	color:#666;
	float: left;
	padding-bottom: 15px;
}
.cierre_izq a {color:#666;}
.cierre_der {
	width:259px;
	font:normal 10px Arial, Helvetica, sans-serif;
	color:#666;
	float: left;
	padding-bottom: 15px;
}
.cierre_der a {color:#666;}

#navegacion {width:994px; overflow:hidden; text-align:right;}
.naranja #navegacion {background:url(f_nav_naranja.gif) left bottom repeat-x;}

/*--#navegacion ul {float:left; height:33px;}--*/
/*--#navegacion li {float:left; margin:0px 2px; text-align:center; display:block; font:normal 12px Arial, Helvetica, sans-serif; color:#FFF; height:29px; line-height:31px;}--*/

#navegacion ul {float:left;}
#navegacion li {float:left; /*width:120px;*/ margin:0px 2px; text-align:center; /*display:block;*/ font:normal 12px Arial, Helvetica, sans-serif; color:#FFF; /*height:29px;*/ /*line-height:31px;*/ border: 1px solid #000; /*background:url(pest_color.gif) no-repeat;*/ list-style-type: none;}

/*.naranja #navegacion li {background:url(pest_naranja2.gif) 0 0 no-repeat;} */

/*--#navegacion li a {
	width:120px; 
	background:url(pest_off.gif) 0 0 no-repeat;
	text-align:center;
	display:block;
	font:normal 12px Arial, Helvetica, sans-serif;
	color:#9D4A00;
	text-decoration:none;
	height:29px;
	line-height:31px;
} --*/

/*--#navegacion li a:hover {
	color:#000;
	}--*/    
	
#navegacion li a {

    background: #cdcdcd url(pest_off.gif) 0 0 no-repeat;
    text-align:center;
    display:block;
    font:normal 12px Arial, Helvetica, sans-serif;
    color:#9D4A00;
    text-decoration:none;
    height:29px;
    width: 120px;
    line-height:31px;
}

#navegacion li a:hover {

    color:#000;
	
    }	


   /*--#navegacion li a.navegacion_corto2 {
	float:left;
	width:78px !important;
	text-align:center;
	display:block;
	font:normal 12px Arial, Helvetica, sans-serif;
	color:#9D4A00;
	background:url(pest_off_corta2.gif) 0 0 no-repeat;
	text-align:center;
	text-decoration:none;
	height:29px;
	line-height:31px;
	margin-left: 0px; 
	margin-right: 0px;
      } --*/
	  
/*--#navegacion li a:hover.navegacion_corto2 {
          color:#000;
          }__*/

#navegacion li a.navegacion_corto2 {

	float:left;
    width:78px;
    text-align:center;
    display:block;
    font:normal 12px Arial, Helvetica, sans-serif;
    color:#9D4A00;
    background:red url(pest_off_corta2.gif) 0 0 no-repeat;
    text-align:center;
    text-decoration:none;
    height:29px;
    line-height:31px;
    margin-left: 0px;
    margin-right: 0px;
      }
     
#navegacion li a:hover.navegacion_corto2 {

          color:#000;
          }

/*////////////// Esto es para los enlaces activos del menu superior //////////////*/

.navegacion-naranja {		
/*background:url(pest_naranja2.gif) 0 0 no-repeat !important;*/
color:#FFF !important;
}
/*/////////////////////////////////*/

#subnav {width:1001px; height:30px;}
.naranja #subnav {background:url(f_sub_naranja2.gif) 0 0 no-repeat;}

#subnav ul {margin:0px 4px;}
.naranja #subnav ul {background:url(f_ul_naranja2.gif) 0 0 repeat-x; }

#subnav li {
	display:inline;
	line-height:30px;
	font:normal 12px Arial, Helvetica, sans-serif;
	color:#146600;
}
#subnav li a {
	text-decoration:none;
	color:#000;
	line-height:30px;	
}
#subnav li a:hover {
	text-decoration:none;
	color:#146600;
}

#subnav .tuberia { margin:25px 35px;}

#cuerpo {width:1001px; overflow:hidden;}
.naranja #cuerpo {background:url(f_cuerpo_naranja.gif) 0 0 repeat-y;}

.cierrecuerpo {width:1001px; height:15px;}
.naranja .cierrecuerpo {background:url(cierre_naranja.gif) 0 0 no-repeat;}

.cierrefoto {background:#F7F9FD url(sombra_foton.gif) 0 0 repeat-x; margin:0px 4px; height:15px;}
.cierrefotohome {background:#F7F9FD url(sombra_foton2.gif) 0 0 repeat-x; margin:0px 4px; height:15px;}

.derecha {
	float:left;
	width:220px;
	margin-left:26px;
	text-align:center;
	padding-top: 10px;
	margin-bottom: 5px;
}
.derecha h2 {
	font:normal 18px Georgia;
	color:#BA5E0A;
	border-bottom: 1px dotted #CEAD7B;
	margin-bottom:5px;
}
.derecha ul { margin-bottom:20px;}
.derecha li { font:normal 11px Tahoma; color:#777; padding-left:7px; margin-bottom:4px; background:url(square2.gif) 0 7px no-repeat;}
.derecha li a {color:#777; text-decoration:none;}
.derecha li a:hover {color:#555; text-decoration:underline;}


.limpia { clear:both;}

#home_izq {
	float:left;
	text-align:justify; /*overflow:hidden;*/
	padding-bottom: 0px;
	padding-left: 10px;
	width: 430px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;

}

#home_der {float:right;width: 243px;}
.home_der ul { margin:0px 0px;}
.home_der li {
	display:inline;
}
.home_der li a { color:#B56E00; text-decoration:underline;}

#titulo_home_der {
	color:#B56E00
	font-size: 12px;
	text-align: center;
	margin-bottom: 20px;
	background-image: url(fondo_titulo_home.gif);
	height: 44px;
	width: 234px;
	margin-left: 9px;
	vertical-align: middle;
	font-weight: bold;
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-variant: normal;
	margin-top: 25px;
}
.titulo_home_der {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FFF;
	font-size: 11x;
	padding-top: 12px;
}

.subtitulos_home_der {
	font-family: Arial, Gadget, sans-serif;
	color: #B56E00;
	font-size: 11px;
}
.texto_cursiva {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	font-style: italic;
}


/* Rectangulo de solicitud de prespuestos */

#titulo_solicitud_prespuestos {
	color:#B56E00;
	text-align: center;
	margin-bottom: 20px;
	background-image: url(solicitud-prespuestos.gif);
	height: 70px;
	width: 223px;
	margin-left: 9px;
	vertical-align: middle;
	font-weight: bold;
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-variant: normal;
	margin-top: 25px;
}
.titulo_home_der {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FFF;
	font-size: 11x;
	padding-top: 12px;
}

.subtitulos_home_der {
	font-family: Arial, Gadget, sans-serif;
	color: #B56E00;
	font-size: 11px;
}

/* ---------------------------------------------------------- */
#menu3 {
	width:698px;
	height:40px;
	text-align: center;
	background-image: url(borde-menu3.gif);
	background-repeat: repeat-x;
	margin-top: 20px;
}

#menu3 li {
	display:inline;
	line-height:30px;
	font:normal 12px Arial, Helvetica, sans-serif;
	color:#515151;
}
#menu3 li a {
	text-decoration:none;
	color:#060;
	line-height:30px;
	
}
#menu3 li a:hover {
	text-decoration:none;
	color:#000A64;
}
#menu3 .tuberia { margin:25px 16px;}

.flecha {
	position: relative;
	top: -5px;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 12px !important;
	color: #454545 !important;
Este sería el del menu en html:

Código:
      <div id="navegacion">
        <ul>
    <li><a href="link1.php">Link1</a></li>
    <li><a href="link2.php">Link2</a></li>
    <li><a href="link3.php">Link3</a></li>
    <li><a class="navegacion_corto2" href="link4.php">Link4</a></li>
    <li><a class="navegacion_corto2" href="link5.php">Link5</a></li>
    <li><a class="navegacion_corto2" href="link6.php">Link6</a></li>    
    </ul>

      </div>

Última edición por Laika; 02/09/2009 a las 03:44
  #19 (permalink)  
Antiguo 02/09/2009, 06:51
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: estilos distintos entre <li>

Este tema ya lo he solucionado.

La hoja de estilos estaba bien pero tenia una llamada a una 2ª hoja de estilos que no habia quitado. Muchas gracias
  #20 (permalink)  
Antiguo 02/09/2009, 07:14
Avatar de allvipdomains  
Fecha de Ingreso: agosto-2009
Ubicación: España
Mensajes: 40
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: estilos distintos entre <li>



Lástima no haberlo revisado antes eso... pero nunca es tarde si la dicha es buena.
  #21 (permalink)  
Antiguo 02/09/2009, 07:38
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: estilos distintos entre <li>

Cita:
Iniciado por Laika Ver Mensaje
Este tema ya lo he solucionado.

La hoja de estilos estaba bien pero tenia una llamada a una 2ª hoja de estilos que no habia quitado. Muchas gracias
De ahí la importancia de acceder en línea a los códigos. Nos podríamos haber ahorrado algunos ratos. Lo bueno es que todos podemos extraer algunas conclusiones de este tema.

Pero bien está lo que bien acaba.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 13:42.