Блог

Я искал это везде, но, похоже, не могу найти решение; может быть, это просто чертовски просто, но я этого не вижу. В верхней части моей страницы есть баннер с логотипом посередине. Слева и справа от этого логотипа мне нужны два (разных) фоновых изображения, повторяющихся крест-накрест. Вот так:

 <div class="banner_container">
  <div class="banner_right"></div>
  <div class="banner_logo"></div>
  <div class="banner_left"></div>
</div>
  

Весь стиль, который я знаю заранее, заключается в следующем:

 div.banner_container {
  height: 60px;
  width: 100%;
  text-align:center;
}
div.banner_right {
  height: 60px;
  float:right;
  background: url(img/banner_right.png) repeat; /* This is a  */
}
div.banner_left {
  height: 60px;
  float:left;
  background: url(img/banner_left.png) repeat;
}
div.banner_logo {
  height: 60px;
  width: 500px;
  margin: 0px auto;
  background: url(img/banner.png) no-repeat center;
}
  

Мне нужно, чтобы логотип располагался по центру, а левая и правая части заполняли все оставшееся пространство слева и справа. Как я мог этого добиться?

Просто чтобы указать на другое решение, используя абсолютную позицию http://jsfiddle.net/Khez/yVhsY /, поскольку мне обычно не нравится использовать float.

Существует несколько способов обработки такого рода запросов.

Будет ли что-то подобное приемлемым решением для ваших нужд? http://jsfiddle.net/8BqH4 /

Я тестировал это только в Firefox 3.6 и Chrome 10 на Mac.