>
Категории вопросов
Задать вопрос +

Основное

Контент-модули

Продвижение сайта

Управление сайтом

Доп. модули

Вебмастеру

Похожие вопросы



Блоки съехали вниз, как исправить?

голоса: 0
Здравствуйте, У меня такая проблема.

Поставила слайдер на сайт (сделав для него отдельный глобальный блок)

Но блоки слева почему то съехали вниз, не знаю что делать помогите.

Диз сайта изначальный 798
Адрес сайта http://probka.ucoz.net/
| Автор: | Категория: Дизайн сайта
Изменение категории | | Автор: Yuri_Geruk

Ответов: 1

голоса: +2
 
Лучший ответ

У вас не закрыт вот этот див

<div id="content-top">

Нужно либо удалить, либо добавить </div>

| Автор:
Выбор ответа лучшим | | Автор: Elena
Показать 8 предыдущих комментариев 
CCS

/*--------------------- General styles start ---------------------*/
.msg_slideshow{align:center;
 width:700px;
 height:250px;
 padding:10px;
 position:relative;
 overflow:hidden;
 background:#101010 url(../img/loading.gif) no-repeat center center;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 border-radius:10px;
}
.msg_slideshow a{
 outline:none;
}
.msg_slideshow a img{
 border:none;
}
.msg_wrapper{
 width:700px;
 height:250px;
 position:relative;
 margin:0;
 padding:0;
 display:table-cell;
 text-align:center;
 vertical-align:middle;
}
.msg_wrapper img{
 display: inline-block!important;
 vertical-align:middle;
 -moz-box-shadow:0px 0px 10px #000;
 -webkit-box-shadow:0px 0px 10px #000;
 box-shadow:0px 0px 10px #000;
}
.msg_controls{
 position:absolute;
 bottom:15px;
 right:-100px;
 width:82px;
 height:26px;
 z-index: 20;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 border-radius:5px;
 background-color:#000;
 opacity:0.8;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
.msg_controls a{
 float:left;
 background-color:#000;
 width:20px;
 height:20px;
 margin:3px 3px;
 opacity:0.5;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
 background-repeat:no-repeat;
 background-position: center center;
}
.msg_controls a:hover{
 opacity:1.0;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99);
}
.msg_controls a.msg_grid{
 background-image:url(http://shadowhunters.ucoz.net/img/grid.png);
}
.msg_controls a.msg_prev{
 background-image:url(http://shadowhunters.ucoz.net/img/prev.png);
}
.msg_controls a.msg_next{
 background-image:url(http://shadowhunters.ucoz.net/img/next.png);
}
.msg_controls a.msg_pause{
 background-image:url(http://shadowhunters.ucoz.net/img/pause.png);
}
.msg_controls a.msg_play{
 background-image:url(http://shadowhunters.ucoz.net/img/play.png);
}
.msg_thumbs{
 background:#000;
 position:absolute;
 width:255px;
 height:166px;
 top:-230px;
 left:50%;
 padding:30px;
 margin:0 0 0 -155px;
 -moz-border-radius:0px 0px 10px 10px;
 -webkit-border-bottom-left-radius:10px;
 -webkit-border-bottom-right-radius:10px;
 border-bottom-left-radius:10px;
 border-bottom-right-radius:10px;
 -moz-box-shadow:1px 1px 5px #000;
 -webkit-box-shadow:1px 1px 5px #000;
 box-shadow:1px 1px 5px #000;
 opacity:0.9;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
 overflow:hidden;
}
.msg_thumb_wrapper{
 position:absolute;
 width:255px;
 height:166px;
 top:30px;
 left:30px;
 z-index:30;
}
.msg_thumb_wrapper a{
 display:block;
 width:140px;
 height:50px;
 float:left;
 margin:4px;
 opacity:0.5;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
.msg_thumbs a.msg_thumb_next,
.msg_thumbs a.msg_thumb_prev{
 width:18px;
 height:20px;
 background-repeat:no-repeat;
 background-position: center center;
 position:absolute;
 top:50%;
 margin-top:-10px;
 opacity:0.5;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
.msg_thumbs a.msg_thumb_next:hover,
.msg_thumbs a.msg_thumb_prev:hover{
 opacity:1.0;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99);
}
.msg_thumbs a.msg_thumb_next{
 background-image:url(http://shadowhunters.ucoz.net/img/next_thumb.png);
 right:5px;
}
.msg_thumbs a.msg_thumb_prev{
 background-image:url(http://shadowhunters.ucoz.net/img/prev_thumb.png);
 left:5px;
}
.msg_thumbs a.msg_thumb_close{
 position:absolute;
 bottom:0px;
 width:50px;
 left:50%;
 margin:0 0 0 -25px;
 background:#202020 url(http://shadowhunters.ucoz.net/img/up.png) no-repeat center center;
 height:16px;
 opacity:0.7;
 -moz-border-radius:5px 5px 0 0;
 -webkit-border-top-left-radius:5px;
 -webkit-border-top-right-radius:5px;
 border-top-left-radius:5px;
 border-top-right-radius:5px;
}
.msg_thumbs a.msg_thumb_close:hover{
 opacity:1.0;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99);
}
.msg_loading{
 position:absolute;
 background:transparent url(http://shadowhunters.ucoz.net/img/loading.gif) no-repeat center center;
 top:50%;
 left:50%;
 width:50px;
 height:50px;
 margin:-25px 0 0 -25px;
 z-index:25;
 display:none;
}



Далее все как обычно
| Автор:

Создаете глобальный блок SLIDER. В него вставляете

<div id="msg_slideshow" class="msg_slideshow">
          <div id="msg_wrapper" class="msg_wrapper"></div>
            <div id="msg_controls" class="msg_controls">
              <a href="#" id="msg_prev" class="msg_prev"></a>
              <a href="#" id="msg_pause_play" class="msg_pause"></a>
              <a href="#" id="msg_next" class="msg_next"></a>
            </div>
            <div id="msg_thumbs" class="msg_thumbs">
              <div class="msg_thumb_wrapper">
                <a href="#"><img src="/_tbkp/1.jpg" alt="http://shadowhunters.ucoz.net/_tbkp/1.jpg"/></a>
                <a href="#"><img src="/_tbkp/7138235.png" alt="http://delena.ucoz.ru/_tbkp/7138235.png"/></a>
                <a href="#"><img src="/_tbkp/1.jpg" alt="http://shadowhunters.ucoz.net/_tbkp/1.jpg"/></a>
                <a href="#"><img src="/_tbkp/2.jpg" alt="http://shadowhunters.ucoz.net/_tbkp/2.jpg"/></a>
                <a href="#"><img src="/_tbkp/33a89ede2a6ef9482db8d453d2520abf.jpg" alt="http://delena.ucoz.ru/_tbkp/33a89ede2a6ef9482db8d453d2520abf.jpg"/></a>
                <a href="#"><img src="/_tbkp/222.jpg" alt="http://delena.ucoz.ru/_tbkp/222.jpg"/></a>
                <a href="#"><img src="/_tbkp/2225799251.jpg" alt="http://delena.ucoz.ru/_tbkp/5799251.jpg"/></a>
                <a href="#"><img src="/_tbkp/gggggggeds.jpg" alt="http://delena.ucoz.ru/_tbkp/gggggggeds.jpg"/></a>
                <a href="#"><img src="/_tbkp/5799232.jpg" alt="http://delena.ucoz.ru/_tbkp/5799232.jpg"/></a>
                <a href="#"><img src="/_tbkp/111.jpg" alt="http://delena.ucoz.ru/_tbkp/111.jpg"/></a>
                <a href="#"><img src="/_tbkp/5799236.jpg" alt="http://delena.ucoz.ru/_tbkp/5799236.jpg"/></a>
              </div>
              <a href="#" id="http://shadowhunters.ucoz.net/img/thumb_next" class="http://shadowhunters.ucoz.net/img/_thumb_next"></a>
              <a href="#" id="msg_thumb_prev" class="msg_thumb_prev"></a>
              <a href="#" id="msg_thumb_close" class="msg_thumb_close"></a>
              <span class="msg_loading"></span>
            </div>
          </div>
        </div>

В шаблон страницы сайта сразу после 

<div id="maincol">

вставляете $GLOBAL_SLIDER$

 

 

| Автор:
Спасибо, блоки *собрались в один столбик* ура. Теперь бы их еще на место вернуть)

Не помогло так и стоят внизу(((((((((((
| Автор:
Редактирование | | Автор: Elena

Чудо вы луковое и чесноковое)) Читаем внимательно и делаем. Скачиваем архив с файлами. Закидываем их через файловый менеджер в папку slider (если ее нет, то создаем). Далее идем в Панель управления - Дизайн - Управление дизайном (CSS) самой первой строчкой вставляем:

@import '/slider/slider.css'

После, в глобальном блоке вставляем то, что я писал выше. Ничего более там быть не должно!

И затем переходим в шаблон Страницы сайта и вставляем такой код:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>$SITE_NAME$ - $MODULE_NAME$</title>
<?$META_DESCRIPTION$?>
<?$META_KEYWORDS$?>

<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
</head>
<body>
$ADMIN_BAR$
<div id="all">
  <div id="top-stripe"></div>
  $GLOBAL_AHEADER$
  <div style="height: 5px; margin: auto; overflow: hidden;"></div>
  <div id="content">
    <div id=content-top></div>
    <div id="content-mid">
      <div id="maincol">
        $GLOBAL_SLIDER$
        <!-- <middle> -->
        <!-- <body> -->$CONTENT$<!-- </body> -->
        <!-- </middle> -->
      </div>
      <div id="rightcol">
        <div id="soc">
        <?if($RSS_LINK$)?><a href="$RSS_LINK$" target="_blank" title="RSS" class="soc-rss"></a><?endif?>
        <a href="http://del.icio.us/post?url=$HOME_PAGE_LINK$" rel="nofollow" target="_blank" title="Del.icio.us" class="soc-del"></a>
        <a href="http://www.facebook.com/share.php?u=$HOME_PAGE_LINK$" rel="nofollow" target="_blank" title="FaceBook" class="soc-facebook"></a>
        <a href="http://memori.ru/link/?sm=1&u_data[url]=$HOME_PAGE_LINK$" rel="nofollow" target="_blank" title="Memori" class="soc-memori"></a>
        <a href="http://vkontakte.ru/share.php?url=$HOME_PAGE_LINK$" rel="nofollow" target="_blank" title="Vkontakte" class="soc-vkontakte"></a>
        <a href="http://twitter.com/share?url=$HOME_PAGE_LINK$" rel="nofollow" target="_blank" title="Twitter" class="soc-twitter"></a>
        </div>
        $GLOBAL_CLEFTER$
      </div>
      <div style="clear: both;"></div>
    </div>
  $GLOBAL_BFOOTER$
  </div>
</div>
<script type="text/javascript">
$(function {
  $.getScript("/slider/slider.js");
});
 </script>
</body>
</html>

 

| Автор:
Спасибо Александр буду пробовать попробую отпишусь))) Огромное спасибо вам, что помогаете)
| Автор:
...