« anterior próximo »
Páginas: [1]

Autor Tema: Como alinear texto de celdas menú desplegable html alineación de items nowrap  (Leído 2673 veces)

SoCu

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 36
    • Ver Perfil
Como alinear texto de celdas menú desplegable html alineación de items nowrap
« en: 04 de Agosto 2018, 19:37 »
Hola, agradeciera vuestra ayuda para poder alinear el texto de las celdas, que no soy capaz de poner el código correcto.

Veréis, he creado unos botones que al pulsarlos muestran unas tablas, donde hay algunas filas que contienen celdas que también están ocultas, y al mostrarse esa celdas, el texto que tiene no sale alineado.

Por ejemplo:

   Tema 1 - Jujubes marzipan chocolate cake wafer biscuit.
   
   Cap. 1/Sec. 1 - Jujubes marzipan chocolate cake wafer biscuit.
   Cap. 1/Sec. 2 - Jujubes marzipan chocolate cake
very good biscuit. Biscuit powder danish croissant cupcake macaroon.

la parte de very good biscuit queda desalineada.

He puesto el codigo en una de esas paginas que muestra el resultado, supongo que no esta bien puesto, pero el resultado si se puede ver

https://jsfiddle.net/SoCu/kj4t6520/1/

El código es:

Código: [Seleccionar]
<!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">


    .oculto1,.oculto2,.oculto3{
            margin-left: 1%;
            display: none;
        }
        .info2_submenu1 span{
            padding-left: 15px;
        }
        .blue-text {
          font: 10pt comic sans ms;
          color: blue;
        }
        td {
          vertical-align: top;
        }
    </style>

</head>
<body>

<div>
    <p>
    <p>
    <div>
        <a><button type="button" style='width:257px; text-align: left; font: 11pt arial;' onclick="window.open('pagina.htm','_self');">
           <span><i class="fa fa-angle-double-right blue-text" aria-hidden="true"></i> Boton 1</span></button></a>
    </div>
         
    <div class="info1">
        <a href="#info1"><button type="button" style='width:257px; text-align: left; font: 11pt arial'>Libro 1</button></a>
    </div>
        <div id="<info1></info1>" class="oculto1">
        <table>
            <tr>
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">INDICE por artículos</a></td>
        </tr>
            <tr>
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">Cap. 1 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></td>
            </tr>
            <tr>
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td><a href="pagina.htm">Cap. 2 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></td>
            </tr>
        </table>
        </div>
         

    <div class="info2">
        <a href="#info2"><button type="button" style='width:257px; text-align: left; font: 11pt arial'>Libro 2</button></a>
    </div>
        <div id="info2" class="oculto2">
        <table>
            <tr>
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">INDICE</a></td>
            </tr>
            <tr>
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">Sec. 1 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></td>
            </tr>
            <tr>
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">Sec. 2 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon. </a></td>
            </tr>

            <tr>
            <td><span class="blue-text"><i class="fa fa-file" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="#" class="info2_ET1">Tema 1 - Jujubes marzipan chocolate cake wafer biscuit.</a></td>
            </tr>
<tr hidden class="info2_submenu1">
<td></td>
    <td>
    <span style='font: 11pt arial'><a href="pagina.htm"><i style="color: blue" class="fa fa-angle-double-right" aria-hidden="true"></i>Cap. 1/Sec. 1 - Jujubes marzipan chocolate cake wafer biscuit.</a></span><br>
    <span style='font: 11pt arial'><a href="pagina.htm"><i style="color: blue" class="fa fa-angle-double-right" aria-hidden="true"></i>Cap. 1/Sec. 2 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></span>
    </td>
</tr>
        </table>
        </div>
         

    <div class="info3">
        <a href="#info3"><button type="button" style='width:257px; text-align: left; font: 11pt arial'>Libro 3</button></a>
    </div>
        <div id="info3" class="oculto3">
        <table>
            <tr>
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">INDICE</a></td>
            </tr>
            <tr>
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">Sec. 1 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></td>
            </tr>
            <tr>
            <td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="pagina.htm">Sec. 2 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon. </a></td>
            </tr>
        </table>
        </div>

    <div>
        <a><button type="button" style='width:257px; text-align: left; font: 11pt arial;' onclick="window.open('pagina.htm','_self');">
           <span><i class="fa fa-angle-double-right blue-text" aria-hidden="true"></i> INDICE</span></button></a>
    </div>
   
