Нужна помощь в доработке сайта

[ Закрыто ] Нужна помощь в доработке сайта, доработка верстки

Сообщений: 147 Регистрация: Май 2012

23 Апреля 2015 15:53

Как сделать так чтобы кнопка "Купить" была на одном уровне, а не прыгала в зависимости от количества строк текста как показано на картинке. Можно допустим ее опустить на одном уровне в нижнюю часть блока, как это сделать ?

Прикрепленные файлы

111111.JPG (17.23 КБ) [ Скачать ]

Изменено: Андрей - 23 Апреля 2015 15:53

Андрей

Сообщений: 147 Регистрация: Май 2012

23 Апреля 2015 15:53

Вот код вывода:

Код

<div class="box">
  <div class="box-heading"></div>
  <div class="box-content">
    <div class="box-product">   <div>
     <div class="image">картинка</div>
     <div class="name">текст</div>
      <form>
      <input type="button" value=" РљСѓРїРёС‚СЊ " onclick="location.href = '<?php echo $product['href']; ?>' " id="button-cart" class="button">
      </form>
   </div>
   <?php } ?>
    </div>
  </div>
</div>

Вот CSS:

Код

.box {
    margin-bottom: 20px;
}
.box .box-heading {
    -webkit-border-radius: 7px 7px 0px 0px;
    -moz-border-radius: 7px 7px 0px 0px;
    -khtml-border-radius: 7px 7px 0px 0px;
    border-radius: 7px 7px 0px 0px;
    border: 1px solid #DBDEE1;
    background: url('../image/background.png') repeat-x;
    padding: 8px 10px 7px 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 14px;
    color: #333;
}
.box .box-content {
    background: #FFFFFF;
    -webkit-border-radius: 0px 0px 7px 7px;
    -moz-border-radius: 0px 0px 7px 7px;
    -khtml-border-radius: 0px 0px 7px 7px;
    border-radius: 0px 0px 7px 7px;
    border-left: 1px solid #DBDEE1;
    border-right: 1px solid #DBDEE1;
    border-bottom: 1px solid #DBDEE1;
    padding: 10px;
}
/* box products */
.box-product {
    width: 100%;
    overflow: auto;
}
.box-product > div {
    width: 157px;
    height: 270px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    margin: 8px;
    padding: 7px;
    background: #F8F8F8;
    border: 1px solid #E1E1E1;
    -webkit-transition: box-shadow .3s;
    -moz-transition: box-shadow .3s;
    transition: box-shadow .3s;
    -webkit-box-shadow: 0 0 3px 0 #E9E9E9;
    -moz-box-shadow: 0 0 3px 0 #E9E9E9;
    box-shadow: 0 0 3px 0 #E9E9E9;
}

#column-left   .box-product > div , #column-right .box-product > div{
    width: 155px;
    margin-right: 0px;
}

#column-left + #column-right + #content .box-product > div {
    width: 119px;
}
.box-product .image {
    display: block;
    margin-top: 2px;
    margin-bottom: 4px;
}
.box-product .image img {
    padding: 3px;
    border: 1px solid #E7E7E7;
}

Изменено: Андрей - 23 Апреля 2015 15:55

paltarasych

Сообщений: 3289 Регистрация: Янв 2011

23 Апреля 2015 20:19

Андрей, пропишите для батона отдельный класс, (может он есть, но его нет в этом куску стилей) и прижмите его снизу

Биржа криптовалюты

Отличный хостинг Webhost1

Андрей

Сообщений: 147 Регистрация: Май 2012

23 Апреля 2015 21:35

Цитата
paltarasych пишет: Андрей, пропишите для батона отдельный класс, (может он есть, но его нет в этом куску стилей) и прижмите его снизу

Та я бы с радостью прописал, но не получается )))) я не силён в этом деле ) Пробовал со словарем, но ничего не получается... А как нужно написать этот класс для кнопки ?

paltarasych

Сообщений: 3289 Регистрация: Янв 2011

24 Апреля 2015 00:16

Андрей, класс button есть в стилях - ищите, и просто добавьте к нему:

Код
position:absolute; bottom:0;

Dexter

Сообщений: 395 Регистрация: Дек 2013

24 Апреля 2015 09:12

paltarasych, при таком раскладе нужно еще добавить
.box{position:relative}
иначе кнопка уедет далеко вниз.

Изменено: Dexter - 24 Апреля 2015 09:13

Мои услуги: Создание и разработка сайтов на Wordpress/фреймворках, создание шаблонов на WP, любая верстка по макету и без, разработка функционала. skype: sonicks12, email: spklkr@yandex.ru

Андрей

Сообщений: 147 Регистрация: Май 2012

24 Апреля 2015 09:24

Не помогло. Кнопка уезжает в низ сайта. Сделал вот так :

a.button, input.button {
    position:absolute;
    bottom:0;
    cursor: pointer;
    color: #FFFFFF;
    line-height: 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    background: url('../image/button.png') repeat-x;
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -khtml-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    -webkit-box-shadow: 0px 2px 2px #DDDDDD;
    -moz-box-shadow: 0px 2px 2px #DDDDDD;
    box-shadow: 0px 2px 2px #DDDDDD;
}

.box {
    margin-bottom: 20px;
    position:relative;
}

Вот ниже все по button

Код

/* button */
a.button, input.button {
    cursor: pointer;
    color: #FFFFFF;
    line-height: 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    background: url('../image/button.png') repeat-x;
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -khtml-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    -webkit-box-shadow: 0px 2px 2px #DDDDDD;
    -moz-box-shadow: 0px 2px 2px #DDDDDD;
    box-shadow: 0px 2px 2px #DDDDDD;
}
a.button {
    display: inline-block;
    text-decoration: none;
    padding: 6px 12px 6px 12px;
}
input.button {
    margin: 0;
    border: 0;
    height: 24px;
    padding: 0px 22px 0px 22px;
}
a.button:hover, input.button:hover {
    background-position: 0px -24px;
}
.buttons {
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    overflow: auto;
    padding: 6px;
    margin-bottom: 20px;
}
.buttons .left {
    float: left;
    text-align: left;
}
.buttons .right {
    float: right;
    text-align: right;
}
.buttons .center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

Dexter

Сообщений: 395 Регистрация: Дек 2013

24 Апреля 2015 09:47

Вы скиньте адрес сайта в личку, скажу точно, как сделать.

Андрей

Сообщений: 147 Регистрация: Май 2012

24 Апреля 2015 10:24

Цитата
Dexter пишет: Вы скиньте адрес сайта в личку, скажу точно, как сделать.

Проблема решена благодаря Dexter
Спасибо большое!!!

Prapovednik

Модератор

Сообщений: 65885 Регистрация: Мар 2010

#10

28 Апреля 2015 08:47

Цитата
Андрей пишет: Проблема решена

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

* обращение к пользователям - > если Ваша тема потеряла свою актуальность, то, пожалуйста, отпишитесь об этом в теме и скиньте ссылку на тему мне в ЛС.

Продвигай сайты ЛЮБОЙ тематики! Вечные ссылки и статьи.
*
Тренды SEO 2026: Как продвигать сайт и сделать его магнитом для посетителей (и поисковиков в придачу)

Похожие темы:

04.01.2020 16:51	Нужна помощь по шаблону ocStore
13.07.2019 17:23	Нужна анимированная открытка
13.07.2019 17:21	Помощь по виду новостей
13.01.2019 14:20	Нужна помощь со спойлером в блоке, движок DLE
24.09.2018 12:12	Нужна помощь в верстке

Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)

Новые темы	Объявления	Свободное общение
09:39 Эпоха СДЛ прошла. Как мы выживаем в 2026 году? 09:37 Google начал жёстко давить за манипуляции + апдейт Яндекса 16 апреля - у кого что изменилось 20:36 ИКС Яндекс АПдейт 1 апреля 2026. Обновлён алгоритм расчёта 17:30 стратегии свежести контента в 2026 что реально работает?? 17:29 Апдейт 14 апреля: ощущение, что режет не только выдача 17:28 Штрафы РСЯ за скорость - выкинет ли Яндекс сайт на дешевом хостинге? 17:25 Взломы и уязвимости в 2026 - реально ли новичку защитить свой блог?	13:44 Вериф аккаунты АВИТО + платежи 13:15 Мониторинг обменников Сrypto-scout.io 09:17 Monitex: Мониторинг с кэшбэком 80% в USDT 04:37 От $0.015 за IP \| $0.68 за ГБ \| 9PROXY.COM \| 20+ млн резидентных прокси \| 99,95% аптайм \| Без чёрных списков 03:57 Продажа аккаунтов HH.RU 00:55 SOCKS5 приватные прокси на 30 дней для PayPal 00:54 Google Voice аккаунты для бесплатных SMS и звонков	12:54 Всех с праздником! 09:44 С юмором по жизни! 09:41 Осталось 3-5 месяцев до блокировки YouTube в России, — заявил Клименко 22:41 Ставки на супер тренды в спорте 12:47 Добро пожаловать в цифровой мир... 06:27 Точные прогнозы на футбол 06:07 Список обновленных тем пуст...