VPF::Растягивание картинки при увелечении содержимого.

Dronnikkl

Дата 1.2.2008, 20:23 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 9
Регистрация: 12.9.2007

Репутация: нет
Всего: нет

Как растягивать зеленую картинку автоматически при увелечении текста??

Код

<html >

    <head>



        <style type="text/css" media="all">
<!--
#blog{ position: absolute; top: 50px; left: 50px; width: 198px; height: auto; }
#lverx { position: absolute; top: -40px; left: 0; width: 190px; height: 72px; }
#text { position: absolute; top: 10%; left: 0px; width: 200px; height: auto; }
--></style>
    </head>

    <body>
        
        <div id="blog">
        
            <img src="greenbloglitle.jpg" alt=""  height="100%" width="100%" border="0" /> /зеленая картинка котоая растягивается при увелечении текста в "text"
    <div id="verx">

    <img  src="blogverx.png" height="100%" width="100%" alt="" border="0" />/верхняя серая картинка
    </div>
    <div id="text">. содержимое
                1.
                <p>2.</p>
                <p>3.</p>
                <p>4.</p>
                <p>5.</p>
                <p>6.</p>
                <p>7.</p>
                <p>8.</p>
                <p>9.</p>
                <p>10.</p>
                <p>11.</p>
                <p>12.</p>
                <p>13.</p>
                <p>14.</p>
            </div>
        
            </div>
    </body>

</html>

http://85.91.112.154/cms/d.html

KonstRuctor

Дата 1.2.2008, 23:42 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 245
Регистрация: 31.3.2006
Где: Россия, Санкт-Пет ербург

Репутация: нет
Всего: нет

Я такую штуковину делал так.

0) <div id="nav"> // начало панели навигации
1) <div id="shapka"> </div> // это верхушка панели навигации
2) <div id="zagolovok">Заголовок</div> // это заголовок
3) <div id="content">Здесь собственно идет список сколь угодно большой</div> // навигация
4) <div id="bottom"> </div> // низушка панели
5) </div> // навигационная панель закрыта

Нарезаю в фотошопе заранее нарисованную картинку на кусочки согласно логике
Далее пишу в css правила.
Для шапки подкладываю картинку верха, стационарную
Для заголовка свою картинку, причем заголовок тоже будет тянуться вниз,
а согласно правилу css будет автоматически заполняться повторяющейся картинкой
То же самое для тела навигации -- картинка повторяется вниз автоматически
И для низушки своя картинка, стационарная
Примерно так:

Код


#shapka{
        background: url(images/navbar_01.gif) no-repeat;
        line-height:6px;
        margin-top: 8px;
}
#zagolovok{
        background: url(images/navbar_02.gif) repeat-y;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;
        padding: 0px 0px 4px 0px;
}
#content{
        background: url(images/navbar_03.gif) repeat-y;
        padding: 6px 1px 6px 26px;
}
#bottom{
        background: url(images/navbar_04.gif) no-repeat;
        line-height:8px;
        margin-bottom:8px;
}

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »