• Страница 1 из 1
  • 1
Форум Studio AD » Сайтостроение » Общий форум по CSS » проблемы с футером (контент в футере съежает)
проблемы с футером
SE7EN
Дата: Воскресенье, 22.08.2010, 19:05 | Сообщение # 1
молчун
Группа: Проверенные
Пользователь №: 532
Сообщений: 20
Мне нужно было чтоб "подвал" сайта был всегда внизу не важно насколько заполнена страница. Это решил вынесением Дива "подвала" из "контейнера" (гдето урок нашол не помню где). Но вот возник вопрос: как теперь сделать так чтоб при уменьшении окна браузера контент который в "подвале" не съежал, т.е. чтоб точно также как и тело сайта уменьшался бы только до определённого размера?

надеюсь понятно написал

вот это у меня в CSS

Code

#container{
margin:0 auto;  
text-align:left;   
width:100%;
min-width:1004px;
width:expression(   /*задаем минимальную ширину макета в старых версия браузера. Просто замените цифру на свою шиирину <img rel="usm" src="http://studioad.ru/smiles/smile.gif" border="0" align="absmiddle" alt=":)"> */
(document.compatMode && document.compatMode == 'CSS1Compat')
?
(
document.documentElement.clientWidth < 1004
?
"1004px"
:
"auto"
)
:
(
document.body.clientWidth < 1004
?
"1004px"
:
"auto"
)
);
min-height:100%;
}  

#logo {
border: 0px solid #000;
position: absolute;

width:232px;
height:102px;
padding-top:50px; /*позиция логотипа верх-низ */
z-index: 1;
}

#date{
position: absolute;
border: 0px solid #000;
margin-top:120px;/*позиция даты верх-низ */
margin-left:75px; /*позиция даты право-лево */
text-align:center;
color: #ffffff; font-size: 10px; font-weight: normal; font-family:  Arial, Verdana, Helvetica;
width:175px;
float:left;
z-index: 2;
}

/*стили для шапки сайта */
#header{
border: 0px solid #000;
height:102px;
padding-top:59px; /*позиция всей шапки(без логотипа) верх-низ */
}

#headr_left{
border: 0px solid #000;
background:url(../images/header_l.png) no-repeat;
width:21px;
height:86px;
margin-left:85px;
float:left;
}

#headr_right{
border: 0px solid #000;
background:url(../images/header_r.png) no-repeat;
width:26px;
height:86px;
float:right
}

#headr_center{
border: 0px solid #000;
background:url(../images/header_center.png) left repeat-x;
height:86px;
margin-left:106px;  
margin-right:26px;  
}

#tab_center{
border: 0px solid #000;
height:82px;
padding-top:7px;
padding-bottom:7px;
margin-left:118px;
}

#serch{
border: 0px solid #000;
position:relative;  top: 0px;
height:20px;
}

#searchinput {
margin-top:0px;
border: 1px inset #254e60;
background-color:#CFEBF5;
color: #5d9dd3;
font-size: 14px;
font-weight: bold;
text-align: left;
font-family: Arial, Verdana, Helvetica;
margin-right:200px;
width:100%;
float:left;
}
#searchsubmit  {
border: 0px solid #000;
background: transparent url(../images/serch_btn.png) no-repeat;
width:23px;
height:23px;
margin-right:0px;
}
#searchsubmit:hover  {
border: 0px solid #000;
background: transparent url(../images/serch_btn_2.png) no-repeat;
width:23px;
height:23px;
margin-right:0px;
}
/*конец стили для шапки сайта */

/*Здесь пишем стили для левой колонки сайта */
#left{
border: 0px solid #000;
background-color:#;
width:200px;   
float:left;  
}
/*Здесь пишем стили для правой колонки сайта */
#right{
width:200px;
background-color:#a9d28c;
float:right;  
}
/*Здесь пишем стили для блока контента */
#content{
margin:0px;
margin-left:202px;  
margin-right:202px;  
}

/*атрибут, который опускает подвал сайта ниже всех блоков. Нужен для корректной работы макета. */
#clear{
height:0;
font-size:1px;
line-height:0px;
clear:both;
}
#rasporka{
height: 95px;
}

/* -----Cтили для подвала (FOOTER) сайта ----- */
#footer{
border: 0px solid #000;
background:url(../images/bg_bottom.png) repeat-x;
font-size:17px;
width:100%;
height: 95px;
margin-top:-95px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
text-align:left;  
color:#ffffff;
font-size: 11px;
font-family:Arial, Helvetica, sans-serif;
}
#footer_left{
border: 0px solid #000;
margin-top:5px;
margin-left:5px;
float:left;
}
#footer_left a {color:#ffffff;font-weight: bold;}
#footer_left a:hover{color: #ffffff;text-decoration: underline;}

