Fixed footer!

Тема в разделе "Веб-дизайн", создана пользователем Hezard, 4 авг 2010.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Hezard

    Hezard Писатель

    Регистр.:
    26 окт 2008
    Сообщения:
    5
    Симпатии:
    0
    Всем Добрый День, надеюсь на вашу помощь в таком вопросе:
    Есть сайт на котором футер является пользовательским меню и он прижимается к окну браузера свойством position:fixed;
    Все бы нечего, да только при ресайзинге браузера или если у пользователя не влезет страница (в ввиду разных дисплеев)то горизонтальный скролл работает только для всего тела документа, а вот сам футер теряет содержимое и не скролится...точней показывается только тот кусок который влез в браузер.
    Как это можно побороть, уже облазил кучу блогов но решения не нашел
     
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    чет не понял фразы
    скриншот покажи хоть, в чем косяк
     
  3. traa

    traa Постоялец

    Регистр.:
    11 дек 2006
    Сообщения:
    66
    Симпатии:
    8
    То есть, для примера, если ресайзить окно браузера, в ширину, то появляется горизонтальный скролл, который прокручивает только тело документа, а сам футер не прокручивается, чем меньше ширина окна, тем меньший кусок футера влезает
     
  4. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    781
    Симпатии:
    153
    Ага, я тоже не понял, скриншот и желательно код.

    Ну дык position:fixed;, естественно футер не двигается.


    Покажи скриншот!
     
  5. IgVan

    IgVan

    Регистр.:
    8 май 2008
    Сообщения:
    212
    Симпатии:
    54
    Если ширина верстки страницы или футера шире, чем окно браузера, но при этом содержимое исчезает и не появляется горизонтальный скролл, ищи в стилях:
    Код:
    overflow: hidden;
    Если убрать свойство, то по умолчанию оно станет в auto и скролл будет появляться лишь когда оно надо. Можно поставить:
    Код:
    overflow: scroll;
    Тогда скролл будет всегда, даже когда он не нужен.
     
  6. traa

    traa Постоялец

    Регистр.:
    11 дек 2006
    Сообщения:
    66
    Симпатии:
    8
    Совершенно верно, можно поставить оверфлоу в авто и получить отдельный скролл для футера, но это выглядит поистине ужасающе, когда при ресайзе окна мы получаем два скролла, один для тела документа, а второй для футера.
    Тут варианты: убирать один из скроллов и при скролле второго как-то скроллить первый(или наоборот, при скролле элемента скроллить боди), либо...
     
  7. Hezard

    Hezard Писатель

    Регистр.:
    26 окт 2008
    Сообщения:
    5
    Симпатии:
    0
    Так выглядит на обычном дисплее 15"
    http://i052.radikal.ru/1008/90/7e77cba0c7eb.jpg
    Так выглядит если изменить ширину окна браузера(допустим нетбук или кпк), уже часть меню футера обрезана
    http://s43.radikal.ru/i099/1008/c6/8d8d53bc90ba.jpg
    И вот скролл всего body, только футер не скролится, то есть мы по прежнему не видим часть меню футера
    http://i082.radikal.ru/1008/11/41104adcfcc9.jpg
    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>test</title>
    <!-- Styles -->
    <link href="wp-content/css/style.css" rel="stylesheet" type="text/css" media="screen" />
    <!-- Scripts -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" 
                src="/path/to/firebug/firebug.js"></script>
    </head>
    <body>
    <!-- Content -->
    <div id="content_wrap">
    	<div id="content" style="margin-top:40px;">	
    	  <div id="about">
    		<div class="about-round-top">
            	    <div class="about-text"></div>
    		</div>
    	  </div>
    		<div class="post-round-bottom">&nbsp;</div>
      	</div>
    </div>
    <!-- [END] Content -->
    <!-- Footer -->
    <div id="footer_wrap">
    	<div id="footer" >
    		<div valign="top" style="height:100%;width:540px;float:left;">	
    			<ul>
    				<li style="display:inline;width:40px;">Logo</li>
    				<li style="display:inline;width:100px;line-height:30px;margin-left:40px;"><input type="text" style="height:20px;width:100px;border:1px solid #749E58;color:#909090;" value="Логин" onclick="if (this.value=='Логин')this.value=''" onblur="if (this.value=='')this.value='Логин'"></li>
    				<li style="display:inline;width:100px;line-height:30px;margin-left:20px;"><input type="password" style="display:inline;height:20px;width:100px;border:1px solid #749E58;color:#909090;" value="Пароль" onclick="if (this.value=='Пароль')this.value=''" onblur="if (this.value=='')this.value='Пароль'"></li>
    				<li style="display:inline;width:100px;line-height:30px;margin-left:20px;"><div class="follow" style="display:inline-block;"><a style="" title="Follow Us" rel="external" href="../twitter.com/envato">Вход</a></div></li>
    				<li style="display:inline;width:100px;line-height:30px;"><a href="/">Регистрация</a></li>
    			</ul>
    		</div>
    		<div style="float:left;position:relative;">
    			<div class="market_wrap">
    				<div class="market_header" align="center" style="font-weight:bold;color:#ded9d9;">Общак</div>
    					<ul class="up">
    						<li><a href="">1</a></li>
    						<li><a href="">2</a></li>
    						<li><a href="">3</a></li>
    					</ul>
    			</div>
    			<div class="sites_wrap">
    				<div class="sites_header">Menu2</div>
    				<ul class="up">
    					<li><a href="">1</a></li>
    					<li><a href="">2</a></li>
    					<li><a href="">3</a></li>
    			        </ul>
    			</div>
    		</div>	
    		<div style="clear:both;"></div>
    	</div>
    </div>
    <!-- [END] Footer -->
    </body>
    </html>
    
    CSS для футера главного блока
    HTML:
    
    #footer_wrap {
      position: fixed;
      bottom: 0;
      height: 47px;
      width: 100%;
      background: #1b1b1b url(images/footer-bg.jpg) no-repeat 0 0;
      border-top: 1px solid #749e58;
      z-index: 99;
    }
    #footer {
    position:relative;
      margin:10px;
      min-width: 1000px;
    }
    
     
  8. saneksanek

    saneksanek Создатель

    Регистр.:
    6 апр 2007
    Сообщения:
    41
    Симпатии:
    10
    Почему бы не попробовать
    Код:
    #footer {
    position:relative;
      margin:10px;
      width: 100%;
    }
    
     
  9. Hezard

    Hezard Писатель

    Регистр.:
    26 окт 2008
    Сообщения:
    5
    Симпатии:
    0
    Это одно из первых что пришло в голову, только не работает.
    Вариантов перебрал множество...даже с яваскриптом решение пока не нашлось
     
  10. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    http://tweet.ru/
    отсюда дерни такую фичу и все
     
Статус темы:
Закрыта.