Problema con los enlaces de palabras dentro del texto

Saludos a todos!

Ya acabé mi primera web, la que puse en el apartado correspondiente para recibir críticas, y ya estoy con la segunda, referida a otra idea de negocio que ya llevaba en mente de hace mucho tiempo. Es sobre educación y adiestramiento canino.

Pero en los dos casos, en las dos webs, no he conseguido solucionar (más bien "enmascarar") un pequeño problema con los enlaces. Y es que, dentro de un párrafo, cuando quiero enlazar una sección de mi web u otra web distinta a una palabra o frase, ésta me aparece una línea más abajo. La forma con la que lo he "enmascarado" es que siempre pongo la palabra de enlace al final de la sección (siempre lo he usado para enlazar con la sección "contacto" o "suscribirse").

Pongo el enlace de la sección (una de ellas) en la que se puede ver cómo se me queda (fijaos que hay un poco más de espacio entre la frase enlazada y el texto normal):

http://www.celulasmadreadultas.com/enlaces-laterales/cliente-con-de…

El código HTML asociado a una de las líneas, es éste:



<div id="enlace">Contacte con nosotros si sigue teniendo dudas.</div></p>

donde tiene a su vez asociado este comando en la hoja de estilos:

#enlace {text-align: justify ; font-weight:bold ; font-size: 0.8em ; margin: 0px 15px 0px 15px}

Si pongo el código de antes, pero en vez de enlazar la frase entera lo hago solo con una o alguna palabra (por ejemplo "contacte", que sería lo suyo), el resultado es que esa o esas palabras aparecen en la línea de debajo, y después, otra línea más abajo, la siguiente parte de texto sin enlazar. Más o menos esto (os lo reproduzco):

Contacte con nosotros
si sigue teniendo dudas.

("Contacte con nosotros" sería el enlace).

Es un rollo pero la cuestión es que no me deja que aparezcan las palabras que yo quiera enlazadas sin perder el estilo del texto en el cual están inmersas.

