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

    HTML и CSSXSLTJavaScriptИзображенияСофт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>