0

¿Cómo puedo quitar o bien juntar más esa separación que hay entre los botones y entre los dos enlaces?

Esta separación que marco con flechas (he aumentado la imagen para que se vea mejor).

separación que deseo eliminar

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Textos</title>
	<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
	
      <style type="text/css">
        a{
              display:block;
              text-decoration:none;
              }
      	body {  
      	      background-color: white;
      	      background-image: url(fondo.jpg);
      	      background-size: cover;
      	      background-repeat: no-repeat;  
      	      background-attachment: fixed; 
      	    }
        .texto1{
          font-size:70px; 
          text-shadow: 2px 2px  10px black, 0 0 0 white, 0 0 0.2em grey; color: black;
          margin-top: 0px;
          margin-bottom: 0px;
            }
        .texto2{
          font-size:50px; 
          text-shadow: 2px 2px  10px black, 0 0 0 white, 0 0 0.2em grey; color: Red;
          margin-top: 0px;
          margin-bottom: 0px;
            }

		table, tr, td {
			margin: 0; 
			padding: 0; 
			border: 0
			border-collapse: collapse; 
			} 

    </style>
  
	</head>
<body>

<!-- <div> -->
  <div >
          <p>
          <p>

          <div>
            <a href="#info1" class="inf"><button type="button" style='width:150px; text-align: left'>Libro Primero</button></a>
          </div>
          <div id="info1" class="oculto">
            <p class="texto1">Texto 1</p>
            <p class="texto2">Texto 1</p>
          </div>
          
          <div>
            <a href="#info2" class="inf"><button type="button" style='width:150px; text-align: left'>Libro Segundo</button></a>
          </div>
          <div id="info2" class="oculto">
                <table cellspacing=0 cellpadding=0 ">
                           <tr>
                               <td ><span style="font: 15pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;»</span></td>
                               <td ><a href="http://www.prueba.com">Tema 1</a></td>
                           <tr> 
                          <tr>
                             <td ><span style="font: 15pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;»</span></td>
                             <td ><a href="http://www.prueba.com">Tema 2</a></td>
                          </tr>
                </table>
          </div>
         
          <div>
             <a href="#info3" class="inf"><button type="button" style='width:150px; text-align: left'>Libro Trecero</button></a>
          </div>
          <div id="info3" class="oculto">
            <p class="texto1">Texto 3</p>
          </div>
          
          <div>
          	<a href="#info4" class="inf"><button type="button" style='width:150px; text-align: left'>Libro Cuarto</button></a>
          </div>
          <div id="info4" class="oculto">
            <p class="texto2">Texto 4</p>
          </div>

          <div>
          	<a href="#info5" class="inf"><button type="button" style='width:150px; text-align: left'>Libro Quinto</button></a>
          </div>
          <div id="info5" class="oculto">
            <p class="texto2">Texto 5</p>
          </div>
  </div>
<!-- </div> -->



<script type="text/javascript">
	jQuery(document).ready(function(){
  $(".oculto").hide();              
    $(".inf").click(function(){
          var nodo = $(this).attr("href");  
 
          if ($(nodo).is(":visible")){
               $(nodo).hide();
               return false;
          }else{
        $(".oculto").hide("slow");                             
        $(nodo).fadeToggle("fast");
        return false;
          }
    });
}); 
</script>

</body>
</html>

9
  • 1
    ¿Podrías mostrar también los estilos que tienes actualmente? Ahora mismo no parece que haya un gran espacio entre los textos en el ejemplo que has proporcionado. el 10 mar. 2018 a las 11:32
  • Hola Francisco, te he puesto todos los estilos que tengo en el primer post, hay partes en los que pongo un texto con esos estilos, te lo pongo igualmente aunque no este puesto en esos enlaces que intento juntar.
    – SoCu
    el 10 mar. 2018 a las 12:08
  • 1
    Si utilizas Cntrl+M puedes agregar el HTML y CSS para que se puedan visualizar juntos en la página como un conjunto (como si los ejecutaras desde tu navegador). Te recomiendo editar la pregunta para que se vea mucho más claro tu problema. Gracias :) el 10 mar. 2018 a las 12:12
  • 1
    Sí, perdona. Lo he estado mirando antes buscando alguna solución pero me he tenido que ir. Por lo que veo tu td agrega un espacio por arriba y por abajo y estoy intentando saber por que aunque sospecho que es por la fuente que le pones al >>. Veo que en tu imagen el espacio es más pronunciado que en lo que se muestra en el ejemplo del snippet. Entiendo que será por que lo has aumentado y no porque haya otros estilos diferentes, ¿verdad? el 10 mar. 2018 a las 16:20
  • 1
    Te estoy redactando una respuesta con una posible solución. Dame 5 minutos para terminar de redactarla. el 10 mar. 2018 a las 16:54

1 respuesta 1

2

Como el problema parece que es la fuente que le has asociado al "icono" >> te sugiero utilizar la librería Font Awesome la cual te proporciona iconos que se tratan como si fueran texto (puedes agrandarlos, cambiarles el color, ponerlos en negrita, etc).

En este caso, he utilizado el icono siguiente:

<i class="fa fa-angle-double-right" aria-hidden="true"></i>

Por lo tanto, el icono ya lo tienes hecho, simplemente lo tendrás que ajustar al tamaño en el que quieras mostrarlo y... voilá!

