X   Сообщение сайта
(Сообщение закроется через 2 секунды)

Здравствуйте, гость ( Вход | Регистрация )

 
Ответить в данную темуНачать новую тему
> Совмещение беккграунда с шапкой сайта
termit
сообщение 2010-01-15, 20:29
Сообщение #1
Опытный
Иконка группы

Группа: Бета-тестеры
Сообщений: 705
Регистрация: 2009-06-02
Из: Житомир

Репутация:   нет  
Всего: 11


Помогите пожалуйста.

Делаю шаблончик. Возникла проблема. Нужно сделать в CSS чтоб шапка и бекграунд совмещались. Детальней на рисунке.

Смущает меня то что в разных браузерах топ-отступ разный...

Прикрепленные файлы  10.JPG ( 7.15 килобайт ) Скачиваний: 34

Прикрепленные файлы
Прикрепленные файлы  10.JPG ( 7.15 килобайт ) Скачиваний: 34
 
Перейти в начало страницы
+Цитировать сообщение
NullMachine
сообщение 2010-01-15, 20:37
Сообщение #2
Любитель
Иконка группы

Группа: Eleanor user
Сообщений: 154
Регистрация: 2010-01-01
Из: Саранск

Репутация:   нет  
Всего: нет


termit, покажи свой css.
Перейти в начало страницы
+Цитировать сообщение
termit
сообщение 2010-01-15, 20:40
Сообщение #3
Опытный
Иконка группы

Группа: Бета-тестеры
Сообщений: 705
Регистрация: 2009-06-02
Из: Житомир

Репутация:   нет  
Всего: 11


Цитата (NullMachine @ 15.1.2010, 19:37)
termit, покажи свой css.

его ещё нету... Только начал верстать(таблицами). Это место проблемное...
Перейти в начало страницы
+Цитировать сообщение
NullMachine
сообщение 2010-01-15, 20:51
Сообщение #4
Любитель
Иконка группы

Группа: Eleanor user
Сообщений: 154
Регистрация: 2010-01-01
Из: Саранск

Репутация:   нет  
Всего: нет


Таблицами не пользуюсь, только css

.header
{
    margin-top: 100px; растояние от верхушки с помощью нее можно корректировать отступ.
    height: 300px; высота контейнера для шапки.
    position: relative;
}

На крайняк запихни таблицу шапки в див и примени кодик.

Сообщение отредактировал NullMachine - 2010-01-15, 20:52
Перейти в начало страницы
+Цитировать сообщение
termit
сообщение 2010-01-15, 21:06
Сообщение #5
Опытный
Иконка группы

Группа: Бета-тестеры
Сообщений: 705
Регистрация: 2009-06-02
Из: Житомир

Репутация:   нет  
Всего: 11


Цитата (NullMachine @ 15.1.2010, 19:51)
height: 300px; высота контейнера для шапки.

Можно и без этого...
Цитата (NullMachine @ 15.1.2010, 19:51)
margin-top: 100px; растояние от верхушки с помощью нее можно корректировать отступ.

Я так раньше и пробовал, Но проблема кроссбраузерности не решилась. В ИЕ6 отступ изначально на 10-20пикселей больше...(((
Перейти в начало страницы
+Цитировать сообщение
NullMachine
сообщение 2010-01-15, 21:22
Сообщение #6
Любитель
Иконка группы

Группа: Eleanor user
Сообщений: 154
Регистрация: 2010-01-01
Из: Саранск

Репутация:   нет  
Всего: нет


Ты же програмиш как я понял, зделай фикс на js, если грузим IE подгружаем iemain.css если нет то main.css.

Сообщение отредактировал NullMachine - 2010-01-15, 22:02
Перейти в начало страницы
+Цитировать сообщение
termit
сообщение 2010-01-15, 21:59
Сообщение #7
Опытный
Иконка группы

Группа: Бета-тестеры
Сообщений: 705
Регистрация: 2009-06-02
Из: Житомир

Репутация:   нет  
Всего: 11


Кому интересно. Вот решение
Вставляем код в хеад:
<script>
var cssFix = function(){
  var u = navigator.userAgent.toLowerCase(),
  addClass = function(el,val){
	if(!el.className) {
	  el.className = val;
	} else {
	  var newCl = el.className;
	  newCl+=(" "+val);
	  el.className = newCl;
	}
  },
  is = function(t){return (u.indexOf(t)!=-1)};
  addClass(document.getElementsByTagName(&#039;html&#039;)[0],[
	(!(/opera|webtv/i.test(u))&&/msie (d)/.test(u))?(&#039;ie ie&#039;+RegExp.$1)
	  :is(&#039;firefox/2&#039;)?&#039;gecko ff2&#039;
	  :is(&#039;firefox/3&#039;)?&#039;gecko ff3&#039;
	  :is(&#039;gecko/&#039;)?&#039;gecko&#039;
	  :is(&#039;opera/9&#039;)?&#039;opera opera9&#039;:/opera (d)/.test(u)?&#039;opera opera&#039;+RegExp.$1
	  :is(&#039;konqueror&#039;)?&#039;konqueror&#039;
	  :is(&#039;applewebkit/&#039;)?&#039;webkit safari&#039;
	  :is(&#039;mozilla/&#039;)?&#039;gecko&#039;:&#039;&#039;,
	(is(&#039;x11&#039;)||is(&#039;linux&#039;))?&#039; linux&#039;
	  :is(&#039;mac&#039;)?&#039; mac&#039;
	  :is(&#039;win&#039;)?&#039; win&#039;:&#039;&#039;
  ].join(" "));
}();
</script>


Теперь у нас в распоряжении есть дополнительные css селекторы, а именно ОС и браузер. То есть, конструкция будет выглядеть так:

.[ОС].[Браузер] css селектор

Селекторы операционных систем:
.win – Windows
.mac – MacOS
.linux – Linux

Селекторы браузеров:
.ie – все версии ИЕ
.ie8 – ИЕ 8.х
.ie7 – ИЕ 7.x
.ie6 – ИЕ 6.x
.ie5 – ИЕ 5.x
.gecko – все версии фаерфокса, и остальные гекко-браузеры
.ff2 – фаерфокс 2
.ff3 – фаерфокс 3
.opera – все версии оперы
.opera8 – опера 8.x
.opera9 – опера 9.x
.konqueror – konqueror
.safari – сафари

Таким образом если мы хотим применить стили только для Opera 8 под Windows, то мы сделаем это вот так: .win.opera8 селектор { /* свойства */}.

Вот например мои стили
.win.opera #header
{
margin-top: 22px; 
position: relative; 
}
.win.ie #header
{
margin-top: 7px; 
position: relative; 
}
Перейти в начало страницы
+Цитировать сообщение
NullMachine
сообщение 2010-01-15, 22:01
Сообщение #8
Любитель
Иконка группы

Группа: Eleanor user
Сообщений: 154
Регистрация: 2010-01-01
Из: Саранск

Репутация:   нет  
Всего: нет


Молодец, очень здорово получилось, возьму на вооружение.

Сообщение отредактировал NullMachine - 2010-01-15, 22:03
Перейти в начало страницы
+Цитировать сообщение

Ответить в данную темуНачать новую тему
0 чел. читают эту тему (гостей: 0, скрытых пользователей: 0)
Пользователей: 0

 
RSS Текстовая версия 0.0358 сек.    11 запросов    GZIP включен    Сейчас: 2024-03-29, 13:52