Cambiar color fuente en Capa con CSS

Estefania76 · #1 (**permalink**) 28/12/2007, 05:22

Hola a todos,

Tengo un problemilla, y es que quiero cambiar el color de la fuente en una capa, la letra me sale en negrita y yo la quiero de color azul. En mi código tengo esto:

<style type="text/css">
#inicio{position: absolute; visibility:hidden; left:400px; top:250px; z-index:3;
background-color:#165480; border-width:4; font:#5FA6D7; border-style:ridge; border-color:#c0c0c0;
padding:10}

</style>

Todo esto es lo que tiene mi capa, pero no sé que tengo que ponerle para que el color de la fuente sea azul, he probado con color:, font:, font-color: y nada de nada.... alguien puede ayudarme?

Muchas gracias!

JavierB · #2 (**permalink**) 28/12/2007, 05:28

Hola Estefania76

Tienes que poner: color:#5FA6D7

Saludos,

Estefania76 · #3 (**permalink**) 28/12/2007, 05:39

Hola!

Muchas gracias, pero esto ya lo he probado y no funciona... que no hay manera, vaya.. :(

De todas maneras gracias.

JavierB · #4 (**permalink**) 28/12/2007, 05:52

Hola de nuevo.

Debes tener algún otro código por ahí que está fastidiando. Prueba este ejemplo, el código está igual que el tuyo, sólo he cambiado la visibilidad, para que se pueda ver la capa:

Código PHP:

  <html>
<head>
<style type="text/css">
#inicio{position: absolute; visibility:visible; left:400px; top:250px; z-index:3;
background-color:#165480; border-width:4; color:#5FA6D7; border-style:ridge; border-color:#c0c0c0;
padding:10px}

</style>
</head>
<body>
<div id="inicio">Prueba de color</div>
</body>
</html>

Saludos,

Estefania76 · #5 (**permalink**) 28/12/2007, 06:04

Lo siento... no funciona, es que en realidad tienes razón, algo hay en el resto de código que me hace que no me funcione.. pero es que si lo pego aquí és un poco largo... lo puedo hacer? es que soy nueva en el foro y no se si puedo pegar algo tan largo...

Gracias.

Estefania76 · #6 (**permalink**) 28/12/2007, 06:48

Bueno, me acabo de ller las normas del Foro y no pone nada de que no pueda pegar aquí nada que sea extenso... así que ahi va....

<HTML>

<HEAD>
<style type="text/css">
#inicio{position: absolute; visibility:hidden; left:400px; top:250px; z-index:3;
background-color:#165480; border-width:4; color:#5FA6D7; border-style:ridge; border-color:#c0c0c0;
padding:10}
#finalB{position: absolute; visibility:hidden; left:700px; top:200px; z-index:3;
background-color:#ff9900; border-width:4; border-style:ridge; border-color:#c0c0c0;
padding:10}
#apuesta{position: absolute; visibility:hidden; left:120px; top:120px; z-index:3;
background-color:#ff9900; border-width:4; border-style:ridge; border-color:#c0c0c0;
padding:10}
#finalJ {position: absolute; visibility:hidden; left:10px; top:300px; z-index:3;
background-color:#ff9900; border-width:4; border-style:ridge; border-color:#c0c0c0;
padding:10}
</style>
<SCRIPT type="text/javascript">
var ie = (document.all)?true:false;
var ns6 = ((document.getElementById)?true:false) && !ie;

if(ie)//si es internet explorer el ancho y el alto se indican de esta manera
{
var ancho=document.body.clientWidth/2;
var alto=document.body.clientHeight/2;
}
if (ns6)//Si es Firefox el alto y el ancho se indican de esta manera
{
var ancho=window.innerWidth/2;
var alto=window.innerHeight/2;
}

function mostrar(nomcapa,text)//función que hace que se te muestra la capa
{
document.getElementById(nomcapa).innerHTML=text //MUESTRA EL TEXTO EN PANTALLA A TRAVÉS DE UNA CAPA
}//FINAL FUNCION

function capaON(pNomCapa)
{
document.getElementById(pNomCapa).style.visibility = 'visible';
}

function capaOFF(pNomCapa)
{
document.getElementById(pNomCapa).style.visibility = 'hidden';
}
function centraCapes(pNomCapa)
{

var anchocapa=document.getElementById(pNomCapa).offset Width/2;//guardo en una variable el ancho de la capa /2
var altocapa=document.getElementById(pNomCapa).offsetH eight/2;//guardo en una variable el alto de la capa /2
//alert("width : " + anchocapa + " px\nheight : " + altocapa + " px")

var result=ancho-anchocapa;//distancia entre el left y la capa
var resultado=alto-altocapa;//distancia entre el top y la capa
capaON(pNomCapa);
document.getElementById(pNomCapa).style.left = result;//la capa tiene como posición result
document.getElementById(pNomCapa).style.top = resultado;//la capa tiene como posición resultado
}

</script>

</SCRIPT>
</HEAD>
<BODY BGCOLOR="#165480" >
<CENTER><H1><FONT color="#5FA6D7"> CARRERAS DE CANGREJOS</FONT></H1></CENTER>
<HR color="#5FA6D7">
<BR><BR><BR><BR>
<TABLE BORDER="1" ALIGN="CENTER" WIDTH="90%" HEIGHT="50%" BGCOLOR="#5FA6D7">
<TR WIDTH="200%">
<TD ><div id="menudes"> <img src="crancs/cranc0.gif"></div></TD>
</TR>
<TR>
<TD><div id="menudes"> <img src="crancs/cranc1.gif"></div></TD>
</TR>
<TR>
<TD><div id="menudes"> <img src="crancs/cranc2.gif"></div></TD>
</TR>
<TR>
<TD><div id="menudes"> <img src="crancs/cranc3.gif"></div></TD>
</TR>
<TR>
<TD><div id="menudes"> <img src="crancs/cranc4.gif"></div></TD>
</TR>
</TABLE>
<BR><BR><BR>
<TABLE BORDER="1" ALIGN="CENTER" WIDTH="80%" HEIGHT="15%" BGCOLOR="#5FA6D7">
<TR>
<TD ALIGN="CENTER" WIDTH="%20"><B><FONT size="5pt" color="#165480">SU DINERO</FONT></B></TD>
<TD ALIGN="CENTER" WIDTH="%20"><B><FONT size="5pt" color="#165480">BANCA</FONT></B></TD>
<TD ALIGN="CENTER" WIDTH="%20"><B><FONT size="5pt" color="#165480">SALIDA</FONT></B></TD>
<TD ALIGN="CENTER" WIDTH="%20"><B><FONT size="5pt" color="#165480">MENSAJES</FONT></B></TD>
</TR>
<TR>
<TD WIDTH="%20"> <div align="center" id="capadinero"></div> </TD>
<TD WIDTH="%20"> <div align="center" id="capabanca"></TD>
<TD WIDTH="%20"> <div align="center" id="capasemáforo"></TD>
<TD WIDTH="%20" ALIGN="CENTER"> <FORM><INPUT TYPE="BUTTON" VALUE="Empezar Partida"
style="background-color:#165480;font-size:12pt;color:#5FA6D7; font-weight: bold;" onclick="capaON('inicio');centraCapes('inicio')"></FORM></TD>
</TR>
</TABLE>

<form>

<span id="finalJ">
<h1>Partida finalizada</h1>
<h2 align="center">Usted pierde</h2>
</span>

<span id="finalB">
<h1>Partida acabada</h1>
<h2 align="center">Usted ha Ganado</h2>
</span>

<span id="inicio">
<table cellspacing="5" cellpadding="0">
<tr>
<td colspan="2"><B>Con cuanto dinero quieres
<br>empezar la partida?</B></td>
</tr>
<tr>
<td align="center"><input type="text" maxlength="6" size="6" name="entrada"></td>
<td align="center"><input type="button" value="Ok"></td>
</tr>
</table>
</span>

<span id="apuesta">
<table cellspacing="5" cellpadding="0">
<tr>
<td colspan="3" align="right"><b>Cantidad:</b></td>
<td colspan="3"><input type="text" maxlength="6" size="6" name="quant"></td>
</tr>
<tr>
<th colspan="6">Apuesta por:</th>
</tr>
<tr>
<td><input type="radio" value="0" name="qcranc"></td><td><img src="images/cranc0.gif"></td>
<td><input type="radio" value="1" name="qcranc"></td><td><img src="images/cranc1.gif"></td>
<td><input type="radio" value="2" name="qcranc"></td><td><img src="images/cranc2.gif"></td>
</tr>
<tr>
<td><input type="radio" value="3" name="qcranc"></td><td><img src="images/cranc3.gif"></td>
<td><input type="radio" value="4" name="qcranc"></td><td><img src="images/cranc4.gif"></td>
<td colspan="2" align="right"><input type="button" value="Ok"></td>
</tr>
</table>
</span>
</form>
</BODY>

</HTML>

Si quieres puedes ejecutarlo para que lo veas mejor....

Muchas gracias

Saludos!!! y felices Fiestas.

josdelaranda · #7 (**permalink**) 28/12/2007, 08:59

Hola Estefania76, yo veo que el span con id=inicio tiene el contenido de color azul (Con cuanto dinero quieres empezar la partida?), lo he visto en Firefox e IE7 y se ve azul. Saludos

Estefania76 · #8 (**permalink**) 31/12/2007, 03:22

Hola,

Que raro....yo lo pruebo con los dos navegadores y no hay manera, no se me ve de color azul,....., incluso la capa en Firefox está centrada pero en Iexplorer no...

Investigaré a ver porqué tu lo ves azul con los dos navegadores y yo no...

Gracias.

Feliz Año nuevo!!

Venechat · #9 (**permalink**) 01/01/2008, 22:43

Yo opino igual que josdelaranda lo probé en los dos navegadores y se ve de color azul prueba desinstalando los dos navegadores para ver.

Mucha suerte y espero que publiques cual era el error.

monosulpa · #10 (**permalink**) 02/01/2008, 01:18

yo tambien lo veo de color azul en ambos navegadores asi que creo que el problema radica en tu computadora

Estefania76 · #11 (**permalink**) 02/01/2008, 02:27

Hola a Todos!!

La verdad es que lo hago en las horas libres que tengo en el trabajo, y en el pc de mi trabajo no se ven las letras de color azul, en el de mi casa si.... no sé porque...
ya me había rendido, así que donde van los mensajes, los había puesto entre la etiqueta <FONT> con el atributo color, pero tenéis razón debe ser problema del pc del trabajo, porque en casa se ve perfectamente.

Muchas gracias a todos!!!!

Feliz 2008!!!