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



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Вопрос по html
Minato
Minato
Topic Starter сообщение 13.12.2010, 22:39; Ответить: Minato
Сообщение #1


Старожил
******

Группа: Banned
Сообщений: 1378
Регистрация: 24.8.2010
Из: Оренбург
Поблагодарили: 267 раз
Репутация:   37  


Здравствуйте. В общем сразу к сути.

В общем нужно сделать шапку резиновой. чтоб она преображалась под разрешение экрана пользователя.
.header_fon {height:196px;background:url('/img/15.png') no-repeat top center;width:100%;padding:0px;border:0px;}
.header-left {height:228px;width:274px;background:url('/img/ChristmasNaruto2.png') no-repeat top left;}
.header-right {width:274px;height:228px;background:url('/img/header-right1.png') no-repeat;position:absolute;right:0px;top:10px;}

Использовать будет только header_fon, лефт и райт и просто так вытащил, может оно нужно, но оно не выводится на шапке.
Проблема в том, что шапка показывает только свою часть для экранов, меньших разрешению 1600.

П.С. извините если трудно выразился


--------------------
Бан за кидок трудового народа.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kronos
kronos
сообщение 13.12.2010, 22:47; Ответить: kronos
Сообщение #2


Белый веб-мастер
*******


Группа: Active User
Сообщений: 4703
Регистрация: 10.2.2009
Из: Харьков
Поблагодарили: 2629 раз
Репутация:   327  


Не понял ничего. Со скриншотами и собственно HTML пожалуйста.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Minato
Minato
Topic Starter сообщение 13.12.2010, 22:55; Ответить: Minato
Сообщение #3


Старожил
******

Группа: Banned
Сообщений: 1378
Регистрация: 24.8.2010
Из: Оренбург
Поблагодарили: 267 раз
Репутация:   37  


Начну с того, что моя шапка состоит из 3-ёх частей: Фона + 2 картинки, которые накладываются слева и справа.

Код шапок в ксс.
.header_fon {height:196px;background:url('/img/15.png') no-repeat top center;width:100%;padding:0px;border:0px;}
.header-left {height:228px;width:274px;background:url('/img/ChristmasNaruto2.png') no-repeat top left;}
.header-right {width:274px;height:228px;background:url('/img/header-right1.png') no-repeat;position:absolute;right:0px;top:10px;}


Код вывода:
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="header_fon"><tr>
<td align="left" class="header-left"></td><td align="right" class="header-right"></td></tr></table>


Вот вся шапка:

А вот как она выводится с разрешением 1024х768
http://savepic.ru/2007927.png


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

забыл уточнить, делаю шапку только из фона, левого и правого накладываемого изображения не будет.


--------------------
Бан за кидок трудового народа.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kronos
kronos
сообщение 13.12.2010, 23:00; Ответить: kronos
Сообщение #4


Белый веб-мастер
*******


Группа: Active User
Сообщений: 4703
Регистрация: 10.2.2009
Из: Харьков
Поблагодарили: 2629 раз
Репутация:   327  


ну тогда надо вставить картинкой, и дать ей width: 100%; но я не представляю что это будет. Растянутая и некачественная.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lostprophet
lostprophet
сообщение 13.12.2010, 23:08; Ответить: lostprophet
Сообщение #5


Топовый постер
*******

Группа: Super Moderator
Сообщений: 2567
Регистрация: 18.11.2008
Из: Ростов-на-Дону
Поблагодарили: 3172 раза
Репутация:   292  


Или найти подходящее изображение, которое можно растянуть или скопировать много раз по оси x...


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Minato
Minato
Topic Starter сообщение 13.12.2010, 23:18; Ответить: Minato
Сообщение #6


Старожил
******

Группа: Banned
Сообщений: 1378
Регистрация: 24.8.2010
Из: Оренбург
Поблагодарили: 267 раз
Репутация:   37  


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


--------------------
Бан за кидок трудового народа.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Basilus
Basilus
сообщение 13.12.2010, 23:19; Ответить: Basilus
Сообщение #7


Новичок
*

Группа: User
Сообщений: 30
Регистрация: 20.9.2010
Из: Россия
Поблагодарили: 10 раз
Репутация:   1  


(kronos @ 13.12.2010, 21:00) *
Или найти подходящее изображение, которое можно растянуть или скопировать много раз по оси x...


+1 так будет лучше, можно просто фон подобрать похожего цвета, а данная пикча в шапке пусть будет по центру


--------------------
Ваше здоровье зависит только от вас.
Женская жизнь - сайт для девушек
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lostprophet
lostprophet
сообщение 13.12.2010, 23:23; Ответить: lostprophet
Сообщение #8


Топовый постер
*******

Группа: Super Moderator
Сообщений: 2567
Регистрация: 18.11.2008
Из: Ростов-на-Дону
Поблагодарили: 3172 раза
Репутация:   292  


Очень жаль, но попробую еще раз.
Берем кусочек фона, который будет копироваться по оси X, для таблицы или для ячейки (td) пишем width: 100%; background: url(.../путь_к_файлу) repeat-x;
Получаем растягивающуюся по всей ширине браузера таблицу с фоновым изображением, которое копируется. Стоит ли говорить, что изображение которое будет копироваться должно быть максимально простым, чтобы при составлении границ не было перепадов и оно подходило под стиль картинки, чтобы она не выделялась.
А в таблицу вставляем уже картинку с логотипом и прочим, либо с помощью div и background выводим нужное изображение.
В принципе, все.

Второй вариант.
Делаем максимальное изображение шириной 1920PX (или 100500px, если хотите большее разрешение). Сносим все. что там находится в таблице и таблицу тоже.
Пишем
<div style="width: 100%; height: высота_картинки px; background: url(.../путь_к_файлу) repeat-x top center;"></div>
Самый простой и быстрый способ, однако, может быть просто неправильным, если в шапку нужно положить еще картинки или ссылки.

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

Сообщение отредактировал lostprophet - 13.12.2010, 23:30


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Вопрос по seo для интернет магазина
куда девать продвинутые товары, которые уже не выпускают
18 viktormerke 2810 15.12.2017, 15:18
автор: Smspva
Открытая тема (нет новых ответов) Вёрстка. Per aspera ad html.
С радостью принимаю заказы по вёрстке.
3 ValeryRar 456 1.12.2017, 11:02
автор: ValeryRar
Открытая тема (нет новых ответов) Исправлю HTML ошибки на страницах Вашего сайта
10 guruapps 1208 30.11.2017, 22:59
автор: maxim1249
Открытая тема (нет новых ответов) Вопрос к знатокам Instagram
20 SEOMR 4184 30.11.2017, 14:25
автор: DiscordPro
Открытая тема (нет новых ответов) Вопрос про Телеграмм
18 syd2010 1172 28.11.2017, 14:25
автор: PostBrigada


 



RSS Текстовая версия Сейчас: 17.12.2017, 12:23
Дизайн