[X] Помощник

[termit]

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

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

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

 10.JPG ( 7.15 килобайт ) Скачиваний: 34

[NullMachine]

termit, покажи свой css.

[termit]

termit, покажи свой css.

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

[NullMachine]

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

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

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

Сообщение отредактировал NullMachine - 2010-01-15, 20:52

[termit]

height: 300px; высота контейнера для шапки.

Можно и без этого...

margin-top: 100px; растояние от верхушки с помощью нее можно корректировать отступ.

Я так раньше и пробовал, Но проблема кроссбраузерности не решилась. В ИЕ6 отступ изначально на 10-20пикселей больше...(((

[NullMachine]

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

Сообщение отредактировал NullMachine - 2010-01-15, 22:02

[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]

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

Сообщение отредактировал NullMachine - 2010-01-15, 22:03