Шапка сайта

RedEclipse · August 6, 2009

Всем привет! Столкнулся с такой проблемой... Есть шапка у сайта, состоит из 3-х картинок - левая и правая части фиксированной длинны, а средняя должна растягиваться. Но не знаю почему, мой код работает только в ФФ(полностью)...

css:

table.logo td.left-logo {
background:url(../images/logo_part_1.png) no-repeat;
width: 750px;
height: 200px;
}
table.logo td.center-logo {
background:url(../images/logo_part_2.png) repeat-x;
width: 1px;
height: 200px;
}
table.logo td.right-logo {
background:url(../images/logo_part_3.png) no-repeat;
background-position: right;
height: 200px;
width: 16px;
}

html:

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="logo">
<tr>
<td class="left-logo"></td>
<td class="center-logo"></td>
<td class="right-logo"</td>
</tr>
</table>

В других браузерах как, к примеру, Opera и IE - картинка logo_part_2.png не отображается, либо отображается в единичтом экземпляре - не растягивается. Неподскажите в чем проблема?

Justnewone · August 6, 2009

Ссылка есть?

psywalker · August 6, 2009

Уже вижу два косяка в коде:

1)

table.logo td.center-logo {
background:url(../images/logo_part_2.png) repeat-x;
width: 1px;
height: 200px;
}

Чё за width: 1px; ??

2)

table.logo td.right-logo {
background:url(../images/logo_part_3.png) no-repeat;
background-position: right;
height: 200px;
width: 16px;
}

Зачем сначала написал сокращённую форму записи: background:url(../images/logo_part_3.png) no-repeat;, а потом нет: background-position: right;?? Определись и напиши правильно: background:url(../images/logo_part_3.png) right center no-repeat;

3) И давай ссылку правда

RedEclipse · August 6, 2009

Сайт конечно работает, но у него шапка щас свершенно другая и написана по другому. Я обновлёный вид сайта пока на локалхосте держу - проверяю.

А сокращеную и не сокращеную писал так, для профилактики... авось и заработает

Чё за width: 1px; ??

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

Edited August 6, 2009 by RedEclipse

Justnewone · August 6, 2009

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

Сделайте логично - будет работать, нелогично кто-то проигнорирует, а кто-то не поймет.

RedEclipse · August 6, 2009

Неужели через бекграунд ну никак это нельзя сделать?

http://img30.imageshack.us/gal.php?g=25974228.png

Слева загружено через ФФ, а справа через Оперу

