исправлена ​​полоса на фоне с прокруткой: CSS - PullRequest
Новая
       1

исправлена ​​полоса на фоне с прокруткой: CSS

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

Как следует из названия, я надеюсь, что у меня будет фиксированная полоса, смещенная от центра, с прокручивающимся фоном. Я уже включил свой код, и теперь у меня может быть либо полоса на поверхности, но прикрепленная к фону, либо полоска под изображением, но прикрепленная к окну, как мне бы хотелось. Я не могу понять, как сохранить «contentBox» на поверхности окна. Спасибо за вашу помощь (и извините за грязный код, это мой первый шаг в CSS) 

<html>
<head>
<style type="text/css">
body{ height:100%}
#bg {
    position:absolute;
    background-color:grey;
    top:0;
left:0;
width:100%;
height:100%;
}
#bg img {
position:absolute;
top:0;
bottom:0;
margin-left:10%;
min-width:80%;
height:100%;
}
#contentBox
 {
   position:top;
   left:0;
   margin-top:25%;
   height:30%;
   max-width:90%;
   background-color:#ffffff;
   opacity:0.6;
   filter:alpha(opacity=60);
 }
#contentBox:hover
 {
   position:top;
   left:0;
   margin-top:25%;
   height:30%;
   max-width:90%;
   background-color:#ffffff;
   opacity:0.9;
   filter:alpha(opacity=90);
 }
#linkCloud
 {
   float:left;
   min-width:11%;
   min-height:100%;
   background-color:blue;
   opacity:0.9;
   filter:alpha(opacity=90);
 }
#feed
 {
   float:right;
   top:0;
   right:0;
   min-height:100%;
   min-width:10%;
   background-color:red;
   opacity:0.9;
   filter:alpha(opacity=90);
 }
</style>
</head>

<body>

  <div id="bg">
      <img src="/home/samzors/Desktop/Gimp/skull.jpg" alt="">

      <div id="feed">
         <p>hello world</p>
      </div>

      <div id="contentBox">

         <div id="linkCloud">
           <p>hello world</p>
         </div>

     </div>
 </div>

</body>

</html>

Ответы [ 2 ]

1 голос
/ 11 марта 2012

Если я следую за вами правильно, я считаю, что вам нужен бар с позицией фиксированной в верхней части области просмотра.Это делается с помощью position: fixed , например: 

<style>
    #contentBox {
        position: fixed;
        left: ; /* some distance from left side of screen */
        top: ; /* some distance from top of screen */
    }
    ...
</style>

...

<body>
    <div id="contentBox">content</div>
    <div id="bg"> rest of your content </div>
</body>

Возможно, вы также захотите добавить свойство margin-top для #bg, которое смещает его из верхней части экрана впо меньшей мере столько, сколько #contentBox имеет высоту.

Еще одно примечание - если вы хотите использовать псевдо-класс, такой как: hover, вам не нужно снова устанавливать каждое из свойств, только те, которыебыть измененнымТак, например, в #contentBox: hover вам потребуется только: 

#contentBox:hover {
    opacity: 0.9;
    filter = alpha(opacity = 90);
}
0 голосов
/ 12 марта 2012

Я нашел решение, но это все равно что взломать.

Сначала в html-коде я отделил класс bg (background) от класса contentBox, как предлагает cmw.так как исправление поля содержимого скрыло поле для просмотра, вот где взломался: создав второй класс div, «content», который был подмножеством contentBox, я смог отобразить это окно, прикрепленное к экрану с помощью bgкласс остается прокручиваемым.

...