Форум Сайтостроение Веб-строительство

CSS - float: left; - небольшая проблемка :)

12
[Удален]
1241

Товарищи, пАмАгите! У меня с помощью css выводится 3 товара в строке. НО! При добавлении 1-го или 2-го товара в корзину смещаются вниз нижние товары - см. приаттаченную картинку. При этом если добавлять в корзину 3-й товар, то никакого смещения нет.

В общем какой-то мой css косяк. Не знаете как исправить?

Вот сайт

jpg ttt.jpg
Z
На сайте с 14.01.2010
Offline
20
zlideni
#1

Пропиши в файл стилей например вот это

form.shop_form {
position: relative;
}
form.shop_form div.error {
position: absolute;
}
[Удален]
#2

Это из-за того, что блоки разной высоты.

[Удален]
#3
zlideni:
Пропиши в файл стилей например вот это

Я прописал, но ничего не получилось. Наверное что-то неправильно прописал.

Вот кусок кода:

/* shop */
/* shop общие классы */
.shop
{
margin-bottom: 30px;
}
.left .shop
{
margin-bottom: 0px;
}
.shop_name
{
font-weight: bold;
}
.shop_img
{
float:none;
margin:3px 10px 3px 0px;
}
.left .shop_img
{
float: none;
margin: 0px;
}
.shop_price
{
font-weight: bold;
}
.shop_price .shop_price_value
{
font-weight: normal;
}
.shop_price_currency
{
font-weight: normal;
}
.shop_old_price
{
font-weight: bold;
}
.shop_old_price .shop_price_value
{
text-decoration: line-through;
font-weight: normal;
}
.shop_discount
{
font-weight: bold;
}
.shop_discount_value
{
font-weight: normal;
}
.shop_param
{
font-weight: bold;
}
.shop_param .shop_param_value
{
font-weight: normal;
}
.shop_article
{
font-weight: bold;
}
.shop_article_value
{
font-weight: normal;
}
.shop_anons{}
.shop_text{}

.shop_form
{
margin:0px;
padding: 0px;
}
.shop_form .shop_depend_param
{
font-weight: bold;
margin-top: 10px;
clear: both;
}
.shop_form .shop_price{}
.shop_form .shop_price .shop_price_value{}
.shop_form .shop_price .shop_price_currentcy{}
.shop_form .shop_old_price{}
.shop_form .shop_old_price .shop_price_value{}
.shop_form .shop_old_price .shop_price_currency{}
.shop_form .shop_form_param{}
.shop_form .inpselect{}
.shop_form .inpnum{}
.shop_form .shop_no_buy{}
.shop_form .button{}

/* shop_list список товаров */
.shop_list{}
.shop_list .shop
{
margin-bottom: 21px;

float:left;
width: 160px;
padding-right: 13px;
}
.shop_list{}
.shop_list .shop{}
.shop_list .shop_name{}
.shop_list .shop_img{}
.shop_list .shop_price{}
.shop_list .shop_old_price{}
.shop_list .shop_discount{}
.shop_list .shop_article{}
.shop_list .shop_param{}
.shop_list .shop_anons{}
.shop_list .shop_form{}
.shop_list .shop_cat_anons{}
.shop_list .shop_cat_text{}
.shop_list .shop_cat_img
{
float: left;
margin: 0px 10px 10px 0px;
}
.shop_list .shop_cat_all_img
{
padding-bottom: 22px;
}
.shop_list .shop_cat_link
{
clear: both;
padding: 0px 0px 22px 20px;
}
.shop_list .show_all
{
clear: both;
}
.shop_order{padding-bottom: 20px;}
.shop_order a:link, .shop_order a:visited
{
text-decoration: none;
}
.shop_order .active
{
color: #ff0000;
}
.shop_list .previous_next_links{}
.shop_list .previous_link{}
.shop_list .next_link{}

/* shop_id страница товара */
.shop_id{}
.shop_id .shop_price{}
.shop_id .shop_old_price{}
.shop_id .shop_discount{}
.shop_id .shop_article{}
.shop_id .shop_param{}
.shop_id .shop_anons{}
.shop_id .shop_text{}
.shop_id .shop_form{}
.shop_id .shop_all_img{}
.shop_rel{}
.shop_rel .shop_img{}
.shop_rel .shop_price{}
.shop_rel .shop_old_price{}
.shop_rel .shop_discount{}
.shop_rel .shop_article{}
.shop_rel .shop_param{}
.shop_rel .shop_anons{}
.shop_rel .shop_form{}
.shop_id .previous_next_links{}
.shop_id .previous_link{}
.shop_id .next_link{}

