CSS-размещение изображения в зависимости от разрешения экрана

Question

Если вы перейдете к http://magee.darkslidedesign.com, вы увидите изображения на главной странице в jQuery Slides. По обе стороны от слайда есть кнопки «предыдущий» и «следующий».

Я разместил эти изображения в определенном месте на следующем CSS ...

#slides .next,#slides .prev {
    position:absolute;
    margin-top: -215px;
    width:24px;
    height:43px;
    display:block;
    border: 0;
}

#slides .next {
    margin-left: 827px;
}

Мне нужна помощь, чтобы выяснить, как лучше всего расположить эти стрелки в том же месте, в котором они имеют разрешение 1600x900, если у человека разрешение ниже или выше.

Помощь

Answer 1

Попробуйте что-то вроде этого:

#slides {
    position:relative;
}

#slides .next,#slides .prev {
    position:absolute;
    top:30px; // use this instead of margins, of course change the value
    left: -30px // Try with this
    width:24px;
    height:43px;
    display:block;
    border: 0;
}

#slides .next {
    right: -30px; // Change the value
}

Answer 2

Это очень трудно исправить, так как HTML-код недопустим в первую очередь.Кроме того, иметь абсолютную позицию на ваших стрелках не очень разумно, так как она начинает сильно зависеть от заголовка, в то время как она должна зависеть только от самого слайдера.Похоже, что при изменении позиции: абсолютная;внутри #slides .next,#slides .prev ползунок перестает работать правильно.Кажется, будто ползунок помещается туда, где сидит .prev.Поэтому .prev похож на заполнитель.

Исходя из этих причин, я твердо верю, что вы не можете решить эту проблему только с точки зрения CSS.Я рекомендую оптимизировать ваш HTML, сделать его действительным.И возможно использовать другой слайдер.Потому что обычно размещение стрелок вне слайдера выглядит примерно так:

<style>
#hero_wrapper {float: left; border: 1px dotted blue; padding: 0px 60px;}
    #hero_images {border: 1px dotted red; width: 500px; height: 300px;}
    #hero_prev,
    #hero_next {position: relative; margin-top: 110px; padding: 20px; font-size: 30px; font-weight: bold; border: 1px dotted green; /* #hreo_next special: */ float: left; margin-left: -60px;}
    #hero_next {float: right; margin-right: -60px;}
</style>
<div id="hero_wrapper">
    <div id="hero_prev">&lt;</div>
    <div id="hero_next">&gt;</div>
    <div id="hero_images"></div>
</div>

^{[ Просмотр вывода ]}

Мне жаль, что я не могу дать вам конкретные ответы, но я надеюсь, что, когда вы поймете, насколько проста базовая концепция ... вы пересмотрите возможность использования этого ползунка (поскольку я предполагаю, что структура DOM ползунков не оптимальна).Кроме того, технически вы просто находите слайдер с автономными стрелками (лично мне нравится плагин jQuery Orbit ) и просто используете мою базовую концепцию структуры слайдера.Потому что в этом случае вам нужно только сделать #hero_images слайд и привязать функции prev и next к стрелкам и вуаля!

Некоторые указатели:

• Как я уже говорилв приведенном выше комментарии изображения вашего меню должны быть в виде спрайта, чтобы белый фон не отображался при наведении курсора.
• Метатеги должны заканчиваться / в xhtml.
• Также Google Analytics настоятельно рекомендует размещать свой код перед </body> в нижнем колонтитуле.
• В современной разработке веб-сайтов никто не хочет границ для изображений.И если они это сделают, то они все равно установят его вручную (.someimg {border: 1px solid black;}).Таким образом, чтобы избежать недопустимого xhtml , затем добавьте предварительно определенное значение img в начало вашего css: img {border: 0px;}
• Также у вас есть некоторые другие нестандартные атрибуты. Используйте валидатор!
• Обычно в слайдере изображения помещаются в список ul.

Answer 3

Хм ... макет довольно прикольный ... одно, что вы можете сделать, это удалить margin-left: 100px; на .prev, удалить margin-left: 827px на .next, добавить right:0px; к .next и наконец добавьте position:relative к контейнеру шириной 60%, в котором хранится div слайдов. Вы также можете поместить min-width: 750px; в то же самое деление шириной 60%.

, если вы всегда хотите, чтобы они оставались в одном месте, задайте делителю шириной 60% фиксированную ширину 800 пикселей или около того (width:800px).