Это код из index.php:
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'><div class="moduletable_s">
<div align="left" class="mainlevel-nav">
<jdoc:include type="modules" name="hornav" />
</div>
</div></div>
Это из template.css:
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'>.moduletable_s{
background: #09C;
height: 35px;
border:1px solid black;
position: relative;
width: 96%;
top: -25px;
z-index: 0;
margin-left: 0px;
margin-top: 25px;
margin-bottom: 0px;
margin-right: 0px;
padding-top: 1px;
margin-left:25px;
}
.mainlevel-nav {
height: 30px;
padding-bottom: 10px;
padding-top: 10px;
padding-right:70px;
}
a.mainlevel-nav {
padding-left: 10px;
}
a.mainlevel-nav:link, a.mainlevel-nav:visited{
color: #51187c;
text-decoration: none;
background-color: #CCC;
}
a.mainlevel-nav:hover{
color: #FFF;
text-decoration: none;
background-color: #fcb533;
}
.mainlevel-nav li{
border-left:2px solid white;
border-top:1px solid white;
list-style: none;
display: inline-block;
}
ul.mainlevel-nav li{
color: #51187c;
text-align : center;
font-size: 13px;
font-weight: normal;
text-decoration: none;
float: left;
}
</div>
Вопрос: как сделать, чтобы меню растягивалось по ширине браузера, при этом чтобы пункты были разные по ширине и чтобы при уменьшении размеров окна пункты не переносились на вторую строку, т.е. чтобы не сползали?
Заранее благодарю.
