Articulos y ASIDE ressponsive con CSS y Bootstrap

Hyemin · #1 (**permalink**) 02/05/2015, 15:29

Hola como estan?

Estoy luchando con un esquema que quiero hacer en un sitio web, estoy usando boostrap3 para hacer un blog en php que tiene como formato la siguiente:

<cabezal>bla bla bla</cabezal>
<menu>emnue </menu>
<articulos> 6 articulos por pagina de a dos</articulos>
<aside>Una lista de ultimos articulos </aside>

Tengo dos problemas:

1) Le doy a los articulos un largo de 4 columnas en Bootstrap asi me quedan 4 para el aside, pero cuando dibujo la pantalla el Aside me queda al medio de la columna en lugar de quedar desde arriba.

Se supone que uso una sola fila, por eso encapsulo todo en el <div class="row container" style="max-width: 100%;">

Luego a los articulos les digo que tomen un largo de 4 columnas para lg y al aside que tome 2 (para prbar nomas luego quizas la haga de 3 u otra medida).

El tema es que quiero que el sitio me dibuje esos 8 articulos en columnas de a dos y un unico aside al lado pero no lo consigo :(

Quiero hacer esto: http://urupro.com pero en vez de un articulo por columna que sean dos como en http://urupro.com/test/test.php

2) Los articulos se muestran en la pagina principal siguiendo esta estructura:

Código HTML:

Ver original<div titulo>titulo</div>
<div separador>separador</div>
<div contenido>300 caracteres del contenido</div>
<div separador>separador</div>
<div debajo>Leer mas y comentarios</div>

Todo se muestra razonablemente bien, por razones de estetica tuve que limitar el largo de los articulos a 200PX por que de lo contrario cuando alguno de ellos por tener una imagen o algo era mas grande que los demas directamente me deformaba todo el sitio y no lo arreglaba ni con el class"visible-clear-fix".

Ahora, me gustaria que cada uno de esos divs de los que se componen los articulos fuera una caja cerrada y autoajustada.

Me explico mejor, hoy dia si un elemento del DIV sobrepasa su contendor me rompe el esquema, por ahora lo arreglo con la propiedad overflow:hidden pero eso si bien hace que el resto no se muestre tambien me oculta cosas delcontenedor de abajo y eso perjudica al articulo total.

Por ahora estoy tratando de escribir los articulos respetando ese problema pero entiendo que no es una solucion.

Alguna idea?

EDIT: En otras palabras, no se donde poner el aside en el codigo para que se vea bien estoy probando a meter un aside de prueba de este modo

Código HTML:

Ver original<aside class="col-lg-2" style="height:400px; float: left; margin-left: 10px">aside</aside>

Pero por ahora el aside se pone en cualquier posicion menos donde quiero

alca87 · #2 (**permalink**) 06/05/2015, 03:43

Hola, muéstranos tu código con https://jsfiddle.net/ o similar, si no, es muy complicado entenderte y ayudarte.

fede5426 · #3 (**permalink**) 06/05/2015, 12:31

Algo así seria lo que buscas?

Código HTML:

