помогите пожалуйста сделать футер

Neptun · February 8, 2012

Здравствуйте.

Я с CSS только знакомлюсь. У меня 2 вопроса.

1)

делаю сайт, состоящий, из двух колонок (лево\право) и центральной части. Правый бокс заверстался без особых проблем. Каждый контейнер располагался непосредственно друг за другом. С левым боксом почему-то так не получается. Хоть вроде бы всё делаю тоже самое. Все боксы размещаются друг на друге сразу под первым боксом. проблема решалась только путём "margin-top" но как это будет отображаться на мониторах с другими размерами неизвестно...

2)

не получается разместить внизу страницы футер. Мне не важно, будет он привязан к низу окна, или нет, но он точно должен быть, я перепробывал множества способов, которые нашёл в инете, но итог один. футер размещается везде, но не снизу.

Подскажите пожалуйста. Вот коды страниц index.html


<html>
<title>New Document</title>
<link rel="stylesheet" type="text/css" href="style.css"/>

<body>

<div id="header">
<div id="head">
</div></div> 

	<div id="menu">
	<div class="menu">

<a href="http://uchisam.com/shop_content.php?coID=4">О 

программе</a>
<a href="http://uchisam.com/shop_content.php?coID=135">О 

создателях</a>
<a href="http://uchisam.com/shop_content.php?coID=23">О Курсе</a>
<a href="http://uchisam.com/shop_content.php?coID=499">О 

результатах</a>
<a href="http://uchisam.com/shop_content.php?coID=498">Другие 

курсы</a>
<a href="http://uchisam.com/shop_content.php?coID=1">Доставка</a>
<a href="http://uchisam.com/shop_content.php?coID=501">Контакты</a>
<a href="http://uchisam.com/shop_content.php?coID=11">Вопросы и 

ответы</a>
<a href="http://uchisam.com/product_info.php?products_id=1">Отзывы 

и фото</a>
<a href="{$cart}">Корзина</a>


</div>
	<div id="oglavleft">
	<b>При поддержке сети языковых центров "Лингва 

Люкс"</b><br><br>
	<img src="img/ll.jpg">
	</div>

<div id="telefon">
</div>	
<div class="vopros">
</div>
</div>


<div id="line1">
</div>

<div id="center">
<h1><center><font color="#006DB2"<b><i>Хочешь учить английский так 

же?</i></b></font></center></h1><br>
<center><img src="img/girl.jpg"></center><br>
<h2><center><i>Текст завлекалочка...Текст завлекалочка...Текст 

завлекалочка...Текст завлекалочка...Текст завлекалочка...Текст 

завлекалочка...</i></center></h2>
</div>

<div id="line2"></div>

<div id="right">
<h1><center><font color="#DE204C"><b><i>Легко!

</i></b></font></center></h1><br>
<center><img src="img/disk.jpg"width="200"></center><br>
<h1><center><font color="#006DB2"<b><i>Послушай диск!

</i></b></font></center></h1><br>

<a href="#" class="right1"></a>
<a href="#" class="right2"></a>
<a href="#" class="right3"></a><br><br><br><br><br><br>
<div class="righttheme">
<p><b>Об этом нужно знать</b></p>
</div><br>
<div class="righttext"><ul>
<li>Быстрое оформление Шенгена</li><br>
<li>Обучение в Лондоне</li><br>
<li>Новые эффективные методики запоминания</li><br>
<li>налоги на обучении в Британии</li><br></ul>
</div>

<center><div class="image"></center>
</div>
</div>
</div>
</body>
</html>

style.css

#head{
    height: 163px;
	width: 851px;
	text-align:left;
	margin:0px auto;
	background: url(img/head.jpg) no-repeat; z-index:1;
}

#header{

    height: 20%;
	width: 100%;
	background: url(img/header.jpg) repeat-x;
}


#line1{
position:absolute;
left:19%;
width: 3px;
height:130%;
background-color: #c0c0c0;
}



#line2{
position:absolute;
right:19%;
width: 3px;
height:130%;
background-color: #c0c0c0;
}


#Center{
position:absolute;
left:25%;
right:25%;
min-height:50px;
_height: 50px;
}

#menu{
width:173px;
min-height:50px;
_height: 50px;
position:absolute;
padding-left:2%;
padding-right:2%;

}

.menu{text-align:center; width:200px;}
.menu a{display:block; color:black; padding:10px 3px; border-bottom:1px solid black; text-decoration:none;}
.menu a:hover{background:#006DB2;
color:white;
}

#oglavleft{
display:block;
margin-top:20%;
font-size:16pt;
position:absolute;
color:#006DB2;
text-align:center;
float:left;
}

.telefon{
width:90%;
height:100px;
position:absolute;
padding: 2%;
Margin-top:90%;
background:url(img/online2.jpg) no-repeat;
}

.vopros{
height:200px;
width:90%;
margin-top:120%;
position:absolute;
padding:2%;
background:url(img/vopros.jpg) no-repeat;

}

#right{
position:absolute;
left:82%;
right:0%;
min-height:50px;
_height: 50px;
}

A.right1{
display:block;
position: absolute;
width: 80px; 
height: 73px;
background: url(img/Knopki_1-1.jpg) no-repeat;}
 A.right1:hover {
    background: url(img/Knopki_2-1.jpg); 
   }

A.right2{
display:block;
position: absolute;
left:80px;
width: 80px; 
height: 73px;
background: url(img/Knopki_1-2.jpg) no-repeat;}
A.right2:hover {
    background: url(img/Knopki_3-1.jpg); 
   }

.right3{
display:block;
position: absolute;
left:160px;
width: 80px; 
height: 73px;
background: url(img/Knopki_1-3.jpg) no-repeat;}
 A.right3:hover {
   background: url(img/Knopki_4-1.jpg); 
   }

.righttheme{
text-align:center;
padding: 2%;
margin-right:4%;
background:#006DB2;
color:white;
}

.righttext{
margin-left:10px;
color:#006DB2;
list-style-image:url(img/li.jpg);
 list-style-position:outside;
font-size:14pt;
line-height:25px;
}

.image{
height:138;
width:201;
background:url(img/london.jpg) ;
background-size:contain;
}

#bottom{
height: 47px;
	padding-top: 20px;
	margin-bottom: 10px;
background-color:blue;
}

показал бы скрин, только не знаю как...

Спасибо

dostel1 · February 8, 2012

http://www.xiper.net/collect/html-and-css-tricks/karkas-verstki/podval-k-nizu.html

Neptun · February 9, 2012

http://www.xiper.net/collect/html-and-css-tricks/karkas-verstki/podval-k-nizu.html

Спасибо. Очень хороший ресурс.

С помощью него получилось по крайней мере разместить footer снизу экрана, только осталась не раскрытая проблема:

Футер размещается точно под 100% экрана, не прилипая к нижней границе экрана. а страница намного больше 100% экрана.

.main {
background: #999;
min-height: 100%;}
* html .main {
height: 100%;
}

почему - то значение min-height: 100%; воспринимается как статичная высота равная 100%

Подскажите пожалуйста, как это можно исправить?

Sign In

помогите пожалуйста сделать футер

Question

Neptun

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

dostel1

Link to comment

Share on other sites

Neptun

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information