Извините, ничего не найдено.

Не расстраивайся! Лучше выпей чайку!
Регистрация
Справка
Календарь

Вернуться   forum.boolean.name > Веб-программирование > JavaScript / HTML

JavaScript / HTML Создание динамической разметки страниц

Ответ
 
Опции темы
Старый 03.03.2015, 14:33   #1
Trazzy
Разработчик
 
Аватар для Trazzy
 
Регистрация: 24.11.2008
Адрес: UA
Сообщений: 504
Написано 110 полезных сообщений
(для 225 пользователей)
Фоновое изображение по ширине сверху

Подскажите как лучше (и чем) спозиционировать background, чтобы он располагался сверху по ширине клиентской области браузера.
Миниатюры
Нажмите на изображение для увеличения
Название: бэкграунд.jpg
Просмотров: 955
Размер:	248.9 Кб
ID:	21543  
__________________
Уважай собеседника, а лучше подари ему +
(Offline)
 
Ответить с цитированием
Старый 03.03.2015, 19:13   #2
ABTOMAT
Ференька
 
Аватар для ABTOMAT
 
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений
(для 15,675 пользователей)
Ответ: Фоновое изображение по ширине сверху

http://htmlbook.ru/css/background-size

background-size: contain

Но не работает в IE8. Если надо и в нём, то придётся городить огород из <img> и блоков. Но, думаю, нет смысла так делать, если заказчику прямо не всралось чтоб это работало в IE8 и он готов за это заплатить. (Я бы в качестве graceful drgradation просто однотонный цвет вставил).
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**

* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена

(Offline)
 
Ответить с цитированием
Сообщение было полезно следующим пользователям:
Trazzy (04.03.2015)
Старый 04.03.2015, 12:33   #3
Trazzy
Разработчик
 
Аватар для Trazzy
 
Регистрация: 24.11.2008
Адрес: UA
Сообщений: 504
Написано 110 полезных сообщений
(для 225 пользователей)
Ответ: Фоновое изображение по ширине сверху

И опять автэ

хм, не думал что так всё просто...
Но в моем варианте мне наверное больше подходит cover чем contain, который кстати не сработал как показано в примерах.
З.Ы. IE пока не интересует. Хотя хотелось бы увидеть какие есть еще варианты реализации, кроме этого:

