Трудности с одним моментом в резиновом дизайне страницы - HTML и CSS

Flanger05 · 21.09.2013, 21:56

Здравствуйте. Есть такая примерная страница со слайдером: 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}

grominfo · 21.09.2013, 23:11

Цитата:

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

Ну пропиши в CSS что-то типа этого:

Код:

#slider img {max-width:1024px;}

Если же тебе надо, чтобы этот стиль применялся только при низком разрешении экрана, то нужно вычислять его ширину. Например:

Код:

var WidthScreen = $(window).width();
if (WidthScreen<=1024){
   $('#slider img').css('max-width', '1024px');
}

Naive · 22.09.2013, 09:45

дак там уже прописано все для картинок 1к по горизонтале.

Vohakisa · 05.10.2013, 10:20

Я новичок в этом деле, но встречалось, что страница без доктайпа не так грузится, как описано в коде, пропиши в верхней строчке html документа

Код:

<!DOCTYPE HTML>

И к значениям width и height, как и к остальным атрибутам тегов и свойствам CSS, советую дописывать "px", думаю поможет.

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

22.09.2013, 09:45	#3
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	дак там уже прописано все для картинок 1к по горизонтале. Alar, верни репу!

05.10.2013, 10:20	#4
Vohakisa Пользователь Регистрация: 11.05.2009 Сообщений: 47	Я новичок в этом деле, но встречалось, что страница без доктайпа не так грузится, как описано в коде, пропиши в верхней строчке html документа Код: `<!DOCTYPE HTML>` И к значениям width и height, как и к остальным атрибутам тегов и свойствам CSS, советую дописывать "px", думаю поможет. Если вопрос конечно ещё актуальный.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Невизульное определение неправильной кодовой страницы веб-страницы	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