body {color: White; margin:0; background-attachment: fixed; background: #9B0000 url('../images/background.jpg') repeat-x;}
.select_menu_left{background: url('../images/menu_batton_left.gif') no-repeat; width: 27px; height: 34px; cursor:pointer; float:left;}
.select_menu_center{background: url('../images/menu_batton_center.gif') repeat-x; height: 34px; cursor:pointer; float:left; font-size:15pt;}
.select_menu_right{background: url('../images/menu_batton_right.gif') no-repeat; width: 27px; height: 34px; cursor:pointer; float:left;}
.left_top_line{background: url('../images/left_line.gif') no-repeat; width: 100px; height: 34px; float:left;}
.center_top_line{background: url('../images/center_line.gif') no-repeat; width: 200px; height: 34px; float:left;}
.right_top_line{background: url('../images/right_line.gif') repeat-x; height: 34px; float:left; width: 100%; display: inline; overflow: hidden;}
.menu{min-width: 1200px; display: inline; width:100%}
.menu_item_noselect{color:#FFD400; background: url('../images/menu_button.gif') repeat-x; height: 34px; float:left; font-size:13pt; font-weight:bold; cursor:pointer;}
Перенос div'ов
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>**************</TITLE>
<link href="css/styles.css" type="text/css" rel="stylesheet" />
</HEAD>
<BODY>
<div style="margin:0; background: #9B0000 url('images/bg_top.jpg') repeat-x; width:100%; height:177px;">
<table width="100%" height="147px">
<tr>
<td valign="middle" style="text-align:center; width:150pt">
<span style="font-size:23pt;">************</span><br/>*************<br/>********************
</td>
<td>
</td>
</tr>
</table>
<div class="menu">
<div class="left_top_line">   </div>
<div class="select_menu_left">   </div>
<div class="select_menu_center"><div style="margin-top:4pt">Главная</div> </div>
<div class="select_menu_right">   </div>
<div class="menu_item_noselect"><div style="margin:4pt"> Новости </div></div>
<div class="menu_item_noselect"><div style="margin:4pt"> Магазин </div></div>
<div class="menu_item_noselect"><div style="margin:4pt"> Услуги </div></div>
<div class="menu_item_noselect"><div style="margin:4pt"> Партнеры </div></div>
<div class="menu_item_noselect"><div style="margin:4pt"> Контакты </div></div>
<div class="center_top_line">   </div>
<div class="right_top_line">   </div>
</div>
</div>
</BODY>
</HTML>
[/HTML]
Вопрос в следующем, при использовании этого кода получается, что при изменении размеров окна браузера, изображения переносятся на новую строку. Как этого избежать?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>**************</TITLE>
<link href="css/styles.css" type="text/css" rel="stylesheet" />
</HEAD>
<BODY>
<div style="margin:0; background: #9B0000 url('images/bg_top.jpg') repeat-x; width:100%; height:177px;">
<table width="100%" height="147px">
<tr>
<td valign="middle" style="text-align:center; width:150pt">
<span style="font-size:23pt;">************</span><br/>*************<br/>********************
</td>
<td>
</td>
</tr>
</table>
<div class="menu">
<div class="left_top_line">   </div>
<div class="select_menu_left">   </div>
<div class="select_menu_center"><div style="margin-top:4pt">Главная</div> </div>
<div class="select_menu_right">   </div>
<div class="menu_item_noselect"><div style="margin:4pt"> Новости </div></div>
<div class="menu_item_noselect"><div style="margin:4pt"> Магазин </div></div>
<div class="menu_item_noselect"><div style="margin:4pt"> Услуги </div></div>
<div class="menu_item_noselect"><div style="margin:4pt"> Партнеры </div></div>
<div class="menu_item_noselect"><div style="margin:4pt"> Контакты </div></div>
<div class="center_top_line">   </div>
<div class="right_top_line">   </div>
</div>
</div>
</BODY>
</HTML>
[/HTML]
Код:
Вопрос в следующем, при использовании этого кода получается, что при изменении размеров окна браузера, изображения переносятся на новую строку. Как этого избежать?
Код:
body {color: White; margin:0; background-attachment: fixed; background: #9B0000 url('../images/background.jpg') repeat-x;}
.select_menu_left{background: url('../images/menu_batton_left.gif') no-repeat; width: 27px; height: 34px; cursor:pointer; display:inline;}
.select_menu_center{background: url('../images/menu_batton_center.gif') repeat-x; height: 34px; cursor:pointer; display:inline; font-size:15pt;}
.select_menu_right{background: url('../images/menu_batton_right.gif') no-repeat; width: 27px; height: 34px; cursor:pointer; display:inline;}
.left_top_line{background: url('../images/left_line.gif') no-repeat; width: 100px; height: 34px; float:left;}
.center_top_line{background: url('../images/center_line.gif') no-repeat; width: 200px; height: 34px; float:left;}
.right_top_line{background: url('../images/right_line.gif') repeat-x; height: 34px; float:left; width: 100%; display: inline; overflow: hidden;}
.menu{min-width: 1200px; display: inline; width:100%; white-space: nowrap;}
.menu_item_noselect{color:#FFD400; background: url('../images/menu_button.gif') repeat-x; display:inline; height: 34px; font-size:13pt; font-weight:bold; cursor:pointer;}
.select_menu_center div {display:inline}
.menu_item_noselect div {display:inline}
.select_menu_left{background: url('../images/menu_batton_left.gif') no-repeat; width: 27px; height: 34px; cursor:pointer; display:inline;}
.select_menu_center{background: url('../images/menu_batton_center.gif') repeat-x; height: 34px; cursor:pointer; display:inline; font-size:15pt;}
.select_menu_right{background: url('../images/menu_batton_right.gif') no-repeat; width: 27px; height: 34px; cursor:pointer; display:inline;}
.left_top_line{background: url('../images/left_line.gif') no-repeat; width: 100px; height: 34px; float:left;}
.center_top_line{background: url('../images/center_line.gif') no-repeat; width: 200px; height: 34px; float:left;}
.right_top_line{background: url('../images/right_line.gif') repeat-x; height: 34px; float:left; width: 100%; display: inline; overflow: hidden;}
.menu{min-width: 1200px; display: inline; width:100%; white-space: nowrap;}
.menu_item_noselect{color:#FFD400; background: url('../images/menu_button.gif') repeat-x; display:inline; height: 34px; font-size:13pt; font-weight:bold; cursor:pointer;}
.select_menu_center div {display:inline}
.menu_item_noselect div {display:inline}
1. пункты меню - вместо float:left используем display:inline
2. для дива, в котором эти пункты меню находятся запрещаем перенос white-space:nowrap
3. т.к. внутри пунктов меню тоже есть дивы - чтоб не растягивались, пишем им display:inline
К сожалению, этот способ у меня не работает. Использовал браузеры: Mozilla Firefox 3.6.3 и Internet Explorer 7.0.5730.13
Цитата: PAVEL BASIC
К сожалению, этот способ у меня не работает. Использовал браузеры: Mozilla Firefox 3.6.3 и Internet Explorer 7.0.5730.13
Во вложении рабочий код. Меню валидно отображается в:
-FF 3.0
-Opera 9.64
-Safari 4.0
-Google Chrome 4.1
-IE 8 (была возможность проверить только в этой версии, версии ниже проверьте сами)
рекомендую
-добавить meta кодовой страницы
-использовать размеры в px
-добавить meta кодовой страницы
-использовать размеры в px