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

Тема в разделе "Веб-дизайн", создана пользователем kid_mf, 2 апр 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. kid_mf

    kid_mf Создатель

    Регистр.:
    11 мар 2009
    Сообщения:
    32
    Симпатии:
    1
    Всем привет! Нород помогите плиз. Есть четыре разные картинки, нужно чтобы они имели свойство не прокручиваться вместе с экраном. Пробовал создать четыре разных дива (т.к. картинки должны находиться в разных углах экрана) с разными координатами. Но увы в тег боди можно (насколько мне известно) больше одного id или class запихать нельзя. Помогите пыжалуйста. Скорее всего не всё испробовал.
     
  2. dosia

    dosia Постоялец

    Регистр.:
    22 июн 2007
    Сообщения:
    77
    Симпатии:
    9
    зачем на боди несколько классов? на дивы нужно ставить.. и вообще ID уникальные.. и вприниципе не должен повторяться...
    я не верстальщик, но делаю так: стиль на каждую ячейку\див,
    размер не имеет значения:)
    бэкграунд имедж, но репеат, лефт, топ;
    тоже самое в других ячейках\дивах без повторения и позицию по горизонтали и вертикали..
    в стиле на таблицу
    html, body, #idtablica { height: 100%; width: 100%; }
    на дивах и без бекграунда сложнее:nezn:
     
  3. kid_mf

    kid_mf Создатель

    Регистр.:
    11 мар 2009
    Сообщения:
    32
    Симпатии:
    1
    Т.е. ты имеешь ввиду, что экран делится на четыре части и в каждую часть загоняется 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>

    Но увы они не фиксятся :(
    Как без скриптов эту фишку реализовать?
     
  4. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    781
    Симпатии:
    153
    а разве может быть position:absolute и position:fixed одновременно ?
     
  5. SoundLess

    SoundLess Прохожие

    Верно, не может. Нужно сделать по типу этого:

    .tab1{
    background-color:#06F;
    background-position:left top;
    position:fixed;
    width:100px;
    height:100px;
    }
     
  6. cocacola

    cocacola Постоялец

    Регистр.:
    4 апр 2006
    Сообщения:
    137
    Симпатии:
    48
    Подобную задачу реализовывал через css+js
    Пример
    http://business-garden.ru/index.php?id=2
    Удерживается логоти и имидж под ним

    P.s. скролбар - желание заказчика;)
     
  7. dosia

    dosia Постоялец

    Регистр.:
    22 июн 2007
    Сообщения:
    77
    Симпатии:
    9
    kid_mf, покажи макет (картинкам сделай бордер 1) фотошоповский как и с чем хочешь расставить, я тебе таблицу скину, может встетаки таблицей обойдемся?) к дивам там ещё позицию и размеры дива надо бы вписать, насколько я помню.
     
  8. cocacola

    cocacola Постоялец

    Регистр.:
    4 апр 2006
    Сообщения:
    137
    Симпатии:
    48
    ТС - хочет удерживать 4 картинки!
    Насколько я понял суть идеи - это будет выглядить примерно так
    http://onlinechange.com - имидж справа внизу

    dosia - можешь показать пример как зафиксить при помощи таблиц?
     
  9. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    Можно использовать 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>
    
    
     
  10. dosia

    dosia Постоялец

    Регистр.:
    22 июн 2007
    Сообщения:
    77
    Симпатии:
    9
    cocacola, я походу неправильно понял, если как онлайнчендж то дивы самое то
     
Статус темы:
Закрыта.