Резиновый фон для меню. Дайте совет...

[Rasel]

Ребят пожалуйста помогите. Вот честно юзал поиск, но не нашел подобной темы.

Интересует мнение опытных верстальщиков.

Ситуация следующая http://linkme.ufanet.ru/images/2e5e9e0e12db0195fe7d601beb4aa5bf.jpg набросал макет.

Имеется три блока <div>.

1-header

2-menu

3-content

в 1 все понятно. Логотип, телефон и т.п. Ширина фиксированная допустим 1000px margin:0 auto;

2-меню ! Блок шириной 100%

Вот тут то моя проблема. Ломаю голову целый день не могу найти красивого решения проблемы, и некрасивого не нашел. Возможно все делается просто, но я не могу найти выход...

Вроде и опыта не мало, но как коса на камень...

Что тут требуется, а нужно сделать след. на картинке изображено меню, оно должно распологаться точно так же как на макете, но с левой стороны должен быть фон(только с левой) что бы на разных разрешениях оно растягивалось от левого края, другими словами меню должно быть резиновое, но фон должен быть только с левой стороны.

с блоком контент все тоже понятно 1000px margin:0 auto;

Ссылку не могу кинуть, так как сайт на localhost. Макет там точно такой же как на картинке.

возможно надо реализовать конструкцию блок в блоке и т.п.

Помогите пожалуйста...

Edited May 6, 2011 by Rasel

[Softlink]

а как вы это меню делаете? Можно код?

Почему background не подходит?

[Temiks]

можно сделать так, сделать два див левый и правый по ширине 50% (в левом будет бг) , задать им высоту в 100%; потом где лого контент сделать в другом диве указать ему ширину 1000рх и марджин по середине и верхний негативный

пока вариант такой, возможен и намного лучше

[Rasel]

а как вы это меню делаете? Можно код?

Почему background не подходит?

В данный момент код такой.

html

<div id="main_top_menu">
    <div id="top_menu">
      <ul>
        <li><a href="about.html">О компании</a></li>
        <li><a href="faq.html">Как заказать</a></li>
        <li><a href="portfolio.html">Наши работы</a></li>
        <li><a href="#">Цены</a></li>
        <li><a href="#">Печать на шарах</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>
    </div>
  </div>

css

div#main_top_menu {
	width:100%;
	position: relative;
	top: 80px;	
	border: solid 1px #FF0000; /*удалить*/
}

div#top_menu {
	width: 1000px;
	margin: 0 auto;
	height: 70px;
	background: url(images/system/top_menu.png) no-repeat;
	border: solid 1px #000000; /*удалить*/
}


div#top_menu ul {	
	height: 60px;
	list-style-type: none;		
}

div#top_menu ul li {
	float: left;
	margin: 4px 0 0 0;	
	height: 50px;	
}

ну и так далее... 

Смысл в том что само меню (<div id="top_menu">) с фоном лежит в блоке main_top_menu, который имеет ширину 100%. Меню по центру и имеет ширину 1000px.

Я пробовал сегодня много вариантов, в данный момент на этом остановился.

Вот блин зациклился на этой проблеме и все... (

[Temiks]

можно пожалуйста саму картинку макета того что нужно сделать?

[Rasel]

Temiks

Спасибо за совет.

потом где лого контент сделать в другом диве указать ему ширину 1000рх и марджин по середине и верхний негативный

То есть сделать див по середине в блоке header или в блоке content туда засунуть меню и с помошью position сместить, я правильно понял ?

А что за способ, который намного лучше ?

можно пожалуйста саму картинку макета того что нужно сделать?

На ноуте все файлы,а он на работе

А перекачать забыл, так бы сразу все скинул.

Макет там почти такой же за исключением некоторых деталей, но они не существенные.

[Softlink]

если я вашу задачу правильно понял, то у меня заработало вот так:

<style>
div#main_top_menu {
        width:100%;
        position: relative;
        top: 80px;      
        border: solid 1px #FF0000; /*удалить*/
		overflow:hidden;
}

div#top_menu {
		float:left;
        width:80%;
        height: 70px;
        background: url(images/system/top_menu.png) no-repeat;
        border: solid 1px #000000; /*удалить*/
}

div#fon_menu{
		float:left;
		background:#cccccc;
		height:70px;
		width:19%;}

div#top_menu ul {       
        height: 60px;
        list-style-type: none;          
}

div#top_menu ul li {
        float: left;
        margin: 4px 0 0 0;      
        height: 50px;   
}


</style>

<div id="main_top_menu">
	<div id="fon_menu"></div>
    <div id="top_menu">
      <ul>
        <li><a href="about.html">О компании</a></li>
        <li><a href="faq.html">Как заказать</a></li>
        <li><a href="portfolio.html">Наши работы</a></li>
        <li><a href="#">Цены</a></li>
        <li><a href="#">Печать на шарах</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>
    </div>
  </div>

ширину в div#top_menu можно задать в пикселях, чтобы оно не растянулось на весь экран

Edited May 6, 2011 by Softlink

[Temiks]

вот я сделал так

<!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">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link type="text/css" href="css/style.css" rel="stylesheet" />
        <style type="text/css" >
            html, body {
                height: 100%;
                padding: 0;
                margin: 0;
            }
              .left, .right {
                  float: right;
                  width: 50%;
                  height: 100%;
                  background: red;
              }
              .left {
                  float: left;
                  background: blue;
              }
              .container {
                  left: 50%;
                  margin-left: -500px;
                  position: absolute;
                  width: 1000px;
                  background: yellow;
                  min-height: 600px;
              }
        </style>
</head>
<body>
    <div class="left" ></div>
    <div class="right" ></div>
    <div class="container" >
        тут все тексты меню и все подобное
    </div>
</body>
</html>

Edited May 6, 2011 by Temiks

[Rasel]

Ребят спасибо вам за советы. Завтра попробую ваши способы, надеюсь помогут Напишу результаты )

[Softlink]

и в догонку

Почему бы в

div#top_menu ul li {
        float: left;
        margin: 4px 0 0 0;      
        height: 50px;   
}

вместо float:left не использовать display:inline? Вроде как-то привычней такая конструкция смотрится

вот так вот:

div#top_menu li {
        display:inline;
        margin: 4px 0 0 0;      
        height: 50px;   
}

Edited May 6, 2011 by Softlink

[Temiks]

Softlink так оно вроде не выравнивает по центру

скрин

расширения экрана 1280px

[Softlink]

Softlink так оно вроде не выравнивает по центру

скрин

расширения экрана 1280px

а тут шириной в

div#fon_menu{
                float:left;
                background:#cccccc;
                height:70px;
                width:19%;}

все поправить можно

в обоих блоках задать нужную ширину.

Edited May 6, 2011 by Softlink

[Temiks]

А что за способ, который намного лучше ?

возможно кто то из пользователей форума найдет лучший вариант и напишет его сюда

[Rasel]

Temiks Softlink Спасиб )

Сегодня сделал Сделал по своему но принцип работы такой же как в ваших советы )