Форум программистов «Весельчак У»
  *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

  • Рекомендуем проверить настройки временной зоны в вашем профиле (страница "Внешний вид форума", пункт "Часовой пояс:").
  • У нас больше нет рассылок. Если вам приходят письма от наших бывших рассылок mail.ru и subscribe.ru, то знайте, что это не мы рассылаем.
   Начало  
Наши сайты
Помощь Поиск Календарь Почта Войти Регистрация  
 
Страниц: [1]   Вниз
  Печать  
Автор Тема: помгите пожалуйста реализовать бэкграунд  (Прочитано 27349 раз)
0 Пользователей и 1 Гость смотрят эту тему.
dark_rain
Помогающий

ua
Offline Offline
Пол: Мужской

« : 06-03-2010 14:24 » 

Доброго времени суток уважаемые форумчане. Я всего лишь любитель поэтому строго не судите) Есть проблема: нужно сделать стартовую страницу для сайта, на фоне должна быть картинка и должна она быть подогнана под окошко, т.е. независимо какой монитор у пользователя 17" или 19" она должна быть на весь экран (что бы небыло полос прокрутки по вертикали и горизонтали). Как лучше сделать стартовую страницу флешкой или же нужен какой то скрипт который будет считывать разрешение экрана пользователя и в зависимости от этого загружать с сервера фон определенного разрешения? Очень прошу вашей помощи.
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #1 : 06-03-2010 15:09 » new

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

Фон, размещенный средствами CSS, не вызывает появление прокрутки.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
dark_rain
Помогающий

ua
Offline Offline
Пол: Мужской

« Ответ #2 : 06-03-2010 17:33 » 

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

il
Offline Offline
Пол: Мужской
Пролетал мимо


« Ответ #3 : 06-03-2010 18:38 » 

Посмотри в сторону векторной графики. Незнаю только. Все ли браузеры нормально воспринимают svg http://ru.wikipedia.org/wiki/SVG файлы. Остается только сделать  css стиль У которого width =100% и height = 100% и z-level  самый нижний. И наложить этот стиль на div в котором и будет лежать картинка.
Записан

Не будите спашяго дракона.
             Джаффар (Коша)
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #4 : 06-03-2010 20:37 » 

Из современных - практически все поддерживают SVG, но не IE... Существует плагин для IE7 и IE8, но его нужно сперва установить. По этому SVG - не лучший вариант.

А если попробовать со слоями?

Код: (HTML)
<body>
<img id="background" src="bg.jpg"/>
<div id="content">...</div>
</body>

Код: (CSS)
body
{
  margin: 0;
  padding: 0;
}