ADD: У меня примерно по такому же принципу написана таблица для блоков с картинками фиксированной длинны и ширины, но оно прекрасно работает и растягивается как мне нужно... А это не работает(

Edited August 6, 2009 by RedEclipse

Justnewone · August 6, 2009

Неужели через бекграунд ну никак это нельзя сделать?
http://img30.imageshack.us/gal.php?g=25974228.png
Слева загружено через ФФ, а справа через Оперу

Конечно можно, я бы сделал дивами с флоатом и не парился... репит беграунд на родителя - левый и правый на соответствующий флоат блоки.

RedEclipse · August 6, 2009

спасибо, попробую

psywalker · August 6, 2009

А я бы сделал ещё прикольнее, взял бы просто шапку, пустил бы сверху повторяющийся фон, а по бокам бы разбросал абсолюты, вот типо того:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	div.head { background: url(frame.jpg) repeat-x; position: relative; height: 200px;}
		div.left { 
			position: absolute;
			top: 0; 
			left: 0;
			width: 750px;
			height: 200px;
			background: url(frame.jpg) left top no-repeat;
		}
		div.right { 
			position: absolute;
			right: 0;
			width: 16px;
			height: 200px;
			background: url(frame.jpg) right top no-repeat;
		}
</style>
</head>

<body>
<div class="head">
	<div class="left"></div>
	<div class="right"></div>
</div>
</body>
</html>

Edited August 6, 2009 by psywalker

RedEclipse · August 6, 2009

Psywalker, спасибо тебе большое! Работает на отличненько!

psywalker · August 6, 2009

Psywalker, спасибо тебе большое! Работает на отличненько!

А у нас по-другому не бывает

S.DJ.S · August 7, 2009

Подскажите пожалуйста.

Как в CSS установить Flash-анимацию? Заменяя картинку в шапке, на Flash, вводя код в CSS, сама флэшка не отображается. Есть ли какой нибудь скрипт или что нужно, чтобы Flash-анимация отображалась в CSS?

Я новичок в этом деле, очень прошу вас, объясните по подробнее и по проще чтобы таким чайникам как я, было понятно.

Заранее благодарю, надеясь на ваше понимание.

PS: Вот это код CSS. Я подчеркнул код картинки, которую нужно заменить на флэш. (flashka.swf)

/* General Style */

body {background:#332D2A;margin:0;padding:0;}

.leftColumn {width:30%;background:url('/.s/t/852/2.gif') right repeat-y #87B2D9;}

#menuBlock {background:url('http://sdjs.ucoz.net/Picture-site/3-1.jpg') right top no-repeat;background-attachment:fised;}

#centerColumn {width:50%;padding:10px 10px 10px 5px;}

#rightColumn {width:20%;}

.dataBlock {text-align:right;padding:5px;}

.boxTable {width:100%;margin:5px 0;background:url('/.s/t/852/1.gif') no-repeat #282321;}

.boxTitle {height:55px;padding-left:70px;color:#FFFFFF;}

.boxContent {background:url('/.s/t/852/4.gif') left bottom no-repeat;padding:10px 10px 20px 10px;}

h1.logo {color:#FFFFFF;font-size:24pt;margin:20px;}

hr.blueLine {color:#87B2D9;height:5px;background:#87B2D9;border:none;}

Edited August 7, 2009 by S.DJ.S

psywalker · August 7, 2009

Подскажите пожалуйста.
Как в CSS установить Flash-анимацию? Заменяя картинку в шапке, на Flash, вводя код в CSS, сама флэшка не отображается. Есть ли какой нибудь скрипт или что нужно, чтобы Flash-анимация отображалась в CSS?

Да дружище, можно с помощью этого: http://noregret.org/tutor/swfobject/

Там в принципе ерунда, скачиваешь скрипт, приготавливаешь блок для Замены картинки на Флэш и подключаешь

Edited August 7, 2009 by psywalker

S.DJ.S · August 7, 2009

Да дружище, можно с помощью этого: http://noregret.org/tutor/swfobject/
Там в принципе ерунда, скачиваешь скрипт, приготавливаешь блок для Замены картинки на Флэш и подключаешь

Спасибо вам большое. Сейчас попробую.

S.DJ.S · August 7, 2009

psywalker

Попробовал ваш метод, но там нужно скачать какой то файл, для того чтобы весь HTML-код работал, но он не скачивается. Пишет - Page not found. Типо файла нет чтоли. Короче не получается так как вы сказали. Как же Flash тогда ставить-то?

psywalker · August 7, 2009

Держи дружище, залил тебе файл на хост: http://psywalker.ru/Forum/1.rar

S.DJ.S · August 7, 2009

psywalker

Спасибо огромное, вы лучший!!!

psywalker · August 7, 2009

psywalker
Спасибо огромное, вы лучший!!! wink.gif

Лучший в чём?

S.DJ.S · August 7, 2009

Ну вот в чём странность.

Я ввёл в корень тот файл что вы мне дали, установил HTML-код, чтобы в той ссылке что вы мне дали, хотя там их было много, но я кажется выбрал тот что нужно, но всё равно флэшка не отображается.

Может я не туда код вставляю? Или может, может не тот код? Посмотрите на сам код CSS

/* General Style */

body {background:#332D2A;margin:0;padding:0;}

.leftColumn {width:30%;background:url('/.s/t/852/2.gif') right repeat-y #87B2D9;}

#menuBlock {background:url('http://sdjs.ucoz.net/Picture-site/3-1.jpg') right top no-repeat;background-attachment:fised;}

#centerColumn {width:50%;padding:10px 10px 10px 5px;}

#rightColumn {width:20%;}

.dataBlock {text-align:right;padding:5px;}

.boxTable {width:100%;margin:5px 0;background:url('/.s/t/852/1.gif') no-repeat #282321;}

.boxTitle {height:55px;padding-left:70px;color:#FFFFFF;}

.boxContent {background:url('/.s/t/852/4.gif') left bottom no-repeat;padding:10px 10px 20px 10px;}

h1.logo {color:#FFFFFF;font-size:24pt;margin:20px;}

hr.blueLine {color:#87B2D9;height:5px;background:#87B2D9;border:none;}

Там подчёркнута картинка которую надо заменить на флэш. И как её заменить то? Чем? как? на что? Объясните подробнее.

Edited August 7, 2009 by S.DJ.S

psywalker · August 7, 2009

Как я делаю:

1) На верху страницы между <head></head> вставляю <script type="text/javascript" src="swfobject.js"></script>

В это время скрипт уже лежит там, куда я ссылаюсь: src="swfobject.js

2) Это код блока, в котором у меня будет Флэш <div id="hdr"></div>

3) Чуть ниже этого блока я вставляю вот это:

var fo = new SWFObject("head_1.swf", "head_1", "100%", "268", "8", "#181818"); fo.write("hdr");

</script>

Где "head_1.swf", "head_1", - означает название файла-флэш. А в конце этой записи в скобках: fo.write("hdr"); - название блока, куда будет вставляться флэш, в моём случае это блок: id="hdr", поэтому я написал: fo.write("hdr");

4) А вот уже CSS для моего блока:

div#hdr {

background:transparent url(../img/line-bg.jpg) no-repeat scroll 153px 60px;

height:26.8em;

position:relative;}

Всё!

S.DJ.S · August 7, 2009

psywalker

Я ничего не понял. Что куда что вставлять?

ну вот он CSS

/* General Style */

body {background:#332D2A;margin:0;padding:0;}

.leftColumn {width:30%;background:url('/.s/t/852/2.gif') right repeat-y #87B2D9;}

#menuBlock {background:url('http://sdjs.ucoz.net/Picture-site/3-1.jpg') right top no-repeat;background-attachment:fised;}

#centerColumn {width:50%;padding:10px 10px 10px 5px;}

#rightColumn {width:20%;}

.dataBlock {text-align:right;padding:5px;}

.boxTable {width:100%;margin:5px 0;background:url('/.s/t/852/1.gif') no-repeat #282321;}

.boxTitle {height:55px;padding-left:70px;color:#FFFFFF;}

.boxContent {background:url('/.s/t/852/4.gif') left bottom no-repeat;padding:10px 10px 20px 10px;}

h1.logo {color:#FFFFFF;font-size:24pt;margin:20px;}

hr.blueLine {color:#87B2D9;height:5px;background:#87B2D9;border:none;}

Вот флэшка:

http://sdjs.ucoz.net/Flash/Banner.swf

И куда её вставлять?

Объясните нормально, подробнее и дохотчиво. Я понимаю у вас там на сайте стоит всё так как понятно вам, но мне НЕпонятно ровным счётом всё что там у вас стоит. И весь код протеворечит тому что вы мне дали из ссылки. Я не понимаю куда что ставить. Мне просто картинку что в CSS сидит, надо заменить на флэш.

Edited August 7, 2009 by S.DJ.S

psywalker · August 7, 2009

А помойму я всё популярно объяснил на мой взгляд и зачем ты мне суёшь свой CSS, в котором Ересь какая понаписана, я же тебе ясно сказал, сделай блок, назови его как угодно, например id="hdr", возьми в CSS для него поставь ширину, высоту и Фон, а на саму страницу помести этот код:

1) На верху страницы между <head></head> вставляю <script type="text/javascript" src="swfobject.js"></script>

В это время скрипт уже лежит там, куда я ссылаюсь: src="swfobject.js

2) Это код блока, в котором у меня будет Флэш <div id="hdr"></div>

3) Чуть ниже этого блока я вставляю вот это:

var fo = new SWFObject("Banner.swf", "Banner", "100%", "268", "8", "#181818"); fo.write("hdr");

</script>

Где "Banner.swf", "Banner", - означает название файла-флэш. А в конце этой записи в скобках: fo.write("hdr"); - название блока, куда будет вставляться флэш, в моём случае это блок: id="hdr", поэтому я написал: fo.write("hdr");

ЧЁ непонятного????

Edited August 7, 2009 by psywalker

Sign In

Шапка сайта

Question

Link to comment

Share on other sites

21 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

Join the conversation

Обсуждения

Important Information