[SOLUCIONADO] flotar contenido

lamenenchu · #1 (**permalink**) 29/09/2015, 03:29

buenas a todos...

Estoy empezando con el diseño web adaptativo y los float me están volviendo loca...
Alguien podría decirme que debería hacer para poner el contenido flotando uno al lado del otro? os dejo la url para que entendáis que es lo que debo modificar.
Ya lo tenía flotando, pero he tenido que cambiar unas cosas, y se me ha destrozado la estructura...

Muchas gracias

www.silviamenen.com/sobremi.html

AngelKrak · #2 (**permalink**) 29/09/2015, 06:51

porque tantos divs(porque un div para cada elemento?
no pudiste hacerlo solo en un div?

como yo lo haria y como fue que lo hice y creo que es como querias, seria ponerle un div completo a todo los demas div class row osea los que estan abajo del primer div y un css basico.

Codigo desde el <section>:

Cita:

Te lo tuve que publicar aqui, ya que no deja poner mucho texto la pagina :/
http://gpaste.us/5f0d5763

Mi codigo del CSS:

Código CSS:

Ver original.row:first-child {
  max-width: 840px;
  float: left;
}
div#cont {
  float: left;
}

JustinKO · #3 (**permalink**) 29/09/2015, 06:53

Hola, tu problema es que estás metiendo cada div que tiene que ir flotado (veo que estás usando bootstrap) dentro de un article y de un row.

Lo que deberías de hacer es meter estos divs (a los que le añades el col-md-4 etc) dentro del row uno detrás de otro.

Algo así:

Código HTML:

Ver original<article class="row">
                    <div class="col-lg-4 col-lg-6 col-xs-4">
                        <div class="timeline-panel">
                            <div class="timeline-heading">
                                <div class="img-icon">
                                    <img src="img/video.png" alt="icono" width="70px" height="70px">
                                </div>
                                <h4>Graduado Superior<br> en Mass Media</h4>
                                <h4 class="subheading">Universidad de Vic</h4>
                                <h5 class="subheading">2001-2004</h5>
 
                                <p class="text-list">
                                    Aprendiendo del mundo audiovisual y periodismo.
                                    <br> Forjando la base de mis estudios.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-lg-6 col-xs-4">
                        <div class="timeline-panel">
                            <div class="timeline-heading">
                                <div class="img-icon">
                                    <img src="img/disenio.png" alt="icono" width="70px" height="70px">
                                </div>
                                <h4>Técnico en <br> diseño gráfico </h4>
                                <h4 class="subheading">New horizons. Barcelona
                                </h4>
                                <h5 class="subheading">2004-2006</h5>
 
                                <p class="text-list">
                                    Descubrir una nueva ilusión por lo gráfico.
                                    <br> Desarrollando nuevas inquietudes.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-lg-6 col-xs-4">
                        <div class="timeline-panel">
                            <div class="timeline-heading">
                                <div class="img-icon">
                                    <img src="img/multimedia.png" alt="icono" width="70px" height="70px">
                                </div>
                                <h4>Técnico digital <br>
                                            y multimedia </h4>
                                <h4 class="subheading">New horizons. Barcelona
                                </h4>
                                <h5 class="subheading">2004-2006</h5>
 
                                <p class="text-list">
                                    Mezclar estudios con pasión.
                                    <br> Imagen gráfica y multimedia. Ampliar mi formación.
                                </p>
                            </div>
                        </div>
                    </div>
 
                </article>

Por cierto, fíjate que repites clases de bootstrap. No tiene sentido que pongas "col-lg-4 col-lg-6" quita la primera puesto que te va a leer la segunda solo.

un saludo

AngelKrak · #4 (**permalink**) 29/09/2015, 06:54

Rectifico la Url:
http://pastebin.com/M5pGvz0D

lamenenchu · #5 (**permalink**) 29/09/2015, 10:03

muchisimas gracias!! mezclar boostrap con css es un lío todavía y más aprendiendo por mi cuenta... Tendré en cuenta vuestros consejos.

lamenenchu · #6 (**permalink**) 29/09/2015, 10:19

Cita:

Iniciado por JustinKO

Hola, tu problema es que estás metiendo cada div que tiene que ir flotado (veo que estás usando bootstrap) dentro de un article y de un row.

Lo que deberías de hacer es meter estos divs (a los que le añades el col-md-4 etc) dentro del row uno detrás de otro.

