![](images/chestnut/misc/left.gif) |
JavaScript / HTML Создание динамической разметки страниц |
03.03.2015, 14:33
|
#1
|
Разработчик
Регистрация: 24.11.2008
Адрес: UA
Сообщений: 504
Написано 110 полезных сообщений (для 225 пользователей)
|
Фоновое изображение по ширине сверху
Подскажите как лучше (и чем) спозиционировать background, чтобы он располагался сверху по ширине клиентской области браузера.
__________________
Уважай собеседника, а лучше подари ему +
|
(Offline)
|
|
03.03.2015, 19:13
|
#2
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: Фоновое изображение по ширине сверху
http://htmlbook.ru/css/background-size
background-size: contain
Но не работает в IE8. Если надо и в нём, то придётся городить огород из <img> и блоков. Но, думаю, нет смысла так делать, если заказчику прямо не всралось чтоб это работало в IE8 и он готов за это заплатить. (Я бы в качестве graceful drgradation просто однотонный цвет вставил).
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**
* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена
|
(Offline)
|
|
Сообщение было полезно следующим пользователям:
|
|
04.03.2015, 12:33
|
#3
|
Разработчик
Регистрация: 24.11.2008
Адрес: UA
Сообщений: 504
Написано 110 полезных сообщений (для 225 пользователей)
|
Ответ: Фоновое изображение по ширине сверху
И опять автэ
хм, не думал что так всё просто...
Но в моем варианте мне наверное больше подходит cover чем contain, который кстати не сработал как показано в примерах.
З.Ы. IE пока не интересует. Хотя хотелось бы увидеть какие есть еще варианты реализации, кроме этого:
body { background: url('bg.jpg') no-repeat; background-size: cover; }
т.к. я как раз перед этим и сделал некую "грядку".
__________________
Уважай собеседника, а лучше подари ему +
|
(Offline)
|
|
04.03.2015, 13:26
|
#4
|
.
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений (для 6,863 пользователей)
|
Ответ: Фоновое изображение по ширине сверху
|
(Offline)
|
|
04.03.2015, 13:32
|
#5
|
Разработчик
Регистрация: 24.11.2008
Адрес: UA
Сообщений: 504
Написано 110 полезных сообщений (для 225 пользователей)
|
Ответ: Фоновое изображение по ширине сверху
moka,
Сообщение от Trazzy
Подскажите как лучше (и чем) спозиционировать background, чтобы он располагался сверху по ширине клиентской области браузера.
|
![:)](images/smilies/smile.gif)
__________________
Уважай собеседника, а лучше подари ему +
|
(Offline)
|
|
04.03.2015, 13:52
|
#6
|
.
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений (для 6,863 пользователей)
|
Ответ: Фоновое изображение по ширине сверху
Если тебе конкретно то что на скринах выше нужно, то тупо background-size: 100% auto; или background-contain, но это не красиво т.к. внизу будет цвет зеленый.
|
(Offline)
|
|
Сообщение было полезно следующим пользователям:
|
|
04.03.2015, 14:07
|
#7
|
Разработчик
Регистрация: 24.11.2008
Адрес: UA
Сообщений: 504
Написано 110 полезных сообщений (для 225 пользователей)
|
Ответ: Фоновое изображение по ширине сверху
да, именно то что на скринах. фон и картинка будут другие (эти я поставил для наглядности). твой вариант с background-size: 100% auto; вполне подходит, также как и background-size: cover; ... и вот уже есть 2 варианта. осталось проверить кроссбраузерность каждого.
Результат должен быть вроде этого:
__________________
Уважай собеседника, а лучше подари ему +
|
(Offline)
|
|
04.03.2015, 22:41
|
#8
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: Фоновое изображение по ширине сверху
Поверх фона absolute-блоком внизу повесить png-шку с градиентом прозрачность-цвет фона.
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**
* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена
|
(Offline)
|
|
05.03.2015, 10:44
|
#9
|
Разработчик
Регистрация: 24.11.2008
Адрес: UA
Сообщений: 504
Написано 110 полезных сообщений (для 225 пользователей)
|
Ответ: Фоновое изображение по ширине сверху
остановился на варианте с background-size: 100% auto; не хочу лишних блоков. а градиент уже на картинке)
всем спасибо, на данном уровне проблема решена ![:)](images/smilies/smile.gif)
__________________
Уважай собеседника, а лучше подари ему +
|
(Offline)
|
|
05.03.2015, 13:11
|
#10
|
.
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений (для 6,863 пользователей)
|
Ответ: Фоновое изображение по ширине сверху
Не "проблема", а "задача" - это важное отличие разработчика от всех остальных - подход к делу, ментально другой. ![;)](images/smilies/wink.gif)
|
(Offline)
|
|
Эти 4 пользователя(ей) сказали Спасибо moka за это полезное сообщение:
|
|
05.03.2015, 13:56
|
#11
|
Зануда с интернетом
Регистрация: 04.09.2005
Сообщений: 14,014
Написано 6,798 полезных сообщений (для 20,935 пользователей)
|
Ответ: Фоновое изображение по ширине сверху
Сообщение от moka
Не "проблема", а "задача" - это важное отличие разработчика от всех остальных - подход к делу, ментально другой. ![;)](images/smilies/wink.gif)
|
Согласен, но если придраться к словам, то в научной литературе порой встречается контекстно неверный перевод слова "problem" как "проблема", хотя подразумевается "задача". Хотя, это не оправдывает некорректное использование.
__________________
http://nabatchikov.com
Мир нужно делать лучше и чище. Иначе, зачем мы живем? tormoz
А я растила сына на преданьях
о принцах, троллях, потайных свиданьях,
погонях, похищениях невест.
Да кто же знал, что сказка душу съест?
|
(Offline)
|
|
Эти 2 пользователя(ей) сказали Спасибо impersonalis за это полезное сообщение:
|
|
10.03.2015, 20:46
|
#12
|
Разработчик
Регистрация: 24.11.2008
Адрес: UA
Сообщений: 504
Написано 110 полезных сообщений (для 225 пользователей)
|
Ответ: Фоновое изображение по ширине сверху
Ок. Тогда новая задача:
Требуется преобразовать пути вида
http://localhost/?act=news ---> http://localhost/news
mod_rewrite?.. тогда какие использовать регулярки?
(Добавлено через 12 минут)
Нашел кое-что (пункт 4) -
при переходе по http://localhost/news скрипт (index.php) успешно принял get-значение "news",
( http://localhost/news/ - тоже принято "news", но страница отобразилась неверно).
Файл .htaccess
RewriteEngine On RewriteRule ^([a-zA-Z0-9_-]+)$ index.php?act=$1 RewriteRule ^([a-zA-Z0-9_-]+)/$ index.php?act=$1
Но как сделать чтобы при переходе по http://localhost/?act=news убиралось ?act= ??? ![:dontknow:](images/smilies/dontknow.gif)
__________________
Уважай собеседника, а лучше подари ему +
|
(Offline)
|
|
11.03.2015, 15:01
|
#13
|
[object Object]
Регистрация: 01.08.2008
Адрес: В России
Сообщений: 4,358
Написано 2,472 полезных сообщений (для 6,854 пользователей)
|
Ответ: Фоновое изображение по ширине сверху
Сообщение от Trazzy
|
Ну rewrite это именно rewrite. Не путай с редиректом. То что ты хочешь сделать делается через редирект внутри твоего php файла.
Нечто вроде этого:
<?php if (isset($_GET['act']) && $_SERVER['QUERY_STRING'] !== $_GET['act']) { header('Location: /' . $_GET['act']); exit(); }
__________________
Retry, Abort, Ignore? █
Intel Core i7-9700 4.70 Ghz; 64Gb; Nvidia RTX 3070
AMD Ryzen 7 3800X 4.3Ghz; 64Gb; Nvidia 1070Ti
AMD Ryzen 7 1700X 3.4Ghz; 8Gb; AMD RX 570
AMD Athlon II 2.6Ghz; 8Gb; Nvidia GTX 750 Ti
|
(Offline)
|
|
11.03.2015, 15:51
|
#14
|
Разработчик
Регистрация: 24.11.2008
Адрес: UA
Сообщений: 504
Написано 110 полезных сообщений (для 225 пользователей)
|
Ответ: Фоновое изображение по ширине сверху
Гудно. Значит буду использовать редирект.
Вот только не знаю что делать со слешем....
Сообщение от Trazzy
|
__________________
Уважай собеседника, а лучше подари ему +
|
(Offline)
|
|
11.03.2015, 18:57
|
#15
|
[object Object]
Регистрация: 01.08.2008
Адрес: В России
Сообщений: 4,358
Написано 2,472 полезных сообщений (для 6,854 пользователей)
|
Ответ: Фоновое изображение по ширине сверху
Сообщение от Trazzy
Вот только не знаю что делать со слешем....
|
Ну либо игнорировать слеш
Либо не подставлять его в url.
Второе предпочтительнее ведь когда у одной страницы есть 2 адреса это ни есть гуд.
__________________
Retry, Abort, Ignore? █
Intel Core i7-9700 4.70 Ghz; 64Gb; Nvidia RTX 3070
AMD Ryzen 7 3800X 4.3Ghz; 64Gb; Nvidia 1070Ti
AMD Ryzen 7 1700X 3.4Ghz; 8Gb; AMD RX 570
AMD Athlon II 2.6Ghz; 8Gb; Nvidia GTX 750 Ti
|
(Offline)
|
|
Ваши права в разделе
|
Вы не можете создавать темы
Вы не можете отвечать на сообщения
Вы не можете прикреплять файлы
Вы не можете редактировать сообщения
HTML код Выкл.
|
|
|
Часовой пояс GMT +4, время: 13:33.
|