Резиновая шапка

Безымянный · December 13, 2008

Добрый вечер, господа!

Чтож, у меня такая проблема. Нужно оптимизировать шапку под все браузеры и сделать её резиновой, чтобы при сужении окна или при просмотре страницы через разные браузеры части шапки не наесжали друг на друга. Так же мне сказали, что размеры шапки нужно делать под разрешение 800х600... Так у меня в два раза больше разрешение экрана(( Если я так сделаю, то у меня будет не одна картинка, а две в шапке страницы... Такая проблема, что у меня шапка очень большая, а при уменьшении всё искажается(( Я и так искозил её максимально... Запутался я В общем, господа и прошу помощи...

Код шапки, чтобы сделать её резиновой. К сожалению, вроде всё пересмотрел и вроде всё необходимое добавил, но всёравно ничё не работает...

<table border="0" cellpadding="0" cellspacing="0" width="100%"  height="356">
<tr>
 <td width="357" align="right center" rowspan="2"><img src="http://www.nimpo.at.ua/dezain/shapka1.jpg" left no-repeat; border="0" valign="bottom"></td>
 <td rowspan="2" align="center center" style="background:url(http://www.nimpo.at.ua/dezain/shapka3.jpg) left no-repeat; padding-bottom:50px;" valign="bottom"><span style="color:#790000;font:20pt bold Verdana,Tahoma;"><b>Найди свой путь шиноби...</b></span><br /><img src="http://s22.ucoz.net/t/431/14.gif" width="75" height="1" border="0"> </td>
 <td width="357" rowspan=2 align="left center" style="background:url(http://www.nimpo.at.ua/dezain/shapka2.jpg) left no-repeat; color:#790000;" valign="bottom"></td>
</tr>
</table>

Впринципе, для большей убедительности, вырезки из Оперы и Осла(IE)... В Мазиле Файрофоксе тоже самое, что и в Опере...

Edited December 13, 2008 by Безымянный

kalyaka-malyaka · December 13, 2008

у вас есть psd этой шапки со слоями? если есть, то имеет смысл рассказывать, как порезать. если нет, то упс.

Безымянный · December 13, 2008

у вас есть psd этой шапки со слоями? если есть, то имеет смысл рассказывать, как порезать. если нет, то упс.

psd? Не понял что это, но из слоёв и порезать дошло, что тебя интересует части шапки? Я картинку шапки порезал, сделал это правильно и всё подошло... Может не понял вопроса...

kalyaka-malyaka · December 13, 2008

psd? Не понял что это

погугли, помогает

Я картинку шапки порезал, сделал это правильно

спорный вопрос

я так понимаю, что картинка в шапку цельнотянута откуда-то, а не самостоятельно скомпанованный коллаж?

Безымянный · December 13, 2008

Так что же не так в коде?

rus · December 13, 2008

Так что же не так в коде?

Тут дело не в коде, а в том что шапка разрезана на три слишком большие части.

На заднем фоне виднеются такие голубоватые полоски как молнии, так вот, они повторяются в принципе более-менее одинаково по всему

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

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

Yulia · December 13, 2008

не разрезайте ее, а просто поставьте целиком и задайте ширину 100% (style="width: 100%;") и тогда она растянется на ширину содержащего ее контейнера (если она просто в body, то на ширину всего окна, какой бы ширины оно не было). Если изображение лежит в диве или таблице, то им надо тоже просто проставить ширину 100%. Высота подберется автоматически.

На очень больших экранах качество картинки немного ухудшится из-за растягивания.

Безымянный · December 13, 2008

Я новечёк, а вы мне тут понакидали)) Так, сейчас буду пробовать..

rus, такой вопрос, а как это " прозрачным гифом "?

rus · December 13, 2008

Я новечёк, а вы мне тут понакидали)) Так, сейчас буду пробовать..
rus, такой вопрос, а как это " прозрачным гифом "?

Человечек вырезается по контуру, а фон прозрачный (index transparency)

Безымянный · December 13, 2008

Я работаю через систему Юкоз... Я уже пробовал не разделять шапку на части, а вставлять, как бэкграунд шапки... Но тогда получался такой вариант:

И такой вариант в Опере....

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

с оригеналом:

rus

psd - внутренний формат рисунка? Если да, то мне понятно то, что ты написал.. Но не понятен момент со слоями.. Тоесть, ты мне предлагаешь разрезать шапку на горизонтальные слои, прописать эту надпись не понятно каким образом буквами, а по бокам вставить картинки персонажей?

Edited December 13, 2008 by Безымянный

rus · December 13, 2008

Сайт когда создают, его сначала рисуют на слоях в программе адоб фотошоп, а сохраняемый файл в формате .psd

На счет остальных слов ты меня не понял.

Безымянный · December 13, 2008

Теперь всё понял, но этот вариант не подойдёт, так как у меня даже такой программы нету.. Что можно исправить в плане кода..

kalyaka-malyaka · December 13, 2008

не разрезайте ее, а просто поставьте целиком и задайте ширину 100% (style="width: 100%;") и тогда она растянется на ширину содержащего ее контейнера (если она просто в body, то на ширину всего окна, какой бы ширины оно не было). Если изображение лежит в диве или таблице, то им надо тоже просто проставить ширину 100%. Высота подберется автоматически.
На очень больших экранах качество картинки немного ухудшится из-за растягивания.

песТня. 640px растянуть на мои 1600, и качество картинки НЕМНОГО ухудшится.

пожалуйста, не советуйте такие жуткие вещи. кто-то ведь и поверить может, что так можно делать. и сделает.

