Flipando con CSS

kraneok #1 Sep '13 Penitente

Hola, literalmente, como el título reza, estoy flipando con CSS.
Esto utilizando float:left; para posicionar cajas de productos de compra, y es increíble, pero después de rellenar la primera fila, la segunda no me la rellena y pasa directamente a la tercera, a excepción de una caja en la derecha que si la poner.
Esto no es patrón, osea, que no se repite, simplemente es ahí..

Foto

¿ Alguna idea de por qué puede estar pasando esto ?
De primeras pensaba en algo mal en CSS, pero he limpiado de arriba abajo esa parte de catálogo de productos, y sigue igual..

PiradoIV #2 Sep '13 Brongster

Sin que nos muestres código, poco podemos hacer

1 respuesta

kraneok #3 Sep '13 Penitente

#2 Ahí tienes.

/* Catalog */
#content section.content_right article.content_right_article div.catalog_product 
{
    padding: 0%;
}

#content section.content_right article.content_right_article div.catalog_product div.last_product
{
    float:          left;
    width:          30%;
    margin:         1%;
    background:     #efefef;
    border-radius:  8px;
    border:         1px solid gray;
}

#content section.content_right article.content_right_article div.catalog_product div.last_product div.product_prize
{
    font-family:    Font3;
    font-size:      3.5rem;
    color:          #ba733f;
    border-radius:  4px;
    padding-bottom: 10%;
    margin-top:     6%;
    text-align:     center;
    margin-left:    2%;
}

#content section.content_right article.content_right_article div.catalog_product div.last_product img.img_product
{
    width: 100%;
    background: url(../img/transpa2.png);
    border: 0;
    margin: 0;
}

#content section.content_right article.content_right_article div.catalog_product div.last_product img.cart
{
    background:     url(../img/transpa2.png);
    border:         0;
    width:          20%;
    transition:     box-shadow 1s;
    -webkit-transition: box-shadow 1s;
    border-radius:  4px;
    margin-left:    2%;
    float:          left;
}
#content section.content_right article.content_right_article div.catalog_product div.last_product img.cart:hover
{
    background:     url(../img/transpa.png);
    box-shadow:     0px 0px 3px 0px black inset;
    border:         0;
    width:          20%;
}

#content section.content_right article.content_right_article div.catalog_product div.last_product input[type=text].product_quantity
{
    padding: 5.3%;
    width: 9%;
    border: 1px solid orange;
    margin-left: 2%;
    box-shadow: 0px 0px 3px 0px black inset;
    float: left;
}

#content section.content_right article.content_right_article div.catalog_product div.last_product div.product_description
{
    font-size: 1rem;
    background: #f9cc91;
    color: #ba733f;
    padding: 3%;
    margin: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
/* End catalog*/

13500 #4 Sep '13

No me gusta nada como has codeado el CSS.

Dicho esto lo suyo seria saber el código de tu web, para saber que class aplicas a cada artículo, o si usas una div para todos en global, o div por filas, o.....

Puedes subir esa web local a internet? o abrir tu apache a internet para poder interactuar con ella?

2 respuestas

RaymaN #5 Sep '13 Sureño

La tercera caja tiene 1px menos, por lo que la siguiente se coloca debajo. Ponle altura fija.

3 respuestas

kraneok #6 Sep '13 Penitente

#4 Por favor, expón todos los fallos, para aprender mas.
#5 Voy a mirar eso.

1 respuesta

kraneok #7 Sep '13 Penitente

Creo que el problema proviene del tipo de fuente, que unos números sobresalen mas que otros.

kraneok #8 Sep '13 Penitente

#5 Correcto era eso, ¿ me podrías decir como lo has visto ?

1 respuesta

RaymaN #9 Sep '13 Sureño

#8 simplemente vi el pixel que faltaba a ojo, es lo que tiene ser obsesivo con cualquier detalle xD

2 1 respuesta

kraneok #10 Sep '13 Penitente

#9 Ah vale, osea viste el problema pero no el por qué xDD

kraneok #11 Sep '13 Penitente

#4 De verdad, me gustaría que me indicases en que puedo mejorar a la hora de codear CSS, gracias.

1 respuesta

13500 #12 Sep '13

#11 #5 y porque a los float hay que darles altura mínima xD

Por ejemplo, a la hora de mencionar clases usas delante "div.nombreclase" , "div." sobra, puedes asignar estilos directamente con .catalog_product o .last_product

Cuando pongas padding : 0%; no hace falta poner detras %, px, em, etc.... simplemente 0, padding: 0

Usas

#content section.content_right article.content_right_article div.catalog_product div.last_product input[type=text].product_quantity

no estoy muy seguro de para qué, pero supongo que para maquetar los input text pertenecientes a todas esas div class. Es más recomendable crear una clase y asignarsela al <input type='text' class='whatever' name='nombre' />

Luego utilizas una misma #id en varias clases, no se como tienes montado el codigo pero a mi entender una clase se puede usar varias veces, mientras que una #id solo debe ser usada una vez. Supongo que el div global que contiene a todas las demas div es la que posee el id='content'

Otra cosa, entiendo que con esto

spoiler


#content section.content_right article.content_right_article .catalog_product {
padding : 0%;
}
#content section.content_right article.content_right_article .catalog_product .last_product {
float : left;
width : 30%;
margin : 1%;
background : #efefef;
border-radius : 8px;
border : gray solid 1px;
}
#content section.content_right article.content_right_article .catalog_product .last_product .product_prize {
font-family : Font3;
font-size : 3.5rem;
color : #ba733f;
border-radius : 4px;
padding-bottom : 10%;
margin-top : 6%;
text-align : center;
margin-left : 2%;
}