Solo conseguí q se me quedara sin incrementar la distancia entre una línea enlazada y la siguiente al usar <ul>
  • (listado de enlaces), como podéis ver en este enlace:

    http://www.celulasmadreadultas.com/el-producto/caracteristicas.html

    Espero vuestras respuestas. Muchas gracias de antemano!


    David Vicente
  • esto, es lo que le dá caracteristicas a TODOS tus enlaces

    a {color: white ; text-decoration: none ; display: block}
    a:link {}
    a:visited {}
    a:hover {color: LightGray ; text-decoration:none ; background-color: SeaGreen}
    a:active {}

    de ahi debes partir, si tu deseas caracteristicas especiales para x enlace debes definirlo, pero siempre teniendo en cuenta las lineas de arriba
    ya que las caracteristicas de los enlaces se "heredan" por ejemplo tu tienes display block en el grupo "madre" de "a"

    si deseas quitarlo eso para otro gurpo de enlaces, debes ponerle su contrario "display:inline" (para qe el enlace este en linea con el resto del texto)

    ahora tu estás haciendo esto

    #enlace a {color: SeaGreen; text-decoration:none ; display: block }
    #enlace a:link {}
    #enlace a:visited {}
    #enlace a:hover {color: SeaGreen ; text-decoration:underline ; background-color: white }
    #enlace a:active {}

    pero no es lo mas adecuado (meter una palabra dentro de un div)
    lo que te sugiero es hacerlo asi

    a.enlace {color: SeaGreen; text-decoration:none ; display: inline }
    a.enlace:link {}
    a.enlace:visited {}
    a.enlace:hover {color: SeaGreen ; text-decoration:underline ; background-color: white }
    a.enlace:active {}

    y en el html pones asi



    aqui tengo mi texto enlace mas texto </p>

    saludos
    Muchísimas gracias Yaneth!!!!!!!!! No sabes lo que me has ayudado!!!! Es que eso no viene explicado así en el curso paso a paso, por eso no lo sabía, y tampoco encontré información clara por internet; igual no supe buscarla bien.

    Voy a ponerlo en práctica en seguida. De nuevo, gracias!!!!


    David V.
    Solo una cosa: no me sale el enlace en el formato que le he puesto. en el código de la pág., he probado todas las formas (<a href..., <a.enlace href..., <enlace href...), pero ninguna va. ¿Cómo he de escribirlo, Yaneth?

    En la hoja de estilos .CSS he escrito exactamente lo mismo que tú, y he eliminado las líneas #enlace...

    Gracias.
    para ayudarte debes mostrarme nuevamente los cambios que realizaste
    siempre que pidas ayuda, muestra los codigos completos (no solo el trozo que crees que está mal) recuerda que muchas caracteristicas se heredan

    y debes poner

    <a class="enlace"

    saludos
    Saludos Yaneth.

    He probado lo último que me indicas, <a class="enlace", pero sigue sin salirme. Te pongo el código completo:

    En el código HTML de la web,

    <p><a class="enlace"../pie-de-pagina/contacto.html">Pida información sin compromiso.</a></p>

    (¿es correcto así?)

    Y la hoja de estilos,

    * {margin:0px ; padding:0px}
    img {border: none}
    p {font-size: 0.8em ; text-align: justify}
    h1 {font-size: 1em; color:DarkGreen ; font-weight: bold ; text-decoration: none ; text-align: center ; padding: 20px 10px 15px 0px}
    h2 {font-size: 0.8em; color:DarkGreen ; font-weight: bold ; text-decoration: none ; text-align: left ; padding: 15px 10px 0px 10px}
    h3 {font-size: 0.9em; font-family: arial, Helvetica, sans-serif ; background-color:DarkSlateGray ; color:white ; font-weight: bold ; text-decoration: none ; text-align: center ; margin: 15px 0px 5px 0px}
    .centrar {text-align:center}
    body {text-align: center ; font-family: arial, Helvetica, sans-serif ; color: SeaGreen ; background-color: Beige}
    #global {width:920px ; margin: 0px auto }
    #cabecera {background-color: SeaGreen ; height:100px }
    #logotipo {width:136px ; float:left }
    #navegacion {background-color: SeaGreen ; border-top: 1px solid SeaGreen ; height:26px }
    #navegacion li {float:left ; list-style:none ; font-size: 0.8em ; font-weight: bold ; margin: 5px 15px 5px 50px}
    #contenido {background-color: white ; border: 1px solid SeaGreen ; width: 920px ; float:left}
    #contenido p {padding: 5px 15px 5px 15px}
    #imgesq {float:left ; margin:20px}
    #imgesq li {float:left ; list-style:none ; margin: 0px 10px 0px 10px}
    #imgesq p {text-align:center ; font-size: 0.7em}
    #imgdre {float:right ; margin: 15px 15px 0px 0px}
    #imgdre p {text-align:center ; font-weight:bold ; font-size: 0.7em}
    #bandera {float:center ; margin: 20px}
    #bandera li {float:center ; list-style:none}
    #bandera p {text-align:center ; font-size: 0.7em ; padding: 3px 1px 0px 1px}
    #enlace {text-align: justify ; font-weight:bold ; font-size: 0.8em ; margin: 0px 15px 0px 15px}
    #formularis {float:left ; padding: 15px 250px 15px 15px}
    #preguntes li {list-style:none ; text-align: left ; font-size: 0.8em ; margin: 3px 15px 3px 15px}
    #mapaweb1 li {text-align: justify ; font-weight:bold ; font-size: 0.7em ; margin: 0px 10px 0px 30px}
    #mapaweb2 li {text-align: justify ; font-weight:bold ; font-size: 0.7em ; margin: 0px 10px 0px 45px}
    #mapaweb3 li {text-align: justify ; font-weight:bold ; font-size: 0.7em ; margin: 0px 10px 0px 60px}
    #flash {float:center ; list-style:none}
    #menu {width: 150px ; float:left ; text-align:center ; border: 1px solid DarkSlateGray ; margin: 1px 10px 1px 1px}
    #menu li { list-style:none ; font-size: 0.8em ; margin: 5px 0px 5px 0px}
    #menu h3 {text-decoration:none}
    #pie {background-color: SeaGreen ; float:right ; width:200px}
    #pie li {list-style: none ; text-align: center ; font-size: 0.9em ; margin: 3px }
    #pieizquierda {float:left ; width:93px ; border-right: 1px solid white }
    #piederecha {float:right ; width:105px }
    a {color: white ; text-decoration: none ; display: block}
    a:link {}
    a:visited {}
    a:hover {color: LightGray ; text-decoration:none ; background-color: SeaGreen}
    a:active {}
    a.enlace {color: SeaGreen; text-decoration:none ; display: inline }
    a.enlace:link {}
    a.enlace:visited {}
    a.enlace:hover {color: SeaGreen ; text-decoration:underline ; background-color: white }
    a.enlace:active {}
    #menu a {color: DarkSlateGray; text-decoration:none ; display: block }
    #menu a:link {}
    #menu a:visited {}
    #menu a:hover {color: white ; text-decoration:none ; background-color: DarkSlateGray }
    #menu a:active {}
    #imgesq a {color: SeaGreen; text-decoration:none ; display: block }
    #imgesq a:link {}
    #imgesq a:visited {}
    #imgesq a:hover {color: SeaGreen ; text-decoration:none ; background-color: white }
    #imgesq a:active {}
    #imgdre a {color: SeaGreen; text-decoration:none ; display: block }
    #imgdre a:link {}
    #imgdre a:visited {}
    #imgdre a:hover {color: SeaGreen ; text-decoration:none ; background-color: white }
    #imgdre a:active {}
    #preguntes a {color: SeaGreen; text-decoration:none ; display: block }
    #preguntes a:link {}
    #preguntes a:visited {}
    #preguntes a:hover {color: SeaGreen ; text-decoration:underline ; background-color: white }
    #preguntes a:active {}
    #mapaweb1 a {color: SeaGreen; text-decoration:none ; display: block }
    #mapaweb1 a:link {}
    #mapaweb1 a:visited {}
    #mapaweb1 a:hover {color: SeaGreen ; text-decoration:underline ; background-color: white }
    #mapaweb1 a:active {}
    #mapaweb2 a {color: SeaGreen; text-decoration:none ; display: block }
    #mapaweb2 a:link {}
    #mapaweb2 a:visited {}
    #mapaweb2 a:hover {color: SeaGreen ; text-decoration:underline ; background-color: white }
    #mapaweb2 a:active {}
    #mapaweb3 a {color: SeaGreen; text-decoration:none ; display: block }
    #mapaweb3 a:link {}
    #mapaweb3 a:visited {}
    #mapaweb3 a:hover {color: SeaGreen ; text-decoration:underline ; background-color: white }
    #mapaweb3 a:active {}
    #bandera a {color: SeaGreen; text-decoration:none ; display: block }
    #bandera a:link {}
    #bandera a:visited {}
    #bandera a:hover {color: SeaGreen ; text-decoration:underline ; background-color: white }
    #bandera a:active {}

    Si mantengo en el código HTML de la web,

    <p><div id="enlace"><a href="../pie-de-pagina/contacto.html">Contacte con nosotros si sigue teniendo dudas.</a></div></p>

    entonces, con la hoja de estilos anterior, me aparecen los enlaces como se indica en el formato siguiente:

    a {color: white ; text-decoration: none ; display: block}
    a:link {}
    a:visited {}
    a:hover {color: LightGray ; text-decoration:none ; background-color: SeaGreen}
    a:active {}
    compañero

    muestrame todo el html tambien
    asi yo copio y pego en mi programa para ver errores

    saludos
    Ahí va el código HTML de una de las páginas donde han de aparecer enlaces "inline", que no termino de aclararme... Lo verás como toda una línea, más hacia abajo, ya que en su día lo adapté para que se viera completo el enlace y no partido en dos líneas:

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

    <html>
    <head>
    <title>Ser Cliente con Descuento de stemtech</title>
    <link rel="stylesheet" href="../estils-generals.css" type="text/css" media="all">
    <link rel="stylesheet" href="../estil-menu-desplegable.css" type="text/css" media="all">
    <script language="javascript" src="../transmenuC.txt" type="text/javascript"></script>
    <script language="javascript" src="../numero-de-menus.txt" type="text/javascript"></script>
    <meta name="author" content="Células Madre Adultas telf. +34 675 843 915 [correo eliminado]">
    <meta name="keywords" content="ventajas de ser cliente con descuento de stemtech, distribuidor independiente de stemtech, comprar productos stemtech en las mejores condiciones">
    <meta name="description" content="producto liberador de células madre adultas stemenhance: ser cliente con descuento de stemtech">
    <meta name="robots" content="all, follow">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-19810533-1']);
    _gaq.push(['_trackPageview']);

    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

    </script>

    </head>
    <body onload="init();">

    <div id="global">
    <div id="cabecera">
    <div id="logotipo">
    <img src="objectes/logo.jpg" width="920" height="100">
    </div>
    </div>
    <div id="navegacion">
    <ul><li><a href="../index.html">INICIO</a></li><li><a id="desplegable1" href="#">LA EMPRESA</a></li><li><a id="desplegable2" href="#">EL PRODUCTO</a></li><li><a href="../enlaces-de-interes/enlaces-de-interes.html">ENLACES DE INTERÉS</a></li><li><a href="../pedidos/pedidos.html">HAGA AHORA SU PEDIDO ONLINE</a></li></ul>
    </div>
    <div id="contenido">
    <div id="menu">
    <ul><h3>VENTAJAS</h3><li><a href="suscribirse.html">Suscribirse al boletín electrónico gratuito</a></li><li><a href="cliente-con-descuento.html">Ser Cliente con Descuento</a></li><li><a href="multinivel.html">El mercadeo en red o Multinivel</a></li><li><a href="herramientas.html">Herramientas para la distribución</a></li><h3>BENEFICIOS</h3><li><a href="bienestar.html">Mejorar el bienestar</a></li><li><a href="antiinflamatorio.html">Antiinflamatorio natural</a></li><li><a href="antienvejecimiento.html">Antienvejecimiento nat.</a></li><li><a href="piel.html">Reparar piel quemada</a></li><li><a href="organos.html">Reparar órganos</a></li><li><a href="lesiones.html">Lesiones físicas</a></li><li><a href="artritis.html">Mejorar la artritis</a></li><li><a href="diabetes.html">Mejorar la diabetes</a></li><li><a href="esclerosis.html">Mejorar la esclerosis</a></li><li><a href="parkinson.html">Mejorar el párkinson</a></li><li><a href="alzheimer.html">Mejorar el alzheimer</a></li><li><a href="migrana.html">Mejorar la migraña</a></li><li><a href="colesterol.html">Regular el colesterol</a></li><li><a href="rendimiento-deportivo.html">Rendimiento deportivo</a></li></ul>
    </div>
    <h1>SER CLIENTE CON DESCUENTO DE STEMTECH</h1>
    <p><b>STEMTech</b> le brinda la opción de poder comprar el producto directamente a la compañía hasta un 30% más económico por solo US$35 (25 &#8364; aproximadamente) en los países donde ya tiene abierto mercado. En los países en los que todavía no hay mercado de <b>STEMTech</b>, el precio es de solamente US$0,25 (aproximadamente 0,18 &#8364;).</p>
    <p>En su primer pedido le ofrecemos TOTALMENTE GRATIS nuestro <i>Paquete Promocional</i>, compuesto por el producto o productos que haya adquirido junto con el libro <b>Ser Cliente con Descuento</b>, con el que podrá obtener toda la información que necesita para conocer las <b>ventajas de ser Cliente con Descuento</b> y poder realizar las <b>compras de sus productos en las mejores condiciones para toda la vida</b>.</p>
    <p>Para ser <b>Cliente con descuento de STEMTech HealthSciences, Inc. en España</b>, acceda al siguiente enlace, indicando en la casilla correspondiente el número de identificación de su patrocinador (#ID: 5708913):</p>
    <p><a class="enlace"><a href="https://www.secure-signup.net/www.stemtechbiz.es/Signup.aspx?ID=www"target=&#8221;_blank">Ser Cliente con Descuento en España (Inscripción como Distribuidor).</a></p>
    <p>En el caso de que usted resida en cualquiera de los demás países donde <b>STEMTech HealthSciences, Inc.</b> tiene abierto mercado, deberá acceder al siguiente enlace, y, colocando el ratón sobre la bandera de su país, seleccionar su idioma. En las siguientes páginas solamente deberá seguir las instrucciones.</p>
    <p><a class="enlace"><a href="http://regeneracionnatural.stemtechbiz.com/"target="_blank">Ser Cliente con Descuento en todos los países (Inscripción como Distribuidor).</a></p>
    <p>Si su país no se encuentra en la lista, haga clic en "Virtual Markets".</p>
    <p><a class="enlace"><a href="../pie-de-pagina/contacto.html">Contacte con nosotros si sigue teniendo dudas.</a></p>
    </div>
    <div id="pie">
    <div id="pieizquierda">
    <ul>
    <li><a href="../pie-de-pagina/mapa-web.html">Mapa web</a></li>
    </ul>
    </div>
    <div id="piederecha">
    <ul>
    <li><a href="../pie-de-pagina/contacto.html">Contacto</a></li>
    </ul>
    </div>
    </div>
    <script language="javascript" src="../definir-menus.txt" type="text/javascript"></script>
    </body>
    </html>
    Muchíiiiiiiiiiiiiisimas gracias Yaneth!!!!!!! Ahora me ha salido!! Y qué fácil resulta al final!

    Aprovecho para recordar que ese apunte no está en el curso paso a paso de HTML-Kit, únicamente explica lo que yo tenía. Sería interesante e importante añadirlo al curso.

    De nuevo, gracias.

    Saludos a todos.


    David V.