#footer_right{
border: 1px solid #000;
margin-top:40px;
float:right
}
#footer_center{
border: 0px solid #000;
margin-top:25px;
margin-left:450px;  
margin-right:50px;  
}
#footer_center a {color:#ffffff;font-size: 11px;font-family:Arial, Helvetica, sans-serif;font-weight: bold;}
#footer_center a:hover{color: #ffffff;font-size: 11px;font-family:Arial, Helvetica, sans-serif;text-decoration: underline;}
/* -----Конец стили для подвала (FOOTER) сайта ----- */

а это в индекс файле

Code

<body>

<div id="container">

<div id="date">
<script language="JavaScript">
<!--
document.write(datastr);
--></script>
</div>
<div id="logo"><a href="index.php" title="$sitename"><img src="images/logos/$site_logo" border="0" alt="$sitename"/></a></div>
<div id="header">

<div id="headr_left"></div>
<div id="headr_right"></div>
<div id="headr_center">
   <div id="tab_center">
    <div id="topmenu">{%BLOCKS none, block-menu.php%}</div>
     <div id="serch">
       <table width="100%" border="0" cellpadding="0" cellspacing="0">
       <tr>
         <td width="100%"><form id="search_form" action="http://myaksu.info/index.php">
<input type="hidden" name="cx" value="007230488163471426305:mbb6vq783he" />
<input type="hidden" name="cof" value="FORID:11" />
<input type="hidden" name="name" value="GoogSearch" />
<input type="hidden" name="ie" value="windows-1251" />
<input id="searchinput" type="text" name="q"  value="" maxlength="40" /><td>  <td width="25" align="right"><input id="searchsubmit" type="submit" name="sa" value="" title="ПОИСК" />
           </td>
         </form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=ru"></script>
       </tr>
     </table>
     </div>
    <div id="menucity">{%BLOCKS none, block-menucity.php%}</div>  
   </div>
</div>
<div id="clear"></div>
</div>
   
     <table summary="" border="0" width="100%" cellpadding="0" cellspacing="3"><tr valign="top"><td>{%BLOCKS left%}</td><td width="100%">{%BLOCKS message%}{%BLOCKS center%}{%MODULE%}{%BLOCKS down%}</td><td>{%BLOCKS right%}</td></tr></table>

   
<div id="clear"></div>
<div id="rasporka"></div>

</div>
<div id="footer"> <br><br>
<div id="footer_left">{%LICENSE2%}<br>{%LICENSE%}</div>
<div id="footer_right">UP</div>
<div id="footer_center"><a href="#" title="Информация о сайте">О сайте</a>  <font class="userinput">•</font>  
<a href="#" title="Пользовательское соглашение">Отказ от ответственности</a>  <font class="userinput">•</font>  
<a href="#" title="Желаете разместить свою рекламу?">Реклама на сайте</a>  <font class="userinput">•</font>    
<a href="#" title="Связь с авторами">Контакты</a></div>
</div>
<script>
// Тултипы. Скрипт разработан на http://studioad.ru
var styles = 'font:12px Tahoma;font-weight:bold;background:white;padding:4px 7px 6px 7px;color:#ff6600;border: 2px solid #ff6600'; // стили подсказки      
var opacit = 100; // прозрачность в процентах
var optime = 100; // скорость появления и исчезновения в мс
var tposit = 5; // количество пикселей, на которое подсказка отступает от курсора вверх и вправо
IE=/*@cc_on!@*/false;var elems=document.getElementsByTagName("*");for(var i=0;i<elems.length;i++){if(elems[i].title){elems[i].onmouseover=function(e){var k=[];var j=[];var f=[];var h=[];var g=new Date().getTime();j[g]=this.title;this.title="";k[g]=document.createElement("DIV");k[g].innerHTML="<div style='"+styles+"'>"+j[g]+"</div>";k[g].style.cssText="position:absolute;opacity:0;filter:alpha(opacity=0);z-index:9999;";document.body.appendChild(k[g]);k[g].style.top=mouse(e).y-tposit-k[g].offsetHeight+"px";k[g].style.left=mouse(e).x+tposit+"px";document.onmousemove=function(b){k[g].style.top=mouse(b).y-tposit-k[g].offsetHeight+"px";k[g].style.left=mouse(b).x+tposit+"px"};h[g]=setTimeout(function(){fade(k[g],opacit,optime,function(){if(IE){k[g].style.removeAttribute("filter")}})},150);this.onmouseout=window.onunload=function(){clearTimeout(h[g]);document.onmousemove="";this.title=j[g];fade(k[g],0,optime,function(){document.body.removeChild(k[g])})}}}}function mouse(g){var j,f,k,c,h;j=document;h=IE?window.event:g;f=j.documentElement.scrollTop?j.documentElement.scrollLeft+h.clientX:j.body.scrollLeft+h.clientX;k=j.documentElement.scrollTop?j.documentElement.scrollTop+h.clientY:j.body.scrollTop+h.clientY;return{x:f,y:k}}function fade(f,b,a,c){if(IE){d=f.style.filter.replace(/.*opacity=([0-9]*).*/,"$1");if(!d){d=100}d=parseFloat(d)}else{var d=f.style.opacity;if(d==""){d=1}d=parseFloat(d);b=b/100}var e=new Date().getTime();setTimeout(function(){var g=(new Date().getTime())-e;var h=g/a;var j=(b-d)*h+d;if(IE){f.style.filter="alpha(opacity="+j+")"}else{f.style.opacity=j}if(h<1){setTimeout(arguments.callee,10)}else{if(IE){f.style.filter= "alpha(opacity="+b+")"}else{f.style.opacity=b}if(c){c()}}},10)};
</script>
</body>
</html>
  
