Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 21.09.2013, 21:56   #1
Flanger05
Новичок
Джуниор
 
Регистрация: 21.09.2013
Сообщений: 2
По умолчанию Трудности с одним моментом в резиновом дизайне страницы

Здравствуйте. Есть такая примерная страница со слайдером: http://magazavr.ru/slide/
Подскажите - как сделать, если возможно, чтобы при низком разрешении (например 1024x768, не ниже), горизонтальной прокрутки не было. Как это лучше организовать на данной странице при наличии крупного фото? Как описать лучше в CSS?
Буду очень благодарен за помощь
Небольшие коды html и css указанной страницы:
Код HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Текст</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="wrapper">
    <div id="container">
        <div class="sliderbutton" id="slideleft" onclick="slideshow.move(-1)"></div>
        <div id="slider">
            <ul>
                <li><img src="1.jpg" width="1000" height="667" alt="Image One" /></li>
                <li><img src="2.jpg" width="1000" height="667" alt="Image Two" /></li>
                <li><img src="3.jpg" width="1000" height="667" alt="Image Three" /></li>
                <li><img src="4.jpg" width="1000" height="667" alt="Image Four" /></li>
            </ul>
        </div>
        <div class="sliderbutton" id="slideright" onclick="slideshow.move(1)"></div>
        <ul id="pagination" class="pagination">
            <li onclick="slideshow.pos(0)"></li>
            <li onclick="slideshow.pos(1)"></li>
            <li onclick="slideshow.pos(2)"></li>
            <li onclick="slideshow.pos(3)"></li>
        </ul>
    </div>
</div>
<script type="text/javascript">
var slideshow=new TINY.slider.slide('slideshow',{
    id:'slider',
    auto:4,
    resume:true,
    vertical:false,
    navid:'pagination',
    activeclass:'current',
    position:0,
    rewind:false,
    elastic:true,
    left:'slideleft',
    right:'slideright'
});
</script>
</body>
CSS
Код HTML:
* {margin:0; padding:0}
body {font:12px Verdana,Arial; color:#555; background:black}
p {line-height:1.4; margin-bottom:12px}
#wrapper {width:1115px; margin:50px auto}
#container {position:relative; background:black; padding:32px; height:667px; border-right:0px solid #ccc; border-bottom:0px solid #ccc}
.sliderbutton {float:left; width:25px; height:235px; cursor:pointer}
#slideleft {background:url(images/icons.gif) -50px -265px no-repeat}
#slideleft:hover {background-position:-0 -265px}
#slideright {background:url(images/icons.gif) 0 90px no-repeat}
#slideright:hover {background-position:-50px 90px}
#slider {float:left; position:relative; overflow:auto; width:1000px; height:667px}
#slider ul {position:absolute; list-style:none; top:0; left:0}
#slider li {float:left; width:1000px; height:667px}
.pagination {position:absolute; top:40px; right:70px; list-style:none; height:25px}
.pagination li {float:left; cursor:pointer; height:8px; width:8px; background:#ccc; margin:0 4px 0 0; border:1px solid #fff}
.pagination li:hover, li.current {background:#fff}
Flanger05 вне форума Ответить с цитированием
Старый 21.09.2013, 23:11   #2
grominfo
Форумчанин
 
Аватар для grominfo
 
Регистрация: 30.05.2011
Сообщений: 651
По умолчанию

Цитата:
Подскажите - как сделать, если возможно, чтобы при низком разрешении (например 1024x768, не ниже), горизонтальной прокрутки не было
Ну пропиши в CSS что-то типа этого:

Код:
#slider img {max-width:1024px;}
Если же тебе надо, чтобы этот стиль применялся только при низком разрешении экрана, то нужно вычислять его ширину. Например:

Код:
var WidthScreen = $(window).width();
if (WidthScreen<=1024){
   $('#slider img').css('max-width', '1024px');
}
Создание, программирование и сопровождение сайтов любой сложности.
Изготовление программ на заказ.
Список услуг и портфолио на сайте www.andreygrom.ru
grominfo вне форума Ответить с цитированием
Старый 22.09.2013, 09:45   #3
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

дак там уже прописано все для картинок 1к по горизонтале.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 05.10.2013, 10:20   #4
Vohakisa
Пользователь
 
Регистрация: 11.05.2009
Сообщений: 47
По умолчанию

Я новичок в этом деле, но встречалось, что страница без доктайпа не так грузится, как описано в коде, пропиши в верхней строчке html документа
Код:
<!DOCTYPE HTML>
И к значениям width и height, как и к остальным атрибутам тегов и свойствам CSS, советую дописывать "px", думаю поможет.

Если вопрос конечно ещё актуальный.
Vohakisa вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Невизульное определение неправильной кодовой страницы веб-страницы Pcrepair Общие вопросы Delphi 5 15.09.2013 13:51
Использование новых технологии в веб дизайне {tktu HTML и CSS 4 30.09.2011 08:02
Вставка особой нумерации на нечетные страницы с разрывом страницы akokin Microsoft Office Word 13 20.10.2009 15:23
Динамическое изменение URL страницы в JavaScript без перезагрузки страницы ilusha JavaScript, Ajax 7 25.02.2009 09:59
Как сделать разрыв страницы печати по условию и узнать номер страницы Leanna Microsoft Office Excel 2 21.01.2008 06:59