Kusss

<div style="position: relative; width:100%; height: 500px; background: url('img/banner.jpg'); background-size: cover; padding: 0;">
    <div style="width:400px; height:110px; position:absolute; left:60%; background: #ffffff;">
      <ul style="font-family: Verdana; font-size:32px; padding-top:15px; color:#FF3E3E;"><?php echo $phone_office; ?></ul>
      <ul style="font-family: Calibri,Verdana; font-size:16px; padding-top:15px;">Режим работы: <?php echo $work_time; ?></ul>
    </div>
  <div style="width:200px; position:absolute; left:50%; margin-left:-100px; top:70%;"><a href="wanthouse.html" class="button_main">Хочу дом!</a></div>
</div>

Как бы все расположилось, но при меньшем разрешении блок с телефонами уезжает за правую границу и появляется полоса проокрутки

_____________

отступ можно задать не только с левого края, но и с правого и даже с низу. :)

width:400px; height:110px; position:absolute; right:0; background: #ffffff;

Kusss


Ах да, только теперь выпадающее меню получается за background'ом и его не видно. Теперь надо позиционирование у меню выставлять?

_____________

Было бы лучше сразу бутстрапом делать каркас, избавился бы от кучи проблем.
Тут тебе и под телефоны и под планшеты, под малые, средние и большие экраны.
И еще вот это почитать: http://frontender.info/a-guide-to-flexbox/

Another Reality

Может, вы и правы, но мои познания в сайтостраении, такие же, как и в знании устройства танка :-)

_____________

Я поменял меню. У меня вопрос: при наведении на пункт, текст становится белым, а вот когда выбираешь подпункт, цвет опять меняется на серый.

Вот ccs:

#menu{
			list-style:none;
			padding:0;
			margin:0;
			font-size: 100%;
			font-family: Georgia;
			height: 96px;
		}
		#menu li{
			float:left;
			height:33px;
			padding:0;
			margin:0;
			width:150px;
			text-align:center;
			background:#ffffff;
			color: #515151;
			position:relative;
			padding-top: 12px;
		}
		#menu li: hover {
		  color: #ffffff;
		}
		#menu li ul{
			list-style:none;
			padding:0;
			margin:0;
			width:250px;
			display:none;
			position:absolute;
			left:0;
			top:45px;
			color: #515151;
		}
		#menu li ul li{
			float:none;
			height:33px;
			margin:0;
			width:250px;
			text-align:center;
			background:#7F7F7F;
		}
		#menu li a{
			display:block;
			width:auto;
			height:33px;
			color: #fff;
			text-decoration: none;
			font-family:calibri,verdana,arial;
			font-size: 18px;
			text-align: center;
			color: #515151;
		}
		#menu li a:hover {
		  color: #ffffff;
		}
		#menu li p a:hover {
			 color: #ffffff;
	    }
		#menu li p a{
			display:block;
			width:250px;
			height:33px;
			color: #fff;
			text-decoration: none;
			font-family:calibri,verdana,arial;
			text-align: left;
			padding-left: 30px;
		}
		#menu li:hover ul, #menu li.jshover ul{
			display:block;
			color: #ffffff;
		}
		#menu li:hover, #menu li.jshover{
			background:#424242;
			color: #ffffff;

		}
		.back
		{
		width:70%;
		background:#ffffff;
		height: 33px;
		position: absolute;
		top: 50%;
		left: 25%;
		z-index: 1;
		}

Не приложу ума, что сотворить. Посмотреть тут

_____________