PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

Здравствуйте, Гость

( Вход · Регистрация · Правила форума )

Забыли пароль?

форматирования картинки и анимашки

Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS (Модераторы: ALEN, armancho7777777)

Страниц (1): [1]

Без описания

Поиск в теме | Версия для печати

daglas1	Отправлено: 18 Августа, 2012 - 22:05:39
Посетитель Покинул форум Сообщений всего: 329 Дата рег-ции: Июль 2011 Помог: 1 раз(а)	Всем привет. Есть у меня анимашка которую я внедрил в див который отображается на время загрузки странички CODE (html): скопировать код в буфер обмена <div id="overlay"><img src="loading.gif" align="center" /></div> А код для ксс таков CODE (html): скопировать код в буфер обмена width: 100%; height: 100%; left: 0; top: 0; position: fixed; background: rgba(0,0,0,0.5); z-index: 9999; Но картинка залипает в верхнем левом углу. Также есть вторая проблема. есть два дива на соседней страничке. Они у меня идут паралельно. Так во втором диве нужно картинку отформатировать по нижнему краю. Я пробовал и таблицу и ксс но всер равнок картинка форматируется по верхнему краю.

IllusionMH	Отправлено: 19 Августа, 2012 - 05:49:31
Активный участник Покинул форум Сообщений всего: 4254 Дата рег-ции: Февр. 2011 Откуда: .kh.ua Помог: 242 раз(а)	daglas1, к чему вообще этот css код относится? Написали бы селектор)) как я понимаю это для *div#overlay, а кто картинку будет за ваc двигать в центр? гораздо проще сделать так CODE (CSS): скопировать код в буфер обмена #overlay { width: 100%; height: 100%; left: 0; top: 0; position: fixed; background: rgba(0,0,0,0.5) url('loading.gif') 50% 50% no-repeat; z-index: 9999; } В чем смысловая нагрузка картинки во втором диве? Может все-таки лучше фоном? background: url('loading.gif') 50% 100% no-repeat;*

daglas1	Отправлено: 19 Августа, 2012 - 13:04:24
Посетитель Покинул форум Сообщений всего: 329 Дата рег-ции: Июль 2011 Помог: 1 раз(а)	IllusionMH пишет: daglas1, к чему вообще этот css код относится? Написали бы селектор)) как я понимаю это для *div#overlay, а кто картинку будет за ваc двигать в центр? гораздо проще сделать так CODE (CSS): скопировать код в буфер обмена #overlay { width: 100%; height: 100%; left: 0; top: 0; position: fixed; background: rgba(0,0,0,0.5) url('loading.gif') 50% 50% no-repeat; z-index: 9999; } В чем смысловая нагрузка картинки во втором диве? Может все-таки лучше фоном? background: url('loading.gif') 50% 100% no-repeat;* Пасибо. Протестю. Картинка во втором диве выступает в роли кнопки. Вот по этому ее и нужно форматировать по нижнему краю.

IllusionMH	Отправлено: 19 Августа, 2012 - 13:30:28
Активный участник Покинул форум Сообщений всего: 4254 Дата рег-ции: Февр. 2011 Откуда: .kh.ua Помог: 242 раз(а)	daglas1, для кнопки стоит использовать button или input[type="button"]. Оба отлично поддаются стилизации(поставить фоном в крайнем случае) кнопку стоит подвинуть вниз отступом от содержимого выше, либо в крайнем случае *position: relativeродителю, а кнопке position: absolute; bottom: XXpx;*

daglas1	Отправлено: 19 Августа, 2012 - 21:40:18
Посетитель Покинул форум Сообщений всего: 329 Дата рег-ции: Июль 2011 Помог: 1 раз(а)	IllusionMH пишет: daglas1, для кнопки стоит использовать button или input[type="button"]. Оба отлично поддаются стилизации(поставить фоном в крайнем случае) кнопку стоит подвинуть вниз отступом от содержимого выше, либо в крайнем случае *position: relativeродителю, а кнопке position: absolute; bottom: XXpx;* Пасибо, но я попробую еще раз с таблицами пошаманить. Внедрить картинку в таблицу, и ей присвоить алигн=боттом (Добавление) К сожалению код приведенный к ксс для анимашки не помог. Она не отображалась вообще. Использоваль ну очень топорный код. Который под фаефоксом работает волне прилично. А по хромом кратинка по центру (залипает слева) не форматируется, но отсутп от верха есть. CODE (htmlphp): скопировать код в буфер обмена <div id=\"overlay\"> <table align=\"center\"> <tr> <td> <br><br><br><br> <img src=\"loading.gif\" align=\"center\" /> </td> </tr> </table> </div> Я так понимаю что ситуацию можно разрулить на уровне ввода дополнительных ячеек с фиксированнй шириной. Только как получить ширину экрана и высоту, чтобы вставить сразу эти ячейки?

