Cómo conseguir hacer dos columnas

Inicio Foros WordPress Themes y Diseño Cómo conseguir hacer dos columnas

Este debate contiene 5 respuestas, tiene 3 mensajes y lo actualizó  jcpolitica hace 9 años, 3 meses.

  • Autor
    Publicaciones
  • #12865

    jcpolitica
    Participante

    <p>Necesito hacer un widget para mi sidebar derecha que esté dividida en dos columnas.<br />
    Es para poner un blogroll al estilo que tiene Ayudawordpress.</p>
    <p>A ver si me podeis ayudar …. ya sé que soy pesado
    </p>

  • #28132

    jcpolitica
    Participante

    A ver si alguien tiene alguna noción para hacer esto.

  • #28762

    jcpolitica
    Participante

    Fernando, ¿me puedes decir cómo lo has conseguido?

  • #28764

    gventura
    Participante

    No te puedo ayudar pero se me ocurre que te descargues un theme con ese efecto y estudies como lo hacen.

    Por ahora creo que es lo que más rapido puedes hacer.

    Se me ocurre que una solución sería jugar con los estilos css y flotando a la izquierda todos los elementos podrías conseguir 2 columnas haciendo que dichos elementos tengan un ancho del 50%, seguro que hay otra opción cómo crear otro sidebar y poner los widgets selecionando en que sidebar debe ir cada uno.

    Seguro que hay otras opciones y quizás mejores pero estos creo que pueden dar el pego.

  • #28768

    nexusbbs
    Participante

    Defines el sidebar, en este ejemplo con relación al "conentwrap" que es donde va el contenido

    #sidebar {
    margin: 10px 0 0 0;
    /* margin-top: same like #contentwrap */ float: right;
    width: 320px;
    background-color:#FFFFFF;
    }

    Dentro de sidebar puedes escribir lo que quieras, incluir tablas, etc…
    Una buena opción, es la de tener un recuadro superior donde colocar una imagen, un recordatorio o si quieres un banner de 300×350

    #sidebar .recuadro {
    margin-right: 20px;
    background-color: #F1F6FF;
    background-image: url(back_info.jpg);
    border: 1px solid #e5e5e5;
    padding: 5px;
    line-height: 1.4em;
    }

    #sidebar .recuadro p {
    margin-top: 5px;
    margin-bottom: 10px;
    }

    Dentro del sidebar defines dos barras

    #sidebar1, #sidebar2 {
    width: 130px;
    float: right;
    line-height: 1.5em;
    padding-top: 15px;
    display: inline;
    }

    #sidebar1 {
    margin: 0 20px 20px 0;
    padding-top: 15px;
    }

    #sidebar2 {
    margin: 0 20px 20px 0;
    }

    Recuerda que la estructura, en este ejemplo seria asi

    <div id="sidebar">
    <div class="recuadro">LO QUE QUIERAS</div>
    Inicias las dos columnas
    <div id="sidebar1"> Aqui puedes poner el contenido que quieras o bien colocar el código para insertar widgets</div>
    <div id="sidebar2">igual que el anterior</div>
    </div> <!– cierra el sidebar–>

    Espero que te sirva

  • #28774

    jcpolitica
    Participante

    Perfecto compañero, voy a poner en práctica lo que me has explicado. Gracias ^^

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

Pin It on Pinterest