Columnas en el Footer

Inicio Foros WordPress Themes y Diseño Columnas en el Footer

Etiquetado: , ,

Este debate contiene 9 respuestas, tiene 4 mensajes y lo actualizó  ByMiki hace 8 años, 8 meses.

  • Autor
    Publicaciones
  • #16778

    ByMiki
    Participante

    <p>Hola a todos,</p>
    <p>Estoy intentando dividir el area del footer en 3 columnas para ordenar algunos links. Para ello he seguido el tutorial de Fernando: http://ayudawp.com/como-anadir-widgets-al-footer/ Hasta aqui todo OK.</p>
    <p>El problema es que no consigo centrarlas. Las puedo situar a la izquierda (como estan ahora) o a la derecha. Pero si le doy a float:center; se descentran, poniendose una debajo de otra.</p>
    <p>Alguna ayudita o sugerencia ??</p>
    <p>Aqui os dejo la direccion (con permiso de Fernando): http://www.cartadeviajes.com</p&gt;
    <p>Gracias de antemano y saludos<br />
    Miguel
    </p>

  • #39546

    imported_study
    Participante

    La propiedad float:center no existe. primero rodea esas 3 columnas con otro div (yo lo voy a llamar contenedor vos llamalo como quieras). ahora al div “footer” le agregamos la propiedad
    text-align: center;

    y al div contenedor no le asignamos ninguna propiedad float sino que le ponemos la propiedad margin: 5px auto 5px auto; (nota yo pongo 5px arriba y abajo, vos pone lo que te paresca).

    Para separar las columnas ponele un margin: 0px 15px; a la del medio y al resto nada. Despues veamos como queda.

    PD: se puede saber porque desabilitaste el boton derecho en tu sitio, es muy molesto (en especial cuando alguien quiere ver el código fuente para ayudarte)

  • #39552

    ByMiki
    Participante

    Hola Study

    Gracias por responder. Como veras no soy ningun experto en CSS. La propiedad text-align: center; ya la tenia puesta en el footer, y el contenedor que rodea las tres columnas tambien estaba creado. Por lo tanto solo he modificado los margenes segun me indicas, pero el resultado sigue siendo el mismo, las tres columnas pegadas al margen izquierdo.

    Provisionalmente mientras sigo intentandolo he creado una cuarta columna vacia para que visualmente quede centrado, que al fin y al cabo es de lo que se trata.

    Aqui dejo como queda. En todo caso gracias por ayudarme:

    footer.php

    <div id=”subfooter”>

    <div id=’footer’ style=’width: 280px; float: left; margin: 10px; text-align: center;’>
    texto columna 1. Vacia
    </div>

    <div id=’footer2′ style=’width: 200px; float: left; margin: 10px; text-align: center;’>
    texto columna 2
    </div>

    <div id=’footer3′ style=’width: 200px; float: left; margin: 10px; text-align: center;’>
    texto columna 3
    </div>

    <div id=’footer4′ style=’width: 200px; float: left; margin: 10px; text-align: center;’>
    texto columna 4
    </div>

    <div id=”footer”>
    texto del footer
    </div>

    y en el style.css

    #footer {
    background:#8b8b8b url(images/footerbg.jpg) top left repeat-x;
    clear:both;
    color:#000;
    font-size:1.0em;
    font-weight:bold;
    margin:0;
    padding:20px 0;
    text-align:center;
    width:100%;
    }

    #footer a {
    color: #d0d0d0;
    font-weight:bold;
    }

    #subfooter {
    background:#e8e9ea;
    clear:both;
    color:#000;
    font-size:0.9em;
    font-weight:bold;
    margin: 0px
    padding:0;
    width:100%;
    }

    Saludos

  • #39554

    Pedro Raul
    Participante

    por que no las pones en una lista.

    centras el div y desbordamiento invisible
    sumas el ancho de los li contenidos
    indicas ancho a para li.
    .

    sugerencia: aumenta el espacio entre lineas

  • #39562

    imported_study
    Participante

    Mas vale que no te va a funcionar si el subfooter sigue teniendo 100% de ancho. sacale la propiedad width y hace el resto como te dije antes. Esa es la forma correcta de centrar un div. A veces (como en este caso) hay alguna otra propiedad que entra en conflicto pero no hay que tirar la toalla tan rapido.

    Truquito: para poder ver como te van quedando alineados los divs podes ponerle temporalmente un borde ej: border: solid 1px #000000;

  • #39565

    ByMiki
    Participante

    Hola Pedro Raul

    Gracias por la sugerencia, ya le he dado mas ancho de linea.

    Study

    Le quito el ancho y pongo los margenes, pero sigue igual. Con los margenes que indicas pasa lo siguiente:

    5px auto 5px auto en el footer: Da mas margen arriva y abajo, pero lateralmente no se mueve
    0px 15px en el subfooter: me baja la columna del medio. El resto queda igual

    Lo del borde es buena idea, pero solo consigo ponerselo a todo el footer, no a cada columna. Igual deberia crear un contenedor para cada columna.

    Saludos

  • #39569

    lumbreras
    Participante

    a lo que puedo ver, estas dando de alta 4 columnas, aunque solo te aparecen 3, eso es lo que esta causando que el ultimo se vaya ha la segunda fila de abajo, es muy posible que creaste ese primer widget vacio y no te percataste, checalo, saludos y suerte! 🙂

  • #39614

    imported_study
    Participante

    5px auto 5px auto se lo tenes que poner al subfooter no al footer. Si se te complica mucho la vida mandame el código de tu footer y tu style.css a study.oso{arroba}gmail.com y en la semana te lo devuelvo ya corregido.

  • #39615

    Pedro Raul
    Participante

    enséñale a pescar!!! study!

  • #39642

    ByMiki
    Participante

    Hola Study. Llevas razon, me equivoque al escribir el ultimo post. El 5px auto 5px auto va en el subfooter como indicabas en la primera explicacion. Gracias por ofrecerte, eres muy amable.

    Saludos

  • El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

    Pin It on Pinterest

    Ir al contenido