Оптимизацыя шапки под разшырение других екранов - Форум интересных решений

[ Новые сообщения · Участники · Поиск по форуму · RSS ]

Страница 1 из 2 1 2 »
Модератор форума: cucYa, kydapodatsya

Оптимизацыя шапки под разшырение других екранов (Проблема з шапкой)

Оптимизацыя шапки под разшырение других екранов

PeM6o

Отредактировал PeM6o - Четверг, 11 Марта 2010, 19:49

Дата: 11 Марта 2010, 19:49 | Сообщение # 1

● ● ● ● ●

16 сообщений

« 0 »

0 наград

Статус: Offline

Уважаемые пользователи, прошу помочь мне в одном таком каперсном деле которое мучает меня уже долго.
Возможно ета тема была уже розкрыта, извеняюсь если ето так.
Суть проблемы заключается в шапке, у меня постает вопрос: Как сделать штоб шапка подстраивалась под розшырение любого екрана
Вот код верхний части моего сайта:

Quote

<h1></h1><table style="border-bottom: 1px solid rgb(73, 73, 73);" width="100%" border="0" cellpadding="80" cellspacing="4" height="166">
<tbody><tr><td style="background: transparent url(http://www.ns-cs.at.ua/Dizain/Shapki/shapk.png) no-repeat ; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
</td></tr></tbody></table>
<table style="border: 1px solid rgb(38, 38, 38); background: transparent url(/.s/t/984/4.gif) repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" width="100%" border="0" cellpadding="0" cellspacing="0" height="23">
<tbody><tr>
<td style="font-size: 10px; padding-left: 10px;" width="50%" align="left"><a href="$HOME_PAGE_LINK$" title="Головна">Головна</a><?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?> | <a href="$PERSONAL_PAGE_LINK$" title="Мій профіль">Мій профіль</a><?else?> | <a href="$REGISTER_LINK$" title="Реєстрація">Реєстрація</a><?endif?><?endif?> <?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?> | <a href="$LOGOUT_LINK$" title="Вихід">Вихід</a><?else?> | <a href="$LOGIN_LINK$" title="Вхід">Вхід</a><?endif?><?endif?></td>
<td style="font-size: 10px; padding-right: 10px;" width="50%" align="right"><?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?>Ви увійшли як <a href="$PERSONAL_PAGE_LINK$" title="Мій профіль"><b>$USERNAME$</b></a> | Група "<u>$USER_GROUP$</u>"<?else?>Вітаю Вас <b>$USERNAME$</b><?endif?><?endif?> <?if($RSS_LINK$)?>| <a href="$RSS_LINK$" title="RSS">RSS</a><?endif?></td>
</tr>
</tbody></table>

И соотвецтвинно ссылка на сайт штоб вы посмотрели как там стоит сейчас шапка:
www.ns-cs.at.ua

kanat07

Дата: 12 Марта 2010, 10:11 | Сообщение # 4

● ● ● ● ●

735 сообщений

« 54 »

0 наград

Статус: Offline

Quote

<table style="border-bottom: 1px solid rgb(73, 73, 73);" width="100%" border="0" cellpadding="80" cellspacing="4" height="166">
<tbody><tr><td style="background: transparent url(http://www.ns-cs.at.ua/Dizain/Shapki/shapk.png) repeat ; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
</td></tr></tbody></table>
<table style="border: 1px solid rgb(38, 38, 38); background: transparent url(/.s/t/984/4.gif) repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" width="100%" border="0" cellpadding="0" cellspacing="0" height="23">
<tbody><tr>
<td style="font-size: 10px; padding-left: 10px;" width="50%" align="left"><a href="$HOME_PAGE_LINK$" title="Головна">Головна</a><?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?> | <a href="$PERSONAL_PAGE_LINK$" title="Мій профіль">Мій профіль</a><?else?> | <a href="$REGISTER_LINK$" title="Реєстрація">Реєстрація</a><?endif?><?endif?> <?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?> | <a href="$LOGOUT_LINK$" title="Вихід">Вихід</a><?else?> | <a href="$LOGIN_LINK$" title="Вхід">Вхід</a><?endif?><?endif?></td>
<td style="font-size: 10px; padding-right: 10px;" width="50%" align="right"><?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?>Ви увійшли як <a href="$PERSONAL_PAGE_LINK$" title="Мій профіль"><b>$USERNAME$</b></a> | Група "<u>$USER_GROUP$</u>"<?else?>Вітаю Вас <b>$USERNAME$</b><?endif?><?endif?> <?if($RSS_LINK$)?>| <a href="$RSS_LINK$" title="RSS">RSS</a><?endif?></td>
</tr>
</tbody></table>