Tu ejemplo modificado:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Textos</title>
	<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
	<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
      <style type="text/css">
        a{
              display:block;
              text-decoration:none;
              }
      	body {  
      	      background-color: white;
      	      background-image: url(fondo.jpg);
      	      background-size: cover;
      	      background-repeat: no-repeat;  
      	      background-attachment: fixed; 
      	    }
        .texto1{
          font-size:70px; 
          text-shadow: 2px 2px  10px black, 0 0 0 white, 0 0 0.2em grey; color: black;
          margin-top: 0px;
          margin-bottom: 0px;
            }
        .texto2{
          font-size:50px; 
          text-shadow: 2px 2px  10px black, 0 0 0 white, 0 0 0.2em grey; color: Red;
          margin-top: 0px;
          margin-bottom: 0px;
            }

		table, tr, td {
			margin: 0; 
			padding: 0; 
			border: 0;
			border-collapse: collapse; 
			} 

    </style>
  
	</head>
<body>

<!-- <div> -->
  <div >
          <p>
          <p>

          <div>
            <a href="#info1" class="inf"><button type="button" style='width:150px; text-align: left'>Libro Primero</button></a>
          </div>
          <div id="info1" class="oculto">
            <p class="texto1">Texto 1</p>
            <p class="texto2">Texto 1</p>
          </div>
          
          <div>
            <a href="#info2" class="inf"><button type="button" style='width:150px; text-align: left'>Libro Segundo</button></a>
          </div>
          <div id="info2" class="oculto">
                <table cellspacing=0 cellpadding=0>
                           <tr>
                               <td><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
                               <td ><a href="http://www.prueba.com">Tema 1</a></td>
                           <tr> 
                          <tr>
                             <td ><span style="font: 10pt comic sans ms; color: blue">&nbsp;&nbsp;&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
                             <td ><a href="http://www.prueba.com">Tema 2</a></td>
                          </tr>
                </table>
          </div>
         
          <div>
             <a href="#info3" class="inf"><button type="button" style='width:150px; text-align: left'>Libro Trecero</button></a>
          </div>
          <div id="info3" class="oculto">
            <p class="texto1">Texto 3</p>
          </div>
          
          <div>
          	<a href="#info4" class="inf"><button type="button" style='width:150px; text-align: left'>Libro Cuarto</button></a>
          </div>
          <div id="info4" class="oculto">
            <p class="texto2">Texto 4</p>
          </div>

          <div>
          	<a href="#info5" class="inf"><button type="button" style='width:150px; text-align: left'>Libro Quinto</button></a>
          </div>
          <div id="info5" class="oculto">
            <p class="texto2">Texto 5</p>
          </div>
  </div>
<!-- </div> -->



<script type="text/javascript">
	jQuery(document).ready(function(){
  $(".oculto").hide();              
    $(".inf").click(function(){
          var nodo = $(this).attr("href");  
 
          if ($(nodo).is(":visible")){
               $(nodo).hide();
               return false;
          }else{
        $(".oculto").hide("slow");                             
        $(nodo).fadeToggle("fast");
        return false;
          }
    });
}); 
</script>

</body>
</html>


NOTA: He visto que tienes dos errores en tu HTML y CSS:

1) Te falta un ; al final de border: 0 cuando se lo aplicas a los elementos table, tr y td.

2) Tienes un " sobrante en la línea en la que defines tu tabla, justo aquí cellpadding=0 ", deberías quitarlo.

NOTA 2: Nunca (o casi nunca) uses estilos inline, debido a que luego son muy difíciles de mantener. Si quieres más información, puedes leer sobre esta auto pregunta-respuesta mía que realicé sobre la especificidad en CSS.

6
  • De nuevo muchas gracias Francisco, esos errores son cometidos por las prisas que no son buenas, jeje, estaba probando con diferentes soluciones, y se quedaron por el camino, lo que dices de utilizar estilos inline te refieres al jquery-2.1.4.js lo puse para que funcionase el código, tengo guardado el archivo, porque intento que las paginas se utilicen en local, por eso te iba a preguntar si el archivo all.js lo podía utilizar también en local,
    – SoCu
    el 10 mar. 2018 a las 17:25
  • 1
    @SoCu No, con estilos inline me refiero a indicar en los elementos el atributo style. Puedes ver un ejemplo de porque da problemas en el ejemplo Ejemplo de estilos inline sobre un ID de la respuesta que he referenciado. Por otro lado, no debes de confundir el CSS con los scripts de Javascript. Cuando hablamos de estilos nos referimos al CSS, y por lo tanto, cuando nos referimos a estilos inline, solo hace referencia a los elementos a los que les aplicas el atributo style. Y por último, todos los ficheros .js los puedes descargar y referenciarlos desde tu ruta local/servidor. el 10 mar. 2018 a las 17:32
  • 1
    @SoCu De esta manera, aunque hubiera un problema con la página original en la que se encuentran dichos ficheros, tu página seguiría funcionando ya que tendrías los recursos a tu alcance. el 10 mar. 2018 a las 17:33
  • Cracias, estaba biendo el enlace que has puesto a tu otro post sobre #parrafo{} y .parrafo{}
    – SoCu
    el 10 mar. 2018 a las 17:36
  • 1
    @SoCu Son IDs y clases, respectivamente. Es bueno tener clara esa diferencia. De hecho, es mucho mejor utilizar clases que los valores de las etiquetas (p.ej: table, tr, td, span, etc...) si vas a usar un estilo en más de un elemento debido a que si utilizas los nombres de las etiquetas, si quisieras por ejemplo tener dos tablas con estilos diferentes, adoptarían los mismos estilos ya que los estarías aplicando a todas las etiquetas que fueran iguales. Si tienes cualquier duda, no dudes en preguntar o, en caso de que sea un nuevo problema, realizar una nueva pregunta :) el 10 mar. 2018 a las 17:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.