О сайте | Обратная связь | Памятка для вебмастера
[ Регистрация · Войти · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 3123»
Модератор форума: Anka_kuşu, Souteneur 
Форум » Создание сайта » Ucoz » Фиксированная и масштабируемая картинка на главной (как заставить картинку оставаться на месте при прокрутке)
Фиксированная и масштабируемая картинка на главной
Varonsk Дата: Среда, 14.11.2012, 01:33 | Сообщение # 1
Третьеклашка
Группа: Пользователи
Сообщений: 22
Город: Конотоп
Репутация: 0
Статус: Offline
Сайт тут - http://astro-hirolog.at.ua

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

Код:

<body>
<div id="page-background"><img src="http://astro-hirolog.at.ua/Dizain/Glavnaja.jpg" width="100%" alt="Альпы" /></div>
<div class="main">
</div>
</body>

Цсс:

#page-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.main {
position: relative;
z-index: 1;
overflow: hidden;
}

Как ее заставить оставаться на месте при прокрутке сайта? Сейчас на сайте стоит скрипт прокрутки этой же картинки, но как эти два скрипта соеденить? Или что дописать в этот, чтобы картинка оставалась на месте? Лучше бы переделать этот код, так как тот что у меня имеет много лишннего, и позицию картинки я задавал там в ручную - а в этом коде она сама стает в нужном положении. Заранее спасибо.


Сообщение отредактировал Varonsk - Среда, 14.11.2012, 01:35
KorniloFF Дата: Среда, 14.11.2012, 09:44 | Сообщение # 2
Профессор(ша)
Награды: 27
Группа: Администраторы
Сообщений: 3513
Город: Ялта
Репутация: 251
Статус: Offline
Что-то вы страшное выдумываете! B)
Чтобы элемент оставался на месте - назначьте ему стиль position:fixed;
Если эта картинка задана фоном, то предыдущий стиль нужно ставить на тот элемент, чьим фоном она является.
Если нужно, чтобы она масштабировалась - на него же: background-size: cover;




Z146965124780
R374477004237
Ну, или хотя бы добавьте в репутацию.
Varonsk Дата: Среда, 14.11.2012, 15:02 | Сообщение # 3
Третьеклашка
Группа: Пользователи
Сообщений: 22
Город: Конотоп
Репутация: 0
Статус: Offline
Quote (KorniloFF)
Что-то вы страшное выдумываете!

KorniloFF, уверен что с точки зрения профессионала так оно и есть) Но мой метод - метод "научного тыка", а в нем без страшного не обойтись - так как скрещиваю грузина с чемоданом не имея представления о том, нравятся ли они друг другу))

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

position:fixed; как я понимаю назначен в выше приведенном коде. Не могли бы Вы показать как из этого -

<img src="http://astro-hirolog.at.ua/Dizain/Glavnaja.jpg" width="100%" alt="" /> сделать чтобы был и масштаб и фиксированное место.

Добавлено (14.11.2012, 15:02)
---------------------------------------------
Вопрос снимаю - присмотрелся, это очень ужасно когда сайт смещается, а одна картинка стоит по центру - так делать не буду. KorniloFF, благодарен за подсказки)

Модераторы, возможно тему будет лучше удалить, так как она меня уже не интересует.


Сообщение отредактировал Varonsk - Среда, 14.11.2012, 15:03
KorniloFF Дата: Среда, 14.11.2012, 18:29 | Сообщение # 4
Профессор(ша)
Награды: 27
Группа: Администраторы
Сообщений: 3513
Город: Ялта
Репутация: 251
Статус: Offline
Varonsk, рад был помочь! B)



Z146965124780
R374477004237
Ну, или хотя бы добавьте в репутацию.
Varonsk Дата: Четверг, 15.11.2012, 18:04 | Сообщение # 5
Третьеклашка
Группа: Пользователи
Сообщений: 22
Город: Конотоп
Репутация: 0
Статус: Offline
Все же придется поднять тему. О том же, но в другом ключе. Уже решил как оформить главную. Но как всегда, собако эксплорер решил что то свое. Картинка и сама рамка масшлабируются в хроме, но не в эксплорере. По отдельности масштабируется и то и то, но когда я вложил масштабируемую картинку в рамку - эксплорер перестал это делать.
Снова прошу помощи. Быть может что то не закрыто, или нужно дописать что то.

Это код на главной:

<div style="background-color: f5f2cf; #border-width:1; border-color: #9696b5; border-style:groove; padding:1px;">
<div style="background-color: f5f2cf; #border-width:3; border-color: #cac6d2; border-style:ridge;padding:0px;"align="center";">
<span style="color:blue"><b><span style="font-size:14pt">Делаем красивую рамку </span></span></b><body>
<div id="page-background"><img src="http://astro-hirolog.at.ua/Dizain/99.jpg" width="100%" alt="" /></div>
<div class="main">
</div>
</body></div>
</div>

Это в цсс для картинки:

#page-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.main {
position: relative;
z-index: 1;
overflow: hidden;
}
KorniloFF Дата: Четверг, 15.11.2012, 20:58 | Сообщение # 6
Профессор(ша)
Награды: 27
Группа: Администраторы
Сообщений: 3513
Город: Ялта
Репутация: 251
Статус: Offline
Quote (Varonsk)
</div>
</body></div>
</div>

Это не правильно. После тега </body> должно быть только закрытие хтмл-протокола. Ну, скрипты еще могут быть.
Думаю, должно быть так:
Quote
</div>
</div>
</div>
</body>

А оптимизацию под ИЕ я не делаю. Может, кто еще подскажет...




Z146965124780
R374477004237
Ну, или хотя бы добавьте в репутацию.


Varonsk Дата: Пятница, 16.11.2012, 13:15 | Сообщение # 7
Третьеклашка
Группа: Пользователи
Сообщений: 22
Город: Конотоп
Репутация: 0
Статус: Offline
KorniloFF, спасибо, сделал как Вы написали. Но проблема осталась с эксплорером. Прошу помощи у специалистов в этом вопросе, как сделать оптимизацию под IE?

Решение нашел, может кому пригодится - но в эесплорере это изображение стает поверх, и все что добавляется становится под ним.

на главной нужно было перегрупировать элементы, чтобы первым был <div id="page-background">

Главная:

Code
<body>
<div id="page-background">
<div style="background-color: f5f2cf; #border-width:1; border-color: #9696b5; border-style:groove; padding:1px;">
<div style="background-color: f5f2cf; #border-width:3; border-color: #cac6d2; border-style:ridge;padding:0px;">
<div style="border:2px solid #cee8ee;">
         Пишем текст
</span></span></b><body><img src="http://astro-hirolog.at.ua/Dizain/99.jpg" width="100%" alt="" />
<div class="main">    
</div>
</div>    
</div>    
</div>    
</div>
</body>


ЦСС

Code
#page-background {
    position: fixed;
    table-layout:fixed
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.main {
    position: relative;
    z-index: 1;
    overflow: hidden;
}
body {
    background:url(about:blank);
    background-attachment: fixed;
}
#page-background {
    position:absolute;
    top: expression(document.getElementsByTagName("body")[100].scrollTop + "100px");
}


в оригинале в нижней строке следует написать (document.getElementsByTagName("body")[0].scrollTop + "px"); но тогда изображение с рамкой прикрепляется к верху сайта а не остается под низом шапки.


Сообщение отредактировал Varonsk - Пятница, 16.11.2012, 14:52
KorniloFF Дата: Пятница, 16.11.2012, 19:39 | Сообщение # 8
Профессор(ша)
Награды: 27
Группа: Администраторы
Сообщений: 3513
Город: Ялта
Репутация: 251
Статус: Offline
Varonsk, хоть и не самое изящное, но все же решение. Поздравляю! B)



Z146965124780
R374477004237
Ну, или хотя бы добавьте в репутацию.
Varonsk Дата: Пятница, 16.11.2012, 21:47 | Сообщение # 9
Третьеклашка
Группа: Пользователи
Сообщений: 22
Город: Конотоп
Репутация: 0
Статус: Offline
KorniloFF, ну хоть и масштабировать научился - но новаяч проблема свела на нет все решение. Позиция картинки фиксируется и все что я помещаю ниже, попадает под нее. А если мне нужно несколько таких картинок вставить - то они ложаться одна на одну( Все видимо из за position:absolute; но если его убрать или заменить то масштабирование отключается. Касалось бы дело только других браузеров, то там все работает даже если полностью удалить все из цсс. В общем, дело не движеться.

Добавлено (16.11.2012, 20:30)
---------------------------------------------
Кстати, думаю что эксплорер растягивает картинку до ширины шапки сайта - она у меня 1600, видимо до этого размера он и масштабирует картинку.

Добавлено (16.11.2012, 21:47)
---------------------------------------------
Есть!! Я его уделал, жыв еще курилка!!

В общем, сделал так, в цсс создал копию кода и изменил:

#page-backgrounds {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mains {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
body {
  background:url(about:blank);
  background-attachment: fixed;
}
#page-backgrounds {
  position:absolute;
  top: 450px;
margin-left:  276px;

   
}

На главной

<body>
<div id="page-backgrounds">
<div style="background-color: f5f2cf; #border-width:1; border-color: #9696b5; border-style:groove; padding:1px;">
<div style="background-color: f5f2cf; #border-width:3; border-color: #cac6d2; border-style:ridge;padding:0px;">
<div style="border:2px solid #cee8ee;">
екенкенен
<img src="http://astro-hirolog.at.ua/Dizain/99.jpg" width="100%" alt="" />
<div class="mains">  
</div>
</div>  
</div>  
</div>  
</div>
</body>

Теперь каждый блок нужно будет для эксплорера выставлять вручную, и при добавлении новых удлиннять цсс, но это маленькая беда по сравнению с 3 днями потраченными на эту многоголовую гидру!


Сообщение отредактировал Varonsk - Пятница, 16.11.2012, 21:48
KorniloFF Дата: Суббота, 17.11.2012, 09:41 | Сообщение # 10
Профессор(ша)
Награды: 27
Группа: Администраторы
Сообщений: 3513
Город: Ялта
Репутация: 251
Статус: Offline
Varonsk, ух, ну вы и заморочились! Охота пуще неволи! B)
Как показывает практика: пользователи редко оценивают навороченный дизайн сайта, ну, может, при первом просмотре. Потом взгляд замыливается и их уже интересует лишь контент. Поисковикам на дизайн тоже как-то...
Советую больше внимания уделять удобству пользования сайтом, чем картинкам. Кстати, чем больше изображений, тем дольше грузится сайт и, соответственно, падает в поисковой выдаче.




Z146965124780
R374477004237
Ну, или хотя бы добавьте в репутацию.
Форум » Создание сайта » Ucoz » Фиксированная и масштабируемая картинка на главной (как заставить картинку оставаться на месте при прокрутке)
Страница 1 из 3123»
Поиск:
Фиксированная и масштабируемая картинка на главной - Создание сайта - Ucoz - Форум картинка на главной странице смасштабирована
Сегодня были на форуме:
krolenya1, goba2602, marina785f, viktorbilenku, vitiapalia2525, Archer, kamilaradiik, 1mehanaqopa, interrior4you, irinakkovaleniko

Конструктор кнопок он-лайн


Получить код CSS

Подбор цветов

Справочник по html и CSS

Наши копирайтеры

Поиск