Regresar a la página ComoCrearTuWeb.com
Resultados 1 al 7 de 7

Tema: Problema para centrar texto dentro de una capa

  1. #1
    Recien Llegado! Merodeador
    Fecha de Ingreso
    21 abr, 09
    Mensajes
    9
    Poder de Reputación
    0

    Problema para centrar texto dentro de una capa

    Hola a tod@s
    Tengo un pequeño problema con la página que estoy haciendo.
    Quiero centrar el texto de varias capas y no me funciona “text-align: center”. Bueno, sí que funciona en el sentido de que el texto queda centrado pero sólo en relación a los bordes de la izquierda y la derecha. El hecho es que el texto queda completamente pegado al borde superior, y me gustaría poder centrarlo también en relación a los bordes de arriba y abajo.
    He pensado que esto habría que hacerlo con padding o margin, pero si pongo, por ejemplo, “padding: 20px 0px 0px 0px” en la linea de la propia capa en la hoja de estilos, se desplaza la capa entera, no el texto de dentro.
    Luego pensé que como lo que quiero centrar es texto de dentro, que es un vínculo, probé a poner lo de padding en la línea donde se especifican las propiedades de los vínculos:

    #nombrecapa a { color: black; text-decoration:none ; padding: 20px 0px 0px 0px }

    Pero no noté ningún cambio. Probé a hacer lo mismo con margin pero tampoco cambió nada. Sí que noté que el texto se desplazaba si por ejemplo, ponía “padding: 0px 20px 0px 0px” o “padding: 0px 0px 0px 20px”, pero en lo que se refiere al borde superior no conseguí ningún cambio. Ni aunque pusiese “padding-top: 300px” cambiaba nada.

    ¿Qué estoy haciendo mal? A ver si alguien me puede dar alguna idea sobre cómo solucionarlo o hacerlo de otro modo.
    Muchas gracias de antemano.

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    16 feb, 08
    Ubicación
    Estella-Spain
    Mensajes
    2,222
    Poder de Reputación
    31

    Re: Problema para centrar texto dentro de una capa

    Cita Iniciado por Anne
    Hola a tod@s
    Tengo un pequeño problema con la página que estoy haciendo.
    Quiero centrar el texto de varias capas y no me funciona “text-align: center”. Bueno, sí que funciona en el sentido de que el texto queda centrado pero sólo en relación a los bordes de la izquierda y la derecha. El hecho es que el texto queda completamente pegado al borde superior, y me gustaría poder centrarlo también en relación a los bordes de arriba y abajo.
    He pensado que esto habría que hacerlo con padding o margin, pero si pongo, por ejemplo, “padding: 20px 0px 0px 0px” en la linea de la propia capa en la hoja de estilos, se desplaza la capa entera, no el texto de dentro.
    Luego pensé que como lo que quiero centrar es texto de dentro, que es un vínculo, probé a poner lo de padding en la línea donde se especifican las propiedades de los vínculos:

    #nombrecapa a { color: black; text-decoration:none ; padding: 20px 0px 0px 0px }

    Pero no noté ningún cambio. Probé a hacer lo mismo con margin pero tampoco cambió nada. Sí que noté que el texto se desplazaba si por ejemplo, ponía “padding: 0px 20px 0px 0px” o “padding: 0px 0px 0px 20px”, pero en lo que se refiere al borde superior no conseguí ningún cambio. Ni aunque pusiese “padding-top: 300px” cambiaba nada.

    ¿Qué estoy haciendo mal? A ver si alguien me puede dar alguna idea sobre cómo solucionarlo o hacerlo de otro modo.
    Muchas gracias de antemano.
    Hola:

    No estaría mal que nos pusiera los códigos de la página y los de su hoja de estilo correspondiente a esa página, y que nos diga cuál es el vínculo que usted quiere que esté más abajo que el borde superior, (o que tenga más espacio entre el vínculo y el borde superior)
    Así podríamos entre algunos (por no decir todos) ver como hacerlo, ya que le podemos decir .: ¡Haga esto o lo otro!. Pero Hay que ver también cosas que suelen pasarse por alto, ya que muchas veces, puede que esté afectándo la "herencia" en las capas, por eso hay que ver que es, y como se puede hacer.
    Ya ve que incluso poniéndo un padding, este no obedece, y como le digo, muchas veces es por que hay implícita una orden superior que le impide a ese vínculo aceptar esa orden.

    Saludos
    Agradecido de los que aprenden enseñando

  3. #3
    Recien Llegado! Merodeador
    Fecha de Ingreso
    21 abr, 09
    Mensajes
    9
    Poder de Reputación
    0
    Hola a tod@s. Muchas gracias por responder. Los enlaces que quiero centrar dento de las capas son los de las capas enlace1, enlace2, enlace3, enlace4, enlace5 y enlace6.

    Estos son los códigos de la página:

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

    <html>
    <head>
    <meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    <title>xxxxxxxxxx</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <div id="global">

    <div id="cabecera">
    <div id="logo">[img]objetos/logo.png[/img]
    </div>
    <div id="presentacion">[img]objetos/books-shelf2.gif[/img]</div>
    </div>
    <div id="navegacion">
    <div id="enlace1">ENLACE1</div>
    <div id="enlace2">ENLACE2</div>
    <div id="enlace3">ENLACE3</div>
    <div id="enlace4">ENLACE4</div>
    <div id="enlace5">ENLACE5</div>
    <div id="enlace6">ENLACE6</div>
    </div>

    <div id="contenido">

    <div id="menu">
    <ul>
    <h1>Título sección 1</h1>[*]Las vidas y desgracias de pepito grillo [*]Texto 2[*]Texto 3[*]Texto 3[*]Texto 4[*]Texto 5[*]Texto 6[*]Texto 7
    [/list]
    </div>

    <h1>título</h1>


    XXXXXXXXX XXXXXXXXX XXXXXXXXXXXXXx XXXXXXXXXXXXX</p>


    XXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXXXXX</p>


    XXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXXXXX</p>


    XXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXXXXX</p>


    XXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXXXXX</p>


    XXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXXXXX</p>
    </div>

    <div id="pie">
    <div id="pieuno">Pieuno</div>
    <div id="piedos">Piedos</div>
    <div id="pietres">Pietres</div>
    </div>

    </div>
    </body>
    </html>


    Y estos son los de la hoja de estilo:

    * { text-indent: 0px ; margin: 0px ; padding: 0px ; border: 0px }
    p { margin: 0px 10px 0px 10px ; text-align: justify ; font-size: 16px }
    h1 { font-size: 1.2em ; color: black ; font-weight: bold ; text-decoration: none ; text-align: center }
    h2 { font-size: 1.1em ; color: black ; font-weight: bold ; text-decoration: none ; text-align: center }
    body { text-align: center ; background-color: #F2E1C8 }
    #global { width: 800px ; margin: 4px auto }
    a { color: black ; text-decoration: none }
    a:link { }
    a:visited { }
    a:hover { color: black ; text-decoration: underline }
    a:active { }
    #navegacion a { color: black ; text-decoration: none }
    #navegacion a:link { }
    #navegacion a:visited { }
    #navegacion a:hover { color: white ; text-decoration: none ; background color: #E27E70 }
    #navegacion a:active { }


    #cabecera { background-color: #FEE2BC ; height: 85px ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid }
    #logo { background-color: #FEE2BC ; width: 159px ; float: left ; padding: 15px 0px 0px 30px }
    #presentacion { background-color: #FEE2BC ; width: 500px ; float: right ; padding: 30px 0px 0px 5px }

    #navegacion { font-weight: bold ; background-color: #E27E70 ; border: black 1px solid ; height: 80px }

    #enlace1 { border-right: black 1px solid ; float:left ; width: 131px ; text-align: center ; height: 80px }
    #enlace2 { border-right: black 1px solid ; float:left ; width: 131px ; text-align: center ; height: 80px }
    #enlace3 { border-right: black 1px solid ; float:left ; width: 131px ; text-align: center ; height: 80px }
    #enlace4 { border-right: black 1px solid ; float:left ; width: 131px ; text-align: center ; height: 80px }
    #enlace5 { border-right: black 1px solid ; float:left ; width: 131px ; text-align: center ; height: 80px }
    #enlace6 { float:left ; width: 131px ; text-align: center ; height: 80px }


    #contenido { background-color: #FEE2BC ; border-left: black 1px solid ;
    border-right: black 1px solid ; padding-top: 20px }
    #contenido p { padding: 30px 10px 10px 80px ; text-indent: 25px }

    #menu {background-color: #FEE2BC ; width: 150px ; float: left ; text-align: left ; margin: 0px 25px 3px 0px }
    #menu a:hover { display: block ; background-color: #FFFACD}
    #menu li { list-style: none ; margin: 4px 0px 4px 6px }
    #menu h1 { text-decoration: none ; font-size: 14px }

    #pie { background-color: #FEE2BC; border-left: black 1px solid ;
    border-right: black 1px solid ;
    border-top: black 1px solid ; border-bottom: black 1px solid ;
    height: 23px }
    #pie a:hover { display: block ; background-color: #FFFACD }
    #pie li { list-style: none ; font-size: 12px }
    #pieuno { float: left ; width: 266px }
    #piedos { float: left ; width: 266px }
    #pietres { float: left ; width: 266px }

  4. #4
    Me va gustando esto... Habitante
    Fecha de Ingreso
    13 mar, 09
    Mensajes
    174
    Poder de Reputación
    19
    Por que no haces esto y ya veras como centrar el texto y si quieres centrar por todos los lados igual te recomiendo que uses estilos.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Documento sin t&iacute;tulo</title>
    </head>

    <body><table width="200" border="1">
    <tr>
    <td><div>
    <div align="center">Hola</div>
    </div></td>
    </tr>
    </table>

    </body>
    </html>

  5. #5
    Recien Llegado! Merodeador
    Fecha de Ingreso
    21 abr, 09
    Mensajes
    9
    Poder de Reputación
    0
    Muchas gracias por tu respuesta, TIFORO. Queda bien lo que propones. Cambiandole la altura a la capa quedaría como quiero. Hay en tu ejemplo un par de etiquetas que no conocía así que me llevará un poquito aplicarlo a mi página, pero ya es algo por lo que empezar.
    Muchas gracias, de verdad :)

  6. #6
    Me va gustando esto... Habitante
    Fecha de Ingreso
    13 mar, 09
    Mensajes
    174
    Poder de Reputación
    19
    De nada yo tambien tuve una gran lucha con estas cosas yo hice un curso por el paro con Dreamweaver, Flash, Fireworkls y hasta donde estoy ahora, yo puedo hacer plantillas complejas con Dreamweaver pero mi tiempo me ha costado.

    Si tienes un problema no dudes en mandar mensaje.

    Saludos.

    Cita Iniciado por Anne
    Muchas gracias por tu respuesta, TIFORO. Queda bien lo que propones. Cambiandole la altura a la capa quedaría como quiero. Hay en tu ejemplo un par de etiquetas que no conocía así que me llevará un poquito aplicarlo a mi página, pero ya es algo por lo que empezar.
    Muchas gracias, de verdad :)

  7. #7
    Me va gustando esto... Habitante
    Fecha de Ingreso
    30 abr, 08
    Mensajes
    60
    Poder de Reputación
    20
    Hola, tengo una solución sin utilizar tablas.

    He modificado la hoja de estilos, en particular, he añadido la propiedad padding-top a #enlace1, #enlace2, ... , #enlace6.

    Código:
    * { text-indent: 0px ; margin: 0px ; padding: 0px ; border: 0px }
    p { margin: 0px 10px 0px 10px ; text-align: justify ; font-size: 16px }
    h1 { font-size: 1.2em ; color: black ; font-weight: bold ; text-decoration: none ; text-align: center }
    h2 { font-size: 1.1em ; color: black ; font-weight: bold ; text-decoration: none ; text-align: center }
    body { text-align: center ; background-color: #F2E1C8 }
    #global { width: 800px ; margin: 4px auto }
    a { color: black ; text-decoration: none }
    a:link { }
    a:visited { }
    a:hover { color: black ; text-decoration: underline }
    a:active { }
    #navegacion a { color: black ; text-decoration: none }
    #navegacion a:link { }
    #navegacion a:visited { }
    #navegacion a:hover { color: white ; text-decoration: none ; background color: #E27E70 }
    #navegacion a:active { }
    
    
    #cabecera { background-color: #FEE2BC ; height: 85px ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid }
    #logo { background-color: #FEE2BC ; width: 159px ; float: left ; padding: 15px 0px 0px 30px }
    #presentacion { background-color: #FEE2BC ; width: 500px ; float: right ; padding: 30px 0px 0px 5px }
    
    #navegacion { font-weight: bold ; background-color: #E27E70 ; border: black 1px solid ; height: 80px }
    
    #enlace1 { border-right: black 1px solid ; float:left ; width: 131px ; text-align: center ; height: 80px; padding-top: 30px;}
    #enlace2 { border-right: black 1px solid ; float:left ; width: 131px ; text-align: center ; height: 80px; padding-top: 30px; }
    #enlace3 { border-right: black 1px solid ; float:left ; width: 131px ; text-align: center ; height: 80px; padding-top: 30px; }
    #enlace4 { border-right: black 1px solid ; float:left ; width: 131px ; text-align: center ; height: 80px; padding-top: 30px; }
    #enlace5 { border-right: black 1px solid ; float:left ; width: 131px ; text-align: center ; height: 80px; padding-top: 30px; }
    #enlace6 { float:left ; width: 131px ; text-align: center ; height: 80px }
    
    
    #contenido { background-color: #FEE2BC ; border-left: black 1px solid ;
    border-right: black 1px solid ; padding-top: 20px }
    #contenido p { padding: 30px 10px 10px 80px ; text-indent: 25px }
    
    #menu {background-color: #FEE2BC ; width: 150px ; float: left ; text-align: left ; margin: 0px 25px 3px 0px }
    #menu a:hover { display: block ; background-color: #FFFACD}
    #menu li { list-style: none ; margin: 4px 0px 4px 6px }
    #menu h1 { text-decoration: none ; font-size: 14px }
    
    #pie { background-color: #FEE2BC; border-left: black 1px solid ;
    border-right: black 1px solid ;
    border-top: black 1px solid ; border-bottom: black 1px solid ;
    height: 23px }
    #pie a:hover { display: block ; background-color: #FFFACD }
    #pie li { list-style: none ; font-size: 12px }
    #pieuno { float: left ; width: 266px }
    #piedos { float: left ; width: 266px }
    #pietres { float: left ; width: 266px }
    Veo que has utilizado varios elementos ID repetidos con las mismas propiedades, #enlace1, #enlace2, ... , #enlace6 tienen lo mismo, igual que #pieuno, #piedos y #pietres.

    ¿No te interesaría definirlos como "class"? sólo debes dejar uno de los seis estilos de enlace (#enlace1 ... #enlace6), y declararlo como

    .enlace { .... }

    Después desde el HTML se llama como <div class="enlace">, en vez de <div id="enlace1">

    Un saludo
    Aprende a crear tu página web gratis en Crear Una Web.

Temas Similares

  1. Respuestas: 0
    Último Mensaje: 03/12/2013, 15:40
  2. Ayuda...problema para subir fondo y centrar texto
    Por chequebosoc en el foro Foro General
    Respuestas: 4
    Último Mensaje: 01/05/2007, 13:26

Permisos de Publicación

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