хотя автор и так уже постарался, 640 до 1258 дотянул. мечта, а не картинка получилась.

Безымянный · December 13, 2008

Ну неужели никто не может дать мне конкретный ответ! Что нужно добавить в код, чтобы картинки не смещались... Я вам же вырезки показал... Код есть.. Эххх.....

Насчёт размеров - разберусь сам... Буду уменьшат, сохраняя длинну, подходящую для всех браузеров. Мне и нужно всего - то, чтобы шапка была одинаковой во всех браузерах! В одних уменьшалась, в других увеличивалась, в зависимости от браузера и размеров экрана..

homm · December 14, 2008

background: url('путь до картинки') center no-repeat;

rus · December 14, 2008

Тогда в твоем случае не получится сделать резиновый сайт.

Как посоветовал homm, поставь целиковую шапку по бэкграунду фоном и отцентрируй ее, а по ее размеру и контент и тоже по центру.

Yulia · December 14, 2008

песТня. 640px растянуть на мои 1600, и качество картинки НЕМНОГО ухудшится.
пожалуйста, не советуйте такие жуткие вещи. кто-то ведь и поверить может, что так можно делать. и сделает.
хотя автор и так уже постарался, 640 до 1258 дотянул. мечта, а не картинка получилась.

Автор и так картинку растягивает. Да еще и по частям так, что у него стыки образуются. А на маленьких экранах растянутые части заезжают друг на друга. Автор не умеет фотошоп и абсолютную верстку. Автор настаивает на резиновости. Что ему еще посоветовать?

Victor Ananiev · December 14, 2008

читать мануалы)

kalyaka-malyaka · December 14, 2008

исключительно по причине незанятости рук во время просмотра кинушки холодным воскресным утром...

<!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>Header</title>
<style>
html, body { padding: 0; margin: 0; height: 100%; }
table.header { width: 100%; border: none; }
.td1, .td3, .td4, .td6, .td7, td9 { width:11px; }
.td1, .td2, .td3, .td7, .td8, .td9 { height:12px; }
.td4, .td5, .td6 { height:156px; }
.td1, .td2, .td3, .td4, .td6, .td7, .td8, .td9 { font-size:1px; }
.td1 { background: url(images/header_01.gif) top left no-repeat; }
.td2 { background: url(images/header_02.gif) top left repeat-x; }
.td3 { background: url(images/header_03.gif) top left no-repeat; }
.td4 { background: url(images/header_04.gif) top left repeat-y; }
.td5 {
	background: #fc6f05 url(images/header_05.gif) top center no-repeat;
	color:#790000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 15pt;
	font-weight: bold;
	vertical-align: top;
	text-align: center;
}
.td5 span { padding-top:115px; display:block; }
.td6 { background: url(images/header_06.gif) top left repeat-y; }
.td7 { background: url(images/header_07.gif) top left no-repeat; }
.td8 { background: url(images/header_08.gif) top left repeat-x; }
.td9 { background: url(images/header_09.gif) top left no-repeat; }
</style>
</head>

<body>
<table cellpadding="0" cellspacing="0" class="header">
	<tr>
		<td class="td1"> </td>
		<td class="td2"> </td>
		<td class="td3"> </td>
	</tr>
	<tr>
		<td class="td4"> </td>
		<td class="td5"><span>Найди свой путь шиноби...</span></td>
		<td class="td6"> </td>
	</tr>
	<tr>
		<td class="td7"> </td>
		<td class="td8"> </td>
		<td class="td9"> </td>
	</tr>
</table>
</body>
</html>

картинки положить в папку "images". папку с картинками положить рядом с html-файлом.

картинки:

header_01.gif, header_02.gif, header_03.gif, header_04.gif, header_05.gif, header_06.gif, header_07.gif, header_08.gif, header_09.gif

посмотреть результат

Edited December 14, 2008 by kalyaka-malyaka

Yulia · December 14, 2008

исключительно по причине незанятости рук во время просмотра кинушки холодным воскресным утром...

симпатично

зы а если еще и type="text/css" к style прописать, так еще и по спецификации было бы

респект kalyaka-malyaka

надеюсь оценят

kalyaka-malyaka · December 14, 2008

зы а если еще и type="text/css" к style прописать, так еще и по спецификации было бы

угу, забыла.

да пофиг, на самом деле. предполагается же, что автор вставит этот кусок css в свою таблицу стилей.

Безымянный · December 14, 2008

Опера:

Осёл(IE):

Mazila Firefox:

В Опере вон как((

homm · December 14, 2008

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background:url(http://www.nimpo.at.ua/dezain/shapka.jpg) center no-repeat;; #E2C275;" height="356">
Опера:
Осёл(IE):
Mazila Firefox:
В Опере вон как((

Слушай, ну если совсем болван тут уже ничем не поможешь. Развивай логическое мышление.

Безымянный · December 14, 2008

Самый умный нашёлся.. Не можешь помочь, не помогай((( Откуда я знаю как это делается...

kalyaka-malyaka · December 14, 2008

Самый умный нашёлся.. Не можешь помочь, не помогай((( Откуда я знаю как это делается...

что - ЭТО?

я тебе дала готовое рабочее решение. чего тебе не хватает?

Yulia · December 14, 2008

такое чувство, что мы участвуем в телепередаче "Точка кипения" ) Автор темы наверняка еще думает: "Какие казлы все на этом форуме, никто не хочет помочь!!"

Sign In

Резиновая шапка

Question

Link to comment

Share on other sites

49 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information