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

Тема в разделе "Веб-дизайн", создана пользователем rafic, 11 окт 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. 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 */
     

    Вложения:

  2. t3s

    t3s

    Регистр.:
    16 фев 2008
    Сообщения:
    719
    Симпатии:
    290
    телепаты в отпуске, чтобы без кода что-то угадать

    но попробую закосить под телепата и продположить, что ты не обнулил отступы
     
  3. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Добавил код. Но я вообще то просил показать схему как правильно собрать данную конструкцию. Потому что я знаю что у меня она собрана не правильно.
     
  4. t3s

    t3s

    Регистр.:
    16 фев 2008
    Сообщения:
    719
    Симпатии:
    290
    почему просто не указать бекграунд для блока header?


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

    ззы
    и правую и левую часть при резиновой верстке указывать жестко, а не в процентах... это что-то новенькое...
     
  5. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Вот картинки которые использовались в хеадере. Вот его внешний вид уже собранный... покажите как правильно его собрать до кучи. Резиновой версткой.
    photo.png - уходит на право
    header-logo.png уходит в лево при растягивании шаблона.
     

    Вложения:

    • ddd.jpg
      ddd.jpg
      Размер файла:
      49,9 КБ
      Просмотров:
      21
    • images.rar
      Размер файла:
      312,1 КБ
      Просмотров:
      3
  6. Dioni$$

    Dioni$$ Создатель

    Регистр.:
    19 май 2009
    Сообщения:
    17
    Симпатии:
    4
    Выложи плиз макет целиком (ну чтоб картинку полностью увидеть). Потому что есть подозрения что ты сильно усложняешь дело )))
     
  7. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Эм... ну вот:)
     

    Вложения:

    • gllos2.jpg
      gllos2.jpg
      Размер файла:
      391,4 КБ
      Просмотров:
      25
  8. t3s

    t3s

    Регистр.:
    16 фев 2008
    Сообщения:
    719
    Симпатии:
    290
    изначально шапка делалась не под резину
    приведенный тобой код частично будет работать, если для класса .header добавить background
    HTML:
    
    .header {
    height:224px;
    background:#393939
    }
    
    "частично" потому, что в большую сторону тянуться будет, а вот в меньшую - нет
     
  9. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    А почему не под резину? Что в нем не так?

    Вся проблема в том, что при указании бекграунду цвет, заливаются уголки закругленные.
     
  10. Dioni$$

    Dioni$$ Создатель

    Регистр.:
    19 май 2009
    Сообщения:
    17
    Симпатии:
    4
    Вот так как-то...
    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>
    
    Но макет конечно страшноватый... осбенно серая кладка. Убери ее нафик, а то в глазах рябит :)
     
    rafic нравится это.
Статус темы:
Закрыта.