Ver original<body>
    <div class="container" id="contenedor">
      <div class="row">
        <div class="col-md-12" id="head"></div>
      </div>
      <div class="row">
        <div class="col-md-8" id="principal">
          <div class="row">
            <div class="col-md-6">
              <article>
                <h2>Titulo del articulo</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cupiditate, dignissimos quo. Dolore, omnis totam quibusdam voluptatibus cum, nulla dolores sunt iste? Sunt nam illum, animi magni veniam adipisci non.</p>
              </article>
            </div>
            <div class="col-md-6">
              <article>
                <h2>Titulo del articulo</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cupiditate, dignissimos quo. Dolore, omnis totam quibusdam voluptatibus cum, nulla dolores sunt iste? Sunt nam illum, animi magni veniam adipisci non.</p>
              </article>
            </div>
            <div class="col-md-6">
              <article>
                <h2>Titulo del articulo</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cupiditate, dignissimos quo. Dolore, omnis totam quibusdam voluptatibus cum, nulla dolores sunt iste? Sunt nam illum, animi magni veniam adipisci non.</p>
              </article>
            </div>
            <div class="col-md-6">
              <article>
                <h2>Titulo del articulo</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cupiditate, dignissimos quo. Dolore, omnis totam quibusdam voluptatibus cum, nulla dolores sunt iste? Sunt nam illum, animi magni veniam adipisci non.</p>
              </article>
            </div>
            <div class="col-md-6">
              <article>
                <h2>Titulo del articulo</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cupiditate, dignissimos quo. Dolore, omnis totam quibusdam voluptatibus cum, nulla dolores sunt iste? Sunt nam illum, animi magni veniam adipisci non.</p>
              </article>
            </div>
            <div class="col-md-6">
              <article>
                <h2>Titulo del articulo</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cupiditate, dignissimos quo. Dolore, omnis totam quibusdam voluptatibus cum, nulla dolores sunt iste? Sunt nam illum, animi magni veniam adipisci non.</p>
              </article>
            </div>
            <div class="col-md-6">
              <article>
                <h2>Titulo del articulo</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cupiditate, dignissimos quo. Dolore, omnis totam quibusdam voluptatibus cum, nulla dolores sunt iste? Sunt nam illum, animi magni veniam adipisci non.</p>
              </article>
            </div>
            <div class="col-md-6">
              <article>
                <h2>Titulo del articulo</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cupiditate, dignissimos quo. Dolore, omnis totam quibusdam voluptatibus cum, nulla dolores sunt iste? Sunt nam illum, animi magni veniam adipisci non.</p>
              </article>
            </div>
          </div>
        </div>
        <div class="col-md-4" id="lateral">
          <div class="row">
            <div class="col-md-12" id="anuncios">
              <aside>
                <h2>Anuncios</h2>
                <br>
                <h4>Titulo</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi optio dignissimos nisi assumenda voluptas similique, esse, vel, fugiat rerum, natus neque perspiciatis accusamus error! Eaque, nobis, et! Reprehenderit, cumque, distinctio.</p>
                <br>
                <h4>Titulo</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi optio dignissimos nisi assumenda voluptas similique, esse, vel, fugiat rerum, natus neque perspiciatis accusamus error! Eaque, nobis, et! Reprehenderit, cumque, distinctio.</p>
              </aside>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>

http://codepen.io/anon/pen/OVywQa

Agregué estilos extras como colores y paddings para que se visualicen mejor los elementos nada mas.

Claramente se ve que no soy experto en bootstrap, yo aplique lo entendido en cursos que estoy haciendo online nada más. Puede que no sea correcta la forma que te indico yo, pero tambien puede que si jaja

Seguramente alguien mas experimentado va a revisar mi código, de ahi veremos si lo aprueba o no

Hyemin · #4 (**permalink**) 14/05/2015, 19:11

Gracias por las respuestas, Yo habia hecho algo como lo de Fede, el tema es que me queda mal.

PUse online la pgina con el error para ver si me pueden dar una mano.
http://attackphase.net/index2.php

El tema es que si le doy a la fila articulos un tamano de 9 y al lateral uno de 3 como esta tengo ese resultado. me queda un espacio feo entre el aside y los articulos.

Esocreo que es por que los articulos estan de 5 y no de 6, pero si los pongo de 6 no me entran dos en la columna y me queda uno abajo del otro.

Código HTML:

Ver original<div class="container">
        
        <div class="row" style="width: 100%">
             <div class="col-md-9 col-lg-9" id="principal">
       
                
               <div class="col-xs-12 col-md-5 col-lg-5" id="articulo">
                         TEXTO   
                </div>
             
        </div>
            
            
            <div class="col-xs-12 col-md-3 col-lg-3" id="lateral">
                
                <div class="row">
                    <div class="col-md-12" id="anuncios">
                         <aside>
                <h2>Anuncios</h2>
                <br>
                <h4>Titulo</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi optio dignissimos nisi assumenda voluptas similique, esse, vel, fugiat rerum, natus neque perspiciatis accusamus error! Eaque, nobis, et! Reprehenderit, cumque, distinctio.</p>
                <br>
                <h4>Titulo</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi optio dignissimos nisi assumenda voluptas similique, esse, vel, fugiat rerum, natus neque perspiciatis accusamus error! Eaque, nobis, et! Reprehenderit, cumque, distinctio.</p>
              </aside>
                        
                    </div>
                    
                </div>
                
            </div>
            
            
            
            
        </div>
        
    </div>