Верстка header'a div-aми (резиновый дизайн)

tarkinsky · March 18, 2012

Люди помогите пожалуйста ... нужно сверстать div-ами хэдер для сайта (см. скриншот) идея такая: слева и справа на одном уровне две готовые картинки с шириной 365пкс и 364 пкс, а в центре (между ними) растягивающаяся картинка.

Код прилагается.

За ранее спасибо.

ХТМЛ


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ru">
<head>
<meta name="robots" content="all" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="styles.css"  />
</head>
<body>
  <div id="main">
    <div id="header_carrier">
      <div id="header_left_build">
      </div>
      <div id="header_build_prolong">
      </div>
      <div id="header_right_build">
      </div>
    </div>
  </div>
</body>
</html>

css


/* CSS Document */

html, body, #main{margin:0; padding:0; position:relative;	width: 100%;}
body{
  width: 100%;
  height: 100%;
  background: url(pics/background_color.gif) repeat-x;
  padding-bottom: 1%;
}  
#main{
  width: 100%;
  height: 100%;
  margin: 3px;
  margin-top: 0px;
  border: 1px solid black;
}
#header_carrier{
  width: 100%;
  height: 202px;
}
#header_left_build{
  height: 100%;
  background: url(pics/header_building_left.gif) top left no-repeat;
  width: 364px;
  float: left;
}
#header_right_build{
  height: 100%;
  background: url(pics/header_building_right.gif) right center no-repeat;
  float: right;
  width: 365px;
}
#header_build_prolong{
  height: 100%;
  background: url(pics/header_building_prolong.gif) top left repeat-x;
}
* div{ 
 border: 0px solid black;
}

Скриншот как надо а сейчас картинка №2 (правая) уехала вниз((

alexandr_v-vich · March 18, 2012

float: left; - всем трём картинкам в хэдере

Edited March 18, 2012 by alexandr_v-vich

v01d0s · March 18, 2012

или

в хтмл

поменять местами с

Edited March 18, 2012 by v01d0s

alexandr_v-vich · March 18, 2012

.

Edited March 18, 2012 by alexandr_v-vich

tarkinsky · March 18, 2012

float: left; - всем трём картинкам в хэдере

Если всем трем поставить то среднюю вообще не видно, она же пустая поэтому не тянется((( А если ей 100% поставить то уезжает правая часть далеко(

alexandr_v-vich · March 18, 2012

tarkinsky, ага. На автомате почти ответил. Не заметил этого


#header_carrier{
width: 100%;
height: 202px;
}

Так, да, варинт v01d0s

Sign In

Верстка header'a div-aми (резиновый дизайн)

Question

tarkinsky

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

alexandr_v-vich

Link to comment

Share on other sites

v01d0s

Link to comment

Share on other sites

alexandr_v-vich

Link to comment

Share on other sites

tarkinsky

Link to comment

Share on other sites

alexandr_v-vich

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information