[SOLUCIONADO] Problema con la propiedad float

falakata · #1 (**permalink**) 05/08/2014, 02:24

Buenas!

Tengo un problema con la propiedad float, o eso creo yo. La cuestión es que tengo tres <div> en linea, pero cuando reduzco el ancho de la ventana del navegador uno de ellos se me baja. Lo que quiero es que los tres se mantengan en la misma línea. No sé si me he explicado bien.

Por otro lado, no entiendo porqué cuando lo visualizo en el móvil, también el tercer <div> se me baja.

Lo que quiero decir podéis verlo en [URL="http://pruebasfalakata.com"]pruebasfalakata.com[/URL]

Lo que busco es que cuando se reduzca el ancho del navegador también lo hagan los tres <div>, pero que se mantengan en la misma línea.

El código HTML:

Código HTML:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Agencia y Escuela de Maquillaje Profesional</title>
    <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
</head>

<body bgcolor="#CCCCCC">
	<div id="contenedor">
    	<div>
        	<img src="http://pruebasfalakata.com/wp-content/uploads/2013/11/Página-Inicial.jpg"> <!--1280*1024-->
        </div>
        <div onclick="location.href='http://pruebasfalakata.com/servicios-de-maquillaje'" id="contenedor-agencia">
        	<h2 id="titulo-agencia">Agencia de Maquillaje Profesional</h2>
            <p>Disponemos de una amplia red de maquilladores profesionales especializados en todos los ámbitos del maquillaje.</p>
        </div>
        <div onclick="location.href='http://pruebasfalakata.com/escuela'" id="contenedor-escuela">
        	<h1 id="titulo-escuela">Escuela de Maquillaje Profesional</h1>
            <p>Disponemos de una amplia red de maquilladores profesionales especializados en todos los ámbitos del maquillaje.</p>
        </div>
        <div onclick="location.href='http://pruebasfalakata.com/particulares'" id="contenedor-particulares">
        	<h3 id="titulo-particulares">Servicios de Maquillaje a Particulares</h3>
            <p>Disponemos de una amplia red de maquilladores profesionales especializados en todos los ámbitos del maquillaje.</p>
        </div>
    </div>

</body>
</html>

Código CSS:

Código:

img {
	max-width:100%;
	height:auto;
}

#contenedor{
	max-width:1260px;
	margin:20px auto;
}




#contenedor-agencia{
	float:left;
	padding:10px;
	width:31.4814815%;
	background-color:#FFF;
	margin:5px 5px 0 0;
}

#contenedor-agencia:hover{
	background-color:#f0ffe5;
	cursor:pointer;
}
#contenedor-escuela{
	float:left;
	padding:10px;
	width:31.4814815%;
	background-color:#FFF;
	margin:5px 5px 0 0;
}
#contenedor-escuela:hover{
	background-color:#f0ffe5;
	cursor:pointer;
}
#contenedor-particulares{
	float:left;
	padding:10px;
	width:31.4814815%;
	background-color:#FFF;
	margin-top:5px;
}
#contenedor-particulares:hover{
	background-color:#f0ffe5;
	cursor:pointer;
}

#titulo-escuela{
	font:bold 16px Arial, Helvetica, sans-serif;
	margin:auto;
	text-align:center;
}
#titulo-agencia{
	font:bold 16px Arial, Helvetica, sans-serif;
	margin:auto;
	text-align:center;
}

#titulo-particulares{
	font:bold 16px Arial, Helvetica, sans-serif;
	margin:auto;
	text-align:center;
}

Espero que alguien pueda ayudarme, y me comente que estoy haciendo mal.

Muchas gracias de antemano.
Un saludo!

pzin · #2 (**permalink**) 05/08/2014, 10:01

Código CSS:

Ver original* {
  box-sizing: border-box;
}

Y duerme tranquilo.

juangemelo01 · #3 (**permalink**) 06/08/2014, 01:21

Cita:

Iniciado por pzin

Código CSS:

Ver original* {
  box-sizing: border-box;
}

Y duerme tranquilo.

nunca habia leido esa propiedad, la revisare

regresando al tema del amigo, voy a hacer enfasis en lo siguiente

Código:

#contenedor-agencia{
	float:left;
	padding:10px;
	width:31.4814815%;
	background-color:#FFF;
	margin:5px 5px 0 0;
}

#contenedor-escuela{
	float:left;
	padding:10px;
	width:31.4814815%;
	background-color:#FFF;
	margin:5px 5px 0 0;
}

#contenedor-particulares{
	float:left;
	padding:10px;
	width:31.4814815%;
	background-color:#FFF;
	margin-top:5px;
}

si practicamente son lo mismo, por que no pones una clase que represente a tus 3 cajas, ejemplo

Código:

.contieneTres{
	background-color:#FFF;
  	float:left;
	margin:5px 5px 0 0;
	padding:10px;
	width:31.4814815%;
}

ordenalo alfabeticamente y te lo agradeceras por el resto de tu vida

