Remove separation between cells

Question

Remove separation between cells

Navigation

#1 by (2 votes)

0

How can I remove or close the separation between the buttons and between the two links?

This separation I frame with arrows (I have enlarged the image to make it look better).

<!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>

html5 css

asked by SoCu 10.03.2018 в 12:30

source

1 answer

How can I enter the data of a query from a database in mysql in a jump menu? Save file to the FPDF desktop

score 2 · Accepted Answer

As the problem seems to be the source that you have associated with the "icon" >> I suggest you use the library Font Awesome which gives you icons that are treated as if they were text (you can enlarge them, change their color, make them bold, etc).

In this case, I used the following icon:

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

Therefore, the icon you already have it done, you simply have to adjust it to the size in which you want to show it and ... voila!

Your modified example:

<!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>

NOTE: I've seen that you have two errors in your HTML and CSS:

1) You are missing a ; at the end of border: 0 when you apply it to the table, tr and td elements.

2) You have a " left over in the line where you define your table, right here cellpadding=0 " , you should remove it.

NOTE 2 : Never (or almost never) use inline styles , because then they are very difficult to maintain. If you want more information, you can read about this auto question-answer of mine that I made about the specificity in CSS.