Xpoint
   [напомнить пароль]

Слайды

Метки: [без меток]
2007-04-27 10:32:55 [обр] Иван Шумков(0/77)[досье]

Пытаюсь сверстать страницу с слайдами. Слайд ширина слайда должна быть 50% ширины окна броузера и 100% по высоте. То есть скролится страница горизонтально. Пробую:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
    <head>
        <title>A Few Dudes</title>
        <style type="text/css">
body {
    margin: 0;
    padding: 0;
    height: 100%;
    max-height: 100%;
}
.slide {
   width: 50%;
   height: 100%;
   float: left;
   background: #ccc;
}
        </style>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    </head>
    <body>
       <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
    </body>
</html>

Результат не тот.

спустя 2 часа 47 минут [обр] Дмитрий(0/2)[досье]
Иван Шумков[досье]
Конечно не тот, задумайтесь хотя бы, относительно чего вы указываете ширину вашего "слайда"? Каким образом они должны выстроиться в ряд, если их влезает максимум 2 штуки?
спустя 8 минут [обр] Алексей Севрюков(44/1292)[досье]
сообщение промодерировано
Дмитрий[досье] читайте внимательнее:
То есть скролится страница горизонтально.
спустя 14 минут [обр] Дмитрий(0/2)[досье]
Алексей Севрюков[досье]
Прочитал внимательнее! И? Что Вы этим хотели сказать?
спустя 2 минуты [обр] Дмитрий(0/2)[досье]
Да и ещё, забыл, Иван Шумков[досье] чисто ради интереса убери своё DTD и сравни результат!
спустя 2 минуты [обр] Алексей Севрюков(44/1292)[досье]

Дмитрий[досье] Хорошо, попробую по другому, Вы пишите:

Конечно не тот, задумайтесь хотя бы, относительно чего вы указываете ширину вашего "слайда"? Каким образом они должны выстроиться в ряд, если их влезает максимум 2 штуки?

Автор задает вопрос:

Слайд ширина слайда должна быть 50% ширины окна броузера и 100% по высоте. То есть скролится страница горизонтально.

Если Вы не поняли что он спросил - зачем отвечаете? Расшифровываю: автор хочет чтобы ширина каждого слайда была 50% от ширины окна браузера, если слайдов больше двух то должен появляться горизонтальный скроллинг, а слайд переносится на следующую строку не должен. Вы ведь понимаете что ряд может быть и шире окна браузера?

