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

Tema: Como centrar un texto dentro del espacio "logotipo"

  1. #1
    Me va gustando esto... Habitante
    Fecha de Ingreso
    30 dic, 10
    Ubicación
    Madrid
    Mensajes
    141
    Poder de Reputación
    14

    Como centrar un texto dentro del espacio "logotipo"

    Hola de nuevo, Estoy retocando muchos aspectos de mi web y me encuentro con un problema que supongo que será sencillo pero que después de mucho probar no lo consigo.

    Tengo un espacio denominado "logotipo" con una imagen y quiero poner un texto por encima y otro por debajo pero centrados.

    código en página index.html

    <div id="logotipo"><a href="http://www.torrevieja.com/eng/webcam.html"; target="_blank<p><b>Web-Cam</b></p><img alt="Web-Cam Torrevieja" src="objetos/webcam.gif" height="60px" width="60px"><p><b>Torrevieja</b></p></a></div>

    código en página Css
    #logotipo {margin:0px 0px 0px 6px; width:130px; float:left; text-align:center}

    Quiero poner los textos "Web-cam" encima de la imagen y el de "Torrevieja" por debajo pero centrados. La imagen sin embargo, si la veo centrada.
    Me podéis indicar la solución, Gracias

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    05 mar, 10
    Mensajes
    844
    Poder de Reputación
    20
    #logotipo {margin:0px 0px 0px 6px; width:130px; float:left; text-align:center;}

  3. #3
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    05 mar, 10
    Mensajes
    844
    Poder de Reputación
    20
    <div id="logotipo">
    <p><b>Web-Cam</b></p>
    <a href="http://www.torrevieja.com/eng/webcam.html" target="_blank"><img alt="Web-Cam Torrevieja" src="objetos/webcam.gif" height="60px" width="60px"></a>
    <p><b>Torrevieja</b></p>
    </div>

  4. #4
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    05 mar, 10
    Mensajes
    844
    Poder de Reputación
    20
    Y esto para que target="_blank solo abrirá una ventana tras otra en el navegador. Usa direcciones URL en img absolutas y no relativas img tu dominio directorio etc, vigila los detalles. En el alt elimina los - guiones, no utilices en la parte superior párrafos solo en la parte inferior.

  5. #5
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    05 mar, 10
    Mensajes
    844
    Poder de Reputación
    20
    Otra cosita no pongas párrafos porque te estas adelantando al h1, mejor crea una imagen con esos textos.

  6. #6
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    05 mar, 10
    Mensajes
    844
    Poder de Reputación
    20
    La solución seria

    #p {margin:0px 0px 0px 0px; width:5px; float:left; text-align:center;}

    Pero para los párrafos es mejor utilizar clases

    .p

    div class

    Porque los párrafos hay muchos se volverían locos.

  7. #7
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    05 mar, 10
    Mensajes
    844
    Poder de Reputación
    20
    En definitiva lo que e correjido y te e comentado lo debes comprobar en tu editor o lo que estés utilizando y correjir el código si es necesario solo es una base para que lo beas mas claro.

  8. #8
    Me va gustando esto... Habitante
    Fecha de Ingreso
    30 dic, 10
    Ubicación
    Madrid
    Mensajes
    141
    Poder de Reputación
    14
    Me acabas de fundir los plomos, jajajajajaja. Miraré todo lo que me dices pero tengo que ir poquito a poco y probando. De momento he subido a Razyhosting los dos ficheros con el CPANEL que ya se lo que es gracias a vosotros; pero el problema no se me resuelve. Te envio de nuevo el enlace: http://appartorreviejaalicante.atweb...com/index.html
    Mi navegador es Chrome

  9. #9
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    05 mar, 10
    Mensajes
    844
    Poder de Reputación
    20
    #p {margin:0px 0px 0px 0px; width:5px; float:left; text-align:center;}

    El margin 0px debes darle un margen.

  10. #10
    Me va gustando esto... Habitante
    Fecha de Ingreso
    30 dic, 10
    Ubicación
    Madrid
    Mensajes
    141
    Poder de Reputación
    14
    Nada, he puesto mágenes a 0px y también he puesto el código height todo ello probando con varios valores pero solo consigo reducir o ampliar el espacio del logo por lo que se me deforma la página

  11. #11
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,079
    Poder de Reputación
    25
    Hola!

    Asumiendo una cabecera así:

    Código HTML:
    <body>
      <header id="page-header">
      <p class="page-header-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacus ante, fringilla et ligula vel</p>
      <figure class="page-header-content">
        <img src="http://www.comocreartuweb.com/consultas/images/misc/como-crear-tu-web.gif" alt="Oops! La imagen no est&aacute;" title="Logotipo de mi página" />
      </figure>
      <p class="page-header-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacus ante, fringilla et ligula vel</p>
    </header>
      <!-- Resto del contenido -->
    </body>
    El CSS sería algo así:

    Código HTML:
    body {
      width: 100%;
    }
    
    #page-header {
      width: 80%;
      margin: 0 auto;
    }
    
    #page-header .page-header-content {
      text-align: center;
    }
    Aquí hay un ejemplo funcional: https://jsfiddle.net/skaparate/fw2t9dnt/2/

    Puede que el resultado varíe dependiendo del resto de tu CSS, así que probablemente haya que "acomodarlo". Básicamente tienes que darle un ancho al contenedor de los párrafos y la imagen (o a cada uno de los elementos) y luego centrarlos. Para centrar un elemento de bloque (div, p, etc.) debes hacer 2 cosas:

    1. Darle un ancho fijo: 300px, 50%, 30em, 50vw, etc.
    2. Añadir un margen automático a la derecha y la izquierda. Puede ser de las siguientes formas:

    Código:
    - margin: 0 auto;
    - margin: 0 auto 0 auto;
    - margin-left: auto;
      margin-right: auto;

  12. #12
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,079
    Poder de Reputación
    25
    Hola!

    Asumiendo una cabecera así:

    Código HTML:
    <body>
      <header id="page-header">
      <p class="page-header-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacus ante, fringilla et ligula vel</p>
      <figure class="page-header-content">
        <img src="http://www.comocreartuweb.com/consultas/images/misc/como-crear-tu-web.gif" alt="Oops! La imagen no est&aacute;" title="Logotipo de mi página" />
      </figure>
      <p class="page-header-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacus ante, fringilla et ligula vel</p>
    </header>
      <!-- Resto del contenido -->
    </body>
    El CSS sería algo así:

    Código HTML:
    body {
      width: 100%;
    }
    
    #page-header {
      width: 80%;
      margin: 0 auto;
    }
    
    #page-header .page-header-content {
      text-align: center;
    }
    Aquí hay un ejemplo funcional: https://jsfiddle.net/skaparate/fw2t9dnt/2/

    Puede que el resultado varíe dependiendo del resto de tu CSS, así que probablemente haya que "acomodarlo". Básicamente tienes que darle un ancho al contenedor de los párrafos y la imagen (o a cada uno de los elementos) y luego centrarlos. Para centrar un elemento de bloque (div, p, etc.) debes hacer 2 cosas:

    1. Darle un ancho fijo: 300px, 50%, 30em, 50vw, etc.
    2. Añadir un margen automático a la derecha y la izquierda. Puede ser de las siguientes formas:

    Código:
    - margin: 0 auto;
    - margin: 0 auto 0 auto;
    - margin-left: auto;
      margin-right: auto;
    Para que lo tengas en cuenta, text-align no sirve para centrar todo tipo de elementos. De hecho, si es que no me equivoco, sólo sirve para elementos de tipo inline (a, span, img, etc.) o inline-block.

Temas Similares

  1. Como "resumir" un texto que se encuentre en una base de datos, (para buscador)
    Por rodojpm en el foro Php Bases de Datos y MySQL (Nuevo!)
    Respuestas: 2
    Último Mensaje: 02/07/2011, 05:23
  2. Texto dentro de "contenido" no queda centrado
    Por jmanuel en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 4
    Último Mensaje: 12/01/2011, 20:09
  3. Como puedo centrar el texto de "Bienvenido a mi web...&
    Por Neftre12 en el foro Foro General
    Respuestas: 3
    Último Mensaje: 12/01/2008, 01:29

Permisos de Publicación

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