Все,
Я почесал голову уже более двух часов и просто не могу понять, что не так с кодом.
Я строю жидкокристаллический макет с двумя навигационными панелями вверху. Первый сидит хорошо, а второй (id = "filem_right") отказывается сидеть рядом с ним.
Вот HTML :
<body id="container">
<div id="main_bar">
<ul>
<li class="maintabs"><a href="#">Overview</a></li><li class="maintabs"><a href="#">Collar/ Neckline</a></li><li class="maintabs"><a href="#">Sleeves</a>
<ul>
<li class="s_leftright"><a href="#">Left Sleeves</a></li>
<li class="s_leftright"><a href="#">Right Sleeves</a></li>
</ul></li><li class="maintabs"><a href="#">Body</a></li>
</ul>
</div>
<div id="filem_right">
<ul>
<li class="filetabs"><a href="#">File</a></li><li class="filetabs"><a href="#">Edit</a></li><li class="filetabs"><a href="#">Settings</a></li>
</ul>
</div>
А вот и CSS :
#container {
min-width: 960px;
max-width: 1034px;
min-height: 500px;
background: rgba(245,212,13,1);
}
/* START OF MAIN MENU */
#main_bar ul {
width: 60%;
position: relative;
left: 3.2%;
border: 1px solid black;
background: rgba(153, 244,200,0.3);
}
.maintabs {
display: inline-block;
width: 25%;
line-height: 3.5em;
list-style-type: none;
}
.maintabs a {
display: block;
text-decoration: none;
color: rgb(165,165,165);
color: rgba(165,165,165,1);
text-align: center;
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
}
.s_leftright {
list-style-type: none;
}
.maintabs ul {
display: none;
}
.maintabs:hover > ul {
display: inline-block;
position: absolute;
}
*/ END OF MAIN MENU */
/* START OF FILE MENU */
#filem_right {
display: inline-block;
position: relative;
width: 30%;
left: 69%;
top: 14%;
right: 3.2%;
}
.filetabs {
display: inline-block;
width: 33.3%;
overflow: hidden;
list-style-type: none;
line-height: 3.5em;
}
Я посмотрел на Firebug, и похоже, что ни один из моего кода для 'filem_right' не отображается браузером (FF 3.6).
Спасибо,