спустя 1 час 10 минут [обр] Дмитрий(0/2)[досье]
Алексей Севрюков[досье]
Каким образом, по вашему, 3 объекта по 50% от ширины родителя могут влезть в 100% ширины родителя? Вы бы хоть на этот код посмотрели! Да попробовали например ширину .slide поставить как 33% например!
спустя 12 минут [обр] Алексей Севрюков(44/1292)[досье]
Дмитрий[досье] Хорошо, для особо непонимающих:
http://www.yandex.ru/yandsearch?text=%F1%EB%E0%E9%E4
Каким образом контент этой страницы влезает в 100% по высоте?
спустя 2 минуты [обр] Иван Шумков(0/77)[досье]
Простит что перебиваю, решение у такой задачи существует?
спустя 4 минуты [обр] Евгений Петров(172/1055)[досье]
Могу предложить только вложение блоков:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html;charset=windows-1251">
<style type="text/css">
html,body{height:100%;}
body{margin:0;padding:0;}
#d{position:relative;width:50%;height:100%;background:#69c;}
.d{position:absolute;width:100%;height:100%;left:100%;top:0;background:#369;}
.d .d{background:#f60;}
</style>
</head>
<body>
<div id="d">
  <div class="d">
    <div class="d"></div>
  </div>
</div>
</body>
</html>
спустя 43 секунды [обр] Алексей Севрюков(44/1292)[досье]
Иван Шумков[досье] В IE7 у меня получилось это сделать дописыванием clear: right в .slide. А вот с FF никак не получается, правда я в верстке не очень хорошо разбираюсь.
спустя 1 минуту [обр] Дмитрий(0/2)[досье]
Алексей Севрюков[досье]
Не говорите ерунды! Послушайте, у Вас установлен Firefox? Если да, то откройте в нем этот документ, только предварительно установите body в 50% высоты, далее Инструменты->Инспектор DOM, там в левом дереве выбирайте элемент BODY и браузер вам визуально покажет, что никуда он body не растягивает, 3 элемент просто вылезает за его пределы! А вертикальная прокрутка появляется чисто из вежливости разработчиков!
спустя 1 минуту [обр] Дмитрий(0/2)[досье]
Иван Шумков[досье]
Нет, сделать этого в относительных еденицах вам не удастся!
спустя 1 минуту [обр] Алексей Севрюков(44/1292)[досье]
Дмитрий[досье] Наконец то поняли. Вот автору и нужно чтобы третий и последующие элементы вылезали за его пределы вправо и появлялась горизонтальная прокрутка.
спустя 1 минуту [обр] Евгений Петров(172/1055)[досье]
Дмитрий[досье] Мы не обсуждаем невыставления 100% высоты для html. И про то, что MZ не растягивает элементы с указанным размером (кроме некоторых исключений), все тоже знают. Вы по делу что-нибудь скажете?
спустя 1 минуту [обр] Дмитрий(0/2)[досье]
Евгений Петров[досье]
Я сказал, причем максимально четко и ясно!
спустя 2 минуты [обр] Евгений Петров(172/1055)[досье]
Дмитрий[досье] Давайте поясню. Иван Шумков[досье] описал задачу, продемонстрировал неудачную попытку решения. Он не просит обсуждать, что в этой попытке не так - понятно, что она неудачна. Он просит подсказать решения проблемы. А Вы устраиваете крик с объяснениями того, что и так известно.
спустя 7 минут [обр] Дмитрий(0/2)[досье]

Евгений Петров[досье]
Я устраиваю крик? Простите, а где именно Вы это заметили? Я в первом же (2-ом в общем списке) сообщении четко изложил, что сама затея некорректна! На что мне незамедлительно было заявлено, что я отвечаю на вопрос, заведомо ничего в теме не соображая! И в итоге я ещё оказываюсь скандалистом, замечатильно!

P.S.: Автор не спрашивал, есть ли другие способы решения этой задачи!

спустя 3 минуты [обр] Иван Шумков(0/77)[досье]

Дмитрий[досье]

Нет, сделать этого в относительных еденицах вам не удастся!

А как задача решается для абсолютных единиц?

спустя 6 минут [обр] Иван Шумков(0/77)[досье]
Жень[досье], если добавить картинку абсолютно спозиционированную по центру с отрицательными маргинами, то появляется вертикальный скрол (вроде на величину горизонтального):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html lang="ru">
    <head>
        <title>test</title>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8">
        <style type="text/css">
            html, body {
                height:100%;
            }
            body {
                margin: 0;
                padding: 0;
            }
            #d {
                position: relative;
                width: 50%;
                height: 100%;
                background:#69c;
            }
            .d {
                position: absolute;
                width: 100%;
                height: 100%;
                left: 100%;
                top: 0;
                background:#369;
            }
            .d .d{
                background:#f60;
            }
            img {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -256px;
                margin-left: -192px;
            }
        </style>
    </head>
    <body>
        <div id="d">
            <img src="test2.jpg" width="384" height="512" />
            <div class="d">
                <img src="test2.jpg" width="384" height="512">
                <div class="d">
                    <img src="test2.jpg" width="384" height="512">
                </div>
            </div>
        </div>
    </body>
</html>
спустя 39 секунд [обр] Евгений Петров(172/1055)[досье]
Дмитрий[досье] Может я ошибаюсь, но восклицательный знак принято считать криком. У Вас чуть ли не каждое предложение заканчивается именно этим знаком.
Относительно прокрутки окна при высоте body в 50% его высоты - а с чего в MZ высота body должна увеличиться? Про поведение MZ с в ситуациях с переполнением элемента и так все известно. И кто сказал, что прокручивается body?
Замечание про DTD тоже непонятно - высота html при том DTD, что указал автор, совсем не 100%. И уж если говорить про неточности, то при strict и стили по-другому вставляются, и не совпадают lang:ru и кодировка UTF-8.
спустя 4 минуты [обр] Дмитрий(0/2)[досье]
Иван Шумков[досье]
Ширина элемента body в данном случае нужно указывать так, чтобы все элементы в нем могли уместиться, ну и ширину самих элементов тоже надо указвать!
спустя 6 минут [обр] Дмитрий(0/2)[досье]

Евгений Петров[досье]
Высота body НЕ ДОЛЖНА увеличиваться, именно это я и пытался доказать, вы вообще как читаете-то? Развитие событий отслеживайте немного.

P.S.: Восклицательный знак принято считать восклицанием.

спустя 1 минуту [обр] Иван Шумков(0/77)[досье]

Евгений Петров[досье]

не совпадают lang:ru и кодировка UTF-8

lang в таком случае не ставится?

спустя 5 часов [обр] Евгений Петров(172/1055)[досье]
Иван Шумков[досье] Позиционируем картинки по центру в предложенном варианте:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html;charset=windows-1251">
<style type="text/css">
html,body{height:100%;}
body{margin:0;padding:0;}
#d{position:relative;width:50%;height:100%;background:#f0f0f0;}
.d{position:absolute;width:100%;height:100%;left:100%;top:0;background:#369;}
.d .d{background:#f60;}
.t{display:table;width:100%;height:100%;}
.t span{display:table-cell;width:100%;height:100%;text-align:center;vertical-align:middle;}
</style>
<!--[if IE]>
<style type="text/css">
html{overflow-y:hidden;}
.t{position:absolute;top:50%;left:50%;width:auto;height:auto;}
#d img{position:relative;top:-50%;left:-50%;}
</style>
<![endif]-->
</head>
<body>
<div id="d">
  <div class="t"><span><img src="i/b.gif" alt="" width="100" height="500"></span></div>
  <div class="d">
    <div class="t"><span><img src="i/b.gif" alt="" width="100" height="100"></span></div>
    <div class="d">
      <div class="t"><span><img src="i/b.gif" alt="" width="100" height="300"></span></div>
    </div>
  </div>
</div>
</body>
</html>
спустя 17 минут [обр] Евгений Петров(172/1055)[досье]

Дмитрий[досье] Может, Вы не поняли меня. Давайте подробнее

предварительно установите body в 50% высоты ... браузер (Firefox - прим.) вам визуально покажет, что никуда он body не растягивает

Про то и говорю, что MZ не растягивает элемент при переполнении контентом. А вот теперь откройте предложенный Вами пример в IE 6.0 и полюбуйтесь на то, что покажет DevToolBar. Так что не надо ровнять все браузеры в этом вопросе.

А вертикальная прокрутка появляется чисто из вежливости разработчиков!

Это как расценивать? О чем Вы говорите?

Так что подумайте, что пишете, причем обильно снабжая восклицательными знаками.

Powered by POEM™ Engine Copyright © 2002-2005