фон на всю ширину для footer`a заданной ширины в 3х колоночном дизайне

z-0091 · June 28, 2011

фон на всю ширину для footer`a заданной ширины в 3х колоночном дизайне.

Верстаю макет 3х колоночного. Нужно что бу у футера был растягивающий фон. Я сделал так:

<body>
<div wraper>
...
<div footer></div>
</div>
<div footerstyle></div>

То-есть под основным телом страницы создал дополнительный слой, в css написал:

#footer {
	height: 100%;
	width:100%;
	background: #326ca6;
}
#footerstyle {
	background: #326ca6;
	width:100%;
	height: 100px;
	position: relative;
	margin-top: -100px;
}

ps. Для css footer высота изначально 100px

В итоге фон залазеет куда надо, но конечно поверх контента футера)Конечно можно установить разные z индексы, но подозреваю есть более элегантное и крособраузерное решение. Так же было бы просто великолепно, если при увелечении в длину футера за счет контента, фон так-же увеличивался в длину.

Так же ни как не пойму, почему в футере для контента с права появился странный отступ. Я конечно могу выровнить все это через padding. Но интересно откуда он вообще и как его убрать.

Прикрепляю index и css

Скачать с народа

ps. div footerstyle в Index закоментирован

Edited June 28, 2011 by z-0091

elnoro · June 28, 2011

Не уверен, что правильно понял... Голубая полоска во всю ширину, а текст в ней той же ширины, что и #wrapper?

Если так, то надо #footer вынести из #wrapper, тогда он растянется во всю ширину, а для .content_footer задать в css те же свойства, что и для wrapper.

Было в HTML:



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

	<div id="footer">
    	<div class="content_footer">
		<strong>Footer:Проверка </strong> Footer:Проверка Footer:Проверка Footer:Проверка Footer
        </div>
	</div><!-- #footer -->

</div><!-- #wrapper -->
<!--<div id="footerstyle"></div>-->
</body>
</html>

Стало:


        </div><!-- .sidebar#sideRight -->

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

</div><!-- #wrapper -->
<!--<div id="footerstyle"></div>-->
<div id="footer">
    	<div class="content_footer">
		<strong>Footer:Проверка </strong> Footer:Проверка Footer:Проверка Footer:Проверка
      </div>
	</div><!-- #footer -->
</body>
</html>

И в css задать свойства для .content_footer:

	
.content_footer {
	/*padding: 1% 1%;*/
	width: 1200px;
	margin: 0 auto;	
}

z-0091 · June 28, 2011

да, так и рнадо, спасибо. Не пойму почему мне не пришло в голову такое решение)))

z-0091 · June 29, 2011

Оказалось, что при таком решении, при увеличение длины колонок, они не давят на footer <_<

Sign In

фон на всю ширину для footer`a заданной ширины в 3х колоночном дизайне

Question

z-0091

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

elnoro

Link to comment

Share on other sites

z-0091

Link to comment

Share on other sites

z-0091

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information