Шапка сайта

[BetaVersion]

Здравствуйте. Начал верстку с шапки. Проблема, типичная для новичка. У меня не получается наложить сам контент (кнопочки и прочее, как на скрине)

Как сделать так, чтобы на саму шапку (повторяющийся элемент во всю длину монитора) наложить вот эти кнопочки и т.д., как будто это wrapper? Чтобы была рабочая зона. Заранее благодарю!

[BetaVersion]

Меня осенило, а что если шапку сделать частью фона? Т.е. в html, body выставить повторяющийся по оси y элемент? И сделать его очень большим по высоте, чтобы хватило на любое разрешение. Хотя картинка будет грузиться долго.

Или в html выставить шапку (повторящуюся по оси y), а в body сделать сам фон (нижнее продолжение)

Попробовал, получилось фигово, т.е. ничего не получилось.

Edited April 16, 2012 by BetaVersion

[wildhind]

BetaVersion, результат надо показывать. Объяснения путаные, из них почти ничего не понятно, только догадки можно строить.

[BetaVersion]

BetaVersion, результат надо показывать. Объяснения путаные, из них почти ничего не понятно, только догадки можно строить.

У меня никакой результат. Просто посоветуйте, как это сделать. А то у меня ничего вообще не выходит. Я не знаю, как сделать, например, как тут www.dribbble.com. Видите, тут есть зона в 999px; на ней весь контент. И шапка и фон - повторяющиеся элементы. Как это сделать?

[BetaVersion]

Нерабочий вариант.

Edited April 16, 2012 by BetaVersion

[Vin]

Возможно, я неправильно понял, так как объяснение нельзя считать исчерпывающим. Вы имеете в виду тянущийся на всю ширину фон, но фиксированный контент (или ограниченный по макс. ширине)? Так и на dribbble.com всё это реализовано, можно было посмотреть DOM-инспектором

<div id="header">
    <div id="header-inner">
        <!-- Здесь контент. И кнопочки тоже -->
    </div>
</div>

#header {
   height: **px;
   min-width: 960px;
   background: url(images/header-bg.png);
}
#header-inner {
    width: 960px;
}

Edited April 16, 2012 by Vin

[BetaVersion]

Возможно, я неправильно понял, так как объяснение нельзя считать исчерпывающим. Вы имеете в виду тянущийся на всю ширину фон, но фиксированный контент (или ограниченный по макс. ширине)? Так и на dribbble.com всё это реализовано, можно было посмотреть DOM-инспектором

<div id="header">
    <div id="header-inner">
        <!-- Здесь контент. И кнопочки тоже -->
    </div>
</div>

#header {
   height: **px;
   min-width: 960px;
   background: url(images/header-bg.png);
}
#header-inner {
    width: 960px;
}

А разве header-bg.png не будет повторяться по оси y, x ?

[Vin]

По умолчанию повторяется по обеим осям, но так сам фон однородный и высота фиксированная, можно не прописывать repeat-x.

[BetaVersion]

По умолчанию повторяется по обеим осям, но так сам фон однородный и высота фиксированная, можно не прописывать repeat-x.

<div id="header">
    <div id="header-inner">
        <!-- Здесь контент. И кнопочки тоже -->
    </div>
</div>

    <div id='wrapper'>
<!-- Здесь само содержание странички -->
    </div>

Вот так?

[Vin]

Можно и так, но обычно во wrapper включают и шапку, если точнее, в него чаще всего включают вообще все элементы страницы.

[BetaVersion]

Можно и так, но обычно во wrapper включают и шапку, если точнее, в него чаще всего включают вообще все элементы страницы.

А так wrapper же ограничен по ширине. Как тогда сама шапка будет повторяться по оси х?

[Vin]

Можно и так, но обычно во wrapper включают и шапку, если точнее, в него чаще всего включают вообще все элементы страницы.

А так wrapper же ограничен по ширине. Как тогда сама шапка будет повторяться по оси х?

Необязательно, его часто используют для прижатия футера к низу страницы (я, например использую). А часто, да, фиксированный, а фон задаётся body, но это не наш случай.

Ой, забыл, для #header-inner ещё нужен margin: 0 auto для центрирования по горизонтали.

Edited April 16, 2012 by Vin

[BetaVersion]

Не получается.

/* CSS Document */

/* Основной стиль */

html, body {
margin: 0;
height: 100%; 
color: #b48788; 
font-family: Tahoma, Arial, Vernada;
background: url(../images/bg.jpg) repeat; 
font-size: 11px; 
background-color: #ffffff;
}

#wrapper {
padding: 0px; 
height: 100% !important;
width: 1000px;
margin-left: auto; 
margin-right: auto;
}

img {
border: 0px;
}

#header {
   height: 471px;
   min-width: 960px;
   background: url(../images/headmenu.png) repeat-x;
}
#header-inner {
    width: 960px;
}

#headerlinks	{
width: 250px;
height: 25px;
margin-left: 30px;
margin-top: 5px;
}

#headerlinks a	{
margin-left: 5px;
font-family: Tahoma, Arial, Vernada;
font-size: 14px; 
color: #ffffff;
}

#headerlinks a:hover	{
margin-left: 5px;
font-family: Tahoma, Arial, Vernada;
font-size: 14px; 
color: #ffe3e3;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="/favicon.ico" rel="shortcut icon">
		<title>FreeBiz</title>
		<link type="text/css" rel="stylesheet" media="all" href="http://*.ru/FreeBiz/css/style.css" />
	</head>
	<body>

	<div id='header'>
	  <div id='header-inner'>
		<div id='headerlinks'>
	<a href="prime.html">Main menu 1</a>
		</div>
	  </div>
	</div>

	</body>
</html>

Как только задаю margin для ссылки, отступает не ссылка, а отступает сама шапка.

Опять же, нет четкой ширины в 960px. Нет рабочей зоны.

Как только задаю margin для ссылки, отступает не ссылка, а отступает сама шапка.

Опять же, нет четкой ширины в 960px. Нет рабочей зоны.

[Vin]

А высота повторяющейся картинки соответствует высоте хедера? Если нет, то нужно ещё и отпозиционировать фон.

[BetaVersion]

А высота повторяющейся картинки соответствует высоте хедера? Если нет, то нужно ещё и отпозиционировать фон.

Размеры повт. картинки 45х471px. Совпадают.

[Vin]

Опять же, нет четкой ширины в 960px. Нет рабочей зоны.

См. прошлое сообщение. #inner-header надо margin: 0 auto; добавать. Вместо margin использовать padding.

Edited April 16, 2012 by Vin

[BetaVersion]

Опять же, нет четкой ширины в 960px. Нет рабочей зоны.

См. прошлое сообщение. #inner-header надо margin: 0 auto; добавать. Вместо margin использовать padding.

Сработало! А вот уже когда закончу работу внутри шапки, во wrapper тоже нужно использовать padding? Или wrapper не имеет к шапке отношения в этом плане?

[Vin]

Да скорее всего, это было overflow, из-за того, что элементу не были заданы размеры. Margin и padding используются в зависимости от контекста http://www.w3.org/TR/CSS2/box.html

P.S. Нет, не из-за размеров: если быть точным, это схлопывание margin потомка и родителя. Т.к. у потомка margin был больше (у родителя его вообще не было) он как прошёл насквозь.

Edited April 16, 2012 by Vin

[BetaVersion]

Да скорее всего, это было overflow, из-за того, что элементу не были заданы размеры. Margin и padding используются в зависимости от контекста http://www.w3.org/TR/CSS2/box.html

P.S. Нет, не из-за размеров: если быть точным, это схлопывание margin потомка и родителя. Т.к. у потомка margin был больше (у родителя его вообще не было) он как прошёл насквозь.

Огромное спасибо