верхнее изображение, повторение фона и нижнее изображение ... HTML и CSS - PullRequest
Новая
       1

верхнее изображение, повторение фона и нижнее изображение ... HTML и CSS

0 голосов
/ 08 марта 2012

У меня есть небольшая проблема здесь ... У меня есть Div и он называется leftSideBar, и внутри него есть два изображения, верх и низ, и этот div имеет фон повторения y. У него была минимальная высота, но я использовал jquery, чтобы получить высоту моего содержимого div таким образом ... 

$(document).ready(function() {
var div_height = $("#content").height();
$(".leftSideBar").css("height", div_height);

var div_height = $("#content").height();
$(".rightSideBar").css("height", div_height);
});

То, что я пытаюсь сделать, это иметь верхнее изображение в верхней части div и нижнее изображение в нижней части div ... вот HTML ... 

<div class="leftSideBar">
<img src="images/leftSideTop.jpg" width="174" height="70" border="0" />
<img src="images/leftSideBottom.jpg" width="174" height="98" border="0" />
</div><!--leftSideBar-->

<div class="content" id="content"></div><!--content-->

<div class="rightSideBar">
<img src="images/rightSideTop.jpg" width="174" height="70" border="0" />
<img src="images/leftSideBottom.jpg" width="174" height="98" border="0" />
</div><!--rightSideBar-->

и CSS 

.leftSideBar{
    background:url(../images/leftSide.jpg) repeat-y;
    float:left;
    margin-top: -49px;
    width:174px;
}

.rightSideBar{
    background:url(../images/rightSide.jpg) repeat-y;
    float:right;
    margin-top: -49px;
    width:174px;
}

.content{
    background:#FFF;
    width: 992px;
    position:relative;
    min-height: 591px;
    float:left;
    margin: -48px auto 0;
    font-size:13px;
}

Любая помощь или точка в правильном направлении была бы потрясающей! Спасибо!

1 Ответ

0 голосов
/ 08 марта 2012

Так как кажется, что вы используете статическую ширину, вы должны просто сделать блок элементов IMG и положение: абсолютным и выровнять их сверху / снизу. 

.img-side{
    display:block;
    position:absolute;
    left:0;
    top:0; /* we'll use top as a default*/
}
.img-side.bottom{
    top:auto; /* might need this, I'm not sure. */
    bottom:0;
}

для вас HTML просто добавьте классы: 

<img class="img-side" ... />
<img class="img-side bottom" ... />

Если вы планируете размещать контент на боковых панелях, вам нужно добавить соответствующий отступ в верхнюю / нижнюю часть боковой панели, чтобы ваш контент не перетек на изображение (если это не дизайн).

UPDATE

С одной стороны, вы должны расположить боковые панели относительно друг друга, чтобы ваши элементы IMG использовали их для позиционирования. Вы можете обновить свой CSS, чтобы он был немного больше похож на этот: 

.sideBar{ /* left will be default */
    background:url(../images/leftSide.jpg) repeat-y;
    float:left;
    margin-top: -49px;
    width:174px;
    position:relative;
}

.sideBar.right{
    background:url(../images/rightSide.jpg) repeat-y;
    float:right;
}
...