Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Растягивание картинки при увелечении содержимого.


Автор: Dronnikkl 1.2.2008, 20:23
Как растягивать зеленую картинку автоматически при увелечении текста??
Код
<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
Я такую штуковину делал так.

0) <div id="nav"> // начало панели навигации
1) <div id="shapka">&nbsp;</div> // это верхушка панели навигации
2) <div id="zagolovok">Заголовок</div> // это заголовок
3) <div id="content">Здесь собственно идет список сколь угодно большой</div> // навигация
4) <div id="bottom">&nbsp;</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;
}

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)