imagenes con enlance

hola que tal.
bueno mi problema del dia es que puse una imagen en la pate que decia "esta es la zona principal de mi web" la imagen tiene un enlance ,pero sucede que cuando coloco el cursos sobre la imagen, no se resalta solo la imagen, sino que se resalta todo el ancho de la pantalla.
y otra cosa es que quiero poner un texto a su lado derecho y repeetirlo con muchas imagenes mas y el texto aparece por cualquier lado.

muchas gracias amigos por todas las respuestas que siempre me dan!!.


<!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="estilo-menu-desplegable.css" type="text/css" media="all">
<script language="javascript" src="no-tocar.txt" type="text/javascript"></script>
<script language="javascript" src="numero-de-menus.txt" type="text/javascript"></script>
</head>
<body onload="init();">
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="orca">[contenido no disponible]</div>
<div id="publicidad"><h3>dedicados a la venta de tierras en la patagonia</h3></div>
</div>
<div id="navegacion">
<ul>
  • home
  • quienes somos
  • campos
  • contactenos

    </div>
    <div id="contenido">
    <div id="menu">
    <h1>Título de Sección 1</h1>
    <ul>
  • Enlace 1
  • Enlace 2

  • Enlace 3
  • Enlace 4
    </div>
    <h1>Esta será la zona principal de la web</h1>

    [contenido no disponible]</p>


    Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo
    pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
    <h2>Y este es el tercer párrafo.</h2>


    En pocas lecciones aprenderé a darle margenes para
    separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea,
    que queda mucho mejor.</p>


    Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos
    alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
    </div>
    <div id="pie">
    <div id="pieuno"><ul>
  • Foro Ejemplo
  • Contactos
  • Nos Enlazan
    </div>
    <div id="piedos">pie dos</div>
    <div id="pietres"><ul>
  • Directorio
  • TopSite
  • Mapa de la Web
    </div>
    <div id="curva-inferior"></div>
    </div>
    <script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
    </body>
    </html>




    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
    p {text-align: justify}
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
    text-align: center}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
    text-align: center}
    h3 {ont-size: 2.2em; color:red ; font-weight: bold ; text-decoration: none ;
    text-align: center}
    body {text-align: center }
    #global {width:800px ; margin:4px auto }
    #curva-superior { background-image: url(objetos/curva-superior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    #cabecera {background-color: black ; border-left: black 1px solid ;
    border-right: black 1px solid ; height:100px}
    #orca {width:280px ; float:left }

    #navegacion {background-color: pink ; border: black 1px solid ; height:20px}
    #navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
    #navegacion ul { margin-left: 180px }
    #contenido {background-color: orange ; border-left: black 1px solid ;
    border-right: black 1px solid }
    #contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
    #menu {background-color: yellow ; width: 150px ; float:left ;
    text-align:left ; margin: 3px 10px 3px 3px ; background-image: url(objetos/menu-parte-inferior.gif); background-position: bottom ;padding-bottom:5px }
    #menu li {list-style:none ; margin: 4px 8px 4px 6px }
    #menu h1 {text-decoration:none ; font-size:12px ;
    background-image: url(objetos/menu-parte-superior.gif) }
    #pie { background-color: white ;
    border-left: black 1px solid ;
    border-right: black 1px solid;
    border-top: black 1px solid;height: 65px }
    #pie li {list-style: none ; font-size: 12px }
    #pieuno { float:left ;width:150px}
    #piedos { float:left ;width:498px }
    #pietres { float:left ;width:150px }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    a {color: blue ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:white ; text-decoration:underline ; background-color: silver}
    a:active {}
    ..........
    #pie a {color: blue; text-decoration:none ; display: block }
    #pie a:link {}
    #pie a:visited {}
    #pie a:hover {color:black ; text-decoration:underline ; background-color: white }
    #pie a:active {color:black}

    #logotipo a {}
    #logotipo a:link {}
    #logotipo a:visited {}
    #logotipo a:hover {background-color: white }
    #logotipo a:active {}
  • Eso se debe a esto:
    a {color: blue ; text-decoration:none ; display: block }

    Porque estás haciendo que el bloque afecte a todos los enlaces que haya. O haces que eso sólo afecte a los de un div en concreto o creas un estilo para las imágenes al que le pongas un display: inline
    Saludos :wink:
    lo que me gustaria saber es para que servia en la pagina el display block que elimine . seria para el menu ,me estoy refiriendo a la planitilla del curso paso apaso?. solo pregunto para saber cuando es necesario utilizarlo.
    muchas gracias por tu respuesta amigo , hacia ya dias que estaba estancado.
    :wink:
    Pues es cuando quieres que un enlace ocupe toda la línea (su fondo es el que ocupa toda la línea), que es el caso del menú :wink: