Половинчатый фон

воскресенье, 08 мая 2011

21:04

все записи пользователя в сообществе Makha

Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!

Есть фон, который от центра один в одну сторону, ии другой в другую сторону... Причем еще и общий фон тоже присутвует.
Релизовала так:

<body background="images/bg.jpg">
<div class="bg_left">
</div>
<div class="bg_right"></div>
...

.bg_left {
	background-image: url(bg_l.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	width: 50%;
	float: left;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}
.bg_right {
	background-image: url(bg_r.jpg);
	background-repeat: repeat-x;
	background-position: center top;
	height: 100%;
	position: absolute;
	top: 0px;
	right: 0px;
	width: 50%;
}

На широкоформатнике - все ок! Но, на виртуальной машине и проверяющих сайтах типа viewlike.us/ при разрешении 1024 фон не работает... :weep3:

Сайт тут - madhed.h16.ru
Если есть возможность (разрешение не широкоформатное) посмотрите пожалуйста!

@темы: HTML, CSS

URL

День праздника плаваюший, зависит от лунного календаря и ... Ну вот холодно :( , а еще говорят май месяц.... Ког... В тихом подвале ведьма жила Никто не знал откуда она ...

Свобода зависит в том, что бы зависить только от законов.... Порой собственные воспоминания кажутся принадлежащими ком... Сегодня из-за утренного недостатка адреналина :o были п...

Комментарии

08.05.2011 в 22:50

Ёжик в тумане

Ну-с, 13-тый, кого должен любить чёрт?

Во-первых, я вообще не поняла откуда эта область, помеченная красным?

Широкоформатное, при этом как раз из-за этой области появляется горизонтальная полоса прокрутки. Если бы её (полосы) не было, то всё бы замечательно влезало в окно.
Дальше пока думаю.

URL

08.05.2011 в 23:10

Ёжик в тумане

Ну-с, 13-тый, кого должен любить чёрт?

То ли я совсем старая стала, то ли там и в самом деле где-то ошибка в соотношении дивов и таблиц и процентов их ширины. Честно говоря, не понимаю зачем некоторые вещи реализованы именно так, как реализованы.

URL

09.05.2011 в 10:53

Ёжик в тумане

Ну-с, 13-тый, кого должен любить чёрт?

А ещё проблема с фоном правой части: его левая часть снизу (там, где светлый фон) темнее правой. Поэтому результат полосит.

URL

09.05.2011 в 11:07

Ёжик в тумане

Ну-с, 13-тый, кого должен любить чёрт?

Ошибка раз:
Uncaught exception: TypeError: Cannot convert 'document.getElementById('widht')' to object

Error thrown at line 7, column 0 in mmwidth() in madhed.h16.ru/:
document.getElementById('widht').style.width = ((document.documentElement.clientWidth || document.body.clientWidth) < 988) ? '988px' : ((document.body.clientWidth > 1200) ? '1200px' : '100%')

Ошибка два:
Uncaught exception: TypeError: Cannot convert 'document.getElementById('widht')' to object

Error thrown at line 7, column 0 in mmwidth() in madhed.h16.ru/:
document.getElementById('widht').style.width = ((document.documentElement.clientWidth || document.body.clientWidth) < 988) ? '988px' : ((document.body.clientWidth > 1200) ? '1200px' : '100%');

Исправьте опечатку "widht".

URL

09.05.2011 в 11:58

Ёжик в тумане

Ну-с, 13-тый, кого должен любить чёрт?

Не понимаю, зачем задавать фон в дивах, если всё равно используется табличная вёрстка. Получается очень странная ситуация. Попробуйте поменять масштаб с помощью Ctrl+ и Ctrl-.
Когда картинка очень мелкая, Ваши дивы очень большие по ширине и занимают весь экран. Когда картинка очень большая, дивы уменьшаются и становятся меньше таблицы, из-за чего фон не заполняет всё до конца. Такое ощущение, что их ширина обратно-пропорциональна масштабу.
Более того. Таблица с классом .width всегда имеет ширину 1200, хотя ячейка, в которой она лежит может быть и шире. Это тоже сказывается на внешнем виде.

P.S. Понимаю, что праздник и выходной, но хочется фидбека)))

URL

10.05.2011 в 10:52

Makha

Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!

Ёжик в тумане О.. .на домашнем компе не видно полос Т_Т Заменю. Спасибо.

Попробовать задать фон в боковые уши: ? Или это тоже будет не корректно? :small:

URL

10.05.2011 в 10:56

Makha

Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!

Получилось еще хуже

URL

10.05.2011 в 11:01

Ёжик в тумане

Ну-с, 13-тый, кого должен любить чёрт?

на домашнем компе не видно полос
Становится видно, если с масштабом поиграть. Я тоже не сразу заметила.

А что там с таблицей, у которой ширина никак не хочет меняться?

URL

10.05.2011 в 12:53

Драконофил

Ученик золотой рыбки.

В меню.

<div id="msa">
<div id="msb">
<div id="msc">

Поменяйте (костыль) на

<div id="msa" style="width:200px;">

и посмотрите на результат. Це раз.

Два - крайне рекомендую поставить себе firebug (или dragonfly, не суть) и внимательно покликать по блокам с inspect element - многое станет ясно.

Три -
[Break On This Error] window.attachEvent('onload', mmwidth);
window.attachEvent is not a function

Но это уже придирки.

URL

10.05.2011 в 13:05

Ёжик в тумане

Ну-с, 13-тый, кого должен любить чёрт?

Драконофил inspect element = анализировать элемент? Или это уже внутри фаербага? У меня русифицированная версия.

