1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. FAQ

плавающий блок справа от содержимого

Главные вкладки

Аватар пользователя TurboAndroid TurboAndroid 2 апреля 2012 в 10:03

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

желательно чтобы "летал" стандартный блок друпала который создается в разделе блоки, чтобы можно было туда что-то запихнуть из админки, или статью сайта

скриптами пока не владею с CSS непродвинутый ламер, будет супер если есть инструкция друпал7

Комментарии

Аватар пользователя TurboAndroid TurboAndroid 3 мая 2012 в 19:33

сделал не плавающим

page.tpl.php

<div id="all-window">

<div id="operator">
<!--[if IE]>
    <div class="operator-ie-shadow"></div>
<![endif]-->
<div id="operator-image">
<img src="sites/all/themes/primetour/pics/operator-1.jpg">
</div>
<div id="operator-phone"> <br>
<?php print t('Call to Kiev');?><br> (044)22-7777-8
</div>
</div> <!-- /#operator -->

<div id="page-wrapper">

<div id="page">

решил небольшим переписыванием стилей
all-window (обвернул вокруг page-wrapper)->operator

#all-window{
        width: 1166px;
        margin: 0 auto;
position:relative;
background: none;
}
#right-info{
background-color: blue;
  height:211px;
  width:124px;
 position:absolute;
 top:0;
 left:0;
}

#operator{
   z-index: 5;
  height:211px;
  width:124px;
  border-color:none;
  border-style:solid;
  border-width:0px;
 position:absolute;
 top:0;
 right:0;
 background: #FCF4DE url(../images/operator-ground.png) no-repeat;
 /* css3 shadow one of them may work except ie */
 -webkit-box-shadow: 0 0 30px #969696;
 -moz-box-shadow: 0 0 30px #969696;
 box-shadow: 0 0 30px #969696; 
  /* css3 rounded corners one of them may work except ie */
 -moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
#operator-image {
position: relative;
top: 7px;
left: 5px;
margin: 0 auto;
}
#operator-phone {
position: absolute;
top: 155px;
left:5px;
 color: white;
        font-weight: bold;
        text-align: center;
        font-size: 11px;
}

#operator-ie-shadow {

   width:100%;
    height: 100%;
    position: absolute;
   z-index: 1;
    top: -15px;
   left: -15px;
   background: #fff;  
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='.4');
}

#page-ie-shadow {
   width:100%;
    height: 100%;
    position: absolute;
   z-index: 1;
    top: -15px;
   left: -15px;
   background: #fff;  
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='.4');
}