Problemas enlace email.

Haber si me explico; en una misma plantilla .html tengo un link que me enviará a otra pagina de mi web, y otro link que lleva al correo para enviarme un email. Al pasar el raton por el link se me colorea bien y se me subraya, pero no quiero que pase lo mismo cuando pongo la flecha encima del link para el correo, como puedo hacer que en la imagen del correo no me aparezca coloreada ni nada; he probado a hacer otra capa y relacionar la imagen pero no me sale haber si me podeis ayudar:

index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
</head>
<body>
<div id="cabecera">Bienvenidos a mi Web</div>
[contenido no disponible]
<div id="menu">
<ul>

  • </body>

    <link rel="stylesheet" href="estilocorreo.css" type="text/css" media="all">
    <head>
    <body>
    <a>
    <p class="centrado" class="centrado"> [correo eliminado]</p>
    </a>

    </div>
    </body>
    </html>





    estilo.css:

    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
    body {text-align: center }
    #global {width:800px ; margin:4px auto }
    #cabecera {background-color: DodgerBlue }
    body { background-color: Black }
    img { border-style: none }
    .centrado { text-align:center }
    #menu li {list-style:none ; margin: 4px 0px 4px 6px }
    #menu {background-color: black ; width: 150px ; float:center ; text-align:center ; margin-right: 10px }
    a {color: brown ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:OrangeRed ; text-decoration:underline ; background-color: Gold}
    a:active {}






    estilocorreo.css:

    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
    a:hover {color:OrangeRed ; text-decoration:underline ; background-color: Red}
  • Pues vamos a ir corrigiendo las cosas.
    Primero vamos al código html. Lo que te pongo en rojo es que sobra, y lo que te pongo en azul te lo voy a comentar más abajo:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo.css" type="text/css" media="all">
    </head>
    <body>
    <div id="cabecera">Bienvenidos a mi Web</div>
    [contenido no disponible]
    <div id="menu">
    <ul>

  • </body>

    <link rel="stylesheet" href="estilocorreo.css" type="text/css" media="all">
    <head>
    <body>
    <a>
    <p class="centrado" class="centrado"> [correo eliminado]</p>
    </a>

    </div>
    </body>
    </html>



    Lo que te he puesto en azul iría en el head. Pero pasa otra cosa, y es que no vale la pena crear dos hojas de estilos, puedes poner los códigos de la segunda hoja en la primera y te ahorras crear otra.
    Ahora te voy a hacer una indicación en la segunda hoja de estilos:
    #capa a:hover {color:OrangeRed ; text-decoration:underline ; background-color: Red; display: inline}


    Como quieres que afecte a un enlace sólo el enlace lo debes de situar en una capa con el nombre que quieras, y ese nombre lo deberás de poner en lo que te he puesto en azul. Lo que te he puesto en verde no vale como color, debes de poner un código html. Lo que te he puesto en rojo lo debes de añadir para que no le afecte el display: block del otro tupo de enlace definido.

    Saludos :wink:
  • me sigue saliendo igual :? perdona mi torpeza

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo.css" type="text/css" media="all">
    <link rel="stylesheet" href="estilocorreo.css" type="text/css" media="all">
    </head>
    <body>
    <div id="cabecera">Bienvenidos a mi Web</div>
    [contenido no disponible]
    <div id="menu">
    <ul>





  • <a>
    <p class="centrado" class="centrado"> [correo eliminado]</p>
    </a>

    </div>
    </body>
    </html>





    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
    #capa a:hover {color:0xFF8000 ; text-decoration:underline ; background-color: Red ; display: inline}






    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
    body {text-align: center }
    #global {width:800px ; margin:4px auto }
    #cabecera {background-color: DodgerBlue }
    body { background-color: Black }
    img { border-style: none }
    .centrado { text-align:center }
    #menu li {list-style:none ; margin: 4px 0px 4px 6px }
    #menu {background-color: black ; width: 150px ; float:center ; text-align:center ; margin-right: 10px }
    a {color: brown ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:OrangeRed ; text-decoration:underline ; background-color: Gold}
    a:active {}

    y tambien otra cuestion asi no molesto en unas horas xd

    para bajar el link del correo para separarlo del link para acceder a mi web como lo hago?
  • No hicistes lo último que te dije:
    Lo que te he puesto en azul iría en el head. Pero pasa otra cosa, y es que no vale la pena crear dos hojas de estilos, puedes poner los códigos de la segunda hoja en la primera y te ahorras crear otra.
    Ahora te voy a hacer una indicación en la segunda hoja de estilos:
    #capa a:hover {color:OrangeRed ; text-decoration:underline ; background-color: Red; display: inline}


    Como quieres que afecte a un enlace sólo el enlace lo debes de situar en una capa con el nombre que quieras, y ese nombre lo deberás de poner en lo que te he puesto en azul. Lo que te he puesto en verde no vale como color, debes de poner un código html. Lo que te he puesto en rojo lo debes de añadir para que no le afecte el display: block del otro tupo de enlace definido.

    Saludos :wink: