вертикальные поля содержимого - PullRequest
Новая
       0

вертикальные поля содержимого

2 голосов
/ 26 ноября 2011

У меня всегда есть проблема, пытаясь найти лучший способ сделать расширяемые блоки контента.Раньше я использовал таблицы и вырезал прямоугольник по разделам (верхний, нижний, левый и правый - затем каждый угол в ячейке таблицы, с расширяемой средней ячейкой для содержимого). Это работало безупречно во всех браузерах, но в целом его осуждали.

Сегодня у меня есть изображение, которое мне нужно только расширить по вертикали.однако, у него есть тень, и у верхних 200 пикселей или около того есть градиент.Вот ссылка на изображение, с которым я работаю.

http://imageshack.us/photo/my-images/16/brandinfobox.png/

Контент должен течь, а div должен расширяться вертикально по мере роста контента.Я рассмотрел несколько подходов, но они либо не увенчались успехом, либо они просто не работали в некоторых браузерах.Основная проблема - это падение, тень и верхний градиент.Они мешают мне использовать базовый фон, а затем абсолютное позиционирование некоторых элементов div внутри, так как фон разрушает тень при абсолютном расположении внешних краев.

Любой совет?Конечно, это довольно просто, если вы знаете, как обходиться css

Ответы [ 4 ]

3 голосов
/ 26 ноября 2011

Может быть, вы можете сделать это для этого типа изображения и градиента

http://jsfiddle.net/wh6r4/

редактировать: добавлен код CSS 

.content{
    background: url(http://i.imgur.com/5hN1S.png) repeat-y top left;
    width:647px;
    min-height:300px;
    position:relative;
    margin:50px;
}
.y-repeat{
    position:absolute;
    left:2px;
    right:7px;
    top:0;
    bottom:0;
    background: url(http://i.imgur.com/bJmR4.png) repeat-x top left;
}
.top, .bottom{
    background: url(http://img16.imageshack.us/img16/3301/brandinfobox.png) no-repeat 0 0;
    height:20px;
    width:100%;
    position:absolute;
    left:0;
}
.top{
  top:-20px;
}
.bottom{
  background-position:left bottom;
  bottom:-20px;
}
2 голосов
/ 26 ноября 2011

Если эта коробка может иметь минимальную высоту, чем здесь некоторые, например. как это сделать: 

<div id="box-top"> // CSS bg image = 600*8px with rounded corners 
<div id="box-middle"> // CSS bg image = 5*80px vertical tiny gradient line ; min-height!  
<div id="box-bottom"> // CSS bg image = 600*8px with rounded corners

ИЛИ ДАЖЕ ЛУЧШЕ:

Вы можете расширить градиентное изображение внутри среднего DIV, установив position:absolute, width 100% и height:100% !! 

<div id="box-top"> // CSS bg image = 600*8px with rounded corners 

<div id="box-middle">
 <img class="box_mid_img" src="vertical_gradient_image.png"> // CSS: .box_mid_img width:100%; height:100%; position:absolute
</div>

<div id="box-bottom"> // CSS bg image = 600*8px with rounded corners

Другой трюк заключается в простом использовании CSS3, вы получите поддержку IE градиентов, но не теней и углов (границ).

http://jsbin.com/uberub/2/edit#javascript,html,live

1 голос
/ 26 ноября 2011

Я бы добавил линейный градиент в CSS3.

Для окружающего скругленного прямоугольника с тенью, выберу я 100% CSS3 или два фоновых изображения и дополнительный div, будет зависеть от требований моего клиента.

0 голосов
/ 26 ноября 2011

Я бы разделил изображение на три горизонтальные полосы.Один для верха, включая закругленные углы, один для низа, включая углы и тень, и одна очень тонкая полоска для середины.

Затем с разметкой, подобной этой: 

<div style='background-image: url("middle.png"); width: 400px;'>
    <img src='top.png'>
    Expanding content in the middle
    ...
    Can be as big as you like
    <img src='bottom.png'>
</div>
...