Градиент!

:tyz · May 13, 2009

Доброго времени суток!

Помогите пожалуйста разобраться! Есть шапка, рисунок - градиент(jpg), и на этот градиент наклыдываються два рисунка. Один справой стороны а другой с левой, расширение у них .png (шапку разбил на три столбца!)

Градиент с командой z-index:-1; на заднем фоне. Все это хорошо смотриться при просмотре браузера на весь экран. как только его уменьшить, появляеться внизу полоса прокрутки. Когда просмотреть документ, с помощью полосы прокрутки до конца(т.е. в право), то там видно белый цвет сайта а градиен не растягиваеться!!!

И мало того, на других компьютерах шапка совсем другого цвета а градиента практически нет. Я уже измучился выяснять что у меня не так...(((

Сам сайт резиновый, под левым логотипом - часы. Буду признателен Вам в помощи!

Код блока шапки.

<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
Градиент!
<td width="507" height="150" valign="top"><div class="konteiner"><img src="img/header-gradient.jpg" class="gradient"></div>

Скрипт часов и даты!
<div class="time"><script language=Javascript></script>
<script>writeclock()</script>
</div>
Левая картинка
<div align="left"><img src="img/header-left10.png" class="logo"></div></td>
<td width="100%" valign="top"></td>
Правая картинка
<td width="501" height="150" valign="top"><div align="right"><img src="img/domiki-right2.png" align="left" class="dom"></div></td>
Добавить в избранное
<td width="501" valign="top"><div class="favorits"><a href="http://www./" rel=sidebar title="" onclick="window.external.AddFavorite('http:///','имя'); return false;"><IMG SRC="img/favorits.png" alt="Добавить в избранное" WIDTH=20 HEIGHT=20 BORDER=0 ALIGN="left"></a></div>
Сделать стартовой!
<div class="starting"><a href="http:///" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http:///'); return false;"><IMG SRC="img/house.png" alt="Сделать стартовой" WIDTH=16 HEIGHT=16 BORDER=0 ALIGN="left"></a></div>
Написать "нам"
<div class="mail"><a href="mailto:"><img src="img/mail.png" alt="Написать нам" WIDTH=18 HEIGHT=16 BORDER=0 ALIGN="left"></div></td>
	</tr>
 </table>

Вот код стилей используемых мною!

.konteiner { z-index:-1;
overflow:hidden;
position: absolute;
top:0;left:0;
height:150px;
width:100%;
 }

.gradient {
width:100%;
height:150px;
}

.time {
	z-index:10;
	font-family: Arial, Helvetica, sans-serif;
	color:#585858;
	font-size: 14px;
	font-weight: bold;
	overflow:hidden;
	position: absolute;
	top:130px;
	left: 23px;
}

.logo{
top: 0px; 
left: 0px;
width:500;
height:140;
}

.dom {
	top: 0px;
	width:500;
	height:140;
	margin-right: 0px;
}

Edited June 11, 2009 by :tyz

:tyz · May 14, 2009

Что-то никаких комментариев (( работа стоит, мозги кипят ((

SelenIT · May 14, 2009

Почему бы не положить градиент фоном на внешний контейнер этой хитронавороченной таблицы (хоть на body, если остальной дизайн позволяет)?

И между <tr> и <td> не должно быть ничего, кроме пробелов и комментариев, последствия могут быть непредсказуемыми.

:tyz · May 14, 2009

Почему бы не положить градиент фоном на внешний контейнер этой хитронавороченной таблицы (хоть на body, если остальной дизайн позволяет)?

Внешний - т.е. первый?! Там он и лежит! А вот про "body" что-то непонял, всмысле задать таблице фон градиентом?

И между <tr> и <td> не должно быть ничего, кроме пробелов и комментариев, последствия могут быть непредсказуемыми.

Это я так для форума обозначил. Чтоб максимум понятно было. Естественно там ничего нет!

Edited May 15, 2009 by :tyz

Searcher · May 15, 2009

1. с png не дружит IE.

2. положить градиент фоном на внешний контейнер это значит, что не надо использовать z-index и класть картинку тэгом img а использовать свойство background: url(путь и имя картинки); для блока konteiner. Тогда и не будет возникать горизонтальная полоса прокрутки.

:tyz · May 15, 2009

1. с png не дружит IE.
2. положить градиент фоном на внешний контейнер это значит, что не надо использовать z-index и класть картинку тэгом img а использовать свойство background: url(путь и имя картинки); для блока konteiner. Тогда и не будет возникать горизонтальная полоса прокрутки.

Сделал как Вы сказали! Но увы, получилось не так как мне нужно!

Хочу уточнить что, под названием картинки "градиент" я подразумеваю картинку в виде градиента (белый плавно переходит в красный)! И мне нужно чтоб она, при любом положении (сжатого) браузера, растягивалась от края до края невидимой облати, с полосой нижней прокрутки или без!

С командой background, удалив строку "<img src="img/header-gradient.jpg" class="gradient">"- она сделала его фоном поверху и с повторением, но не растянуло а .png картинок вообще невидно, и не только в IE. (Я тестирую сразу в опере, мозиле и IE)

Edited June 8, 2009 by :tyz

Dimitry Wolotko · May 15, 2009

Что-то мне подсказывает, что вы слишком мудрите.

Покажите макет.

Да, и ещё - провалидируйте страницу - половина проблем исчезнет как только вы всё исправите.

Searcher · May 15, 2009

мда... вы перемудрили...

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

если хотите, чтобы картинка тянулась, то надо этот абсолютный див вставлять не в ячейку, а прамо в body сразу после открывающего тэга <body> и тоже не надо будет никаких там z-index. В этот див вставляете <img> задаете этому теэгу этой картинки в стиле position:absolute и, соответственно, 100% высоту и ширину.

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

:tyz · May 15, 2009

Что-то мне подсказывает, что вы слишком мудрите.

Возможно Поправте меня тогда.

Покажите макет.

Это структура сайта? Я дал ссылку на него, если поможет!

Да, и ещё - провалидируйте страницу - половина проблем исчезнет как только вы всё исправите.

Попробывал как Вы и сказали. На этом сайте http://validator.w3.org/

Выдал интересный но непонятний результат..

#  Line 16, Column 17: start tag for "TR" omitted, but its declaration does not permit this
<td valign="top"[color="red"]>[/color]
# Error Line 21, Column 129: required attribute "ALT" not specified
…eader-gradient.jpg" class="gradient"[color="red"]>[/color]
Error  Line 171, Column 4: document type does not allow element "BR" here; assuming missing "LI" start-tag
<br[color=red]>[.color]

Общем ругался на английском на скобки. Если знаете русский сайт - посоветуйте. Я гуглил, да там столько всего... Что лучше попросить провереный!

Спасибо. Жду ответа.

Edited May 15, 2009 by :tyz

:tyz · May 15, 2009

мда... вы перемудрили...
вы в фиксированную левую ячейку воткнули абсолютный див, который хотите тянуть за пределы ячейки... броузеры не должны адекватно это отображать.
если хотите, чтобы картинка тянулась, то надо этот абсолютный див вставлять не в ячейку, а прамо в body сразу после открывающего тэга <body> и тоже не надо будет никаких там z-index. В этот див вставляете <img> задаете этому теэгу этой картинки в стиле position:absolute и, соответственно, 100% высоту и ширину.
но при растягивании качество картинки будет сильно ухудшаться, так что советую тянуть не картинку а размножать правую красную часть.

Сделал так, в вайл index.php вставил код после body:

<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
[color="red"]<div><img src="img/header-gradient.jpg" class="konteiner2"></div>[/color]
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<td valign="top">
<!--подключил шапку-->
<? include("blocks/header.php");  ?>
</td>

Строку

 <div class="konteiner"><img src="img/header-gradient.jpg" class="gradient"></div>

удалил с блока шапки.

Создал стиль как Вы написали

.konteiner2 { position:absolute; height:150px; width:100%;}

Результат неизменился

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

Дорабатывать правый край немогу, цель и идея - градиент! Должен же быть какойто выход!

Dimitry Wolotko · May 16, 2009

А у меня вроде всё нормально. Какой браузер шалит?

:tyz · May 16, 2009

А у меня вроде всё нормально. Какой браузер шалит?

Опера, Мозила, IE. Градиент нерастягиваеться в сжатом окне и это не только на моем компьютере! Проверено.

:tyz · May 16, 2009

По причинам, некорректной работы шапки, было решено запаролить сайт.

Edited June 8, 2009 by :tyz

:tyz · May 19, 2009

Градиент по прежнему нерастягиваеться в диве (((((

Может скрипты помогут какие-то?

Посоветуйте пожалуйста.

:tyz · May 20, 2009

Вот что я попробывал!

Картинка градиента была размером 1000 на 140 пикселей. Увеличил её до 2000 на 140 пикселей и разместил в главной таблице блока шапки таким образом:

Теперь он растягивается до конца! Но есть одно "НО", футер сайта и градиент в нем отличаються по цвету (насыщенности). Если и там изменить градиент на новый градиент, то они сильно растягивают сайт. Поэтому я нижний не менял. Это, мне кажется, временное решение проблемы. Потому что мониторы все больше и больше в размерах, и на каком-то 32дюймовом шапка всеравно снова небудет корректно отображаться. Я уже молчу о тех пользователях, которые используют в качестве монитора - LCD телевизоры.

Есть еще варианты уважаемые профессионалы или стоит менять дизайн шапки?

Жду ответа, как соловей лета!

Searcher · May 20, 2009

Ну что за безолаберная работа! Главные ошибки:

Нет тэга <tr> перед <td> на 16 строке.

Нет закрывающего тэга </a> на 109 строке.

Уберите <br> со 147 строки, поставьте его перед <ul>

Что за хрень <span><br></span> в списках в строках 162, 173, 177? Лучше уж дописывать для конкретных <li> отступы в стиле. На 181 строке аналогично.

Нельзя вкладывать блочные элементы в строчные. На 257 строке вложите <a> в <h1> а не наоборот.

Также для всех <img> добавьте атрибут alt хотябы равный пустой строке (alt="")

Для всех <script> обязателен атрибут type.

И сделайте фон шапки, как вам рекомендовали, поскольку атрибут background для таблиц в этом доктайпе не поддерживается.

Броузер пытается исправить ваши ошибки в процессе отображения страницы, но это делает его поведение непредсказуемым. Исправьте ошибки, может и с шапкой все будет нормально.

В стилях код

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

попробуйте записать так:

body {
	margin: 0px;
	width: 100%;
}

:tyz · May 20, 2009

Ну что за безолаберная работа! Главные ошибки:.....
<link> может быть только в разделе <head> а не на 126, 142, 234, 267 строках.

Спасибо, что нашли ошибки, я их исправил но это не помогло. ((

А <link> повторялся из-за того что я в блоках хотел увидеть полноценное меню, когда редактировал, вот оно и добавилось. Не учел.

Снова повторял делать как писалось выше, увы! ((

А именно: 1) в index

<body>
<div><img src="img/header-gradient.jpg" style="position:absolute; width:100%; height:150px;"></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<!--подключил шапку-->
<? include("blocks/header.php");  ?>

2)потом попробывал в header

<div><img src="img/header-gradient.jpg" style="position:absolute; width:100%; height:150px;"></div>
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="507" height="150" valign="top">
<div class="time"><script type="text/javascript">

Горизонтальная полоса прокрутки есть и в полноэкранном режиме, градиент не растягиваеться.

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

SelenIT · May 20, 2009

Вот вариант в качестве наводки:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>тест</title>
<style type="text/css">
html, body { margin: 0; padding: 0; }
.header { position: relative; min-width: 800px; }
.header img { position: absolute; top: 0; left: 0; }
.header table { position: relative; height: 140px; width: 100%; }
</style>
</head>
<body>
<div class="header">
<img src="img/header-gradient.jpg" height="140" width="100%" alt="">
<table>
	<tr>
		<td>текст, очень много текста</td>
		<td>тут тоже очень много текста</td>
	</tr>
</table>
</div>
<p>А тут идет обычный текст</p>
</body>
</html>

min-width для контейнера должен быть не меньше ширины таблицы при ее минимальном сжатии. Проверил в FF3 и IE7. Надеюсь, чем-нибудь поможет...

Edited June 11, 2009 by SelenIT

:tyz · May 21, 2009

Вот вариант в качестве наводки:

Сделал так: переместил в блок шапки и заработало)))

Спасибо, заработало. Осталось убрать горизонтальную полосу в IE.

Zippovich · May 21, 2009

для боди overflow-x: hidden

работает только в ie

Sign In

Градиент!

Question

Link to comment

Share on other sites

19 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

Join the conversation

Обсуждения

Important Information