Резиновая шапка при фиксированном сайте

vkapas · August 2, 2011

Сайт на шаблоне с фиксированной шириной. Необходимо сделать на сайте шапку.

Сейчас шапка на сайте есть, сделана по вот этому уроку, но вариант не подходит, так как в нём используется body { background <...> }, а мне нужно через backgroung задать сайту фон.

Пробовал ещё такое решение:

CSS:

.container {
 background: #fff repeat;
 margin: 0 auto;
 height: 192px;
 width: 100%;
 overflow: hidden;
 position: relative;
}

template.php:

<div class="container">
<div align="center"><img src="http://site.ru/themes/theme/images/top.jpg" alt="" /></a></div>
</div>

С высотой шапки 192px и шириной >1700px. Но при использовании этого способа, если шапка больше ширины страницы, то она прибивается к левому краю, а правая часть, соответственно, обрезается. В остальном всё работает правильно :-)

Подскажите, пожалуйста, где в стиле ошибка или посоветуйте подходящий урок/пример по этой теме.

jumancy · August 2, 2011

нарисуйте макет сайта. как я понял основная часть сайта стоит в центре и у него фиксированная ширина (допустим 1000px) а сама шапка растягивается на вес экран.

<div class="header"><div class="head"></div></div>
<div class="container"></div>

CSS

.header {width: 100%; background: red}
.head {width: 1000px; height: 192px; margin: 0 auto}
.contaier{width: 1000px; margin: 0 auto}

vkapas · August 2, 2011

On 8/2/2011 at 4:23 AM, jumancy said:
нарисуйте макет сайта. как я понял основная часть сайта стоит в центре и у него фиксированная ширина (допустим 1000px) а сама шапка растягивается на вес экран.

Как-то так:

Т.е. шапка не совсем растягивается, она просто находится по центу и шире стандартного экрана, а лишнее просто обрезается.

On 8/2/2011 at 4:23 AM, jumancy said:

<div class="header"><div class="head"></div></div>
<div class="container"></div>

CSS

.header {width: 100%; background: red}
.head {width: 1000px; height: 192px; margin: 0 auto}
.contaier{width: 1000px; margin: 0 auto}

Прошу прощения, а куда именно вставлять ссылку на шапку? В header? Или в container? Классы head и container в Вашем примере фиксированной ширины, изображение из-за этого разве не будет обрезаться?

Edited August 2, 2011 by vkapas

jumancy · August 2, 2011

лишнее обрезается вы что имеете ввиду? когда монитор широкий ширина должна быть 1700, а когда маленькая 1000? минимальная ширина какая?

Edited August 2, 2011 by jumancy

vkapas · August 2, 2011

On 8/2/2011 at 6:07 AM, jumancy said:
лишнее обрезается вы что имеете ввиду? когда монитор широкий ширина должна быть 1700, а когда маленькая 1000? минимальная ширина какая?

Информационная часть на шапке составляет 1000px (как и ширина сайта), остальное пространство слева и справа на шапке занимает нейтральная заливка. Минимальная ширина, получается, должна быть 1000px.

Edited August 2, 2011 by vkapas

jumancy · August 2, 2011

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	body {margin:0; padding: 0;}
	.head {width: 1000px;height: 192px;  margin: 0 auto;background: blue;}
	.header {width: 100%; background: red; height: 192px}
	.container{width: 1000px; margin: 0 auto; background: #aaa; height: 1000px}

	</style>
</head>
<body>
	<div class="header"><div class="head">здесь информационная часть</div></div>
	<div class="container">	
	</div>
</body>
</html>

vkapas · August 2, 2011

On 8/2/2011 at 11:51 AM, jumancy said:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	body {margin:0; padding: 0;}
	.head {width: 1000px;height: 192px;  margin: 0 auto;background: blue;}
	.header {width: 100%; background: red; height: 192px}
	.container{width: 1000px; margin: 0 auto; background: #aaa; height: 1000px}

	</style>
</head>
<body>
	<div class="header"><div class="head">здесь информационная часть</div></div>
	<div class="container">	
	</div>
</body>
</html>

Спасибо. Это действительно работает так, как надо, если оставить в шапке текст. Но дело в том, что на сайте шапка выполнена в виде изображения, т.е.

<div class="header"><div class="head"><img src="http://site.ru/themes/theme/images/top.jpg" alt="" /></div></div>

и шапка в таком случае выглядит вот так:

т.е. прибивается к левому краю (и слева появляется отступ, видимо, из-за того что ширина .head меньше ширины шапки (1720px)), как и в первом сообщении темы, только в данном случае правый край страницы заканчивается там, где заканчивается шапка, независимо от разрешения экрана.

jumancy · August 3, 2011

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


.header {
width: 100%; 
background: url('http://...') top center no-repeat; 
height: 192px
}

vkapas · August 5, 2011

On 8/3/2011 at 6:20 AM, jumancy said:
если это фоновая картинка сделайте так:
.header {
width: 100%; 
background: url('http://...') top center no-repeat; 
height: 192px
}

Большое спасибо! То, что надо.

Sign In

Резиновая шапка при фиксированном сайте

Question

vkapas

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

jumancy

Link to comment

Share on other sites

vkapas

Link to comment

Share on other sites

jumancy

Link to comment

Share on other sites

vkapas

Link to comment

Share on other sites

jumancy

Link to comment

Share on other sites

vkapas

Link to comment

Share on other sites

jumancy

Link to comment

Share on other sites

vkapas

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information