[Помогите] Настроить фиксированную панель

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Radu, 2 дек 2012.

  1. Radu

    Radu

    Регистрация:
    29 окт 2012
    Сообщения:
    69
    Симпатии:
    8
    Всем привет.
    Решил на своём сайте сделать фиксированную панель в футере и там вывести слайдер лучших фото, новых товаров и тому подобное.Всё казалось бы отлично отображается, проверял на нескольких видов монитора, но...
    Вчера заметил на ноутбуке сестры кривизну этой панель. Конетент сайта равняется по середине шириною в 960 пикселей, настроить панель в пикселях не удалось и настроил в процентах:
    Код:
    #footer_content{
    position:fixed;
    z-index: 999;
    height: 177px;
    bottom:0;
    left:12%;
    width:76%;
    background:#2f2f2f;
    как можно этот код выровнить по середине соблюдая ширину 960 пикселей?
     
  2. cobalt

    cobalt Команда форума

    Регистрация:
    18 окт 2012
    Сообщения:
    278
    Симпатии:
    127
    Вы бы лучше ссылку на сайт дали. Так будет значительно проще.
     
  3. Radu

    Radu

    Регистрация:
    29 окт 2012
    Сообщения:
    69
    Симпатии:
    8
     
  4. Lion18

    Lion18

    Регистрация:
    3 дек 2012
    Сообщения:
    253
    Симпатии:
    30
    Может стоит слайдер занести в футер(html) и дальше равнять по css?
    Он у вас сейчас идет как 2-й футер, в добавок накладывается на низ футера.
     
  5. Radu

    Radu

    Регистрация:
    29 окт 2012
    Сообщения:
    69
    Симпатии:
    8
    Я не хочу что бы пользователь увидел его после прокрутки, мне нужен фиксированный блок.
     
  6. Очень много в интернете есть фиксов на эту тему сам использую такую конструкцию:
    Код:
    <!-- Фиксированная панель-->
    <script type="text/javascript">
    $(document).ready(function() {
    	if ($.browser.msie && $.browser.version.substr(0,1)<7) {}
    	else {
    		var panel = $('.panel'),
    		pos = panel.offset();
    		$(window).scroll(function() {
    			if($(this).scrollTop() > pos.top+panel.height() && panel.hasClass('default')) {
    				panel.removeClass('default').addClass('fixed');
    			}
    			else if($(this).scrollTop() <= pos.top && panel.hasClass('fixed')) {
    				panel.removeClass('fixed').addClass('default');
    			}
    		});
    	}
    });
    </script>
    
    <div class="panel default">
    <div class="panel_content">
    Содержимое
    </div>
    </div>
    <!-- //Фиксированная панель-->
    Код:
    .panel {
    	width:100%;
    	height:38px;
    	color:#FFF;
    	font:16px/30px Tahoma, Helvetica, Verdana, Arial;
    	background:url('../image/panel/panel-bg.png') repeat-x;
    	font-size: 12px;
    	text-shadow: #696969 1px 1px;
    
    .default {
    	width: 100%;
    	position:fixed;
    	top:0;
    	left:0;
    	z-index: 990;
    	/* стили для изначального положения */
    }
    
    .fixed {
    	/* стили для плавающего положения */
    	width: 100%;
    	position:fixed;
    	top:0;
    	left:0;
    	z-index: 990;
    
    
    /*//Фиксированная панель*/
    Ну это я просто сдернул с проекта немного подчистил, но вроде все понятно.
    --- добавлено: 3 дек 2012 в 16:01 ---
    Есть еще прикольный полезный эффект, когда нужно подцепит как бы меню. Оно к примеру под хедером при прокрутке прилипает к верху браузера. Позже опубликую свой вариант... И интересно кто какие использует?
     
    Radu нравится это.
  7. Radu

    Radu

    Регистрация:
    29 окт 2012
    Сообщения:
    69
    Симпатии:
    8
    где можно посмотреть этот эффект?
     
  8. Radu

    Radu

    Регистрация:
    29 окт 2012
    Сообщения:
    69
    Симпатии:
    8
    Вот именно это меня и интересует. Сегодня сделал на одном сайте но пока что сыро, нужно настроить. Когда опубликуешь не поленись и мне показать?
    Я хочу этим самым заполнить все пустоты на сайте. К примеру даже главную часть сайта, если в случае будет короче по высоте чем боковой блок, что бы скользил вниз.
     
  9. rk9qwn

    rk9qwn

    Регистрация:
    15 дек 2012
    Сообщения:
    5
    Симпатии:
    0
    Вот нашёл вариант, попробуйте
    (позиционирование и отрицательный отступ)
    Делается так: блок позиционируется в родительском элементе и потом сдвигается влево на 50% (left:50%), но таким образом элемент будет размещен не совсем по центру и для того чтоб это изменить блоку задается отрицательный левый отступ равный половине ширины блока чтоб ровно выровнять его по центру.также присваиваем позиционирование. Пример:
    Код:
    .example3 {
    position:relative;
    left:50%;
    margin-left:-250px;
    width:500px;
    background:green;
    border:1px solid red;
    }