CSS: исправление проблемы переполнения с помощью div и исправление фонового изображения - PullRequest
Новая
       3

CSS: исправление проблемы переполнения с помощью div и исправление фонового изображения

0 голосов
/ 22 июля 2011

Я нахожусь в процессе создания веб-сайта, и я ужасен в CSS, поэтому я сталкиваюсь с несколькими проблемами, с которыми я не уверен, как справиться.

Это сайт, над которым я работаю: http://www2.hawaii.edu/~akinsey/sandbox/broken/

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

Вторая проблема, которую я имею, связана с фоновым изображением Hawaiian Pattern справа. Я не был слишком уверен, как это сделать: я хочу, чтобы изображение было именно там, где оно сейчас, но в данный момент, когда вы прокручиваете, то же самое фоновое изображение. По сути, я хочу, чтобы он был прикреплен к правой стороне всего содержимого страницы (как сейчас), и чтобы он оставался в этом положении даже при изменении размера страницы или прокрутки.

В основном я хочу, чтобы веб-страница выглядела так: http://www2.hawaii.edu/~akinsey/sandbox/index2.html

Но с работающей полосой прокрутки, которая не портит все фоновые изображения.

Вот мой текущий css: 

html { text-align: center; margin:0; padding:0; height:100%; }
body { text-align: center; margin:0; padding:0; height:100%; background-image:url('../image/bg.gif'); background-repeat:repeat-x; }
#wrapper { height:100%; width:100%; margin:0 auto; position: fixed; }
#innerwrapper { margin-left:auto; margin-right:auto; width:975px; height:100%; background-image: url("../image/hawaiianpattern.gif"); background-repeat:no-repeat; background-position: right top; }
#header { margin-left:auto; margin-right:auto; width:810px; background-image:url('../image/header1.png'); height:100px; }
#navbar { margin-left:auto; margin-right:auto; width:800px; height:35px; background-image: url('../image/navbg.gif'); background-repeat:repeat-x; }
#content { margin-left:auto; margin-right:auto; width:804px; height:100%; background-image: url('../image/contentbg.gif'); background-repeat:repeat-y; }
#contentholder { padding-top:10px; text-align:left; margin-left:auto; margin-right:auto; width:90%; height:100%; }

А вот сопровождающий html: 

<!-- Site Wrapper -->
<div id="wrapper">
    <div id="innerwrapper">
    <!-- Header -->
    <div id="header"></div>

    <!-- Navigation Bar -->
    <div id="navbar">
        <ul class="lavaLampNoImage" id="1">
            <li id="l1" class="current"><a id="n1" class="navlink" style="color:black" href="#">Home</a></li>
            <li id="l2" ><a id="n2" class="navlink" href="#">About</a></li>
            <li id="l3" ><a id="n3" class="navlink" href="#">Forum</a></li>
            <li id="l4" ><a id="n4" class="navlink" href="#">Contact</a></li>
        </ul>
    </div>

    <!-- Content -->
    <div id="content">
    <div id="contentholder">
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a risus urna, ut consequat nibh. In ut pharetra nisl. Etiam vitae ante sed sem fermentum lobortis. Cras ac varius magna. Nunc fringilla dolor id diam lobortis dapibus. Etiam lobortis, elit vitae lobortis sagittis, lacus orci cursus ligula, ut suscipit libero est eu odio. Mauris tellus est, tristique id convallis tincidunt, placerat at enim. Sed augue ante, molestie a tempus a, vehicula nec ligula. Etiam rhoncus, est eget ultrices pulvinar, ipsum enim congue velit, quis lobortis neque lacus non neque. Sed accumsan felis id neque cursus lacinia. Donec vitae leo ut ante aliquam hendrerit. Morbi commodo, lacus at pretium tristique, justo ante fermentum metus, eget condimentum augue turpis quis urna. Fusce eu erat eget dolor consequat vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        </p>
        <p>
        Fusce vestibulum vestibulum tortor, sit amet molestie sem euismod eget. Nullam ornare felis ut urna consectetur ut vestibulum risus lacinia. Etiam ligula libero, pharetra sit amet eleifend vel, tincidunt pulvinar magna. Nullam lacinia auctor sollicitudin. Praesent et leo dolor. Etiam lacinia, nisi at aliquet dignissim, tellus ante aliquet arcu, tincidunt facilisis magna nibh cursus tellus. Ut sed orci non justo eleifend luctus id a purus. Etiam pulvinar libero eget purus malesuada a blandit sapien bibendum. Integer laoreet accumsan pulvinar. Proin lobortis molestie odio sed mollis. Aliquam nec dui id erat molestie aliquam eu et risus. Suspendisse ipsum urna, iaculis eget ornare vitae, commodo a enim. Phasellus adipiscing diam eget ante dapibus dictum. Fusce quis massa a diam rhoncus varius eu quis orci. Integer ac urna nibh. Pellentesque ornare nisl sit amet elit euismod aliquet.
        </p>
        <p>
        Nulla egestas dolor sed mi pellentesque auctor. Aliquam dictum congue felis et tempus. Duis eu imperdiet diam. Morbi tristique ornare dapibus. Proin laoreet pellentesque enim. Proin a orci est. Aliquam quis sapien at risus vestibulum dignissim. Donec augue erat, egestas et ornare quis, pulvinar non felis. Donec tincidunt leo nec justo rhoncus varius. Phasellus odio nunc, porta et lobortis quis, luctus vel quam. Maecenas vehicula dictum vehicula. Integer mollis risus nisl. Donec feugiat congue urna, nec elementum orci rhoncus quis. Morbi sit amet elit odio, et aliquam tortor. Donec porttitor ullamcorper lacus, a commodo justo fringilla vel. Ut vel est ut arcu euismod pulvinar at vel ligula. Aliquam vestibulum turpis in mauris venenatis sit amet elementum mi blandit.
        </p>

        </div>
    </div>
       </div>
</div>

Любая помощь очень ценится.

Заранее спасибо, Anthony

UPDATE:

Благодаря совету Джозефа ниже, я смог решить проблему с прокруткой фонового рисунка. Обновленную страницу можно посмотреть здесь:

http://www2.hawaii.edu/~akinsey/sandbox/broken/index2.html

Теперь все выглядит великолепно, когда есть достаточно контента для заполнения страницы, но когда его нет, div и bgwrap div не расширяются, чтобы заполнить страницу, и выглядит так:

http://www2.hawaii.edu/~akinsey/sandbox/broken/

Еще раз спасибо за вашу помощь!

Ответы [ 2 ]

1 голос
/ 22 июля 2011

и для решения вашей другой проблемы вы можете вставить следующий HTML 

<div id="bgwrap" style="width: 975px; height: 100%; position: fixed; left: 50%;
margin-left: -495px; background-image: url(&quot;../image/hawaiianpattern.gif&quot;); 
background-repeat: no-repeat;  background-position: right top; z-index: -1;"></div>

непосредственно перед внутренним оберткой в ​​оболочку ... или где-нибудь еще, если подумать об этом.

РЕДАКТИРОВАТЬ

Ох и удалить 

background-image:url('../image/header1.png');

из # innerwrapper

1 голос
/ 22 июля 2011

Если я правильно понял, вы можете решить одну из проблем, удалив эту строку 

height:100%;

из # innerwrapper

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

для фона вы можете использовать background-attachment: fixed;http://www.w3schools.com/cssref/pr_background-attachment.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...