User Tag List

Resultados 1 al 10 de 10

Tema: Alinear elementos de diferentes tamaños

  1. #1

    Fecha de ingreso
    Sep 2005
    Mensajes
    15,202
    Mencionado
    247 Post(s)
    Tagged
    1 Tema(s)
    Agradecer Thanks Given 
    675
    Agradecer Thanks Received 
    1,847
    Thanked in
    Agradecido 1,264 veces en [ARG:2 UNDEFINED] posts

    Alinear elementos de diferentes tamaños

    Qué raro, no hay HTML como código para elegir en el desplegable de nuevos mensajes...

    Bueno, no me quiero enrollar. Lo mismo es una duda tonta, o lo mismo es imposible de verlo sin el proyecto. El caso es que tengo esta cabecera.
    Nombre:  tempHeader.png
Visitas: 264
Tamaño: 6.1 KB

    Y el código que la genera es este:
    Código:
    @model MiModelo
    
    <div class="row">
        <div class="col-lg-8">
            <a class="fa fa-caret-left" asp-controller="PController" asp-action="Index"> @ViewBag.localize["ButtonBack"]</a>
            <b>|</b> @Model.docNum <b>|</b> @Model.status <b>|</b> @Model.cardName
        </div>
        <div class="col-lg-3">
            <b class="col-lg-1">|</b>
            <span class="well well-sm col-lg-4" style="text-align: center; color: black; display: inline-block">@Model.fechaIniPlan.ToString("dd/MM/yyyy")</span>
            <b class="fa fa-long-arrow-right text-center col-lg-2"></b>
            <span class="well well-sm col-lg-4" style="text-align: center; color: black; display: inline-block">@Model.fechaFinPlan.ToString("dd/MM/yyyy")</span>
            <b class="col-lg-1">|</b>
        </div>
        
        
        <a class="btn btn-success col-lg-1" style="vertical-align:middle" asp-action="StartOp" asp-route-id="@Model.Id" asp-route-docEntry="@Model.docEntry">@ViewBag.localize["ButtonStart"]</a>
    
    </div>
    
    <div class="row">
        <h2 class="pull-left" style="display: inline; margin-left: 15px">@Model.Name</h2>
        @*<h2 class="pull-right" style="display: inline; margin-right: 15px">11:24:37</h2>*@
    </div>
    El código es HTML, bueno, es Razor, que viene a ser una mezcla de HTML y parte de C# que genera HTML. También uso Bootstrap con un "tema visual" Startmin para que se vea todo más "bonito".
    Bueno, el caso es que son dos filas. En la primera, la pare de la derecha (el div class="col-lg-3") necesito que los separadores y la flecha se vean centrados en altura, y no sé cómo hacerlo. Cuando uso el examinador de Chrome, la flecha por ejemplo, me dice que la altura de la fila es la altura del carácter, no la altura de los recuadros de las flechas o del botón, y no he conseguido que me lo alinee bien.

    A ver si alguno de vosotros sabéis cómo hacerlo. Gracias.
    PROYECTOS REALIZADOS: FrikiMusic, Motor Scroll Tileado v3.2, Venturer2X (GP2X/WIZ), Echo, Screen Break Time
    PROYECTOS EN MARCHA (algunos): Bennu GP2X: 95% (necesito ayuda) ¡Antes de Halloween!: 92% SpaceH2H: 8%

  2. #2

    Fecha de ingreso
    Nov 2005
    Ubicación
    Excartagenero
    Mensajes
    23,651
    Mencionado
    276 Post(s)
    Tagged
    0 Tema(s)
    Agradecer Thanks Given 
    5,994
    Agradecer Thanks Received 
    5,821
    Thanked in
    Agradecido 3,794 veces en [ARG:2 UNDEFINED] posts
    Entradas de blog
    1
    Si estas usando Bootstrap, tiene unas clases para alinear en vertical (y para de todo) asi evitas esos style=

    Por ejemplo:
    Código:
    style="text-align: center; color: black; display: inline-block"
    Se debería convertir en estas clases: align-middle text-dark d-inline-block
    Que las clases de BS están mas retocadas que poner el estilo asi directamente.

    Con el tema alineación te recomendaría que mires los ejemplos en la documentación de BS, que a mi me salvan la vida constantemente.

    https://getbootstrap.com/docs/5.3/la...olumns-gutters

    A veces la alineación funciona de una manera u otra según el modelo de cajas... quizas en tu caso con el align-middle ya te valga. A veces hace falta agregarle margin-auto (que no estoy seguro que sea asi tal cual), en fin, que yo muchas veces entre la documentacion, los ejemplos, el debuger/consola del navegador y probando voy solucionando estas cosas.

  3. El siguiente usuario agradece a josepzin este mensaje:

    Drumpi (17/04/2023)

  4. #3

    Fecha de ingreso
    Mar 2007
    Ubicación
    Barna
    Mensajes
    10,341
    Mencionado
    93 Post(s)
    Tagged
    0 Tema(s)
    Agradecer Thanks Given 
    368
    Agradecer Thanks Received 
    1,791
    Thanked in
    Agradecido 944 veces en [ARG:2 UNDEFINED] posts
    Justo lo que dice josepzin, usa las clases de bootstrap

    Simplemente añado que algunas de esas clases no se aplican a los elementos en sí, sino al contenedor donde estén los elementos

  5. El siguiente usuario agradece a juanvvc este mensaje:

    Drumpi (17/04/2023)

  6. #4

    Fecha de ingreso
    Nov 2005
    Ubicación
    Excartagenero
    Mensajes
    23,651
    Mencionado
    276 Post(s)
    Tagged
    0 Tema(s)
    Agradecer Thanks Given 
    5,994
    Agradecer Thanks Received 
    5,821
    Thanked in
    Agradecido 3,794 veces en [ARG:2 UNDEFINED] posts
    Entradas de blog
    1
    Otra cosa, no uses esto:

    Código:
    <b class="col-lg-1">|</b>
    Aunque yo supongo que funciona igual, el B es para poner negrita, bold, que ahora mismo es < STRONG >

    Lo correcto sería esto: <div class="col-lg-1">|</div>
    De hecho en los que usas SPAN también deberías usar DIV

    Los SPAN son para (según tengo entendido) usar adentro de un parrafo de texto o cosas puntuales dentro de un DIV.

    -----Actualizado-----

    En Boostrap tiene muchisimas cosas para evitar tener que usar los styles="... de hecho, se puede conseguir hacer casi todo usando solo un archivo de estilos muy pequeñito para las cosas puntuales que no se pueden hacer con BS.

  7. El siguiente usuario agradece a josepzin este mensaje:

    Drumpi (17/04/2023)

  8. #5

    Fecha de ingreso
    Sep 2009
    Ubicación
    Donde quiero
    Mensajes
    6,160
    Mencionado
    175 Post(s)
    Tagged
    0 Tema(s)
    Agradecer Thanks Given 
    1,848
    Agradecer Thanks Received 
    2,378
    Thanked in
    Agradecido 1,309 veces en [ARG:2 UNDEFINED] posts
    Cita Iniciado por josepzin Ver mensaje
    Otra cosa, no uses esto:

    Código:
    <b class="col-lg-1">|</b>
    Aunque yo supongo que funciona igual, el B es para poner negrita, bold, que ahora mismo es < STRONG >

    Lo correcto sería esto: <div class="col-lg-1">|</div>
    De hecho en los que usas SPAN también deberías usar DIV

    Los SPAN son para (según tengo entendido) usar adentro de un parrafo de texto o cosas puntuales dentro de un DIV.

    -----Actualizado-----

    En Boostrap tiene muchisimas cosas para evitar tener que usar los styles="... de hecho, se puede conseguir hacer casi todo usando solo un archivo de estilos muy pequeñito para las cosas puntuales que no se pueden hacer con BS.
    Sastamente, yo lo ando usando ahora con Angular y cuando le he pillado el rollo, no he vuelto a usar un styles="" hulio, como mucho meto algún css adicional para meter alguna animación, imagen de fondo o hover guapos, en 4 veces que consultes la documentación estás hecho un pro.

    Con "col" le indicas que es una columna, el número es el ancho de columnas que ocupa el elemento (en un máximo de 12) en un grid, y los modificadores de en medio son breakpoints para hacer el responsive dependiendo del tamaño de la ventana, basados en min-width (sm es small, md medio, lg grande etc...). Hay que usar <div para manejar bien el flexbox.

    Hoy justo acabé la primera parte de la integración del backend del proyecto que tenemos entre manos en las prácticas, y al revisarme el código el instructor, me ha felicitado por hacer que mis vistas en Bootstrap no parezcan Bootstrap , he tirado de muchas cosillas nuevas de BS5, como el menú offcanvas que él no había visto, y le he metido estilos por detrás para quitar el tufillo. Ha funcionado, mis dos compis becarios se han pasado al lado oscuro.

  9. El siguiente usuario agradece a selecter25 este mensaje:

    josepzin (17/04/2023)

  10. #6

    Fecha de ingreso
    Sep 2005
    Mensajes
    15,202
    Mencionado
    247 Post(s)
    Tagged
    1 Tema(s)
    Agradecer Thanks Given 
    675
    Agradecer Thanks Received 
    1,847
    Thanked in
    Agradecido 1,264 veces en [ARG:2 UNDEFINED] posts
    Gracias por los consejos y los enlaces, los iré probando, especialmente la documentación.
    Lo de usar style más que nada es por no ponerme a leer, entre otras cosas, todos los estilos que hay en los CSS que hay en el proyecto, que son unos cuantos, bastante larguitos, y tediosos. Revisaré esos class, a ver si los tengo y se pueden aplicar.

    En cuanto a usar </b> y </span>, sí, ya probé a usar </div>, pero eso provocaba que me escribiera los elementos uno debajo del otro, y necesitaba que estuvieran en la misma línea. Después de mucho buscar, son las soluciones que encontré.

    -----Actualizado-----

    Cita Iniciado por selecter25 Ver mensaje
    Sastamente, yo lo ando usando ahora con Angular y cuando le he pillado el rollo, no he vuelto a usar un styles="" hulio, como mucho meto algún css adicional para meter alguna animación, imagen de fondo o hover guapos, en 4 veces que consultes la documentación estás hecho un pro.

    Con "col" le indicas que es una columna, el número es el ancho de columnas que ocupa el elemento (en un máximo de 12) en un grid, y los modificadores de en medio son breakpoints para hacer el responsive dependiendo del tamaño de la ventana, basados en min-width (sm es small, md medio, lg grande etc...). Hay que usar <div para manejar bien el flexbox.

    Hoy justo acabé la primera parte de la integración del backend del proyecto que tenemos entre manos en las prácticas, y al revisarme el código el instructor, me ha felicitado por hacer que mis vistas en Bootstrap no parezcan Bootstrap , he tirado de muchas cosillas nuevas de BS5, como el menú offcanvas que él no había visto, y le he metido estilos por detrás para quitar el tufillo. Ha funcionado, mis dos compis becarios se han pasado al lado oscuro.
    Ya, pero es lo que digo, aún usando col-* se me ponen los elementos uno encima del otro, y no en la misma línea, ignoro la razón. Ya me he estado peleando con ellos, y los he entendido... salvo la parte de usar *-sm-*, *-lg-* y demás modificadores de tamaño. A ver, sé que eso es por la resolución de la ventana, pero ¿no hay un modificador global para todos los tamaños, como un valor por defecto? Me obliga a usar siempre un indicador de tamaño.

    Una de las cosas que me faltan es documentación de BS, aparte de un curso con ejercicios, de JS, que pueda ir haciendo en los ratos que el ordenador esté compilando, en lugar de estar escribiendo en el foro... ¡oh, wait...!


    De hecho, para las barras verticales ni siquiera debería estar usando col-*, deberian ocupar el ancho del propio caracter/cuadro de texto/botón, pero si no lo pongo, me empieza a dejar espacios delante o detrás, a escribirse en diferentes líneas y cosas así :S.
    PROYECTOS REALIZADOS: FrikiMusic, Motor Scroll Tileado v3.2, Venturer2X (GP2X/WIZ), Echo, Screen Break Time
    PROYECTOS EN MARCHA (algunos): Bennu GP2X: 95% (necesito ayuda) ¡Antes de Halloween!: 92% SpaceH2H: 8%

  11. #7

    Fecha de ingreso
    Nov 2005
    Ubicación
    Excartagenero
    Mensajes
    23,651
    Mencionado
    276 Post(s)
    Tagged
    0 Tema(s)
    Agradecer Thanks Given 
    5,994
    Agradecer Thanks Received 
    5,821
    Thanked in
    Agradecido 3,794 veces en [ARG:2 UNDEFINED] posts
    Entradas de blog
    1
    Ahhh eso puede ser porque que en alguna parte del CSS "heredado" tienes definido div { display: block}, asi que todos los DIVs los toma como bloques y por eso los pasa para abajo. Eso es un problema.

    -----Actualizado-----

    Si usas el debugger (F12) del navegador puedes ir mirando los estilos y buscar el estilo que hace ese BLOCK, el problema es que si lo quitas seguramente hay lugares en que hace falta que esté para funcionar bien.

    -----Actualizado-----

    Te pones sobre el elemento, boton derecho > inspeccionar y te abre la consola con el HTML y CSS

  12. #8

    Fecha de ingreso
    Mar 2007
    Ubicación
    Barna
    Mensajes
    10,341
    Mencionado
    93 Post(s)
    Tagged
    0 Tema(s)
    Agradecer Thanks Given 
    368
    Agradecer Thanks Received 
    1,791
    Thanked in
    Agradecido 944 veces en [ARG:2 UNDEFINED] posts
    O más probablemente, porque no has definido el contenedor como clase container: https://getbootstrap.com/docs/5.0/layout/containers/

    -----Actualizado-----

    Ah, y que col-lg-3 y todos los demás es un tipo de col que solo aplica en pantallas grandes, así que tienes que definirlos también como col para el resto de pantallas: https://getbootstrap.com/docs/5.0/layout/grid/

    "col col-lg-3"
    "Todo es absolutamente falso, salvo alguna cosa"

  13. #9

    Fecha de ingreso
    Sep 2005
    Mensajes
    15,202
    Mencionado
    247 Post(s)
    Tagged
    1 Tema(s)
    Agradecer Thanks Given 
    675
    Agradecer Thanks Received 
    1,847
    Thanked in
    Agradecido 1,264 veces en [ARG:2 UNDEFINED] posts
    Estoy viendo que div está definido con un display: block;
    Normalmente, cada "bloque" indica en qué fichero están definidos esos atributos (por ejemplo, bootstrap.min.css:5), pero este bloque muestra las palabras "user agent stylesheet". No sé qué quiere decir, pero por lo visto, está definido así.

    Respecto a la alineación, hasta ahora, he podido comprobar que, si a la flecha le pongo, dentro de style un padding de 10px, entonces sí que se alinea. Ni usando align-middle ni margin-auto, tanto como class como style, han funcionado. Lo digo por si os da una pista.
    PROYECTOS REALIZADOS: FrikiMusic, Motor Scroll Tileado v3.2, Venturer2X (GP2X/WIZ), Echo, Screen Break Time
    PROYECTOS EN MARCHA (algunos): Bennu GP2X: 95% (necesito ayuda) ¡Antes de Halloween!: 92% SpaceH2H: 8%

  14. #10

    Fecha de ingreso
    Mar 2007
    Ubicación
    Barna
    Mensajes
    10,341
    Mencionado
    93 Post(s)
    Tagged
    0 Tema(s)
    Agradecer Thanks Given 
    368
    Agradecer Thanks Received 
    1,791
    Thanked in
    Agradecido 944 veces en [ARG:2 UNDEFINED] posts
    Sí, div suele ser es un block por defecto en los navegadores habituales

    Por eso tienes que usar las clases container y col adecuadas, para que le quiten el block

    Sigo pensando que en tu caso te falta poner container al contenedor y col al div

    Margin-auto es para alineado horizontal y align-middle si recuerdo bien para el vertical. Pero no van a funcionar como intuyes, seguramente: son atributos de contenedores. Por eso se lo tienes que poner al contenedor de tu texto, no al texto en sí.

Etiquetas para este tema

Permisos de publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •