VPF::Таблица из 3 рисунков на полный экран

ilyaILF

Дата 21.2.2008, 16:00 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 70
Регистрация: 8.11.2006

Репутация: 6
Всего: 6

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
html, body {margin: 0px; padding: 0px;}
div, img {margin: 0px; padding: 0px; border: 0px none;}
img {width: 100%; display: block;}
.first_level {height: 300px;}
.two_level {width: 100%; float: left; height: 100px;}
.two_level .centercolumn {margin: 0% 30% 0% 20%; height: 100px;}
.leftcolumn {float: left; width: 20%; height: 100px; margin: 0% 0% 0% -100%;}
.rightcolumn {float: left; width: 30%; height: 100px; margin: 0% 0% 0% -30%;}
.tree_level {height: 50px;}
.first_level IMG {background: black;}
.centercolumn IMG {background: red;}
.rightcolumn IMG {background: blue;}
.leftcolumn IMG {background: green;}
.tree_level IMG {background: pink;}
.cleaner {clear: both; height: 1px; overflow: hidden; margin: 0px 0px -1px 0px; font-size: 1px; line-height: 1px; padding: 0px 0px 0px 0px;}
</style>
</head>
<body>
<div class="container">
    <div class="first_level">
        <img src="#" height="300" />
    </div>
    <div class="two_level">
        <div class="centercolumn">
            <img src="#" height="100" />
        </div>
    </div>
    <div class="leftcolumn">
        <img src="#" height="100" />
    </div>
    <div class="rightcolumn">
        <img src="#" height="100" />
    </div>
    <div class="cleaner"></div>
    <div class="tree_level">
        <img src="#" height="50" />
    </div>
</div>
</body>
</html>

Далее я думаю не составит труда проставить соответствующие размеры по высоте картинок и разрезать сам рисунок по ширине в процентных пропорциях.
При этом ни один пиксель "настроечных" бэкгроундов не должен будет виден.

fen0men

Дата 22.2.2008, 12:54 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 28
Регистрация: 15.2.2008

Репутация: нет
Всего: нет

Цитата(ilyaILF @ 21.2.2008, 16:00)

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
html, body {margin: 0px; padding: 0px;}
div, img {margin: 0px; padding: 0px; border: 0px none;}
img {width: 100%; display: block;}
.first_level {height: 300px;}
.two_level {width: 100%; float: left; height: 100px;}
.two_level .centercolumn {margin: 0% 30% 0% 20%; height: 100px;}
.leftcolumn {float: left; width: 20%; height: 100px; margin: 0% 0% 0% -100%;}
.rightcolumn {float: left; width: 30%; height: 100px; margin: 0% 0% 0% -30%;}
.tree_level {height: 50px;}
.first_level IMG {background: black;}
.centercolumn IMG {background: red;}
.rightcolumn IMG {background: blue;}
.leftcolumn IMG {background: green;}
.tree_level IMG {background: pink;}
.cleaner {clear: both; height: 1px; overflow: hidden; margin: 0px 0px -1px 0px; font-size: 1px; line-height: 1px; padding: 0px 0px 0px 0px;}
</style>
</head>
<body>
<div class="container">
    <div class="first_level">
        <img src="#" height="300" />
    </div>
    <div class="two_level">
        <div class="centercolumn">
            <img src="#" height="100" />
        </div>
    </div>
    <div class="leftcolumn">
        <img src="#" height="100" />
    </div>
    <div class="rightcolumn">
        <img src="#" height="100" />
    </div>
    <div class="cleaner"></div>
    <div class="tree_level">
        <img src="#" height="50" />
    </div>
</div>
</body>
</html>

Спасибо большущее!!!

zaitsman

Дата 22.2.2008, 13:37 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 22
Регистрация: 22.2.2008
Где: Москва

Репутация: нет
Всего: нет

Можно через map сделать, не мучаясь с нарезкой, хотя, конечно, это потяжелее будет с т.з. создания анимации.

fen0men

Дата 22.2.2008, 14:05 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 28
Регистрация: 15.2.2008

Репутация: нет
Всего: нет

Цитата

При этом ни один пиксель "настроечных" бэкгроундов не должен будет виден.

А почему не будет виден, из-за каких свойств? Можешь объяснить?

ilyaILF

Дата 22.2.2008, 15:13 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 70
Регистрация: 8.11.2006

Репутация: 6
Всего: 6

Вы же писали, что

Цитата

то полоса из пикселей вылезает

поэтому я сделал так называемые "контрольные бэкгроунды", по которым можно будет проконтролировать приведенную верстку во всех броузерах, на наличие "просвечивающих", или "вылезающих" пикселей которых в предложенном варианте быть не должно и эти бэкгроунды можно смело убирать - они ненужны.

fen0men

Дата 22.2.2008, 15:34 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 28
Регистрация: 15.2.2008

Репутация: нет
Всего: нет

Цитата(ilyaILF @ 22.2.2008, 15:13)

Вы же писали, что

Цитата

то полоса из пикселей вылезает

Нет, это все понятно. Я имею в виду с почему он их так отображает ("правильно"). С помощью чего Вы этого добились? (margin или div'ами как-то)...

ilyaILF

Дата 22.2.2008, 15:44 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 70
Регистрация: 8.11.2006

Репутация: 6
Всего: 6

Теперь я уже не совсем вас понимаю... Я взял вот это http://www.dynamicdrive.com/style/layouts/category/C10/ и объеденил его с этим http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ .

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »