Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript
Перезагрузить страницу

Помогите растянуть шапку и футер


Помогите растянуть шапку и футер

Обсуждение темы Помогите растянуть шапку и футер в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Привет всем.Вообщем верстал одному человеку на заказ.Сгенерировал готовый резиновый css-шаблон на csstemplater.com, но возникла одна проблема, не растягивается шапка и футер как надо.пробовал ...


Закрытая тема
Страница 1 из 3 1 23 >
 
Опции темы
Старый 15.12.2010, 16:50   #1
Привет всем.Вообщем верстал одному человеку на заказ.Сгенерировал готовый резиновый css-шаблон на csstemplater.com, но возникла одна проблема, не растягивается шапка и футер как надо.пробовал
Код HTML:
width:100%;
но все бесполезно, шапка и футер не хочет растягиваться
контейнер шапки
Код HTML:
#wrapper {
	width: 100%;
	min-width:1024px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
сама шапка
Код HTML:
#header {
	height: 102px;
	background-image:url(../img/fon-header.png);
	background-repeat:repeat-x; 
}
футер
Код HTML:
#footer {
	margin: -79px auto 0;
	min-width:1024px;
	max-width:100%
	height: 79px;
	background-image:url(../img/fon-footer.png);
	font-size: 11px;
}
помогите решить данный баг.буду благодарен.
 
Старый 15.12.2010, 16:50
Ссылки
Старый 15.12.2010, 18:05   #2
Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>My Site</title>
<link type="text/css" rel="stylesheet" href="/css/style.css" />

</head>

<body>
<div id="header">
	header
</div>
<div id="content">
	content
</div>
<div id="footer">
	footer
</div>

</body>
</html>
Код HTML:
#header, #content, #footer{
width:100%;
min-width:1010px;
height:100px;
border:1px solid #000  /*для наглядности*/
}
ну а приблуды в виде background итд выставите сами
 
Старый 16.12.2010, 10:08   #3
vladendark, все так же.вот скрины для наглядности
http://radikal.kz/pictures/f7fa14aec...7633ebacdc.png
http://radikal.kz/simple/images/s2.png
 
Старый 16.12.2010, 10:15   #4
может растягивается, но без фона?

background-image:url(../img/fon-footer.png) repeat-x;
 
Старый 16.12.2010, 10:50   #5
SerGun, ну мне надо чтобы растягивался футер и шапка, просто нужно сделать чтобы они были резиновыми.
 
Старый 16.12.2010, 11:05   #6
Flynt вы не очень четко формулируете свои желания, и помоему несовсем понимаете что вам советуют,

лучше покажите наглядно пример\ссылку где такой хедер\футер как вам надо
 
Старый 16.12.2010, 11:18   #7
сброс стилей делали?
как минимум
Цитата:
* {
padding:0;
margin:0;
outline:none
}
ps весь код можно увидеть? На скрине явно видно, что какой-то div тянет 100% и имеет padding. либо спозиционирован не верно
Последний раз редактировалось vladendark; 16.12.2010 в 11:21..
 
Старый 16.12.2010, 12:45   #8
Решил выложить весь код, действительно когда только начал верстать все правильно растягивалось, но к концу все перестало растягиваться, возможно напутал как писалось выше в позиционировании.
Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
	<title></title>
	<meta name="title" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" />
	<!--[if lte IE 6]><link rel="stylesheet" href="css/style_ie.css" type="text/css" media="screen, projection" /><![endif]-->
</head>

<body>

<div id="wrapper">

	<div id="header">
    <img src="img/logo.png" alt="Сайт о мировом футболе" style="margin-left:49px;" />
</div>
<div id="gor-menu-left"></div>
<div id="gor-menu-center">
<ul id="gor-nav"> 
<li><a href="#">Главная</a></li>    
<li><a href="#">Форум</a></li>
<li><a href="#">Чемпионаты</a></li>
<li><a href="#">Обзоры</a></li>
<li><a href="#">Фан-клубы</a></li>
</ul>
</div>

<!-- #header-->

	<div id="middle">

		<div id="container">
			<div id="content">
<div class="content-left"></div>
<div class="content-center">Наша редакция:</div>
<div class="content-right"></div>
<div class="content-text-place">


<table width="520">
  <tr>
    <td><img src="img/screen.png" alt="Чемпионат Мира 2010" class="screen" /></td>
    <td>
    <div class="news-title">Переломный момент. Маракансо</div>
   <div class="news-info">09 Декабря 2010, 06:42</div>
<br />
Сайт Евро-футбол.ру продолжает находиться под впечатлением от грядущего
Чемпионата Мира, который пройдет в России. Пока что до 2018-го года
далеко. Зато мы можем вспомнить игры предыдущих мундиалей. В рубрике
</td>
  </tr>
</table>
<div class="hline"></div>
<table width="520">
  <tr>
    <td><img src="img/screen.png" alt="Чемпионат Мира 2010" class="screen" /></td>
    <td>
    <div class="news-title">Переломный момент. Маракансо</div>
   <div class="news-info">09 Декабря 2010, 06:42</div>
<br />
Сайт Евро-футбол.ру продолжает находиться под впечатлением от грядущего
Чемпионата Мира, который пройдет в России. Пока что до 2018-го года
далеко. Зато мы можем вспомнить игры предыдущих мундиалей. В рубрике
</td>
  </tr>

</table>
<div class="hline"></div>
<table width="520">
  <tr>
    <td><img src="img/screen.png" alt="Чемпионат Мира 2010" class="screen" /></td>
    <td>
    <div class="news-title">Переломный момент. Маракансо</div>
   <div class="news-info">09 Декабря 2010, 06:42</div>
<br />
Сайт Евро-футбол.ру продолжает находиться под впечатлением от грядущего
 Чемпионата Мира, который пройдет в России. Пока что до 2018-го года
 далеко. Зато мы можем вспомнить игры предыдущих мундиалей. В рубрике
 "Переломный момент" сегодня в фокусе один из решающих матчей 
чемпионатов мира     Уругвай – Бразилия 2:1 (0:0) Голы: Фриаса, 47
</td>
  </tr>
</table>
<div class="hline"></div>
</div>
<div class="content-down1"></div>
<div class="content-down2"></div>
<div class="content-down3"></div>
		  </div><!-- #content-->
		</div><!-- #container-->

		<div id="sideLeft">
			<div class="menu1">Лента новостей</div>
           <div class="menu2">
Тут будет информер
          </div>
          <div class="menu3"></div>
  </div>
           

<!-- .sidebar#sideLeft -->

		<div id="sideRight">

<div class="poll1">Голосование</div>
           <div class="poll2">
{poll} 
          </div>
          <div class="poll3"></div>
		</div><!-- .sidebar#sideRight -->

	</div><!-- #middle-->

</div><!-- #wrapper -->

<div id="footer">
Все права защищены <a href="http://eurosoccer.ws/">eurosoccer.ws</a><br />
При копировании материалов с сайта ссылка на сайт обязательна<br />
Дизайн - Enerdgaizer | Верстка - Flynt<br />
</div><!-- #footer -->

</body>
</html>
css
Код:
* {
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
}
body {
	font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
	height: 100%;
}
a {
	color: #4a8b25;
	outline: none;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
#gor-nav {
	list-style:none;
}
#gor-nav li {
	display:inline;
	margin:11px;
}
#gor-nav a {
	font-size: 11px;
	color:#FFF;
	text-decoration: none;
	font-size: 10px;
}
#gor-nav a:hover {
	color:#FFF;
}
p {
	margin: 0 0 18px
}
img {
	border: none;
}
input {
	vertical-align: middle;
}
#wrapper {
    width:100%;
    min-width:1024px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}



/* Header
-----------------------------------------------------------------------------*/
#header {
	width:100%;
    min-width:1024px;
	height: 102px;
	background-image:url(../img/fon-header.png);
	background-repeat:repeat-x; 
}
#gor-menu-left {
	height:29px;
	background-image:url(../img/gor-menu1.png);
	background-repeat:no-repeat;
	margin-top:-37px;
	margin-bottom:15px;
	margin-left:493px;
}
#gor-menu-center {
	height:24px;
	background-image:url(../img/gor-menu2.png);
	float:right;
	width:510px;
    margin-top:-42px;
	margin-bottom:15px;
	padding-top:1px;
	padding-left:-10px;
}

/* Middle
-----------------------------------------------------------------------------*/
#middle {
	width: 100%;
	padding: 0 0 100px;
	height: 1%;
	position: relative;
}
#middle:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
#container {
	width: 100%;
	float: left;
	overflow: hidden;
}
#content {
	padding: 0 308px 0 207px;
}
.content-left {
	background-image:url(../img/news1.png);
	background-repeat:no-repeat;
	width:18px;
	height:29px;
}
.content-center {
	background-image:url(../img/news2.png);
	background-repeat:repeat-x;
	height:29px;
	width:495px;
	margin-top:-30px;
	margin-left:18px;
	padding-top:5px;
	color: #FFF;
}
.content-right {
	background-image:url(../img/news3.png);
	background-repeat:no-repeat;
	width:18px;
	height:29px;
	margin-top:-34px;
	margin-left:510px;
}
.content-text-place {
	background-image:url(../img/con-cen.png);
	background-repeat:repeat-y;
	position:relative;
	width:527px;
	margin-left:1px;
	padding:0 15px 0 8px;
}

.content-text-place br {
	margin-bottom:-4px;
}
.screen {
    background-repeat:no-repeat;
	width:125px; 
	height:125px; 
	vertical-align:top;
}
.news-title {
	font-size:14px;
	font-weight:bold;
	padding-top:-2px;
	vertical-align:top; 
}
.news-info {
	vertical-align:top;
	font-size: 10px;
}
.content-down1 {
	background-image:url(../img/newsd1.png);
	background-repeat:no-repeat;
	margin-left:2px;
	position:relative;
	height:21px;
	width:17px;
}

.content-down2 {
	background-image:url(../img/newsd2.png);
	background-repeat:repeat-x;
	margin-left:17px;
	margin-top:-5px;
	height:6px;
	width:492px; 
}
.content-down3 {
	background-image:url(../img/newsd3.png);
	background-repeat:no-repeat;
	position:relative;
	margin-left:509px;
	margin-top:-22px;
	height:29px;
	width:18px;
}
.hline {
	border:1px solid #a9a8a8;
	width:520px;
	margin-left:-5px;
}
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
	float: left;
	width: 198px;
	margin-left: -100%;
	position: relative;
}

.menu1 {
    background:url(../img/menu1.png) no-repeat;
    width:198px;
    height:31px;
	margin-left:3px;
    color:#fff;
	padding:3px 0 0 7px;
}
.menu2 {
	background:url(../img/menu2.png) repeat-y;
	width:198px;
	margin-top:-3px;
	margin-left:3px;
	padding-left:4px;
}
.menu3 {
	background:url(../img/menu3.png) no-repeat;
    width:198px;
	height:14px;
	margin-left:3px;
}



/* Sidebar Right
-----------------------------------------------------------------------------*/
#sideRight {
	float: left;
	margin-right: -3px;
	width: 286px;
	margin-left: -286px;
	position: relative;
}

.poll1 {
    background:url(../img/poll1.png) no-repeat;
    width:291px;
    height:29px;
	margin-left:3px;
    color:#fff;
	padding:3px 0 0 7px;
}
.poll2 {
	background:url(../img/poll2.png) repeat-y;
	width:291px;
	margin-top:-3px;
	margin-left:2px;
	padding-left:4px;
}
.poll3 {
	background:url(../img/poll3.png) no-repeat;
    width:291px;
	height:29px;
	margin-left:2px;
}


/* Footer
-----------------------------------------------------------------------------*/
#footer {
	margin: -79px auto 0;
	max-width:100%
	min-width:1024px;
	height: 79px;
	background-image:url(../img/fon-footer.png);
	font-size: 11px;
}
 
Старый 16.12.2010, 13:12   #9
#wrapper {overflow: hidden;}
 
Старый 16.12.2010, 14:54   #10
Niemans, спасибо за совет, но все также не растягивается.
 
Старый 16.12.2010, 14:54
Закрытая тема
Страница 1 из 3 1 23 >

« Очень нужна помощь | Помогите с горизонтальным меню »



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Прибить футер к низу iljamiskov HTML, CSS, JavaScript 1 27.12.2010 19:42
Кто как прибивает футер к низу voodoo HTML, CSS, JavaScript 3 27.12.2009 17:42
Как растянуть таблицу на 100%? Anya_Lebedeva HTML, CSS, JavaScript 3 02.02.2005 13:19
Помогите создать "шапку"... Cowboy Marlboro Растровая графика 8 07.01.2005 00:23
Футер в foot Liahim_Vessol HTML, CSS, JavaScript 4 20.08.2004 11:07


Текущее время: 11:23. Часовой пояс GMT +4.



Справка - Обратная связь - Web-silver.ru - Архив - Календарь - Карта - Вверх

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум