¿Se puede poner dos STYLE en una misma página?

Usuario Novato

#1•08/Jun/2004, 21:23•Editado por CHOMH

Os explico mi caso:
Tengo en mi web un menú en la izquierda y en la derecha es donde aparece el apartado seleccionado en el menú o subapartados de los apartados del menú. En la tabla, tengo el menú en una columna y lo demás en la otra columna. Lo que quisiera es aplicar en el menú un <style> (estilo) y en la otra columna otro <style> distinto. Cuando pongo un estilo entre las etiquetas <HEAD> y </HEAD> me sale en un determinado estilo "A", pero cuando vuelvo a poner las equietas <style> [...] </style> me sale todo con un estilo "B". Lo que quisiera es conseguir que hubiera 2 estilos, el "A" y el "B" y no que todo fuera "B". Os escribo el código para que veáis como lo tengo puesto. Si alguien sabe cómo solucionarlo se lo agredecería.

Cita:

<HTML>
<HEAD>
<TITLE> CHOMH - El Caldero Chorreante </title>
<style>
body, p, br, td {font-family: verdana; color: #CCCCCC; font-size:8pt;}
A:link{color:#000000;TEXT-DECORATION:none}
A:visited{color:#000000; TEXT-DECORATION:none}
A:active{color:#000000;TEXT-DECORATION:none}
A:hover{color:#000000;TEXT-DECORATION:none; font-weight:bold}
A.news{color:#000000;TEXT-DECORATION:none}
A.news:link{color:#8D661D;TEXT-DECORATION:none}
A.news:visited{color:#8D661D;TEXT-DECORATION:none}
A.news:active{color:#8D661D;TEXT-DECORATION:none}
A.news:hover{color:#C29841;TEXT-DECORATION:underline}
body {
scrollbar-face-color: #000000;
scrollbar-arrow-color: #0000A0;
scrollbar-track-color: #000000;
scrollbar-shadow-color: #0000A0;
scrollbar-highlight-color: #0000A0;
scrollbar-3dlight-color: #A9DAF8;
scrollbar-darkshadow-Color: #000000;}
</style>

<script language="JavaScript"></script><script language="JavaScript">
</script><script language="JavaScript">
function LimitText(fieldObj,maxChars)
{
var result = true;
if (fieldObj.value.length >= maxChars)
result = false;

if (window.event)
window.event.returnValue = result;
return result;
}
</script>
<SCRIPT LANGUAGE="JavaScript">
var user;
var domain;
var suffix;
function jemail(user, domain, suffix){
document.write('<a href="' + 'mailto:' + user + '@' + domain + '.' + suffix + '">' + user + '@' + domain + '.' + suffix + '</a>');
}
</script>
</head>
<BODY BACKGROUND="fondos/ladrillodepiedra.gif" TEXT="FFFF00" LINK="#FFFFFF" VLINK="#FFFFFF" ALINK="#FFFFFF" leftmargin="0" topmargin="0">
<table width="778" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" background="titulo2.jpg" colspan="2" height="197">
</td>
</tr>
<tr>
<td width="150" valign="top" background="bg2.jpg" height="1">
<img src="servicios.jpg"><br>
<p><font color="#444444" face="Verdana, Arial, Helvetica, sans-serif" size="1"><img src="punto.gif">
<a href="index.php">Inicio</a>
<br>
<img src="punto.gif"> <a href="lacomunidad.html">La comunidad</a>
<br></font>
<font color="#444444" face="Verdana, Arial, Helvetica, sans-serif" size="1"><img src="punto.gif">
<a href="noticias.html">Noticias</a>
<br>
<img src="punto.gif"> <A HREF="http://chomh.foro.st/" TARGET="_blank">Lechucería</a>
<br>
<img src="punto.gif"> <a href="chat.html">Chat</a>
<br>
<img src="punto.gif"> Fotos
<br>
<img src="punto.gif"> Documentos
<br>
<img src="punto.gif"> <A HREF="http://gbooks.melodysoft.com/chomh-contacta/" TARGET="_blank">contacta</a>

</font></p>
<p><img src="escritora.jpg"><br>
<font color="#444444" face="Verdana, Arial, Helvetica, sans-serif" size="1">
<br>
<img src="punto.gif">
<a href="jkrowling.html">J.K. Rowling</a>
<br>
<img src="punto.gif"> <a href="jkrowling.html#entrevistas">Entrevistas</a><br>

</font></p>
<p><img src="historia.jpg"><br>
<font color="#444444" face="Verdana, Arial, Helvetica, sans-serif" size="1">
<br>
<img src="punto.gif"> <a href="comienzohistoria.html">Comienzo de la historia</a>
<br>
<img src="punto.gif"> <a href="vidadursley.html">La vida con los Dursley</a>
<br>
<img src="punto.gif"> <a href="porfinconhagrid.html">Por fin con Hagrid</a>
<br>

</font></p>
<p><img src="puntos-encuentro.jpg"><br>
<font color="#444444" face="Verdana, Arial, Helvetica, sans-serif" size="1">
<br>
<img src="punto.gif"> <a href="calderochorreante.html">Caldero Chorreante</a>
<br>
</b><img src="punto.gif"> Estación Kings Cross
<br>

</font></p>

<p><img src="hogwarts.jpg"><br>
<font color="#444444" face="Verdana, Arial, Helvetica, sans-serif" size="1">
<br>
<img src="punto.gif"> Mapa de Hogwarts
<br>
<img src="punto.gif"> <a href="sombrero_seleccionador.html">Sombrero seleccionador</a>
<br>
<img src="punto.gif"> Salas comunes
<br>
<img src="punto.gif"> <a href="gran_comedor.html">Gran comedor</a>
<br>
<img src="punto.gif"> Biblioteca
<br>
<img src="punto.gif"> Clases
<br>
<img src="punto.gif"> Sala de trofeos
<br>
<img src="punto.gif"> Secretos de Hogwarts
<br>
<img src="punto.gif"> Aseos Myrtle La Llorona
<br>
<img src="punto.gif"> Despachos
<br>
<img src="punto.gif"> Los fantasmas
<br>
<img src="punto.gif"> <a href="exterioreshogwarts.html">Exteriores de Hogwarts</a>
</font></p>

<p><img src="lugares-magicos.jpg"><br>
<font color="#444444" face="Verdana, Arial, Helvetica, sans-serif" size="1">
<br>
<img src="punto.gif"> Hogsmeade
<br>
<img src="punto.gif"> Azkaban
<br>
<img src="punto.gif"> Beauxbatons
<br>
<img src="punto.gif"> Durmstang
</font></p>

<p><img src="ministerio.jpg"><br>
<font color="#444444" face="Verdana, Arial, Helvetica, sans-serif" size="1">
<br>
<img src="punto.gif"> Ministerios de Magia
<br>
<img src="punto.gif"> Medios de Comunicación
</font></p>
<p><img src="interactivo.jpg"><br>
<font color="#444444" face="Verdana, Arial, Helvetica, sans-serif" size="1">
<br>
<img src="punto.gif"> Películas
<br>
<img src="punto.gif"> Juegos
<br>
<img src="punto.gif"> El autobús noctámbulo
</font></p>
<P>
<font face="Tahoma" size="1" color="#000000"><B>Copyright 2004 © CHOMH.</b> Todos los Derechos Reservados.</font>
<P>
<FONT COLOR="#000000" FACE="Verdana" SIZE="1"><B>Visitante número:</b></font>
<BR>
<SCRIPT LANGUAGE="JavaScript" src="http://contadores.miarroba.com/ver.php?id=260788"></script>

</td>
<td width="628" valign="top" rowspan="2">
&
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<STYLE>
body, p, br, td {font-family: verdana; color: #CCCCCC; font-size:8pt;}
A:link{color:#FFFFFF;TEXT-DECORATION:none}
A:visited{color:#FFFFFF; TEXT-DECORATION:none}
A:active{color:#FFFFFF;TEXT-DECORATION:none}
A:hover{color:#00FF00;TEXT-DECORATION:none; font-color:bold}</style>
<tr>
<td width="19">
<p>&</td>
<td width="435">
<table border="0" width="430" cellspacing="0" cellpadding="0">
<tr><td>
<CENTER><IMG SRC="Imagenes/gif_caldero.gif" WIDTH="82" HEIGHT="70" ALIGN=UP><IMG SRC="Imagenes/calderochorreante-titulo.jpg"><IMG SRC="Imagenes/gif_caldero.gif" WIDTH="82" HEIGHT="70" ALIGN=UP></center>
<IMG SRC="Imagenes/linea_chorreante.gif" WIDTH="582" HEIGHT="24">
<P>
<center>
<object classid="clsid

27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0"
id="CalderoChorreante" width="506" height="366">
<param name="movie" value="CalderoChorreante.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#000000">
<embed name="CalderoChorreante" src="CalderoChorreante.swf" quality="high" bgcolor="#000000"
width="506" height="366"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</embed>
</object>
</center>
<BR>
<IMG SRC="Imagenes/linea_chorreante.gif" WIDTH="582" HEIGHT="24">
<CENTER><FONT SIZE=5 COLOR="#00FF00"><B>OPCIÓN A</b></font></center>
<center><P><A HREF="entrada_callejon_diagon.html"><IMG SRC="Imagenes/entradacd1.jpg" WIDTH="115" HEIGHT="83" ALIGN=CENTER BORDER="0"></a><FONT SIZE="4" FACE="courier new" COLOR="F1D500"><A HREF="entrada_callejon_diagon.html"><B> ENTRADA AL CALLEJÓN DIAGON </b></a></font><A HREF="entrada_callejon_diagon.html"><IMG SRC="Imagenes/entradacd1.jpg" WIDTH="115" HEIGHT="83" ALIGN=CENTER BORDER="0"></a></center>
<P>
<FONT FACE="Wingdings">ü</font><font size="1" face="tahoma" color="#00FF00"><I>Clica sobre las palabras "<B>Entrada al callejón Diagon</b>" para acceder al patio trasero del Caldero Chorreante</i></font>
<BR>
<IMG SRC="Imagenes/linea_chorreante.gif" WIDTH="582" HEIGHT="24">
<CENTER><FONT SIZE=5 COLOR="#00FF00"><B>OPCIÓN B</b></font></center>
<A NAME="cartas">
<P>
<TABLE BORDER=0>
<TR><TD VALIGN=BOTTOM><A HREF="carta_bebidas.html"><IMG SRC="Imagenes/carta_bebidas.jpg" WIDTH="140" HEIGHT="247" BORDER=0></a></td> <TD VALIGN=BOTTOM><A HREF="carta_comidas.html"><IMG SRC="Imagenes/carta_comida.jpg" WIDTH="199" HEIGHT="190" BORDER=0></a></td> <TD VALIGN=BOTTOM><A HREF="carta_postres.html"><IMG SRC="Imagenes/carta_postres.jpg" WIDTH="140" HEIGHT="235" BORDER=0></a></td>
<TR><TD ALIGN=CENTER><B><A HREF="carta_bebidas.html">Carta de bebidas</a></b></td> <TD ALIGN=CENTER><B><A HREF="carta_comidas.html">Carta de comidas</a></b></td> <TD ALIGN=CENTER><B><A HREF="carta_postres.html">Carta de postres</a></b></td> </tr>
</table>
</a>
<P>
<FONT FACE="Wingdings">ü</font><font size="1" face="tahoma" color="#00FF00"><I>Clica sobre una de las cartas para acceder a los productos seleccionados</i></font>
<BR>
<IMG SRC="Imagenes/linea_chorreante.gif" WIDTH="582" HEIGHT="24">

<table cellpadding=0 cellspacing=0 border=0>
<tr><td><IMG SRC="botones/ant2.gif" ALT="Anterior" WIDTH=32 HEIGHT=32 border=0><A HREF="index.php"><IMG SRC="botones/princ2.gif" ALT="Página inicial" WIDTH=32 HEIGHT=32 border=0></a><IMG SRC="botones/sig2.gif" ALT="Siguiente" WIDTH=32 HEIGHT=32 border=0></td></tr>
</table>

</body>
</html>

CHOMH

Usuario Novato

#2•08/Jun/2004, 21:24

Ayer investigando por el chat me dijeron un modo de ejecutar una acción cuando el mouse pasa por encima de algun elemento. Eso se hace con la función "onMouseOver".

En mi caso, lo que quiero es que cuando el mouse esté encima de un link, éste se comporte de un modo determinado. Lo que quiero es que el menú de la izquierda, el cual introduzco en cada página antes de empezarla, cuando se pase por encima el mouse del link éste se ponga en negrita, estando previamente de color negro y sin negrita. Luego quisiera que los demás links tuvieran otro formato, porque muchos casos el link de color negro no me irá bien y necesitaré uno blanco o azul.

Intenté solucionar eso poninendo <A HREF="direccion.html" onMouseOver="this.style.color='00FF00'" onMouseOut="this.style.color='FFFFFF'"> TEXTO LINKEADO </A>, pero ocurre lo siguiente:

Las palabras ENTRADA AL CALLEJÓN DIAGON son negras al cargar la página, pues en <BODY> tengo <BODY LINK="#000000" ALINK="#000000" VLINK="#000000">. Cuando se pasa el mouse por encima se vuelve verde, pues en <A HREF> tengo <<onMouseOver="this.style.color='00FF00'">> y cuando el mouse sale de ese area se vuelve blanco, ya que tengo <<onMouseOut="this.style.color='FFFFFF'">>.

Lo que quisiera es algo así:

Que en el menú se pusiera en negrita al pasar el mouse por encima y que en el resto de la página hubiera otro estilo de links, con dos comportamientos (cuando el mouse está dentro del area de texto y cuando el mouse está fuera del area) y no con tres comportamientos como tiene ahora. ¿Alguien sabe como hacerlo?

Saludos,

Thanat0s

User 479801

Okupa del foro

#3•09/Jun/2004, 02:44

Acerca de tu duda con estilos CSS:

No te puedo pasar el código completo, pero sí te puedo decir como solucionarlo. Esto se hace con algo que es CSS se llama Clases. Consiste en asignarle un identificador a una o varias etiqueta y crearles un estilo independiente a las demás etiquetas que pueden ser heredadas. Por ejemplo:

Codigo:

Y en el espacio donde se colocan los estilos lo enlazas así:

Codigo:

No olvides el punto antes del nombre de la clase.

CHOMH

Usuario Novato

#4•09/Jun/2004, 19:54

OK, gracias, he puesto ésto y ha funcionado:

Cita:

Anterior Siguiente Arriba

Responder

ATENCIÓN: Este tema no tiene actividad desde hace más de 6 MESES,
te recomendamos abrir un nuevo tema en lugar de responder al actual

Inicio

Servicio Hosting

General de Hosting

Opciones:

Ir al subforo:

Permisos:

TU NO PUEDES Escribir nuevos temas
TU NO PUEDES Responder a los temas
TU NO PUEDES Editar tus propios mensajes
TU NO PUEDES Borrar tus propios mensajes

Temas similares

No se han encontrado temas similares