strike
Дата: Воскресенье, 22.08.2010, 21:09 | Сообщение # 2
молчун
Группа: Проверенные
Пользователь №: 1081
Сообщений: 37
Получено оценок: 2
гугл в руки ибо там есть ответ
  
SE7EN
Дата: Воскресенье, 22.08.2010, 23:43 | Сообщение # 3
молчун
Группа: Проверенные
Пользователь №: 532
Сообщений: 20
Спасибо, очень информативный ответ. А форум тогда зачем позвольте спросить?
  
SE7EN
Дата: Понедельник, 23.08.2010, 00:31 | Сообщение # 4
молчун
Группа: Проверенные
Пользователь №: 532
Сообщений: 20
поскольку не очень силён в CSS (только учусь), методом проб и ошибок получилось
исспользовал min-width плюс надыбал хак для 6 Осла width: expression(document.body.clientWidth > 1004 ? "100%" : "1004px") /* Минимальная ширина для IE6 */

Пав я или нет?

  
strike
Дата: Понедельник, 23.08.2010, 09:00 | Сообщение # 5
молчун
Группа: Проверенные
Пользователь №: 1081
Сообщений: 37
Получено оценок: 2
че ты сразу как маленький минусы ставишь не бось плачешь там же вот твой ответ гугл
  
SE7EN
Дата: Понедельник, 23.08.2010, 13:54 | Сообщение # 6
молчун
Группа: Проверенные
Пользователь №: 532
Сообщений: 20
strike, я не просил чтоб мне объяснили как прижать футер к низу, вопрос был в другом (пожалуста читай внимательнее).
Прежде чем спросить я поискал ответ на форуме не нашёл вот и спросил. Если ты знал ответ то почему просто не написал как сделать. То что есть Гугл я и так знаю, здесь я спросил потому что этот форум сециализируется на CSS.

И самое главное я не собираюсь с тобой выяснять кот плачет и кто маленький.

Минус я тебе поставил потому что ты невнимателно прочитал мой вопрос ну и как результат вежливо послал меня в Гугль.

  
Slimmi
Дата: Понедельник, 23.08.2010, 17:09 | Сообщение # 7
говорун
Группа: Модераторы
Пользователь №: 5
Сообщений: 287
Получено оценок: 38
SE7EN, попробуй так:
Code
<style>
#footer{bottom:0;position:fixed}
<style>


Большие фотостатусы
  
Aleko
Дата: Понедельник, 23.08.2010, 17:51 | Сообщение # 8
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
SE7EN, не пробуй так. Лучше пришли скрин того что у тебя сейчас с пояснением, чего ты хочешь добиться.

Бесплатные обои.
  
SE7EN
Дата: Понедельник, 23.08.2010, 18:43 | Сообщение # 9
молчун
Группа: Проверенные
Пользователь №: 532
Сообщений: 20
было так: сужаю окно браузера, так как хидер и основная часть сайта анесены в див "контейнер", а ему прописана минимальная ширина, то тут всё нормуль. А вот футер вынесен из контейнера (чтоб прижать к низу сайта), и при сужении окна браузер контент "сезжал в кучу" см.скрин

проблему решил так:
добавил то что выделено жирным
#footer{
border: 0px solid #000;
background:url(../images/bg_bottom.png) repeat-x;
font-size:17px;
min-width:1004px;
width:100%;
height: 95px;
margin-top:-95px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
text-align:left;
color:#ffffff;
font-size: 11px;
font-family:Arial, Helvetica, sans-serif;
width: expression(document.body.clientWidth > 1004 ? "100%" : "1004px") /* Минимальная ширина для IE6 */

Так как я в CSS ещё как бы лох вот и парюсь частенько.
Но тут взникает другой вопрос правильно я сделал или можно было по другому сделать?

Прикрепления: 2824607.jpg (133.0 Kb)
  
Форум Studio AD » Сайтостроение » Общий форум по CSS » проблемы с футером (контент в футере съежает)
  • Страница 1 из 1
  • 1
Поиск:
© Studioad.ru 2006 · 2010. Использование материалов форума на сторонних ресурсах без прямой обратной ссылки строго запрещено. Хостинг от uCoz.