Первый вопрос по SOF, будьте осторожны, если это глупый вопрос.:) Не нашел решения, ни здесь, ни в Интернете.
У меня возникли проблемы с CSS.Я вставил свой код в конце этого поста, но сначала я объясню, что я пытаюсь сделать:
Я хочу построить центрированную область содержимого фиксированной ширины с бесконечными вертикальными графическими границами слева и справа..
Вот что я попробовал:
Я создал # content div с .wrapper Див внутри.Стандартная процедура для центрирования div.Оставьте # content свойство background для левой границы и .wrapper div для правого фона. # контент работает отлично: бесконечная левая граница.Но .wrapper остается той же высоты, что и его содержимое.Таким образом, если контента меньше, тогда высота браузера не будет бесконечной.
Если я установлю высоты содержимого на 100%, границы будут отображаться до нижней части страницы, но еслисодержимое выше, чем высота браузера, и прокрутка вниз по границам не продолжается.
Я вставил еще один div между #content и .wrapper: #contentbr и дал этому div те же свойства, что и # content но с графикой с правой границей: не работает, высота остается той же, что и содержимое оболочки.
Попробовал еще несколько незначительных настроек, но ни одна не работалатак, как я хочу.
Грустная вещь: Nr.2 работает нормально, если я установил для свойства background # content следующее: _background: url (img / content_left.png) верхний левый repeat-y, url (img / content_left.png) верхний правый repeat-y; _
К сожалению, IE не знает CSS 3, так что это не решение, так как я не могу игнорировать IE ..: (
Так что я надеюсь на некоторую помощь, ребята. Кто-то должен знатькак сделать это волшебство.
Важное замечание в моем примере HTML и CSS: я заменил свойства фона на свойства границы. В действительности, левая и правая границы должны быть двумя разнымиизображения и используйте закомментированные свойства backround!
HTML & CSS:
<!doctype html>
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
<style type="text/css">
html, body { height: 100%; }
#content
{
margin: 0 auto;
width: 950px;
/* this is the real deal: */
/* background: url("img/content_left.png") top left repeat-y; */
/* this is just for the example */
border-left: 1px solid black;
height: auto !important;
height: 100%; /* IE 6 Workaround */
min-height: 100%;
}
#content .wrapper
{
/* this is the real deal: */
/* background: url("img/content_right.png") top right repeat-y; */
/* this is just for the example */
border-right: 1px solid black;
height: auto !important;
height: 100%; /* IE 6 Workaround */
min-height: 100%;
padding: 0px 70px;
}
</style>
</head>
<body>
<div id="content">
<div class="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada, lorem ut lobortis congue, ligula risus condimentum enim,
vel ornare mi elit et purus. Duis justo libero, posuere nec ullamcorper nec, tempus nec augue. Maecenas rhoncus, sapien a dapibus
accumsan, nisl mi gravida arcu, id congue neque nisi vitae lacus. Morbi dapibus mollis tempor. Praesent tortor ipsum, rhoncus in
rhoncus sit amet, luctus nec nibh. Donec enim massa, fermentum et consectetur et, iaculis nec tortor. Mauris massa elit, pellentesque
id vestibulum in, vehicula nec elit. In congue purus vitae mauris adipiscing a sollicitudin dolor consectetur. In lacus lectus,
auctor nec facilisis non, tempus ut neque. Sed id elit vel dui porta condimentum vitae ac lorem. Nam suscipit elit ac est sollicitudin
sed faucibus tellus aliquam. Sed quis libero odio, pellentesque fermentum odio. Aliquam hendrerit dignissim sapien a vestibulum.
Phasellus aliquam pretium erat eu feugiat. Quisque enim arcu, sagittis at venenatis quis, auctor vitae diam. Donec sed arcu sapien.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla eget lacus id enim pulvinar ullamcorper.
</p>
</div>
</div>
</body>
</html>