body {
    
backgroundurl('bg.jpg'no-repeat;
    
background-sizecover;

т.к. я как раз перед этим и сделал некую "грядку".
__________________
Уважай собеседника, а лучше подари ему +
(Offline)
 
Ответить с цитированием
Старый 04.03.2015, 13:26   #4
moka
.
 
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений
(для 6,863 пользователей)
Ответ: Фоновое изображение по ширине сверху

https://jsfiddle.net/891vwvcL/1/
(Offline)
 
Ответить с цитированием
Старый 04.03.2015, 13:32   #5
Trazzy
Разработчик
 
Аватар для Trazzy
 
Регистрация: 24.11.2008
Адрес: UA
Сообщений: 504
Написано 110 полезных сообщений
(для 225 пользователей)
Ответ: Фоновое изображение по ширине сверху

moka,

Сообщение от Trazzy Посмотреть сообщение
Подскажите как лучше (и чем) спозиционировать background, чтобы он располагался сверху по ширине клиентской области браузера.
__________________
Уважай собеседника, а лучше подари ему +
(Offline)
 
Ответить с цитированием
Старый 04.03.2015, 13:52   #6
moka
.
 
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений
(для 6,863 пользователей)
Ответ: Фоновое изображение по ширине сверху

Если тебе конкретно то что на скринах выше нужно, то тупо background-size: 100% auto; или background-contain, но это не красиво т.к. внизу будет цвет зеленый.
(Offline)
 
Ответить с цитированием
Сообщение было полезно следующим пользователям:
Trazzy (05.03.2015)
Старый 04.03.2015, 14:07   #7
Trazzy
Разработчик
 
Аватар для Trazzy
 
Регистрация: 24.11.2008
Адрес: UA
Сообщений: 504
Написано 110 полезных сообщений
(для 225 пользователей)
Ответ: Фоновое изображение по ширине сверху

да, именно то что на скринах. фон и картинка будут другие (эти я поставил для наглядности). твой вариант с background-size: 100% auto; вполне подходит, также как и background-size: cover; ... и вот уже есть 2 варианта. осталось проверить кроссбраузерность каждого.

Результат должен быть вроде этого:
Миниатюры
Нажмите на изображение для увеличения
Название: 12.jpg
Просмотров: 842
Размер:	158.4 Кб
ID:	21546  
__________________
Уважай собеседника, а лучше подари ему +
(Offline)
 
Ответить с цитированием
Старый 04.03.2015, 22:41   #8
ABTOMAT
Ференька
 
Аватар для ABTOMAT
 
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,741
Написано 5,461 полезных сообщений
(для 15,675 пользователей)
Ответ: Фоновое изображение по ширине сверху

Поверх фона absolute-блоком внизу повесить png-шку с градиентом прозрачность-цвет фона.
__________________
Мои проекты:
Анальное Рабство
Зелёный Слоник
Дмитрий Маслов*
Различие**
Клюква**

* — в стадии разработки
** — в стадии проектирования
Для проектов в стадии проектирования приведены кодовые имена

(Offline)
 
Ответить с цитированием
Старый 05.03.2015, 10:44   #9
Trazzy
Разработчик
 
Аватар для Trazzy
 
Регистрация: 24.11.2008
Адрес: UA
Сообщений: 504
Написано 110 полезных сообщений
(для 225 пользователей)
Ответ: Фоновое изображение по ширине сверху

остановился на варианте с background-size: 100% auto; не хочу лишних блоков. а градиент уже на картинке)
всем спасибо, на данном уровне проблема решена
__________________
Уважай собеседника, а лучше подари ему +
(Offline)
 
Ответить с цитированием
Старый 05.03.2015, 13:11   #10
moka
.
 
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений
(для 6,863 пользователей)
Ответ: Фоновое изображение по ширине сверху

Не "проблема", а "задача" - это важное отличие разработчика от всех остальных - подход к делу, ментально другой.
(Offline)
 
Ответить с цитированием
Эти 4 пользователя(ей) сказали Спасибо moka за это полезное сообщение:
impersonalis (05.03.2015), mauNgerS (05.03.2015), St_AnGer (05.03.2015), Trazzy (10.03.2015)
Старый 05.03.2015, 13:56   #11
impersonalis
Зануда с интернетом
 
Аватар для impersonalis
 
Регистрация: 04.09.2005
Сообщений: 14,014
Написано 6,798 полезных сообщений
(для 20,935 пользователей)
Ответ: Фоновое изображение по ширине сверху

Сообщение от moka Посмотреть сообщение
Не "проблема", а "задача" - это важное отличие разработчика от всех остальных - подход к делу, ментально другой.
Согласен, но если придраться к словам, то в научной литературе порой встречается контекстно неверный перевод слова "problem" как "проблема", хотя подразумевается "задача". Хотя, это не оправдывает некорректное использование.
__________________
http://nabatchikov.com
Мир нужно делать лучше и чище. Иначе, зачем мы живем? tormoz
А я растила сына на преданьях
о принцах, троллях, потайных свиданьях,
погонях, похищениях невест.
Да кто же знал, что сказка душу съест?
(Offline)
 
Ответить с цитированием
Эти 2 пользователя(ей) сказали Спасибо impersonalis за это полезное сообщение:
ABTOMAT (05.03.2015), moka (05.03.2015)
Старый 10.03.2015, 20:46   #12
Trazzy
Разработчик
 
Аватар для Trazzy
 
Регистрация: 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=$
Но как сделать чтобы при переходе по http://localhost/?act=news убиралось ?act= ???
__________________
Уважай собеседника, а лучше подари ему +
(Offline)
 
Ответить с цитированием
Старый 11.03.2015, 15:01   #13
Randomize
[object Object]
 
Аватар для Randomize
 
Регистрация: 01.08.2008
Адрес: В России
Сообщений: 4,354
Написано 2,470 полезных сообщений
(для 6,850 пользователей)
Ответ: Фоновое изображение по ширине сверху

Сообщение от Trazzy Посмотреть сообщение
Но как сделать чтобы при переходе по http://localhost/?act=news убиралось ?act= ???
Ну 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
Trazzy
Разработчик
 
Аватар для Trazzy
 
Регистрация: 24.11.2008
Адрес: UA
Сообщений: 504
Написано 110 полезных сообщений
(для 225 пользователей)
Ответ: Фоновое изображение по ширине сверху

Гудно. Значит буду использовать редирект.
Вот только не знаю что делать со слешем....

Сообщение от Trazzy Посмотреть сообщение
...при переходе по http://localhost/news скрипт (index.php) успешно принял get-значение "news",
(http://localhost/news/ - тоже принято "news", но страница отобразилась неверно).
__________________
Уважай собеседника, а лучше подари ему +
(Offline)
 
Ответить с цитированием
Старый 11.03.2015, 18:57   #15
Randomize
[object Object]
 
Аватар для Randomize
 
Регистрация: 01.08.2008
Адрес: В России
Сообщений: 4,354
Написано 2,470 полезных сообщений
(для 6,850 пользователей)
Ответ: Фоновое изображение по ширине сверху

Сообщение от Trazzy Посмотреть сообщение
Вот только не знаю что делать со слешем....
Ну либо игнорировать слеш
trim($_GET['act'], '/'); 
Либо не подставлять его в 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)
 
Ответить с цитированием
Ответ


Опции темы

Ваши права в разделе
Вы не можете создавать темы
Вы не можете отвечать на сообщения
Вы не можете прикреплять файлы
Вы не можете редактировать сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.


Часовой пояс GMT +4, время: 12:46.


vBulletin® Version 3.6.5.
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Перевод: zCarot
Style crйe par Allan - vBulletin-Ressources.com