para llamarlo en la hoja html usas lo siguiente

Código HTML:

<body bgcolor="#CCCCCC">
	<div id="contenedor">
    	<div>
        	<img src="http://pruebasfalakata.com/wp-content/uploads/2013/11/Página-Inicial.jpg"> <!--1280*1024-->
        </div>
        <div onclick="location.href='http://pruebasfalakata.com/servicios-de-maquillaje'" class="contieneTres">
        	<h2 id="titulo-agencia">Agencia de Maquillaje Profesional</h2>
            <p>Disponemos de una amplia red de maquilladores profesionales especializados en todos los ámbitos del maquillaje.</p>
        </div>
        <div onclick="location.href='http://pruebasfalakata.com/escuela'" class="contieneTres"">
        	<h1 id="titulo-escuela">Escuela de Maquillaje Profesional</h1>
            <p>Disponemos de una amplia red de maquilladores profesionales especializados en todos los ámbitos del maquillaje.</p>
        </div>
        <div onclick="location.href='http://pruebasfalakata.com/particulares'" id="class="contieneTres"">
        	<h3 id="titulo-particulares">Servicios de Maquillaje a Particulares</h3>
            <p>Disponemos de una amplia red de maquilladores profesionales especializados en todos los ámbitos del maquillaje.</p>
        </div>
    </div>

</body>

el

Código:

bgcolor="#CCCCCC"

ya no se usa asi, si quieres asignarle un fondo de color al body, se lo puedes poner a la hoja de estilos ;)

no entiendo por que usas el onclik

, bien podrias usas usar la etiqueta de hipervinculo

por cierto, el color de tu hover casi no se nota, mira el ejemplo que te acabo de hacer ;)

esa es una forma como podrias re-estructurar tus paginas html y css

http://codepen.io/elestudiantefantasma/pen/Ekxov

falakata · #4 (**permalink**) 06/08/2014, 04:00

Lo primero, muchas gracias pzin y juangemelo01 por vuestras respuestas. Me habéis hecho la vida y el sueño más fácil :) jejejeje da gusto con gente como vosotros.

En especial a juangemelo01, ya que me ha reestructurado el código como debe ser. Ahora me doy cuenta de la mierda que estaba haciendo jajajja.

Llevo muy poco, por no decir nada programando HTML y CSS como se puede comprobar. Lo único que sé es de cosas que voy mirando por ahí. Lo cierto es que lo de las clases si que lo conocía, pero como no estoy acostumbrado a programar pues ni pensé en ello. Te lo agradezco mucho de verdad!! He aprendido un montón con esta reestructuración.

Una cosilla más, a ver si es posible!!

La web ahora mismo esta más que bien, pero mi intención era que los tres contenedores ocuparan el mismo ancho que la imagen de arriba. ¿Es posible?

Agradezco muchísimo vuestras respuestas!!! Muchas graciasss!!

Un saludo!!

juangemelo01 · #5 (**permalink**) 06/08/2014, 14:02

Casi todo en esta vida es posible ;)
de poder ajustar las cajas al ancho de la imagen, se puede, solo tienes que hacer que el tamaño de tu caja + el margen que tiene te de un valor en pixeles, lo multiplicas por 3 y ese valor tiene que ser igual al ancho de tu imagen

en lo personal, no lo hago asi, ya que la tendencia del diseño actualmente es hacer que tu web quede lo mas parecido a la maqueta, mas no igual (hablando de la estetica con la posicion de los elementos), ya que la tendencia en este momento es que tu web pueda ser adaptable ante cualquier dispositivo que uses (relular, tablet, laptop, etc.) y porporcionarle la mejor experiencia al usuario de navegar en tu web, todo esto se puede logran con diferentes tecnicas, yo actualmente conosco los MediaQueries, son instrucciones que se le ponen hasta la parte final de la hoja de estilo y funciona, revisa nuevamente el ejemplo que te puse y juega con el ancho donde se ve la pagina web, veras que tendra 2 transformaciones, 1 cuando el ancho de la web sea de 700px y el otro de 600px

te dejo el link http://codepen.io/elestudiantefantasma/pen/Ekxov

antes de que empieces con esto, te recomiendo que practiques mas html y css, ya cuando te sientas mas seguro, podras comenzar con estos temas, para ese intonces, investiga un poco sobre el diseño Liquido o Responsive, intenta ver algunos conceptos que usan para el posicionamiento de elementos en la pagina

ojo, todo a su tiempo, solo cuando te consideres listo para empezar, no hay mucha ciencia en eso, pero, si se te dificulta maquetar (caminar), se te hara mucho mas dificil hacer las cosas responsive (Correr).

falakata · #6 (**permalink**) 08/08/2014, 10:21

Buff !! que bueno lo de los media queryes... creo que como bien dices, tengo que dedicarle más tiempo a HTML y CSS, porque lo otro me queda grande.

Muchas gracias por tu ayuda!