Master-X
Форум | Новости | Статьи
Главная » Форум » Дизайн » 
Тема: Помогите прибить футер
цитата
18/11/15 в 13:47
 orvas
Если контента немного, футер на месте. Если побольше - уползает вверх
футер - #bot
@charset "utf-8";
*{
    margin:0;
    padding:0;
    }
body{
        text-align:center; /*For IE6 Shenanigans*/
      font-family: "Arial";
      background-image: url('img/back.jpg');
      background-repeat: no-repeat;
                background-position: top center;
      background-attachment:fixed;
                background-size: 100%;
     }

#topcall{
        width:990px;
        margin:0 auto;
      height:50;
        text-align:left;
      background-image: url('img/callme.png');   
      background-repeat: no-repeat;
        background-position: top center;      
     }
#wrapper{
        width:970px;
        margin:0 auto;
      height:1000px;
        text-align:left;
      background-color: #fff;      
      background-image: url('img/shadow.png');
      background-repeat: no-repeat;
        background-position: top left;
     }
#left {
width:290px;
float:left;
padding-left:10px;
}
#right {
width:670px;
float:left;

}
#menu {
padding-top:20px;
width:290px;


}
#imenu {
width:42px;
height:30px;
float:left;
text-align:left;
}
#textmenu {
width:220px;
height:30px;
float:left;
padding-top:7px;
padding-left: 10px;
border-bottom:1px solid #e5e5e6;
}
#topmenu {
padding-top:18px;
height:55px;
}
    #text{
        width:1000px;
        padding-top:20px;
      padding-left:40px;
      height:146px;
        text-align:left;
      background-image: url('img/text.jpg');   
background-repeat: no-repeat;
line-height:18px;      
     }
      #bot{
        width:990px;
bottom: 0;
        margin:0 auto;
      height:73;
        text-align:left;
      background-image: url('img/callme-bot.png');   
      background-repeat: no-repeat;
        background-position: top center;
              
     }


a {
        font-family: "Arial";
        color:#5e5e5e;
        font-weight : normal;
        font-size: 20px;
        text-decoration: none;
}

a:visited {
     font-family: "Arial";
        color:#5e5e5e;
        font-weight : normal;
        font-size: 20px;
        text-decoration: none;
}
a:link {
       font-family: "Arial";
        color:#5e5e5e;
        font-weight : normal;
        font-size: 20px;
        text-decoration: none;
}
a:hover {
    font-family: "Arial";
        color:#5e5e5e;
        font-weight : normal;
        font-size: 20px;
        text-decoration: none;
}
a.men {
        font-family: "Arial";
        color:#169eda;
        font-weight : normal;
        font-size: 14px;
        text-decoration: none;
}

a.men:visited {
     font-family: "Arial";
        color:#169eda;
        font-weight : normal;
        font-size: 14px;
        text-decoration: none;
}
a.men:link {
       font-family: "Arial";
        color:#169eda;
        font-weight : normal;
        font-size: 14px;
        text-decoration: none;
}
a.men:hover {
    font-family: "Arial";
        color:#169eda;
        font-weight : normal;
        font-size: 14px;
        text-decoration: underline;
}
a.men-t {
        font-family: "Arial";
        color:#169eda;
      display:block;
      height:30px;
      border-bottom:3px solid #e5e5e7;
        font-weight : normal;
        font-size: 14px;
        text-decoration: none;
      width:auto;
      float:left;
      padding:0px 15px;
}

a.men-t:visited {
     font-family: "Arial";
        color:#169eda;
      display:block;
      height:30px;
      border-bottom:3px solid #e5e5e7;
        font-weight : normal;
        font-size: 14px;
        text-decoration: none;
      width:auto;
      float:left;
      padding:0px 15px;
}
a.men-t:link {
       font-family: "Arial";
        color:#169eda;
      display:block;
      height:30px;
      border-bottom:3px solid #e5e5e7;
        font-weight : normal;
        font-size: 14px;
        text-decoration: none;
      width:auto;
      float:left;
      padding:0px 15px;
}
a.men-t:hover {
    font-family: "Arial";
        color:#169eda;
      display:block;
      height:30px;
      border-bottom:3px solid #179fdb;
        font-weight : normal;
        font-size: 14px;
        text-decoration:none;
      width:auto;
      float:left;
      padding:0px 15px;
      
}
a.obod {   margin-top: 0;   
padding: 10px;
margin:0 0 10px 0;
font-size:14px;
font-family: "Arial";
font-weight : normal;
color:#555555;
line-height:21px;
display:block;
width:95%;
border:1px solid #e5e5e6;
border-radius: 10px;
background-color:#fcfcfc;}

ul, ol, dl {padding: 0;   margin: 0;}
h1, h2, h3, h4, h5, h6 {   margin-top: 0;   padding: 0 15px 0 15px; margin:0 0 10px 0;}
p {   margin-top: 0;   padding: 0 15px 0 15px; margin:0 0 10px 0; font-size:14px; font-family: "Arial";font-weight :

normal; color:#555555; line-height:21px;}
цитата
18/11/15 в 14:08
 sx88
А так и будет. Можно задать основному блоку сайта (#wrapper) min-height: 1000px; например, тогда сайт будет минимум высотой 1000px, и поэтому футер будет как-бы всегда внизу, но будет пустая область контента....
цитата
18/11/15 в 14:20
 orvas
И никак не исправить?
цитата
18/11/15 в 14:52
 sx88


Ну можно конечно извратиться и сделать его position: absolute; и прибить к низу экрана, но это как я и сказал выше - извращение получится немного. лучше задай минимальную высоту сайта...если сайт не для мобилок, а только для десктопов - то мин. высота будет норм и особо ни как не скажется. Зато футер всегда внизу будет как-бы.


Эта страница в полной версии