Перейти к содержимому



Отступ с верху, cнизу и вертикальное выравнивание

#1

Поделиться сообщением #1



apelcun77

apelcun77
  • Неактивные
  • 6 сообщений
  • Репутация: 0
0

Отправлено 08 Апрель 2014 - 18:16

<div id="position">
<label><input class="pickimg" type="radio" name="img_position" value="top"><img src="images/position_top.png" title="По верху"></label> 
<label><input class="pickimg" type="radio" name="img_position" value="mid"><img src="images/position_mid.png" title="По середине"></label> 
<label><input class="pickimg" type="radio" name="img_position" value="bot"><img src="images/position_bot.png" title="По низу"></label>
</div> 
<div id="clothes"><img id="set_img_color" value="'1'" src="'.images/test'"></div>
$(document).ready(function(){
    $('#position').on('click', 'input', function () {
        if (this.value == "top") {
$("#set_img_color").css('padding', '190px 0px 0px 0px');
}
   if (this.value == "mid") {
$("#set_img_color").css('padding', '240px 0px 0px 0px');
}
   if (this.value == "bot") {
$("#set_img_color").css('padding', '290px 0px 0px 0px');
}
    });
 });

Есть 2 кода - 1 HTML, другой jquery. Я не знаю как правильно настроить CSS. Хочу сделать чтобы когда нажимаеш "По низу" то set_img_color сдвигался в самый низ и от низа делал отступ в 150px. Когда нажимаеш "по верху" то сдвигать в самый верх и от верха делать отступ 150px. Когда нажимаеш "По середине" то выровнять вертикально по середине.


 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Пустые боковые поля и дизайна
  2. Html верстка на конкретном примере
  3. Как выровнять элементы списка в строчку
  4. Верстаем горизонтальное меню по мотивам MasterWEBS
  5. Как сделать промежутки между банерами и сбоку и с верху и снизу

#2

Поделиться сообщением #2



Ринат

Ринат
  • Неактивные
  • 756 сообщений
  • Репутация: 50

Отправлено 08 Апрель 2014 - 18:23

А самого ресурса нет?


  • 0
Создание и продвижение сайтов


#3

Поделиться сообщением #3



moving

moving
  • Пользователь
  • 423 сообщений
  • Репутация: 28

Отправлено 09 Апрель 2014 - 09:50

Ну здесь можно попробовать следующее, для начала меняем padding на margin

Отступ по низу

$("#set_img_color").css('margin', '100% 0px 150px 0px');

По верху:

 if (this.value == "top") {
$("#set_img_color").css('margin', '150px 0px 100% 0px');

По центру

  if (this.value == "mid") {
$("#set_img_color").css('margin', '40% auto');
}

Проценты регулируй по месту. Конечно надо смотреть непосредственно весь код, но по идее должно работать


  • 1


Оформление форума – IPBSkins.ru