/* show_block шаблонная функция */
.shop_block{}
.shop_block h2{}
.shop_block .shop{}
.shop_block .shop_name{}
.shop_block .shop_img{}
.shop_block .shop_price{}
.shop_block .shop_old_price{}
.shop_block .shop_discount{}
.shop_block .shop_anons{}
.shop_block .shop_text{}
.shop_block .shop_form{}
.shop_block .show_all{}

/* show_search шаблонная функция */
.shop_search{}
.shop_search .infoform{}
.shop_search .infofield{}
.shop_search .inptext
{
margin: 3px 0px 3px 0px;
}
.shop_search .inpshort{}
.shop_search .inpcheckbox{}
.shop_search .button{}
.shop_search_name{}
.shop_search_name .infofield{}
.shop_search_name .inptext{}
.shop_search_description{}
.shop_search_description .infofield{}
.shop_search_description .inptext{}
.shop_search_price{}
.shop_search_price .infofield{}
.shop_search_price .inpnum{}

Medrik добавил 03.06.2011 в 19:00

Сашко:
Это из-за того, что блоки разной высоты.

Высоту блоков ваще там нельзя задавать. Нужно понимать и учитывать, что размеры картинок и количество строк визу (цена, артикул ...) будут разными.

В Рекламной сети Яндекса Расчет отложенной конверсии появился В Яндекс.Метрике изменились принципы
Z
На сайте с 14.01.2010
Offline
20
zlideni
#4

Вот в этот файл, добавить то что я прописал во втором посте

[Удален]
#5
zlideni:
Вот в этот файл, добавить то что я прописал во втором посте

zlideni, спасибо, это пофиксило проблему!

НО, теперь исчез автоматический отступ. Т. е. кoгда добавляется новая строка - В корзине 1 шт. - то нижний блок из трёх товаров как-бы отодвигался немного вниз под воздействием этой строки. Таким образом расстояние верхних 3 позиций (от надписи В корзине 1 шт.) от нижних 3-х позиций (до верхних кромок фотографий) всегда сохранялось одинаковым. А теперь оно стало фиксированным, не сстало овтоматического отступа вниз. Вот это можно как-то исправить?

Мой первый интернет-магазин, прошу Скрыть блок только css Верстка.
Z
На сайте с 14.01.2010
Offline
20
zlideni
#6

От этого

то нижний блок из трёх товаров как-бы отодвигался немного вниз
и возникала проблема...

Можете сделать просто нижний отступ больше....

найдите в том-же файле что редактировали....

.shop_list .shop

и сделайте данное значение

margin-bottom: 21px;

больше например 30px

[Удален]
#7
zlideni:
От этого и возникала проблема...
Можете сделать просто нижний отступ больше....
найдите в том-же файле что редактировали....

и сделайте данное значение
больше например 30px

Это я знаю. Но хотелось не просто увеличить отступ.

Хотелось чтобы всё было как прежде - отступ автоматом :)

Кстати, странная вещь - ведь если я добавлял 3-тий товар в корзину, то ничего не ломалось. И даже если добавлял первый и второй товар вместе, то тоже всё было нормально. Ломалось именно когда добавлял один товар - первый или второй.

Medrik добавил 03.06.2011 в 19:49

Вами предложенное решение удобно только если количество строк под фотками одинаковое. Но если я добавляю ещё одну характеристику (строку), например Артикул: 001, то всё снова ломается :) К сожалению ...

Партнеры Яндекс Маркета смогут Продавцы Яндекс Маркета смогут В Яндекс Лавке появилась
[Удален]
#8

Сделайте вывод на таблицах и избавитесь от этих проблем.

[Удален]
#9
Сашко:
Сделайте вывод на таблицах и избавитесь от этих проблем.

Дая только ЗА! Но совсем не знаю КАК и не умею это сделать. А так бы конечно так и сделал :)

Сайт стоит на движке. В принципе я даже знаю в каком файле нужно что-то там делать, но я далековаст от PHP :) А в css немного понимаю ЧТО к ЧЕМУ.

Google о том, стоит Джон Мюллер ответил на Мэтт Каттс попросил не
S0
На сайте с 20.11.2010
Offline
32
snk001
#10

Medrik, если вы добавите в CSS это:

div.shop:nth-child(3n+1) {clear: both}

то решите проблемы практически для всех, кроме пользователей понято-какого-браузера (коим вы и пользуетесь, кстати). Но иначе без изменения кода никак.

Google AdWords будет поддерживать Google и Linux стали Mozilla усилила защиту паролей
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий