Выплывающая до предела картинка

Новости | Инвентарь | Портфолио | Магазин | Компания | Ководство

| Техногрет |  |  |  |

HTML XSLT JavaScript Etc

Владимир Токмаков

# Выплывающая до предела картинка январь 2005

| Задача. | Создать блок, выплывающий слева, но не далее заданной границы. |

### Как это выглядит в браузере

    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44

    <style type="text/css">
        /* common styles */
        .float_from_left
        {
            position: relative;
            border: 1px solid red;
            overflow: hidden;
        }
        .float_from_left .first-child
        {
            position: absolute;
            right: 0;
            width: 100%;
        }
        .float_from_left .reducer
        {
            position: relative;
            width: 100%;
            left: 0;
        }
        .float_from_left .float
        {
            position: absolute;
            margin-right: 100%;
        }
        /* custom styles */
        #als_logo .first-child { min-width: 400px; }
        #als_logo .reducer {  margin-right: 400px; }
        #als_logo .float {           width: 400px;
            background: url('/;-)/als_logo.gif') black 100% 50% no-repeat;
        }
        #als_logo,
        #als_logo .first-child,
        #als_logo .first-child .reducer,
        #als_logo .float
        { height: 100px; }
    </style>
    <div class="float_from_left" id="als_logo">
        <div class="first-child">
            <div class="reducer">
                <div class="float"></div>
            </div>
        </div>
    </div>

Электропочта: mailbox@artlebedev.ru Телефоны и адреса студии Телефон: (495) 540-18-00 | © 1995—2006 Студия Артемия Лебедева |