CMS Eleanor - Поиск
Полная версия этой страницы: Официальный форум Eleanor CMS » Совмещение беккграунда с шапкой сайта
Официальный форум Eleanor CMS » Для вебмастеров и владельцев сайтов » Комната веб-дизайнеров
termit
Помогите пожалуйста.

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

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

[attachment=612:10.JPG]
NullMachine
termit, покажи свой css.
termit
Цитата (NullMachine @ 15.1.2010, 19:37)
termit, покажи свой css.

его ещё нету... Только начал верстать(таблицами). Это место проблемное...
NullMachine
Таблицами не пользуюсь, только css

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

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

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

Я так раньше и пробовал, Но проблема кроссбраузерности не решилась. В ИЕ6 отступ изначально на 10-20пикселей больше...(((
NullMachine
Ты же програмиш как я понял, зделай фикс на js, если грузим IE подгружаем iemain.css если нет то main.css.
termit
Кому интересно. Вот решение
Вставляем код в хеад:
<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
Молодец, очень здорово получилось, возьму на вооружение.
Для просмотра полной версии этой страницы, пожалуйста, пройдите по ссылке.