VPF::Верстка header(растяжка рисунка) - Форум программистов

ramzes3

Дата 23.11.2007, 04:05 (ссылка)

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

Загрузка ...

Шустрый

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

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

Здавия желаю, товарищи.
Нужна помощь, вечер потратил, не вышло, может кто подскажет. Проблема в следующем. Нужно сделать шапку странички. Причем верстка без таблиц, так вот есть изображение для шапки. Нужно сделать так, чтобы при любом разрешении оно растягивалось по ширине. Фактически задаем width:100%. Я его разрезал на 3 части, левая и правая из которых останется фиксированной ширины(в px), а среднюю нужно растянуть (можно и repeat-x) так, чтобы весь экран был занят, не подскажите,как? спасибо.

WebDisaster

Дата 23.11.2007, 10:10 (ссылка)

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

Загрузка ...

Опытный

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

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

Код


<!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>We're making a header</title>
<style type="text/css">
div.left {
    width: 100px;
    height: 100px;
    background: url(left.jpg) left top no-repeat;
    float: left;
}
div.right {
    width: 100px;
    height: 100px;
    background: url(right.jpg) right top no-repeat;
    float: right;
}
div.center {
    margin: 0 100px;
    height: 100px;
    background: url(center.jpg) repeat-x;
    }
</style>
</head>

<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html>

ramzes3

Дата 25.11.2007, 23:18 (ссылка)

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

Загрузка ...

Шустрый

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

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

Да, но не работает repeat-x в IE для данного случая

WebDisaster

Дата 26.11.2007, 05:39 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата(ramzes3 @ 25.11.2007, 23:18

)

Да, но не работает repeat-x в IE для данного случая

Какая версия IE? Дайте мне на это посмотреть (хорошо бы выложить эту страничку куда-либо в сеть).
Только что проверил в IE6-7 - всё работает без проблем.

ramzes3

Дата 26.11.2007, 12:29 (ссылка)

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

Загрузка ...

Шустрый

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

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

Выложил mainwiki.org

ramzes3

Дата 26.11.2007, 13:44 (ссылка)

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

Загрузка ...

Шустрый

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

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

Получилось, но слегка изменил

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>We're making a header</title>
<style type="text/css">
div.left {
position:absolute;

   margin-bottom:10px;
    float: left;
    height: 80px;

}
div.right {
position:absolute;
margin-bottom:10px;
float: right;
right:10px;
height: 80px;
}
div.center {
height: 100px;
background: url(main_03.jpg) repeat-x;
    }

</style>
</head>

<body>
<div class="left"><img src="main_01.jpg" alt="" /></div>
<div class="right"><img src="main_04.jpg" alt="" /></div>
<div class="center" style="margin-top:0px;"></div>

</body>
</html>

WebDisaster

Дата 26.11.2007, 13:59 (ссылка)

(голосов:1)

Загрузка ...

Опытный

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

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

Всё там работает. Укажите правильные размеры для width и margin. Вы для правого блока указали ширину в два раза больше, чем ширина картинки и из-под неё "торчит" белый фон. Приведенный ниже код не смотрел в IE7. В IE6 FF2 Opera9 работает нормально.

Код


<!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>We're making a header</title>
<style type="text/css">
html, body, div {margin: 0; padding: 0;}
div.left {
    width: 313px;
    height: 80px;
    background: url(main_01.jpg) left top no-repeat;
    float: left; 
    // margin-right: -5px;
}
div.right {
    width: 394px;
    height: 80px;
    background: url(main_04.jpg) right top no-repeat;
    float: right;
    // margin-left: -5px;
}
div.center {
    margin: 0 394px 0 313px; // margin: 0 350px 0 300px;
    height: 80px;
    background: url(main_03.jpg) repeat-x;
    }
</style>
</head>

<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html>

ramzes3

Дата 26.11.2007, 14:18 (ссылка)

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

Загрузка ...

Шустрый

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

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

Спасибо

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