IllusionMH	Отправлено: 20 Августа, 2012 - 05:16:06
Активный участник Покинул форум Сообщений всего: 4254 Дата рег-ции: Февр. 2011 Откуда: .kh.ua Помог: 242 раз(а)	daglas1, я вот не понимаю... синдром NIH свирепствует? Не обижайтесь, но вы сейчас откровенной говнокод пишите и хотите чтобы он работал, а он не работает и просите других разобраться... Не нужно лишних элементов - таблицы нужны для представления данных, а не для попытки сделать разметку. Был дан 100% рабочий вариант(с точностью до понимания position:fixed(IE7+) и rgba(IE9+)) Вообще идеальный вариант: CODE (CSS): скопировать код в буфер обмена body.loadingoverlay:before { content:''; width: 100%; height: 100%; left: 0; top: 0; position: fixed; background: rgba(0,0,0,0.5) url("//placekitten.com/201/201") 50% 50% no-repeat; z-index: 9999; } При начале/окончании загрузки просто добавляется/убирается соответствующий класс. Вообще никакой лишней разметки. http://codepen[dot]io/IllusionMH/full/CLHny

daglas1	Отправлено: 20 Августа, 2012 - 10:19:53
Посетитель Покинул форум Сообщений всего: 329 Дата рег-ции: Июль 2011 Помог: 1 раз(а)	IllusionMH пишет: daglas1, я вот не понимаю... синдром NIH свирепствует? Не обижайтесь, но вы сейчас откровенной говнокод пишите и хотите чтобы он работал, а он не работает и просите других разобраться... Не нужно лишних элементов - таблицы нужны для представления данных, а не для попытки сделать разметку. Был дан 100% рабочий вариант(с точностью до понимания position:fixed(IE7+) и rgba(IE9+)) Вообще идеальный вариант: CODE (CSS): скопировать код в буфер обмена body.loadingoverlay:before { content:''; width: 100%; height: 100%; left: 0; top: 0; position: fixed; background: rgba(0,0,0,0.5) url("//placekitten.com/201/201") 50% 50% no-repeat; z-index: 9999; } При начале/окончании загрузки просто добавляется/убирается соответствующий класс. Вообще никакой лишней разметки. http://codepen[dot]io/IllusionMH/full/CLHny Да я понимаю что тот код который я написал очень топорный. Но он работал адекватно под мозилкой. Но предыдущий вариант кода не работал, там вообще анимашка не появлялась.

IllusionMH	Отправлено: 20 Августа, 2012 - 10:40:19
Активный участник Покинул форум Сообщений всего: 4254 Дата рег-ции: Февр. 2011 Откуда: .kh.ua Помог: 242 раз(а)	daglas1, как я понимаю под "мозилкой" вы подразумеваете ФФ. Скрипт проверен в Firefox 14.0.1 (Stable) и Firefox 17.0a1 (Nightly)

daglas1	Отправлено: 20 Августа, 2012 - 14:26:49
Посетитель Покинул форум Сообщений всего: 329 Дата рег-ции: Июль 2011 Помог: 1 раз(а)	IllusionMH пишет: daglas1, как я понимаю под "мозилкой" вы подразумеваете ФФ. Скрипт проверен в Firefox 14.0.1 (Stable) и Firefox 17.0a1 (Nightly) да ваш код работоспособный. Я видел пример. Просто выяснилось что и мой код тоже рабоспособный и под мозилкой и под хромом. Я просто внедрил свой код в два разных джумла компонента. Тот который адекватно работает под мозилкой он и под хроом адекватно работает. Т.е. остается только баг искать во втором компоненте. Видать совершил ошибку при переносе кода. Так что если чем обидел то не серчайте, и пасибо за код.

Поиск в теме | Версия для печати

Страниц (1): [1]

Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)

« HTML, Дизайн & CSS »

Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.