X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Помогите найти решение, Резиновый сайт
lucky228
lucky228
Topic Starter сообщение 5.1.2012, 21:10; Ответить: lucky228
Сообщение #1


Нужно разместить шапку (2000px, просто .png файл) чтобы хватало на все разрешения.
При этом убрать прокрутку и отцентровать шапку.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WarEnek_mw
WarEnek_mw
сообщение 5.1.2012, 22:41; Ответить: WarEnek_mw
Сообщение #2


#class {
background-image: url(head.png);
width: 2000px;
height: 200px;
margin: 0 auto;
overflow: hidden;
}

.png не тянется, как ни крути.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bestolloch
bestolloch
сообщение 5.1.2012, 23:34; Ответить: bestolloch
Сообщение #3


пишите правильно, вы написали с прокруткой вариант...
нужно задать body заливку background-image: url(head.png) center; тогда не будет "прокрутки"
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 6.1.2012, 1:38; Ответить: yury_mw
Сообщение #4


<!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" xml:lang="ru" lang="ru">
<head>
<style type="text/css">
*{
/* Обнуляем отступы */
margin: 0;
padding: 0;
}
#head{
/* Положение фонового рисунка центруем в окне браузера по горизонтали и отключаем его повторение.
Если требуется прижать фоновый рисунок шапки к левому краю экрана, 50% заменяем на 0.
Полезно так же задать фоновую заливку (Вместо #fff. Подбираем ее как можно ближе по цвету к head.png),
она будет фоном шапки пока файл head.png не загрузится.
Ибо png-шка 2000px шириной может оказаться немаленького размера. */
background: #fff url(head.png) 50% 0 no-repeat;
/* Ширину шапки не указываем, тогда она займет 100% окна браузера
Высоту шапки необходимо указать явно (равной высоте фонового рисунка) */
height: 200px;
}
#content{
}
</style>
</head>
<body>
<!-- Шапка -->
<div id="head"></div>
<!-- Блок с прочим содержанием, для наглядности.
Он тоже будет резиновый (на 100% ширины экрана).
Потому что мы не указали явно и его ширину.
-->
<div id="content">
Горизонтальный скролл не появится, пока у блока не будет содержимого,
которое не влезает в окно по горизонтали и не имеет возможности перенестись на след строку.
Т.к. в этом примере у шапки вообще нет содержимого, кроме фона,
то ее можно сжимать хоть до нуля без возникновения скролла.
А вот у блока "content", того в котором находится этот текст,
минимальная ширина — это длина самого длинного слова,
поэтому скролл появится, когда ширина окна будет меньше длины такого слова.
</div>
</body>
</html>

Примечание: Кстати, 2000px не хватит "на все разрешения": уже не редкость мониторы с разрешением 2560x1440 и 2560x1600. :)


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Через какой браузер и как можно найти в кэшэ браузера видео
10 Room 1929 23.3.2024, 7:41
автор: Room
Открытая тема (нет новых ответов) Помогите вспомнить рекламного бота Телеграм для обмена рекламой
0 Mixatraider 692 21.2.2024, 23:42
автор: Mixatraider
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыSirBet ищет FB траферов на уникальное решение по Индии
12 Sirbet 2897 30.4.2023, 21:23
автор: Sirbet
Открытая тема (нет новых ответов) ZombieTeam - современное и надёжное фарма решение по США, Европе , Канаде и Австралии!
3 Zombie.Team 129252 20.6.2022, 22:32
автор: Zombie.Team
Открытая тема (нет новых ответов) HOQU - SaaS решение для создания и управления собственными партнерскими сетями
4 HOQU 1835 26.8.2021, 14:24
автор: HOQU


 



RSS Текстовая версия Сейчас: 28.3.2024, 21:39
Дизайн