Trying to have 2 menus one at the left and one at the right but cant really complete this tasks since my right menu is going to the left, my css file
body
{
color: #FFFFFF;
margin: 0;
padding: 0;
text-align: left;
background: #141414 url('/public/images/background/body_bg.png') top left repeat;
font: 12px Tahoma,Arial,Hevetica,Sans-serif;
font-size: 12px;
padding: 10px;
}
.left-menu, .right-menu
{
position: absolute;
text-align: center;
text-decoration: none;
top: 197px;
width: 128px;
max-width: 128px;
}
.left-menu ul, .right-menu ul
{
list-style-type: none;
margin: 0px;
padding: 0px;
display: block;
text-align: left;
}
.left-menu ul li.header, .right-menu ul li.header
{
line-height: 29px;
height: 29px;
color: white;
background-image: url('/public/images/background/head.jpg');
font: 15px 'Trebuchet MS',Tahoma,Arial,Helvetica,Sans-serif;
padding: 6px 0 0 10px;
margin: 0;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
}
.left-menu ul li a, .right-menu ul li a
{
background: #CD0000;
background: rgb(0,0,0);
background: rgba(0,0,0,0.6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
border: 1px solid #000000;
border-top: 0px;
height: 14px;
padding: 4px;
display: block;
text-decoration: none;
height: 14px;
}
.left-menu ul li a:hover, .right-menu ul li a:hover
{
color: #000000;
background-color: #ffffff;
}
a:visited
{
color: #ffcc00;
text-decoration: none;
}
a
{
color: #ffcc00;
text-decoration: none;
}
.title
{
position: static;
background: url('/public/images/background/title.jpg');
height: 35px;
color: white;
font: 15px 'Trebuchet MS',Tahoma,Arial,Helvetica,Sans-serif;
padding: 0 0 0 10px;
margin: 0;
border: 1px solid #000000;
border-top: 0;
line-height: 35px;
background-image: url('/public/images/background/title.jpg');
background-position: left;
background-repeat: repeat-x;
margin-left: 140px;
margin-right: 140px;
text-align: center;
}
#header
{
align: middle;
position: static;
height: 183px;
max-height: 183px;
background-color: transparent;
}
table.hovertable
{
font-family: verdana,arial,sans-serif;
font-size: 11px;
color: #BDBDBD;
}
table.hovertable td
{
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
background-color: black;
height: 181px;
max-height: 181px;
text-align: center;
border-width: 1px;
padding: 0;
border-style: solid;
border-color: #290008;
}
And my index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<link rel="stylesheet" href="{{ URL::to('/') }}/style/style.css" type="text/css" media="screen">
<TITLE>PokemonGarden - Online Pokemon RPG</TITLE>
</HEAD>
<BODY>
<div class="header">
<center>
<table align="center" class="hovertable">
<tbody><tr>
<td><img src="{{ URL::to('/') }}/images/background/pball.png"><br><b>Empty Slot</b></td>
<td><img src="{{ URL::to('/') }}/images/background/pball.png"><br><b>Empty Slot</b></td>
<td><img src="{{ URL::to('/') }}/images/background/pball.png"><br><b>Empty Slot</b></td>
<td><img src="{{ URL::to('/') }}/images/background/pball.png"><br><b>Empty Slot</b></td>
<td><img src="{{ URL::to('/') }}/images/background/pball.png"><br><b>Empty Slot</b></td>
<td><img src="{{ URL::to('/') }}/images/background/pball.png"><br><b>Empty Slot</b></td>
</tr>
</tbody></table>
</center>
</div>
<div class="left-menu">
<ul>
<li class="header">Main menu</li>
<li><a href="profile.php">Homepage</a></li>
<li><a href="profile.php">Homepage</a></li>
<li><a href="profile.php">Homepage</a></li>
<li><a href="profile.php">Homepage</a></li>
</ul>
</div>
<div class="title">Players Online - Past 5 minutes</div>
<div class="right-menu">
<ul>
<li class="header">Main menu</li>
<li><a href="profile.php">Homepage</a></li>
<li><a href="profile.php">Homepage</a></li>
<li><a href="profile.php">Homepage</a></li>
<li><a href="profile.php">Homepage</a></li>
</ul>
</div>
</BODY>
</HTML>
The current design should be
1ST MENU -- DIV WITH TEXT -- 2ND MENU
But my 2ND Menu is going to the same place of the 1ST MENU.
You are using absolute positioning for the layout. So, you need to specify the left/right carefully. If you omit, it picks up the left by default.
Just add this to your css:
.right-menu { right: 0px; }
Check the fiddle: http://jsfiddle.net/m4j2v/