#background
{
  display: block;
  border: none;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

#content
{
  position: absolute;
  z-index: 2;
  background-color: transparent;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

В IE выглядит дерьмово (возникает горизонтальная прокрутка), но таков уж этот браузер. В полноценных браузерах выглядит предсказуемо: фон по размеру окна и не двигается вместе со страницей.

* test.html (41.85 Кб - загружено 1086 раз.)
* style.css (0.31 Кб - загружено 963 раз.)
* bg.jpg (34.2 Кб - загружено 999 раз.)
« Последнее редактирование: 06-03-2010 20:39 от RXL » Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
dark_rain
Помогающий

ua
Offline Offline
Пол: Мужской

« Ответ #5 : 07-03-2010 13:09 » 

пока мучаю css. Всем большое спасибо за помощь!!! В качестве наглядного примера прикрепляю эскиз моей страницы. Тут делать то нечего... Один фон и пару скриптов кнопок.. Просто сделать фон без полос прокрутки неполучаеться(( а с полосами прокрутки это уже савсем не тот эффект(

* eskiz.jpg (76.55 Кб - загружено 1003 раз.)
Записан
Finch
Спокойный
Администратор

il
Offline Offline
Пол: Мужской
Пролетал мимо


« Ответ #6 : 07-03-2010 13:24 » 

dark_rain, Можно в принципе вызывать картинку точно по своим размерам окна. Но ты замучаешся поддерживать разнообразные размеры. Так как например пользователь может уменьшить размеры окна. И тогда надо будет брать новый размер?
Записан

Не будите спашяго дракона.
             Джаффар (Коша)
dark_rain
Помогающий

ua
Offline Offline
Пол: Мужской

« Ответ #7 : 08-03-2010 08:56 » 

Finch, скажите а как сделать вызов картинки по размерам окна? то что пользователь уменьшит страницу- это уже его проблемы =) А как насчет флэш? может там проще?
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #8 : 08-03-2010 11:29 » 

Флеш - дурной вариант. Надо делать стандартными средствами, без необходимости иметь сторонние плагины.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Finch
Спокойный
Администратор

il
Offline Offline
Пол: Мужской
Пролетал мимо


« Ответ #9 : 08-03-2010 12:52 » 

Что то типа такого
Код: (HTML)
<html>
<head>
<script type="text/javascript">
function getImage()
{
        var txt="http://yourdomain/image.php?width=";
        txt+=window.innerWidth;
        txt+="&height=";
        txt+=window.innerHeight;
        document.body.background=txt;

}
</script>
</head>

<body onload="getImage()">
</body>
</html>
На твой сервер придет запрос http://yourdomain/image.php?width=1250&height=768 . В скрипте image.php ты уже будеш формировать картинку по потребностям клиента.
Записан

Не будите спашяго дракона.
             Джаффар (Коша)
Золотая Лань
Молодой специалист

ru
Offline Offline
Пол: Женский

« Ответ #10 : 10-04-2010 23:34 » 

cтоит обратить внимание на свойство background-size.
http://www.w3.org/TR/css3-background/#the-background-size
на сегодняшний день его понимают, скажем так, далеко не все браузеры.

Но для непонимающих можно и какой-нибудь обходной манёвр совершить, типа создать скриптом элемент <img> по размеру окна, и поместить его z-index'ом под текст страницы.

Вот примерно так можно осознать, понимает ли браузер свойство:
Код:
var isBackgroundSizeSupported = function () {
var s = document.documentElement.style;
return typeof s.BackgroundSize === "string";
};

Плюс подхода в том, что в коде html красота и чистота.
Минус — при выключенном яваскрипте в старых браузерах картинка не появится. На мой взгляд минусом можно смело пренебречь.
Записан
Never
Команда клуба

ua
Offline Offline
Пол: Женский

« Ответ #11 : 16-05-2011 17:48 » 

Мне показывали для данных случаев следующее решение: по центру ставится блок, размером с минимальное используемое разрешение экрана, а сзади на фон страницы какая-то картинка или в простом случае просто цветовой фон. При смене разрешений полоса фона с 2 сторон становится больше или меньше, или, соответственно исчезает вообще. Но. Куда-то мы спешили, код я в тот раз не посмотрела точно. Но код точно не использовал НИКАКИХ элементов программных, только css.
У меня данная фишка получается только в следующем варианте (я для быстроты вместо минмального разрешения поставила размеры дива 200х200):
<style>
   body {background-color:#c0c0c0;}
   
   div {width:200px;
      height:200px;
      background-color:#ff0000;
      }
</style>
------------------------------------------------------------
<body>
<center><div>kjhgjlkj</div></center>
</body>

НО! Учитывая то, что тег <center> считается невалидным, это крайне неправильный вариант.

Есть валидный вариант в котором див позиционируется.
div {width:200px;
      height:200px;
      position:absolute;
      left:50%;
      background-color:#ff0000;
}
НО в данном случае див ставится по центру не своим центром, а точкой начала координат, т.е. верхним левым углом. И в итоге он стоит НЕ по центру.

Кто знает решение- покажите )
« Последнее редактирование: 16-05-2011 17:50 от Never » Записан

не умеете летать- не мучайте метлу!
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #12 : 16-05-2011 17:59 » 

чтобы разместить div по центру горизонтально достаточно указать
div.centr {
  width: /*размер див */
  margin: 0 auto;
}

Чтоб разместить блок по центру
.centr {
    width:200px;
    position:absolute;
    top:50%;
    left:50%;
    height:300px;
    margin-left:-100px;
    margin-top:-150px;
}

Как это работает?
блок 200х300
позиция блока в абсолютных координатах со сдвигом на 50% т.е. угол в центр, а затем
    margin-left:-100px;  (половина ширины)
    margin-top:-150px; (половина высоты)
« Последнее редактирование: 16-05-2011 18:01 от Sla » Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Never
Команда клуба

ua
Offline Offline
Пол: Женский

« Ответ #13 : 17-05-2011 05:42 » 

Гы. Логично Улыбаюсь В жизни бы не додумалась скорректировать половину блока марджинами )  И вообще как-то автозначения просвистели мимо моего внимания. Спасибо, Слава.
« Последнее редактирование: 17-05-2011 05:47 от Never » Записан

не умеете летать- не мучайте метлу!
Страниц: [1]   Вверх
  Печать  
 

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines