Entrar

Insertar imagen en enlaces

tazmania · · Solicitar retirada
buenas ,pues mi problemilla es, he creado una barra de navegacion como la del curso,pero de lugar escribir y ponerle color a los enlaces, lo que he hecho es insertar imagenes,para ser exactos 4 botones, hasta hay bien con sus enlaces funcionando y todo y el problema viene con los estilos ,en "hover" he puesto de lugar un color una imagen, que es el mismo boton pero de otro color, pero no aparece, lo que puse en los estilos de enlaces es:
a {}
a:link {}
a:visited {}
a:hover {background-image: url(objetos/boton1a)}
a:active {}
tambien decir que antes de hacer estos cambios, los estilos de enlace iban bien cuando teponias encima se marcaban y cambiaban de color,
entonces o hay algo mal ó asi no se hace, me podeis decir si esta mal o como se haria.
un saludo y gracias
davissbrocen · · Solicitar retirada
no estoy muy seguro pero prueba a añadir en el hover display:block. pero no estoy seguro repito

espero que haya suerte y que te pueda ayudar gente con mas experiencia que yo

:wink:
tazmania · · Solicitar retirada
bueno pues probado y nada no va de todas formas gracias por responder ,estoy mirando por el foro y veo esto:

http://www.comocreartuweb.com/phpBB2/ftopic13562.html

tambien lo he probado y nada ,esto ultimo creo que no lo hice bien, escribi todo en la hoja de html no en la estilo de capa, eso es lo que me da a entenderen el enlace que tiene esa pagina a la del que lo hizo, alguna idea mas.
un saludo
Yaneth · · Solicitar retirada
para ayudarte
necesitamos ver todo el contenido, tanto de html como de css

saludos
Mc.PinKy.18 · · Solicitar retirada
Hola lo primero es crear un directorio o no se como lo tengas bueno aqui te explico yo cree una carpeta ahi cree una carpeta images ahi adentro la imagen que voy a usar q se llama flecha aqui te dejo una imagen y el html para que entiendas

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Un ejemplo - Mc.PinKy.18</title>

<style type="text/css">

ul.listaconimagen{margin:0;padding:0;list-style-type:none;display:block;font:bold 16px Helvetica, Verdana, Arial, 

sans-serif;line-height:165%;width:200px;}

ul.listaconimagen li{margin:0;padding:0;border-top:1px solid #4D0000;border-bottom:1px solid #761A1A;}

ul.listaconimagen li a{display:block;text-decoration:none;color:#fff;background:#063;padding:0 0 0 20px;width:180px;}

ul.listaconimagen li a:hover{background:#066 url("images/flecha.gif") no-repeat 0 9px;}

ul.listaconimagen li a.cambiaimagen,ul.vert-one li a.cambiaimagen:hover{background:#063 url("images/flecha.gif") no-repeat 0 

9px;}

</style>

</head>

<body>

<ul class="listaconimagen">
[*][url="#"]Inicio[/url]
[*][url="#"]Blog[/url]
[*][url="#"]CCTW[/url]
[*][url="#"]Contacto[/url]
[/list]

</body>
</html>

aqui la imagen

http://img155.imageshack.us/img155/4112/dibujoir2.jpg

saludos y suerte ! Que dios los bendiga
tazmania · · Solicitar retirada
buenas aqui dejo el enlace de la web:

primeraweb.medianewsonline.com

y esto es lo que hay en la carpeta html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="plantilla.css" type="text/css" media="all">
<style type="text/css">
a img {border:0}
a span {display: none}
a:hover span {display: inline}
a:hover>img {display: none}
</style>
</head>
<body>
<div id="global">
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
</div>
<div id="navegar">
<ul>
  • <a href="#">[contenido no disponible]<span>
    [contenido no disponible]</span></a>
  • <a href="#">[contenido no disponible]<span>
    [contenido no disponible]</span></a>
  • <a href="#">[contenido no disponible]<span>
    [contenido no disponible]</span></a>

    </div>
    <div id="contenido">Contenido</div>
    <div id="pie">Pie</div>
    </div>
    </body>
    </html>

    y esto en css:

    body {background-color: gray ; text-align: center}
    img {border-style: none}
    #global {width:800px ; margin: 4px auto }
    #cabecera {background-image: url(objetos/carbono-azul.gif); height: 100px ;
    border: orange 1px solid }
    #logotipo {padding: 25px }
    #navegar {background-color: LightSkyBlue ; background-image: url(objetos/valla.gif) ;
    height: 120px ; border: orange 1px solid ; margin: 5px 0px}
    #navegar ul {margin: auto 150px }
    #navegar li {float:left ; list-style:none ; padding: 10px 20px}
    #contenido {background-color: SteelBlue}
    #pie {background-color: Bisque}
    a {}
    a:link {}
    a:visited {}
    a:hover {}
    a:active {}

    bueno pues todo es probado en IE y no funciona, tambien lo probe colocando en a:hover {background-image: url(objetos/boton.gif) }. Me he instalo Opera y Firefox y si funciona en ellos lo unico que me tiene loco
    que cada uno coje unos margenes y descuadran la pagina, entonces 2 cosas:
    -como hacer para que funcione el cambio de imagen en la barra navegador con internet explorer al ponerme encima del enlace.
    -y como hacer para que no se descuadre la pagina cuando cambias de
    buscador.
    un saludo y gracias