Помогите с хеадером

Статус
В этой теме нельзя размещать новые ответы.
rafic

rafic

Местный житель
Регистрация
14 Май 2008
Сообщения
477
Реакции
24
Верстаю резиновый шаблон дивами. Нужно Собрать хеадер, а уменя не выходит. На рисунке показана его схема. Два боковых прямоугольника маленьких..это левая и правая часть с закругленными углами. А два больших прямоугольника это логотипы. Но они оба привязаны к разным сторонам. Один в левой, другой к пракой. я вобрал все, но у меня не получается залить пространство бекграундом между ними... как это сделать?
HTML: 
<!-- Header -->
	<div class="header">
	
		<div class="header-left">
			<div class="header-logo"></div>
		</div>

	
		<div class="header-right">
			<div class="header-photo">
					<div class="photo"></div>
			</div>
		</div>

	</div>
<!-- End Header -->

Код: 
/* Header */
.header {
	height:224px;
}
	.header-left{
		background:url(../images/header-left.png) no-repeat;
		width:10px;
		height:224px;
		float:left;
		max-width:451px;
	}
	.header-logo{
		background:#393939 url(../images/header-logo.png) no-repeat;
		width:443px;
		height:224px;
		float:left;
		margin-left:9px;
	}
	.header-bg{
		background:#393939;
		height:224px;
		display:block;
	}
	.header-photo{
		background:#393939;
		width:700px;
		height:224px;
		float:right;
		margin-right:10px;
	}
	.photo{
		background:url(../images/photo.png) no-repeat;
		width:700px;
		height:243px;
	}
	.header-right{
		background:url(../images/header-right.png) no-repeat;
		width:10px;
		height:224px;
		float:right;
		max-width:710px;
	}
/* End Header */
 

Вложения

  • Безымянный.JPG
    Безымянный.JPG
    24,3 KB · Просмотры: 21
телепаты в отпуске, чтобы без кода что-то угадать

но попробую закосить под телепата и продположить, что ты не обнулил отступы
 
Добавил код. Но я вообще то просил показать схему как правильно собрать данную конструкцию. Потому что я знаю что у меня она собрана не правильно.
 
rafic написал(а):
я вобрал все, но у меня не получается залить пространство бекграундом между ними... как это сделать?
Нажмите для раскрытия...
почему просто не указать бекграунд для блока header?


зы
блок photo имеет высоту 243px, но он находится внутри другого блока, который имеет высоту 224px... я не придираюсь, просто неправильно это

ззы
Верстаю резиновый шаблон дивами.
Нажмите для раскрытия...
и правую и левую часть при резиновой верстке указывать жестко, а не в процентах... это что-то новенькое...
 
Вот картинки которые использовались в хеадере. Вот его внешний вид уже собранный... покажите как правильно его собрать до кучи. Резиновой версткой.
photo.png - уходит на право
header-logo.png уходит в лево при растягивании шаблона.
 

Вложения

  • ddd.jpg
    ddd.jpg
    49,9 KB · Просмотры: 21
  • images.rar
    312,1 KB · Просмотры: 3
Выложи плиз макет целиком (ну чтоб картинку полностью увидеть). Потому что есть подозрения что ты сильно усложняешь дело )))
 
Эм... ну вот:)
 

Вложения

  • gllos2.jpg
    gllos2.jpg
    391,4 KB · Просмотры: 25
изначально шапка делалась не под резину
приведенный тобой код частично будет работать, если для класса .header добавить background
HTML: 
.header {
height:224px;
background:#393939
}
"частично" потому, что в большую сторону тянуться будет, а вот в меньшую - нет
 
А почему не под резину? Что в нем не так?

Вся проблема в том, что при указании бекграунду цвет, заливаются уголки закругленные.
 
Вот так как-то...
HTML: 
<html>
<head>
<title>Gloss</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header {margin:0 20px 0 20px; height:246px;background:url(images/header-left.png) 0 0 no-repeat;position:relative}
div#inheader {height:246px;background:url(images/header-right.png) 100% 0 no-repeat;position:relative}
div#header-back {margin:0 10px 0 10px; height:226px;background:#000;}
div#logo {background:url(images/header-logo.png) 10px 0 no-repeat;height:226px;width:443px;position:absolute;top:0;left:0}
div#photo {background:url(images/photo.png) 0 0 no-repeat;height:243px;width:700px;position:absolute;top:0;right:10px}
div#container {background:url(images/back.jpg);min-width:1256px}
</style>
</head>
<body>
<div id="container">
<div id="header">
	<div id="inheader">
		<div id="header-back"></div>
			<div id="logo"></div>
			<div id="photo"></div>
	</div>
</div>
</div>
</body>
</html>
Но макет конечно страшноватый... осбенно серая кладка. Убери ее нафик, а то в глазах рябит :)
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху