Помогите с резиновым блоком с закгругленными углами

Тема в разделе "Веб-дизайн", создана пользователем Baracuda, 26 окт 2010.

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

    Baracuda Постоялец

    Регистр.:
    31 дек 2007
    Сообщения:
    86
    Симпатии:
    4
    Ув. форумчане. Помогите решить задачу...

    Есть следующий HTML код:

    HTML:
    
    <div id="wrapper">
    	<div id="login">
        		<div class="top-right-corner">
    			<div class="top-left-corner">
    				<div class="bottom-left-corner">
    					<div class="bottom-right-corner">
    						<div class="left-border"></div>
    							<div class="top-bg">
    								<div class="bottom-bg">
    									text text text text text text 
    								</div>
    							</div>
    						<div class="right-border"></div>
    						<div class="clear"></div>
        					</div>
    				</div>
    			</div>
    		</div>
        	</div>
        <div class="logincopyright">
        </div>
    </div>
    
    ему соответствует следующий стиль:
    HTML:
    
    #wrapper { width:100%; background:url(../images/background.jpg) top repeat-x; padding-top:216px;}
    #login { width:440px; height:380px; margin:auto; background:#fffaf4; }
    
    .top-right-corner { background:url(../images/top-right-bg.png) top right no-repeat; }
    .top-left-corner { background:url(../images/top-left-bg.png) top left no-repeat; }
    .bottom-left-corner { background:url(../images/bottom-left-bg.png) bottom left no-repeat; }
    .bottom-right-corner { background:url(../images/bottom-right-bg.png) bottom right no-repeat; height:380px; }
    
    .left-border { background:url(../images/left-bg.png) left repeat-y; float:left; width:9px; height:346px; margin-top:17px; margin-bottom:17px; }
    .right-border { background:url(../images/right-bg.png) right repeat-y; float:right; width:9px; height:346px; margin-top:17px; margin-bottom:17px; }
    .top-bg { background:url(../images/top-bg.png) top repeat-x; margin-left:8px; margin-right:8px; float:left; height:9px; width:406px; }
    .bottom-bg { background:url(../images/bottom-bg.png) bottom repeat-x; width:406px; height:380px; }
    
    .clear { clear:both; }
    
    .logincopyright { width:435px; margin:auto; margin-top:22px }
    
    Результат этого кода Вы можете видеть на приложеной картинки.

    Подскажите, помогите пожалуйста, как сделать:

    1) Что б рамка была резиновой, тянулась по ширине и по высоте (если сейчас задать ей длину 100% к примеру, то это не сработает, сам блок увеличится, но все элементы останутся так, как есть, а если задать и им тоже процентной значение, то рамка слетит коту под хвост)

    2) Подскажите более гуманный способ, которым можно верстать подобные рамки
    3) Я нарезал пнг картинки в фотошопе, делал их прозрачными, как пофиксить в ие пнг картинки, что б они были прозрачными???

    Заранее благодарю за ответ, прилагаю фотку и архив с вайлами верстки
     

    Вложения:

    • www.rar
      Размер файла:
      7,1 КБ
      Просмотров:
      6
    • Без-имени-6.png
      Без-имени-6.png
      Размер файла:
      8,6 КБ
      Просмотров:
      27
  2. Kub

    Kub

    Регистр.:
    5 июн 2009
    Сообщения:
    628
    Симпатии:
    485
    По резиновым блоком с закгругленными углами
    С видеоуроком исходником и описанием artlebedev.ru
    Так же с примерами и описанием 456bereastreet.com
    демо

    trifler.ru
    демо
    Если будет этого мало, вот ещё ссылка на всем известную статью
    38 статей о создании закругленных углов на сайтах

    По поводу прозрачных углов. Попробуйте сохранять картинки в gif, если качество не устроит то вот здесь есть описания двух популярных скриптов для исправления прозрачности png изображений для IE6.
    ruseller.com
    Если используете Jquery, вот пара ссылок на плагины для исправлнния прозрачности
    jquery.andreaseberhard.de
    jquery.khurshid.com
     
    Baracuda нравится это.
  3. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.451
    Симпатии:
    677
    Есть очень простой и универсальный метод.
    Сначала создаётся обычный прямоугольный резиновый блок, ну т.е. div с background и width в %.
    И нужно нарисовать круг в цвет блока, через позиционирование раскидать этот круг по углам нашего блока top left, top right и т.д.
    В итоге получится блок с закруглениями.
     
  4. bonzaza

    bonzaza Постоялец

    Регистр.:
    13 ноя 2007
    Сообщения:
    53
    Симпатии:
    9
    придется покопаться

    В свое время тоже долго мучался с поиском приемлемого варианта тянущегося блока с закруглениями.
    Вот по ссылке собраны почти все возможные варианты, но придется покопаться.

    P.S. По моему в представленном коде не хватает позиционирования (position:rеlative;), но надо проверять.
    P.S.S. не заметил вложения =(
     
  5. Kub

    Kub

    Регистр.:
    5 июн 2009
    Сообщения:
    628
    Симпатии:
    485
    Вот пара видеоуроков по работе со скриптами для исправления прозрачности. Рассматриваются несколько скриптов, их достоинства и недостатки. Хотел дать ссылку на сайт где они были выложены, но он не работает. Рассматриваемые скрипты входят в комплект.
    ifolder.ru
     
  6. hader

    hader Писатель

    Регистр.:
    14 окт 2010
    Сообщения:
    3
    Симпатии:
    0
    Я делаю рамки в Fireworks(там больше разных функций для скругления углов), а режу в фотошопе по направляющим. Выглядит это примерно так
    [​IMG]
    При экспорте в HTML все фрагменты сохраняются отдельными файлами PNG или GIF обязательно transparent.
    В HTML шаблоне соддаю таблицу 3х3, в угловые ячейки вставляю картинки углов, а в боковых делаю фоном соотв фрагмент: для вертикальных с repeat-y, горизонтальных repeat-x. В центральную ячейку вставляю контент или модуль. Тянется как угодно.
     
  7. Baracuda

    Baracuda Постоялец

    Регистр.:
    31 дек 2007
    Сообщения:
    86
    Симпатии:
    4
    ну в таблице это намного легче сделать, а вот на дивах я еще не сталкивался вот и решил задать вопрос на первую попавшуюся проблемку :)
     
  8. alica

    alica

    Регистр.:
    28 июл 2008
    Сообщения:
    243
    Симпатии:
    76
    В другой ветке форума я писал уже как наиболее просто сделать закругленные углы у блока, если вам нужны тени, как на картинке то код будет вот такой:

    HTML:
    <div></div>
    CSS:
    div {
    border: 1px solid #696;
    padding: 60px 0;
    text-align: center;
    width: 200px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: #666 0px 0px 4px;
    -moz-box-shadow: #666 0px 0px 4px;
    box-shadow: #666 0px 0px 4px;
    behavior: url(/PIE.htc);
    }
     
  9. forest_82

    forest_82 Создатель

    Регистр.:
    24 окт 2010
    Сообщения:
    22
    Симпатии:
    4
    Если в ширину не будет растягиватся - тогда можно сделать верх, низ, и середину. А среднему диву сделать стиль min-height. Тогда будет растягиваться :)
     
  10. Kub

    Kub

    Регистр.:
    5 июн 2009
    Сообщения:
    628
    Симпатии:
    485
    Если применять CSS3, то здесь есть некоторые советы как при этом обеспечить работу всего этого в IE ruseller.com
     
Статус темы:
Закрыта.