aunque todas esas propiedades las vas aplicando de forma anidada es porque quieres aplicarselas a todas las clases que mencionas? por qué no haces entonces:

spoiler

#content section.content_right article.content_right_article .catalog_product .last_product .product_prize {
padding : 0%;
float : left;
width : 30%;
margin : 1%;
background : #efefef;
border-radius : 8px;
border : gray solid 1px;
font-family : Font3;
font-size : 3.5rem;
color : #ba733f;
border-radius : 4px;
padding-bottom : 10%;
margin-top : 6%;
text-align : center;
margin-left : 2%;
}

si lo que quieres es aplicar las propiedades solo a la última que vas mencionando ( .catalog_product , .last_product, .product_prize ) no hace falta mencionar todo lo anterior

Como te digo, no se como tienes montado el html, a lo mejor me estoy columpiando y pasando de listo, y necesitas que el css este así maquetado para que funcione con las div como las tengas jerarquizadas y anidadas xD

2 respuestas

kraneok #13 Sep '13 Penitente

#12 Puede que algunas de las cosas si las esté haciendo mal, como tu dices, voy a revisar código. Gracias de nuevo

Gantorys #14 Sep '13

#12 En lo de las clases, es manía mía pero me gusta poner a que elemento va referido esa clase (a no ser que sean en elementos distintos claro)...cuando tienes muchas clases se agradece.

NuKeD #15 Sep '13 Inocente

Mirate esto: http://www.marciobarrios.com/consejos-css

Igual está un poco anticuado pero tiene algunos consejos que te pueden ser utiles.

1 respuesta

Gantorys #16 Sep '13

#15 Tiene activado los warnings en producción, nice. Está lleno de ellos.

alterego #17 Sep '13

Prueba como han dicho arriba dándole un alto fijo.

También tienes las posibilidad de utilizar inline-block en vez de float

.... {
  display: inline-block;
  *display: inline;
  zoom: 1;
  vertical-align: top;
}

"*display: inline;" y "zoom: 1" Para que funcione en explorer.

ej: http://jsfiddle.net/pkEUW/

ZaO #18 Sep '13

#6 Te recomiendo que utilices un preprocesador como LESS, SASS o STYLUS te ayudara mucho a no repetirte y a organizar el código, podrás usar funciones y variables.

También te recomiendo que organices las propiedades por orden alfabético así lo tendrás mas ordenado y sera mas sencillo de buscar lo que te interesa.

eXtreM3 #19 Sep '13

De todas formas, las cajas no tienen que tener la misma altura por cojones.

Puedes tenerlas todas con float:left y cuando repitas 3 metes un div de corte con clear:both y a volar, ya las tienes agrupadas de 3 en 3 con altos dinámicos (pero quedarán en filas, eso sí)

1 respuesta

taltal #20 Sep '13

#19 lo que pasa que si está rescatando registros de la DB se le puede complicar si quiere hacer un loop de 3 en 3 y más si está usando algún tipo de CMS, prestashop o lo que sea que use.

La mejor opción si no quieres depender de poner el height ajustado con min-height seria usar algo como:
http://www.cssnewbie.com/example/equal-heights/plugin.html

De todas formas en su caso lo que haría yo sería o:

meter un max-height en la imagen (con este punto habria que ir con cuidado de respetar dimensiones de la imagen, si no se respetan quedará un pastelazo con deformaciones)
O
un div contenedor con un height fijado y overflow hidden. (De esta forma la imagen que sea más alta que el contenedor se recorta automáticamente y se respetan dimensiones)

Flipando con CSS

Usuarios habituales

Tags