URL

10.05.2011 в 13:11

Драконофил

Ученик золотой рыбки.

Анализировать, да. Там четко показываются границы блочных элементов, что такие ситуации позволяет решать на лету.
К слову, на сайте на редкость странно реализована левая и правая части bg-image. Я долго пырился.

URL

10.05.2011 в 13:38

Ёжик в тумане

Ну-с, 13-тый, кого должен любить чёрт?

Странно, но работает) А я вперлась в таблицу, у которой ширина всегда 1200 вне зависимости от масштаба. Это она всю картину портит абсолютно точно. Только почему у неё не меняется ширина? :hmm:

А ещё могу констатировать досадную перегрузку таблицами даже для табличной вёрстки. Хотя, это ж не я верстаю)

URL

10.05.2011 в 14:14

Ёжик в тумане

Ну-с, 13-тый, кого должен любить чёрт?

overflow: hidden добавить в .shapka и .predl_tb
ещё не всё

URL

11.05.2011 в 16:51

Makha

Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!

overflow: hidden добавить в .shapka и .predl_tb

:heart:

Все получилось!

URL

11.05.2011 в 16:57

Ёжик в тумане

Ну-с, 13-тый, кого должен любить чёрт?

"Все получилось!"
Неа, только часть проблемы. Там есть ещё элементы, выползающие за ширину таблицы.

URL

11.05.2011 в 17:13

Драконофил

Ученик золотой рыбки.

Ёжик в тумане
Вроде я чуть выше дал часть решения.

URL

11.05.2011 в 18:00

Makha

Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!

Ёжик в тумане я пока не имею доступа перезалить сайт (не дома я пока)...

URL

11.05.2011 в 18:47

Ёжик в тумане

Ну-с, 13-тый, кого должен любить чёрт?

Драконофил, да, можно и так решить. Но там есть ещё одна проблема, которая выглядит как недозакрашивание фона справа, когда масштаб >100%. Уже вычислила с какой именно таблицей связано, но пока не понимаю, что именно с ней не так.

URL

11.05.2011 в 19:27

alhames

alhames.ru

.tabl_W { position: absolute; top: 0; }

Обычно увидев подобное у меня возникает острое желание закрыть верстку и не копошиться дальше)

Касательно фона: а что вам мешает сделать его цельной картинкой вместе с изгибом шириной 1920px и с background-position: center top;?
Размер? Так ведь обе картинки сейчас весят 10+30 кб - а одна будет весить ~25кб. Или я что-то не заметил?

URL

11.05.2011 в 23:26

Makha

Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!

Перезалила на сайт... и кажется ничего не помогло... хотя на компьютере с разрешением 1024 было все ок... А на моих 1600 при уменьшенном окне - опять глюк

alhames А если разрешение будет еще больше? Мне очень нравится ваш вариант, он решит все и быстро

URL

11.05.2011 в 23:28

Makha

Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!

Странно, в ИЕ - ОК... особенный он что ли...

URL

11.05.2011 в 23:28

Makha

Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!

Странно, в ИЕ - ОК... особенный он что ли...

URL

11.05.2011 в 23:58

Makha

Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!

alhames Касательно фона: а что вам мешает сделать его цельной картинкой вместе с изгибом шириной 1920px и с background-position: center top;?
Сделала... Но на виртуалке глюк остался...
Посмотрите, пожалуйста, работает ли теперь корректно?

URL

12.05.2011 в 00:00

alhames

alhames.ru

А если разрешение будет еще больше?
Олигархи идут лесом )

Адекватный максимум разрешений текущего дня - 1920х1080, мониторы с большим разрешением стоят несравнимо дороже и ими пользуется лишь незначительная доля процента людей. ( тык )
Поэтому не ломайте себе голову лишний раз)

URL

12.05.2011 в 00:09

alhames

alhames.ru

Посмотрите, пожалуйста, работает ли теперь корректно?
Попробуйте задать tabl_W min-width: 1210px;
И почему вы сами не проверяете, корректно или нет? Ведь в оконном режиме при смене размеров окна браузер ведет себя так же как и при смене разрешения

URL

12.05.2011 в 00:11

Makha

Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!

alhames Неа, совсем не корректно ведет себя виртуалка под семеркой... А времени переставлять Винду нет совсем...

((
Сейчас попробую.

URL

12.05.2011 в 00:18

alhames

alhames.ru

А причем тут виртуалка?
Просто отключаете фуллскрин и тягаете окно как вам надо.. Или вы о другом о чем-то?
У плагина web-developer, к примеру, можно сохранять необходимые разрешения экрана в настройках, для более точного теста

URL

12.05.2011 в 01:47

Makha

Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!

alhames В том то и дело... Когда я проверяю в мозиле не на виртуалке - все просто замечательно

А вот в виртуальной машине таже мозилла выдает вот эту фичу...

Прогнала плагиной лисы по блокам, вроде как вычлинила ошибку... Точнее ее теперь нет в современных браузерах, но есть (пикселов 3-5 справа) в ИЕ 6-7... Опять таки на виртуальной машине...

Спасибо за подсказку, сейчас еще и его поставлю.

URL

12.05.2011 в 02:04

Makha

Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!

Я отчаялась уже... с помощью этого плагина выбивает фон... Что с ним еше делать, сейчас уже не придумаю...

URL

Добавить комментарий

Расширенная форма

Редактировать

Использовать аватар

Изображения

Подписаться на новые комментарии

Получать уведомления о новых комментариях на E-mail


Запомнить

Половинчатый фон

@web-программирование