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


Новый статус (1)
*******

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


Или найти подходящее изображение, которое можно растянуть или скопировать много раз по оси 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


Новый статус (1)
*******

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


Очень жаль, но попробую еще раз.
Берем кусочек фона, который будет копироваться по оси 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>
Самый простой и быстрый способ, однако, может быть просто неправильным, если в шапку нужно положить еще картинки или ссылки.

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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


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


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыHTML/CSS обучение верстке сайтов с профессиональным подходом
0 Smile3D 179 Вчера, 20:38
автор: Smile3D
Открытая тема (нет новых ответов) Интеграция html на Wordpress
8 mxxx 1372 16.5.2018, 18:06
автор: Chezarius
Открытая тема (нет новых ответов) Вопрос по поводу цен на сайте
16 WildWeb8 960 13.5.2018, 17:40
автор: genjnat
Открытая тема (нет новых ответов) Перенесу вашу HTML+CSS верстку на Wordpress
0 blackhead 401 9.5.2018, 14:50
автор: blackhead
Открытая тема (нет новых ответов) Вёрстка HTML-писем
15 Vampler 4678 7.5.2018, 21:10
автор: Vampler


 



RSS Текстовая версия Сейчас: 28.5.2018, 1:42
Дизайн