Algo así:

Código HTML:

Ver original<article class="row">
                    <div class="col-lg-4 col-lg-6 col-xs-4">
                        <div class="timeline-panel">
                            <div class="timeline-heading">
                                <div class="img-icon">
                                    <img src="img/video.png" alt="icono" width="70px" height="70px">
                                </div>
                                <h4>Graduado Superior<br> en Mass Media</h4>
                                <h4 class="subheading">Universidad de Vic</h4>
                                <h5 class="subheading">2001-2004</h5>
 
                                <p class="text-list">
                                    Aprendiendo del mundo audiovisual y periodismo.
                                    <br> Forjando la base de mis estudios.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-lg-6 col-xs-4">
                        <div class="timeline-panel">
                            <div class="timeline-heading">
                                <div class="img-icon">
                                    <img src="img/disenio.png" alt="icono" width="70px" height="70px">
                                </div>
                                <h4>Técnico en <br> diseño gráfico </h4>
                                <h4 class="subheading">New horizons. Barcelona
                                </h4>
                                <h5 class="subheading">2004-2006</h5>
 
                                <p class="text-list">
                                    Descubrir una nueva ilusión por lo gráfico.
                                    <br> Desarrollando nuevas inquietudes.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-lg-6 col-xs-4">
                        <div class="timeline-panel">
                            <div class="timeline-heading">
                                <div class="img-icon">
                                    <img src="img/multimedia.png" alt="icono" width="70px" height="70px">
                                </div>
                                <h4>Técnico digital <br>
                                            y multimedia </h4>
                                <h4 class="subheading">New horizons. Barcelona
                                </h4>
                                <h5 class="subheading">2004-2006</h5>
 
                                <p class="text-list">
                                    Mezclar estudios con pasión.
                                    <br> Imagen gráfica y multimedia. Ampliar mi formación.
                                </p>
                            </div>
                        </div>
                    </div>
 
                </article>

Por cierto, fíjate que repites clases de bootstrap. No tiene sentido que pongas "col-lg-4 col-lg-6" quita la primera puesto que te va a leer la segunda solo.

un saludo

Hola de nuevo, ya solucioné todo, pero todavía hay algo que se me escapa y seguramente tú lo veas al momento. Sabes porqué se ve así?

http://silviamenen.com/sobremi.html

(los dos últimos articulos se descuadran)

JustinKO · #7 (**permalink**) 29/09/2015, 10:43

Claro, es la pesadilla de siempre. Es por las alturas de los divs. Si te das cuenta hay uno que no tiene "sitio web" entonces le hace que que tenga menos altura y te lo descuadra.
La manera más fácil de solucionarlo es darle a todos esos divs un min-height (alto mínimo) que sea como el más alto, así todos tendrán la misma altura y no se te descuadrará.

Por otro lado, te recomiendo que eches un ojo la página oficial de bootstrap para que veas el funcionamiento del responsive con este framework. Bootstrap te va a facilitar la vida muchísimo, pero debes de dedicarle un mínimo de tiempo a estudiarlo.
Ahora, tal como está, no tiene mucho sentido. Reduce el ancho del navegador y verás a lo que me refiero.
Ahora me pillas con mucho lío y no te puedo decir más.

Un saludo y ánimo

lamenenchu · #8 (**permalink**) 29/09/2015, 10:46

Cita:

Iniciado por JustinKO

Claro, es la pesadilla de siempre. Es por las alturas de los divs. Si te das cuenta hay uno que no tiene "sitio web" entonces le hace que que tenga menos altura y te lo descuadra.
La manera más fácil de solucionarlo es darle a todos esos divs un min-height (alto mínimo) que sea como el más alto, así todos tendrán la misma altura y no se te descuadrará.

Por otro lado, te recomiendo que eches un ojo la página oficial de bootstrap para que veas el funcionamiento del responsive con este framework. Bootstrap te va a facilitar la vida muchísimo, pero debes de dedicarle un mínimo de tiempo a estudiarlo.
Ahora, tal como está, no tiene mucho sentido. Reduce el ancho del navegador y verás a lo que me refiero.
Ahora me pillas con mucho lío y no te puedo decir más.

Un saludo y ánimo

Suficiente tu tiempo! gracias de nuevo, me has salvado de tirar el ordenador por la ventana!!