Растянуть шапку на весь экран.

[Pavel]

Подскажите, как растянуть шапку на весь экран, код отвечаютщий за шапку

#header {margin: 14px 13px 0px 13px; height: 46px; padding-top: 204px; background: url('../image/header.jpg'); font: bold 1.4em Tahoma, Geneva, sans-serif; color: #fff; overflow: hidden; zoom: 1;}

Что в нем нужно изменить, подскажите пожалуйста.

[SlavkaWM]

это не тут делается ! шаблон дефолтный или другой?

[Pavel]

Шаблон opencartws. Если не тут, то где? Подскажите, а то уже голову сломал с шапкой...

[templater]

одно и тоже каждый раз... ссылку на магазин дайте, вслепую помочь очень сложно.

[Pavel]

DEl.

[SlavkaWM]

можеш прописать следущие

заместо твоего

#header {margin: 14px 13px 0px 13px; height: 46px; padding-top: 204px; background: url('../image/header.jpg'); font: bold 1.4em Tahoma, Geneva, sans-serif; color: #fff; overflow: hidden; zoom: 1;}

заменить на

#header {margin: 14px 13px 0px 13px; height: 46px; padding-top: 204px; background: url('../image/header.jpg') top center no-repeat; font: bold 1.4em Tahoma, Geneva, sans-serif; color: #fff; overflow: hidden; zoom: 1;}

[Pavel]

Так она выравнивается по центру, на 22 дюймовом мониторе по центу, и когда делаешь ее меньше в браузере, то часть картинки по бокам исчезает.

<img id="mylogo" src="линк на картинку" />

<style type="text/css">

#mylogo {width: 100%; margin: 0 0 0 0;}

</style>

Нашел вот такой код, он работает, но тогда блок с "Главная, Войти, Кабинет и прочее" получается ниже картинки, а не на ней.

[SlavkaWM]

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

[SlavkaWM]

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

[Pavel]

Нет, дело не в картинке, сейчас все растягивается как нужно, чуть подправить нужно, но код вставлен в header.tpl <img id="mylogo" src="линк на картинку" />

<style type="text/css">

#mylogo {width: 100%; margin: 0 0 0 0;}

</style>

Из stylesheet.css вырезал background: url('../image/header.jpg') top center no-repeat;. Картинка растягивается, значит можно как-то сделать тоже самое только в css. Или даже если я меньше картинку вставляю, все равно она будет по центу, размер тут роли как таковой не играет.

[SlavkaWM]

если ты всётаки так хочеш то попробуй оставить то что ты даписал лого а хедер изменить так

#header {margin: 14px 13px 0px 13px; height: 46px; top: 204px; font: bold 1.4em Tahoma, Geneva, sans-serif; color: #fff; overflow: hidden; zoom: 1; position:absolute;}

[Pavel]

То что нужно, спасибо большое. Теперь только блок с Главной и прочим сместились. Подскажите как исправить. Их же можно тоже сделать что бы растягивались при изменении размеров браузера. (Главная и т.д)

[SlavkaWM]

чтоб опустить пониже я думаю надо поигратся с

#header {margin: 14px 13px 0px 13px; height: 46px; top: 204px; font: bold 1.4em Tahoma, Geneva, sans-serif; color: #fff; overflow: hidden; zoom: 1; position:absolute;}

а вот растянуть не знаю мне щас не когда смотреть

[Pavel]

Что бы сместить вправо я использовал width: Код принял вид #header {width: 97%; margin: 14px 13px 0px 13px; height: 46px; top: 127px; font: bold 1.4em Tahoma, Geneva, sans-serif; color: #fff; overflow: hidden; zoom: 1; position:absolute;}

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

Pegasus, спасибо Вам большое, а то уже голову сломал, как будет время, отпишите пожалуйста как сделать что я выше отписал.

[Pavel]

Подскажите, пожалуйста, как реализовать выше написанное.

#nav li a {

color: #666600;

z-index: 2;

position: relative;

cursor: pointer;

float: right;

font-size: 13px;

font-family: helvetica, arial, sans-serif;

text-decoration: none;

padding: 20px 35px; Отвечает за размер панели с "Главная и т.д."

}

[SlavkaWM]

тебе надо подобрать отсутп от верха в % а не пихарях тогда вроде дожно будет во всех резалюциях быть одинаково

[Pavel]

Если задаю в процентах, то все очень криво становится, или я не там изменяю? Изменяю padding: 20px 35px; на padding: 20% 35%;

[SlavkaWM]

нет я про выстоту то что топ:127 надо изменить на пару процентов там

[Pavel]

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

[Pavel]

Уже по всякому пробовал, но у меня не получается сделать что бы растягивался этот блок.

[Pavel]

Неужели ни кто не знает?

[m899]

можно так сделать:

в header.tpl перенести

<div id="container">

из 46 строки в 107 перед

<div id="menu">

а в stylesheet.css в

#header {

строка 91 добавить

width: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;

это в дефлотном шаблоне, шапка должна получиться на весь экран

[AES]

Неужели ни кто не знает?

Вам предложили вариант с фоном+ на нем поверх лого, то что вы пытаетесь сделать это полная хрень, на 30 мониторе будет смотреться "не очень".

Есть 2 пути:

1.Дублирующийся фон +поверх лого

2. Масштабирование картинки, пример реализации можно посмотреть тут

Другие варианты будут на определенное разрешение, либо писать скрипт под каждое разрешение.

[Pavel]

Вам предложили вариант с фоном+ на нем поверх лого

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

[Pavel]

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