как реализовать несколько fixed картинок?

Статус
В этой теме нельзя размещать новые ответы.
K

kid_mf

Создатель
Регистрация
11 Мар 2009
Сообщения
32
Реакции
1
Всем привет! Нород помогите плиз. Есть четыре разные картинки, нужно чтобы они имели свойство не прокручиваться вместе с экраном. Пробовал создать четыре разных дива (т.к. картинки должны находиться в разных углах экрана) с разными координатами. Но увы в тег боди можно (насколько мне известно) больше одного id или class запихать нельзя. Помогите пыжалуйста. Скорее всего не всё испробовал.
 
зачем на боди несколько классов? на дивы нужно ставить.. и вообще ID уникальные.. и вприниципе не должен повторяться...
я не верстальщик, но делаю так: стиль на каждую ячейку\див,
размер не имеет значения:)
бэкграунд имедж, но репеат, лефт, топ;
тоже самое в других ячейках\дивах без повторения и позицию по горизонтали и вертикали..
в стиле на таблицу
html, body, #idtablica { height: 100%; width: 100%; }
на дивах и без бекграунда сложнее:nezn:
 
Т.е. ты имеешь ввиду, что экран делится на четыре части и в каждую часть загоняется div со своим id?

я пока так пробую:
.tab1{ position:absolute;
left:0; top:0; background:url(images/top1.png) left top no-repeat fixed;}

.tab2{ position:absolute;
right:0; top:0; background:url(images/top2.png) right top no-repeat fixed;}

.tab3{ position:absolute;
left:0; bottom:0; background:url(images/top3.png) left bottom no-repeat fixed;}

.tab4{ position:absolute;
right:0; bottom:0;background:url(images/top4.png) right bottom no-repeat fixed;}

и на главной странице после body прописываю
<div class="tab1"></div>
<div class="tab2"></div>
<div class="tab3"></div>
<div class="tab4"></div>

Но увы они не фиксятся :(
Как без скриптов эту фишку реализовать?
 
а разве может быть position:absolute и position:fixed одновременно ?
 
Подобную задачу реализовывал через css+js
Пример
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Удерживается логоти и имидж под ним

P.s. скролбар - желание заказчика;)
 
kid_mf, покажи макет (картинкам сделай бордер 1) фотошоповский как и с чем хочешь расставить, я тебе таблицу скину, может встетаки таблицей обойдемся?) к дивам там ещё позицию и размеры дива надо бы вписать, насколько я помню.
 
ТС - хочет удерживать 4 картинки!
Насколько я понял суть идеи - это будет выглядить примерно так
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.


dosia - можешь показать пример как зафиксить при помощи таблиц?
 
Можно использовать position:fixed, а проблемы начинаются для ie6, тогда для него вычисляется высота с expression.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.background{
    background:url(http://www.google.com/intl/en_ALL/images/logo.gif) no-repeat;
    width: 300px;
    height: 150px;
    border: 1px dashed #FF0000;
}
.top-left {
    position:fixed;
    top:0px;
    left:0px;
    background-position: top left;
}
.top-right {
    position:fixed;
    top:0px;
    right:0px;
    background-position: top right;
}

.bottom-left {
    position:fixed;
    bottom:0px;
    left:0px;
    background-position: bottom left;
}

.bottom-right {
    position:fixed;
    bottom:0px;
    right:0px;
    background-position: bottom right;
}

.center {
    position:fixed;
    top:50%;
    left:50%;
    font-size: 16px;
    font-weight: bold;
    color: #FF0000;
    border: 1px dashed #0000FF;
    height: 100px;
    width: 100px;
    text-align:center;
    line-height:100px;
    /*половина width*/
    margin-left: -50px;
    /*половина height*/
    margin-top: -50px;
    background-color:#FFFFFF;
}

.top_content {
    position: relative;
    z-index: 1;
    border: 5px dashed #00FF00;
    background-color:#1F8A00;
    margin-top:400px;
}

body {
    margin: 0px;
    padding: 0px;
    background-color:#CCCCCC;
    height: 3000px;
}


/* ie6 в пролёте хак для него, вычисляем высоту */
* html .top-left, * html .top-right {
    position:absolute;
    top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
}
* html .bottom-left, * html .bottom-right {
    position:absolute;
    top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop+(document.body.clientHeight-this.clientHeight));
}
* html .center {
    position:absolute;
    top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop+((documentElement.clientHeight-this.clientHeight)/2 ) : document.body.scrollTop+((document.body.clientHeight-this.clientHeight)/2));
    margin-top: 0px;
}

/* какую нибудь фоновую картинку 1x1px для ie6 чтоб не дёргался */
* html,* html body{
    background: url(http://www.google.com/intl/en_ALL/images/logo.gif) no-repeat fixed;
    background-color:#CCCCCC;
}

/* если убрать рамку, то не будет бесконечной прокрутки в ie6 */
* html .background{
    border: none;
}




-->
</style>

<!-- можно поместить всё для ie6 фикс стиля в отдельный файл, например -->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie6_fix.css" />
<![endif]-->

</head>

<body>

<div class="background top-left"></div>
<div class="background top-right"></div>
<div class="background bottom-left"></div>
<div class="background bottom-right"></div>
<div class="center">NULLED.CC</div>
<div class="top_content">Текст поверх картинок</div>

</body>
</html>
 
cocacola, я походу неправильно понял, если как онлайнчендж то дивы самое то
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху