2013-09-11 3 views
0

Это мое первое сообщение, так что привет! :) У меня проблема с кодированием моего сайта!Ползунок с левой стороны экрана в правой части содержимого

Могу ли я показать на этой картинке:

enter image description here

Я хочу сделать слайдер (с титрами для каждого слайда), который выравнивается по правому краю div.wrap контента. Но левая сторона его должна находиться в левой части экрана. Это должно измениться, чтобы разрешение экрана (всегда на правом краю содержание div.wrap Что-то вроде этого

enter image description here

Правый край div.wrap должен быть предел.

Я понятия не имею, как это сделать. ползунок должен быть фон фейдер? или IMG фейдер?

Пожалуйста, помогите мне или показать мне, как это сделать на аналогичном примере.

+2

Возможно, попробуйте поместить это изображение на элемент с 'position: absolute' внутри обертки (' position: relative'). Затем установите «right: 0;» и дайте ему переполнить столько, сколько нужно. Также вам может потребоваться установить 'body {overlow-x: hidden}' – Itay

ответ

0

в дополнение к @ ответ Итай, вот это jsfiddle, который может помочь вам wi -го CSS для этого.

http://jsfiddle.net/mmWq6/4/

Я использовал пример слайдера, который 500px по 200px. Это то, что я догадался, будет миниатюрной версией веб-страницы, которую, я надеюсь, вы создадите, если вы масштабируете окно «Результат» уже, а затем шире, вы увидите, что я думаю, что дизайн работает так, как вы этого хотите.

Это демо в основном демонстрирует комментарии Итай, который должны были иметь оболочку (#slider-wrapper), который имел CSS position: relative и DIV внутри, что с помощью CSS:

#slider-wrapper-inner { 
    position: absolute; 
    right: 0; 
} 

Тогда в которые .slide s, которые являются относительно и .caption s внутри них, которые расположены абсолютно, как указано выше (но с дополнительной строкой: bottom: 0;), чтобы они сидели в правом нижнем углу.

Смежные вопросы