-=SySTeM=-

Дата: 17 Марта 2010, 13:52 | Сообщение # 7

● ● ● ● ●

5 сообщений

« 0 »

0 наград

Статус: Offline

Code

<table style="border-bottom: 1px solid rgb(73, 73, 73);" width="100%" border="0" cellpadding="80" cellspacing="4" height="166">
<tbody><tr><td style="background: transparent url(http://www.ns-cs.at.ua/Dizain/Shapki/shapk.png) repeat ; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><img src="http://www.ns-cs.at.ua/Dizain/Shapki/shapk.png" width="100%">
</td></tr></tbody></table>
<table style="border: 1px solid rgb(38, 38, 38); background: transparent url(/.s/t/984/4.gif) repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" width="100%" border="0" cellpadding="0" cellspacing="0" height="23">
<tbody><tr>
<td style="font-size: 10px; padding-left: 10px;" width="50%" align="left"><a href="$HOME_PAGE_LINK$" title="Головна">Головна</a><?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?> | <a href="$PERSONAL_PAGE_LINK$" title="Мій профіль">Мій профіль</a><?else?> | <a href="$REGISTER_LINK$" title="Реєстрація">Реєстрація</a><?endif?><?endif?> <?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?> | <a href="$LOGOUT_LINK$" title="Вихід">Вихід</a><?else?> | <a href="$LOGIN_LINK$" title="Вхід">Вхід</a><?endif?><?endif?></td>
<td style="font-size: 10px; padding-right: 10px;" width="50%" align="right"><?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?>Ви увійшли як <a href="$PERSONAL_PAGE_LINK$" title="Мій профіль"><b>$USERNAME$</b></a> | Група "<u>$USER_GROUP$</u>"<?else?>Вітаю Вас <b>$USERNAME$</b><?endif?><?endif?> <?if($RSS_LINK$)?>| <a href="$RSS_LINK$" title="RSS">RSS</a><?endif?></td>
</tr>
</tbody></table>

Andrio

Дата: 24 Марта 2010, 04:49 | Сообщение # 15

● ● ● ● ●

3 сообщения

« 0 »

0 наград

Статус: Offline

Всем здрасте )), вот нашёл тему по родственной проблеме, надеюсь тут найти себе тоже решение, а так же возможно чем то помочь,но сам пока тока осваиваю вёрстку ,потому мои советы могут быть не правильными,но как говорится, давайте вместе разбираться с методами "резиновой" вёрстки))
По конкретному вопросу (в суть кода не вникал , поскольку для меня это сложно с ходу ), но идея такова :надо вашу шапку разделить на два рисунка(правый и левый) и их положить на чёрный(в вашем случае ) фон , разместив изображения по краям таблицы или блока DIVа(мне кажется это самый простой способ,недостатком будет большое количество (больше одного)графических файлов(но есть и плюсы- размеры изображений будут меньше , и скорость загрузки их быстрей) .Для фона можно использовать однопиксельную картинку(вырезать маааааленький квадратик из иcходного изображения , что позволит точно сопоставить цвет общего фона с цветом отдельных картинок ) или использовать background-color .Насколько я понял, разбираясь со своей проблемой , масштабируместь под разные разрешения поддерживается тока к тегам <IMG>,если использовать background , то они всегда будут без масштабируемости показываться , в результате будет либо "обрезание" картинки либо появляться пустые поля вокруг (если задан background-repeat: no-repeat;) в остальных случаях будет происходить повтор фонового изображения (по стилям- либо по "х" либо по "у" или по обоим осям , если про "repeat" ничего не указано и оно очень мало ), кстате это принцип предлагал с однопиксельной картинкой.
У меня же проблема щас в том ,что у меня не выходит сопоставить "резиновый"картинный ряд(код ниже,это решение я подсмотрел вот тут http://dimox.name/ie-table-and-liquid-images/ )
<table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%; table-layout: fixed;">
<tr>
<td><img style="width:100%" src="../images/1.png" alt=""></td>
<td><img style="width:100%" src="../images/2.png" alt=""></td>
<td><img style="width:100%" src="../images/3.png" alt=""></td>
<td><img style="width:100%" src="../images/3.png" alt=""></td>
<td><img style="width:100%" src="../images/4.png" alt=""></td>
<td><img style="width:100%" src="../images/5.png" alt=""></td>
</tr>
</table>

на общем фоне(у меня это прямоугольник с закруглениями созданный в фотошопе и к нему применяется градиент.
И всё бы не плохо , но когда эту таблицу кидаешь в див в котором фон набран через <IMG>, то таблица не в встаёт в неё корректно ,если применить свойства position:absolute или relative , для позиционирования дива с таблицей и дива с фоновым изображением ( через <IMG>),то картинки в таблице вместо последовательного расположения в ряд , накладываются друг на друга в левой части блока,выглядит как будто первая ячейка содержит несколько картинок наложенных друг на друга) и сущность таблицы слетает , позиционировать картинки по дивам сложно , так как их не 5, а 6 ,или 7 даже будет , и смещение в процентах указать невозможно(что необходимо для размещения их в ряд пропорционально ширине браузера пользователя)т.к 100 на 6и 7 не делится , и получается число в периоде (например 16.66666666.....%) и соответственно позиционировать их точно не получится .Если просто в таблицу поместить картинки вместе с фоном , то в некоторых случаях(при изменении, например,размера окна браузера, границы фона могут не состыковаться ровно по верхнему или нижнему краю (все картинки одинаковых размеров,к примеру 200х250)
Если что не подробно объяснил ,и есть возможность помочь , то меня можно найти через унет-профиль , там же можно будет обменяться аськой или скайпом (что для меня более удобно, но камеры нет ) smile Заранее спасибо.

Andrio

Отредактировал Andrio - Среда, 24 Марта 2010, 23:50

Дата: 24 Марта 2010, 23:47 | Сообщение # 20

● ● ● ● ●

3 сообщения

« 0 »

0 наград

Статус: Offline

Да нет , ты меня немного не понял , надо разделить, а точней наверно выделить именно два фрагмента , на которых есть графика людей и прочего (можно в принципе даже от фона не отделять особо,т.к фон я предлагаю составить из фрагмента этого же изображения, наверно без фотошопа не обойтись), подставить их на такой же фон (объяснял как ), в итоге ты получишь то , что высота шапки останется той же искажения изображений не будет, и общая картина шапки останется , меняться будет тока расстояние между фрагментами(сама картина в целом не меняется , не искажается) из за разрешения мониторов расстояние между двумя выделенными изображениями ( т.к они будут находиться по краям общей ширины), мне кажется , это самое простое решение , для тех кто тока начинает верстать , и знаком в основном с распространенными не сложными методами(короче такие как я biggrin

)

PS: кстате я свою проблемку решил , тока не совсем так как хотелось бы (пришлось составлять фон из 4 углов и однопиксельной картинки для фона , но зато абсолютно резиново и масштабируется , но правда высота блока меняется , но мне наверно это не страшно , во всяком случае пока не предвижу проблем ))))

Оптимизацыя шапки под разшырение других екранов (Проблема з шапкой)

Страница 1 из 2
1
2
»

U.Helper