Как сделать резиновыми лого и верхнее меню сайта в 4.08RE

[Anstrem]

Лого сайта не пойму как сделать масштабируемым под страницу ?
А то если оно большое, то при маленьком разрешении экрана (читай на старом ipad-e ) на него налезает мини-корзинка в шапке.

В CSS есть пара строк:
.HeaderLogo {float: left;}
.HeaderLogo img {border: none; margin: 20px;}
Но добавления сюда чего то типа width: 50% или auto или даже задания фиксированного размера ничего не меняет...

Ну и верхнее меню тоже при уменьшении разрешения экрана уходит вправо за экран.

Можно со всем этим как то побороться ?

Да и вообще многие блоки как то кривовато резиновостью наделены - сам блок маштабируется, а вот содержимое в нем нет (анонсы статей например и т.п.)

[MilkeyWay]

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

[Anstrem]

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

Почему это картинка статичная ? Ее же можно масштабировать, ну по крайней мере в меньшую то сторону уж точно без каких либо проблем...
Можно и разные выводить в зависимости от разрешения, так нагрузка на проц. и трафик меньше будет конечно.
И ничего это не паранойя, это самая видимая часть сайта, хочется чтобы она нормально выглядела и на мониторе 25" и на iPhone каком-нибудь...

Нашел вроде код в header.php

$request_uri_path = get_request_path();
$request_uri_base = basename($request_uri_path);
// set site logo
$logo_image = get_translation(get_setting_value($settings, "logo_image", "images/tr.gif"));
$logo_image_alt = get_translation(get_setting_value($settings, "logo_image_alt", HOME_PAGE_TITLE));
$logo_width = get_setting_value($settings, "logo_image_width", "");
$logo_height = get_setting_value($settings, "logo_image_height", "");
$logo_size = "";
if ($logo_width || $logo_height) {
if ($logo_width) { $logo_size = "width=\"".$logo_width."\""; }
if ($logo_height) { $logo_size .= " height=\"".$logo_height."\""; }
} elseif ($logo_image && !preg_match("/^http\:\/\//", $logo_image)) {
//$logo_image = $absolute_url . $logo_image;
$image_size = @GetImageSize($logo_image);
if (is_array($image_size)) {
$logo_size = $image_size[3];
}
}

Не совсем понимаю по тексту для чего $logo_size = ""; и можно ли с помощью него что то сделать ?

[MilkeyWay]

не понимаю вашу проблему,у меня и на 40 дюймах выглядит так же как и на 17 и на айпаде,то что логотипу не надо задавать резину-вроде очевидно,чем не устраивает статика?

зы или мы друг-друга недопонимаем

[Anstrem]

не понимаю вашу проблему,у меня и на 40 дюймах выглядит так же как и на 17 и на айпаде,то что логотипу не надо задавать резину-вроде очевидно,чем не устраивает статика?

зы или мы друг-друга недопонимаем

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

Я одного не пойму, я в header.php в коде выше задал для проверки фиксированно $logo_image="images/logo2.jpg";
Так почему то не работает, все равно выводит то лого, что в админке подцеплено...

Это какой то не тот header.php что ли ?

[MilkeyWay]

есть где глянуть на сайт?не очень понятно,особенно про длинное лого

[Anstrem]

если смотреть на экране iPhone или iPad, то корзина в шапке налезает на лого

[MilkeyWay]

у вас там конечно Ж с версткой)
попробуйте так,средствами css:

.headerLeft{float: left; position: relative; width: 80%;}

.header img {
width: 100%;
}

блоки .headerMiddle удалите или закомментируйте,или удалите width 30%

при больших разрешения картинка будет растягиваться,,а так наверное надо яваскрипт юзать для маcштабирования

[Anstrem]

Ой, спасибо, так просто оказывается... Эх, ни хрена я в этом CSS не понимаю

[MilkeyWay]

Не за что,но это скорее "грубое решение"...например,попробуйте посужать окно,посмотрите,как будет себя вести логотип.
можно еще посоветовать:логотип(название сайта) обрезать от правой части,немного уменьшить размер(ширину/высоту)задать блоку слева фикс.ширину/высоту,сделать блок по середине(где телефон и майл),средствами css(фон,закругление границ и т.д) ну и справа корзина,хотя я и сам в этом деле новичок,могу и глупость сделать/посоветовать,у вас резина+длинное лого,по-этому ниче лучше не придумал,проблематично при таком раскладе все это уместить в окно,без яваскрипта).мб кто еще отпишется,и что-нибудь посоветует

[oldmanager]

Ой, спасибо, так просто оказывается... Эх, ни хрена я в этом CSS не понимаю

Вы уже подключили скрипты для изменения размеров лого? Или как?
Глянул на сайт, а он уменьшается аж до 600рх в ширину! Страница без горизонтальной прокрутки, а вся шапка при этом маштабируется!
Раскажите, как вы это сделали.

P.S. На самом деле для мобильных устройств делают специальные версии сайтов. К ним предъявляются немного другие требования.

[Anstrem]

Вы уже подключили скрипты для изменения размеров лого? Или как?
Глянул на сайт, а он уменьшается аж до 600рх в ширину! Страница без горизонтальной прокрутки, а вся шапка при этом маштабируется!
Раскажите, как вы это сделали.

P.S. На самом деле для мобильных устройств делают специальные версии сайтов. К ним предъявляются немного другие требования.

Так Выше же MilkeyWay написал как сделать.
Я в точности так и сделал, работает

В css файле (multi.css в моем случае) прописываем:
.headerLeft{float: left; position: relative; width: 80%;}
.header img {
width: 100%;
}

а блоки .headerMiddle удаляем или комментируем (или удаляем в них width 30% или ставим width 0%)

Цифры можно и свои. То что выше написано означает, что блок headerLeft будет занимать 80% экрана, центральные header блоки вообще убрали, остальная часть экрана под headerRight, ширина картинки в headerLeft = 100% от ширины самого блока.
Собственно и все. Блок маштабируется автоматом, картинка в нем тоже.

[oldmanager]

Я не понял, думал каким-то другим способом.
Просто в CSS-файле версии 3,6 нет классов .headerLeft и .header img, вот я и не смог проверить.