estilos distintos entre <li>

Laika · #1 (**permalink**) 29/08/2009, 07:46

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?

allvipdomains · #2 (**permalink**) 29/08/2009, 08:05

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.

alexk · #3 (**permalink**) 29/08/2009, 09:26

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

Laika · #4 (**permalink**) 31/08/2009, 00:21

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

Cita:

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;
}

kseso? · #5 (**permalink**) 31/08/2009, 07:14

Quizás esto te sirva de guía

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding:0; outline: none; border: 0;}
body {background: #3333FF;}
#ejemplo {margin: 20px 0 0 20px;}
#ejemplo ul { }
#ejemplo ul li {display: block; list-style-type: none; width: 15em;}
 
#ejemplo ul li a {display: block; padding: 10px 5px; text-decoration: none;color:#cdcdcd; border: 1px solid #CCFFFF;}
#ejemplo ul li a.verde {background: #666600; color: #66FF00;}
#ejemplo ul li a.azul {background: #0000CC; color: #99CCFF; text-align: right;}
#ejemplo ul li a.gris {background: #330000; color:#cdcdcd; text-align: center;}
 
#ejemplo ul li a:hover {text-decoration: none; border: 1px solid #868686;}
#ejemplo ul li a:hover.verde {background: #66FF00; color: #666600;}
#ejemplo ul li a:hover.azul {background: #99CCFF;; color: #0000CC;}
#ejemplo ul li a:hover.gris {background: #cdcdcd; color: #330000;}
</style>
</head>
<body>
<div id="ejemplo">
<ul>
<li>
<a class="verde" href="#">Item verde</a>
</li>
<li>
<a class="gris" href="#">Item gris</a>
</li>
<li>
<a class="azul" href="#">Item azul</a>
</li>
</ul>
</div>
</body>
</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

C2am · #6 (**permalink**) 31/08/2009, 09:48

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

Cita:

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

Laika · #7 (**permalink**) 01/09/2009, 01:51

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>

allvipdomains · #8 (**permalink**) 01/09/2009, 04:27

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.

kseso? · #9 (**permalink**) 01/09/2009, 04:47

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#nav li a.nav_corto2 {
        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.nav_corto2 {
    color:#000;
    }

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

Un saludo

Laika · #10 (**permalink**) 01/09/2009, 06:12

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;
          }

kseso? · #11 (**permalink**) 01/09/2009, 06:45

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.

Laika · #12 (**permalink**) 01/09/2009, 06:58

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?

kseso? · #13 (**permalink**) 01/09/2009, 07:14

Deja así tus estilos:

Código css:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding:0; outline: none; border: 0;}
#nav {width:994px; overflow:hidden; text-align:right;}
#nav ul {float:left;}
#nav li {
  float:left;
  margin:0px 2px;
  text-align:center;
  font:normal 12px Arial, Helvetica, sans-serif;
  color:#FFF;
  border: 1px solid #000;
  background: url(pest_color.gif) no-repeat; list-style-type: none;}
 
#nav 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;
}
#nav li a:hover {
    color:#000;
    }
 
#nav 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;
      }
      
#nav li a:hover.navegacion_corto2 {
  color:#000;
}
</style>
</head>
<body> 
  <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>
</body>
</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

Laika · #14 (**permalink**) 02/09/2009, 00:50

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?

kseso? · #15 (**permalink**) 02/09/2009, 01:17

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

Laika · #16 (**permalink**) 02/09/2009, 01:38

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

kseso? · #17 (**permalink**) 02/09/2009, 02:12

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

Laika · #18 (**permalink**) 02/09/2009, 02:27

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>

Laika · #19 (**permalink**) 02/09/2009, 05:51

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

allvipdomains · #20 (**permalink**) 02/09/2009, 06:14

Lástima no haberlo revisado antes eso... pero nunca es tarde si la dicha es buena.

kseso? · #21 (**permalink**) 02/09/2009, 06:38

Cita:

Iniciado por Laika

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