</div>

<script type="text/javascript">
 jQuery(document).ready(function(){
            $('.info1').on('click',function(){
                $('.oculto1').slideToggle('fast');
                $('.oculto2').slideUp('fast');
                $('.oculto3').slideUp('fast');
                $('.info2_submenu1').slideUp('fast');

            });
            $('.info2').on('click',function(){
                $('.oculto2').slideToggle('fast');
                $('.oculto1').slideUp('fast');
                $('.oculto3').slideUp('fast');
                $('.info2_submenu1').slideUp('fast');

            });
            $('.info3').on('click',function(){
                $('.oculto3').slideToggle('fast');
                $('.oculto2').slideUp('fast');
                $('.oculto1').slideUp('fast');
                $('.info2_submenu1').slideUp('fast');
            });
            $('.info2_ET1').on('click',function(){
                $('.info2_submenu1').slideToggle('fast');
            });
        });
 </script>
 
 </body>
</html>


Si desplegamos el botón "Libro 2" vemos que los textos que muestra están alineados respecto a la marca >>
Pero si desplegamos las opción "Tema 1 - xxxxx.....", vemos que los textos no se encuentran alineados con la marca >>



Me podéis decir que código tendria que poner por que al desplegar las celdas del "Tema 1 - xxxxx" aparezca alineado como el resto.


Gracias.


« Última modificación: 26 de Enero 2019, 21:58 por Ogramar »
En línea

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Re:Como alinear texto de celdas menú desplegable html alineación de items nowrap
« Respuesta #1 en: 26 de Enero 2019, 22:00 »
Buenas, para quien tenga interés en esto que se comentaba, he hecho pruebas en varios navegadores (Firefox, Chrome, Explorer) y en todos he obtenido el mismo resultado: el texto aparece correctamente alineado, excepto cuando se reduce el tamaño de la ventana a un tamaño tal que la línea no cabe en una sola línea, y al generarse el salto de línea se produce la desalineación. En el caso de la web JSFiddle es precisamente esto lo que ocurre: los resultados se muestran sobre un frame de dimensiones muy reducidas, y debido a ello el contenido no puede visualizarse en una sola línea, generándose el salto de línea y la desalineación, que en caso de usarse un frame de mayores dimensiones no se produciría. En el curso CSS (https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203) se comenta una opción que puede ser útil en <<CSS text-align, color, text-decoration, text-indent, white-space nowrap, pre, pre-wrap, pre-line (CU01040D)>>

En el código habría que añadir la opción nowrap así:

Código: [Seleccionar]
    .oculto1,.oculto2,.oculto3{
      white-space:nowrap;
            margin-left: 1%;
            display: none;
        }

Esto evita que al no haber espacio disponible la línea se divida en dos, es decir, la línea se mantiene siempre como una única línea (alineada), haya espacio suficiente o no.

Salu2
En línea

SoCu

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 36
    • Ver Perfil
Re:Como alinear texto de celdas menú desplegable html alineación de items nowrap
« Respuesta #2 en: 27 de Enero 2019, 09:09 »
Gracias Ogramar, lo que pasa que para leer el texto en pantallas pequeñas creo que es mejor no tener el texto en una solo linea.
En línea

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Re:Como alinear texto de celdas menú desplegable html alineación de items nowrap
« Respuesta #3 en: 27 de Enero 2019, 16:17 »
Buenas, aunque no creo que un diseñador le diera el visto bueno también creo que se puede resolver forzando el texto a encuadrarse en celdas de tabla que impiden que se desalinee.

A mí me aparece alineado poniendo este fragmento de código en sustitución del anterior:

Código: [Seleccionar]
            <tr>
            <td><span class="blue-text"><i class="fa fa-file" aria-hidden="true"></i></span></td>
            <td style='font: 11pt arial'><a href="#" class="info2_ET1">Tema 1 - Jujubes marzipan chocolate cake wafer biscuit.</a></td>
            </tr>
<tr >
<tr hidden class="info2_submenu1">
<td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
    <td>
    <a href="pagina.htm">Cap. 1/Sec. 1 - Jujubes marzipan chocolate cake wafer biscuit.</a><br>
</tr>
<tr hidden class="info2_submenu1">
<td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
    <td>
    <a href="pagina.htm">Cap. 1/Sec. 2 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a><br>
</tr>
    </td>
</tr>
        </table>



Salu2
En línea
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".