Problema basico con hipervinculos

[perello]

Wenas!

Tengo un problemilla bastante simple al crear la web, espero que me podais ayudar.

Lo primero decir que la web la estoy creando con un programa que me dieron al contratar el hosting, y en principio se puede hacer todo sin meterte en codigos, pero las opciones son limitadas.

Lo que quiere hacer es que los hipervinculos cambien de color al pasar por encima con el raton, pero el programa no lo permite, asi que encontre entre los archivos el styles.css que contiene lo siguiente:

/* content */

.text-header { font-weight: bold; font-size: 13pt; font-family: Arial Narrow, Arial, sans-serif; color: #436f94;}
.pageContent { font-size: 8pt; font-family: Tahoma, sans-serif; color: #7c7c7c; }


/* top elements */
.company { font-weight: bold; font-size: 13pt; font-family: Arial Narrow, Arial, sans-serif; color: #153858; }
.slogan { font-weight: bold; font-size: 9pt; font-family: Arial Narrow, Arial, sans-serif; color: #0b406a; }

/*main menu*/
.menu { font-size: 8pt; font-family: Tahoma, sans-serif; color: #ffffff; text-decoration: none; }
.amenu { font-size: 8pt; font-family: Tahoma, sans-serif; color: #ffffff; text-decoration: underline; }
.a{padding:5px;}
/*submenu*/
.submenu { font-size: 8pt; font-family: Tahoma, sans-serif; color: #ffffff; text-decoration: none; }
.asubmenu { font-size: 8pt; font-family: Tahoma, sans-serif; color: #ffffff; text-decoration: underline; }

/*bottom menu*/
.bmenu { font-size: 8pt; font-family: Tahoma, sans-serif; color: #1a4162; text-decoration: none; }
.abmenu { font-size: 8pt; font-family: Tahoma, sans-serif; color: #1a4162; text-decoration: underline; }

/*copyright*/
.footer { font-size: 8pt; font-family: Tahoma, sans-serif; color: #868789; }

/*backgrounds*/
.main-bg { background-color: #E1E1E1; }
.submenu-bg { background-color: #4E8BC1; }
.menu-hr { background-color: #54BEB4; }
.line { background-color: #CACACA; }
.menu-bg { background-color: #E9B200; }
.topbg { background-color: #09A5A1; }


Para cambiar los colores de los hipervinculos, yo añadi lo siguiente:

<style type="text/css">
<!--
a:link {
color: #0033CC;
}
a:hover {
color: #FFFF00;
}
-->
</style>

Y efectivamente, consigo lo que queria, peeero tambien me aplica eso en los enlaces de los menus, y yo quiero aplicarlo solo a los contenidos de la web.

Sabeis como puedo hacer lo que quiero? Basta con modificar el .css o me tengo que meter en el codigo de cada pagina?

Muchas gracias de antemano por la ayuda

Un saludo

[Carlangueitor]

Basta con modificar el CSS pero sin HTML va ser difícil saber donde esta el menú que dices.

Saludos

[perello]

Gracias por contestar.

Los menus que digo son los que vienen en el codigo que he puesto despues de estos comentarios:

/*main menu*/
/*submenu*/
/*bottom menu*/

Tengo que encontrar informacion sobre esos menus en alguna pagina de HTML?

Saludos!

[mhax]

Puedes encerrar los link que quieres que cambien en un div y a este le colocas una clase

Código HTML:

<style>
 a:hover{
  color:red; 
}
 
.links a:hover{
 background:red;
 }
</style>
 
<div class="links">  
<a href="#">dentro del div1</a>
<a href="#">dentro del div2</a>
</div>
<a href="">afuera del div<a/>
 

Saludos.

[perello]

Gracias por contestar.

Disculpa mi ignorancia, te agradeceria que me aclararas un poco sobre el codigo que has puesto, para estar seguro de lo que tengo que hacer:


<style>
a:hover{
color:red;
}
.links a:hover{
background:red;
}
</style>

No se si entiendo eso de arriba, cuando pones a:... eso afecta a todos los enlaces? y cuando pones .links:.... afecta solo a los de la clase links? es asi? Es decir, si solo quiero definir el color para los de la clase links, puedo omitir la parte de arriba?


<div class="links">
<a href="#">dentro del div1</a>
<a href="#">dentro del div2</a>
</div>
<a href="">afuera del div<a/>

Y ahi en los # va la pagina que quiero mostrar? Y donde pusiste "dentro del div1" pondria el nombre que le puse al enlace? Ya te digo que mis conocimientos del tema son minimos, por eso cuanto mas te explayes en la respuesta mejor.

Ahora bien... todo este codigo donde tengo que ponerlo? En el styles.css? O en la pagina en la que aparezcan los enlaces?

Muchas gracias de antemano

[mhax]

todo lo puedes poner en la pagina .html
pero para mayor organizacion slos programadores separan los css (estilo) de lo html.
si lo quieres separar solo tienes que poner:

Código CSS:

a:hover{
color:red;
}
.links a:hover{
background:red;
}
 

en el archivo style.css y luego incluirlo en el html.

sobre la explicacion del codigo tienes razon en lo que dices.
si solo quires definir colores solo a los de la clase links puedes omitir la otra parte.

en el # van la pagina ke quieres abrir al ser pulsado el link.

Si tienes alguna otra duda, posteala.

Saludos.

[perello]

Gracias por tu respuesta mhax.

Me ha surgido una duda por lo que dices... entonces para tenerlo separado:

En el styles.css copio solamente lo que pusiste ahora en el ultimo mensaje.

Despues la pagina la he creado con un programa, y me ha generado un html por cada subpagina que tiene ( no se, a lo mejor es lo normal)

Y yo quiero aplicar esos estilos que defina en el styles.css a todas las subpaginas... tengo que cambiar en cada una de ellas el codigo?

Y en el html que pongo, solo la parte de div o tengo que poner tambien lo que va en el css aqui tambien?

Por ultimo, puedo crear el codigo ese digamos, al principio de la pagina? O tiene que ir detras de cada enlace?

Muchas gracias de nuevo

[mhax]

la estructura seria mas o menos asi:

Pagina_Principal.html

Código HTML:

<html>
     <head>
         <link href="style.css" rel="stylesheet" type="text/css" />
     </head>
     <body>
        <div class="links"> 
             <a href="SubPagina1.html">Link 1</a>
             <a href="SubPagina2.html">Link 2</a>
        </div>
    </body>
  </html>
 

Archivo style.css

Código CSS:

.links a:hover{ 
    background:red;
  }
 

SubPagina 1.html

Código HTML:

<h2>Hola soy la subpagina 1</h2>
 

SubPagina 2.html

Código HTML:

<h2>Hola soy la subpagina 2</h2>