Right image rollover menu bars etc...
Got the code and it works for the menu bar, but when I use it in my page, where I have containers etc.. it does not show up, I dont know if its hidden behind the nav bar on the left or something, can anyone see an obvious problem with the code why I cant see my image rollover menu on the left.
PAGE SECTION OF CODE:
<div id="nav">
<ul class="menu">
<li id="players"><a href="#">Players</a></li>
<li id="playerstats"><a href="#">Player Stats</a></li>
<li id="fixtures"><a href="#">Fixtures</a></li>
<li id="results"><a href="#">Results</a></li>
<li id="league"><a href="#">League Table</a></li>
<li id="pictures"><a href="#">Pictures</a></li>
<li id="mboard"><a href="#">Message Board</a></li>
<li id="contact"><a href="#">Contact</a></li>
</ul>
</div>
CSS SHEET:
#page-container {
width: 800px;
height: 600px;
margin: auto;
}
.hidden {
display: none;
}
h1 {
margin: 0;
padding: 0;
}
#header {
background: blue;
width: 800px;
height: 90px;
background: #000000
url(../images/website/header.png);
}
#nav {
background: red;
width: 125px;
height: 490px;
float: left;
background: #000000
url(../images/website/navbar.png);
}
.menu {
margin: 0;
padding: 0;
width: 150px;
list-style: none;
background: #fff;
}
.menu li {
padding: 0;
margin: 0;
height: 39px;
list-style: none;
background-repeat: no-repeat;
}
.menu li a, .menu li a:visited {
display: block;
text-decoration: none;
text-indent: -1000px;
height: 39px;
background-repeat: no-repeat;
}
#players {background-image: url(images/btnplayersoff.png);}
#players a {background-image: url(images/btnplayerson.png);}
#playerstats {background-image: url(images/btnplayerstatsoff.png);}
#playerstats a {background-image: url(images/btnplayerstatson.png);}
#fixtures {background-image: url(images/btnfixturesoff.png);}
#fixtures a {background-image: url(images/btnfixtureson.png);}
#results {background-image: url(images/btnresultsoff.png);}
#results a {background-image: url(images/btnresultson.png);}
#league {background-image: url(images/btnleagueoff.png);}
#league a {background-image: url(images/btnleagueon.png);}
#pictures {background-image: url(images/btnpicturesoff.png);}
#pictures a {background-image: url(images/btnpictureson.png);}
#mboard {background-image: url(images/btnmessageoff.png);}
#mboard a {background-image: url(images/btnmessageon.png);}
#contact {background-image: url(images/btncontactoff.png);}
#contact a {background-image: url(images/btncontacton.png);}
#players a:hover, #playerstats a:hover, #fixtures a:hover, #results a:hover, #league a:hover, #pictures a:hover, #mboard a:hover, #contact a:hover {background: none;}
#content {
background: black;
width: 675px;
height: 490px;
float: left;
}
#content .padding {
padding: 25px;
}
#content h2 {
margin: 0;
padding: 5px;
padding-bottom: 15px;
}
#content p {
margin: 0;
padding: 5px;
padding-bottom: 15px;
}
#footer {
clear: both;
background: orange;
width: 800px;
height: 20px;
background: #000000
url(../images/website/footer.png);
}
Screenshot to show you whats actually displaying (firefox):
oh and the above was viewed in firefox but the below is viewed in IEXPLORE and the rollovers work but the page is messed up:
Screenshot (IEXPLORE)
Got the code and it works for the menu bar, but when I use it in my page, where I have containers etc.. it does not show up, I dont know if its hidden behind the nav bar on the left or something, can anyone see an obvious problem with the code why I cant see my image rollover menu on the left.
PAGE SECTION OF CODE:
<div id="nav">
<ul class="menu">
<li id="players"><a href="#">Players</a></li>
<li id="playerstats"><a href="#">Player Stats</a></li>
<li id="fixtures"><a href="#">Fixtures</a></li>
<li id="results"><a href="#">Results</a></li>
<li id="league"><a href="#">League Table</a></li>
<li id="pictures"><a href="#">Pictures</a></li>
<li id="mboard"><a href="#">Message Board</a></li>
<li id="contact"><a href="#">Contact</a></li>
</ul>
</div>
CSS SHEET:
#page-container {
width: 800px;
height: 600px;
margin: auto;
}
.hidden {
display: none;
}
h1 {
margin: 0;
padding: 0;
}
#header {
background: blue;
width: 800px;
height: 90px;
background: #000000
url(../images/website/header.png);
}
#nav {
background: red;
width: 125px;
height: 490px;
float: left;
background: #000000
url(../images/website/navbar.png);
}
.menu {
margin: 0;
padding: 0;
width: 150px;
list-style: none;
background: #fff;
}
.menu li {
padding: 0;
margin: 0;
height: 39px;
list-style: none;
background-repeat: no-repeat;
}
.menu li a, .menu li a:visited {
display: block;
text-decoration: none;
text-indent: -1000px;
height: 39px;
background-repeat: no-repeat;
}
#players {background-image: url(images/btnplayersoff.png);}
#players a {background-image: url(images/btnplayerson.png);}
#playerstats {background-image: url(images/btnplayerstatsoff.png);}
#playerstats a {background-image: url(images/btnplayerstatson.png);}
#fixtures {background-image: url(images/btnfixturesoff.png);}
#fixtures a {background-image: url(images/btnfixtureson.png);}
#results {background-image: url(images/btnresultsoff.png);}
#results a {background-image: url(images/btnresultson.png);}
#league {background-image: url(images/btnleagueoff.png);}
#league a {background-image: url(images/btnleagueon.png);}
#pictures {background-image: url(images/btnpicturesoff.png);}
#pictures a {background-image: url(images/btnpictureson.png);}
#mboard {background-image: url(images/btnmessageoff.png);}
#mboard a {background-image: url(images/btnmessageon.png);}
#contact {background-image: url(images/btncontactoff.png);}
#contact a {background-image: url(images/btncontacton.png);}
#players a:hover, #playerstats a:hover, #fixtures a:hover, #results a:hover, #league a:hover, #pictures a:hover, #mboard a:hover, #contact a:hover {background: none;}
#content {
background: black;
width: 675px;
height: 490px;
float: left;
}
#content .padding {
padding: 25px;
}
#content h2 {
margin: 0;
padding: 5px;
padding-bottom: 15px;
}
#content p {
margin: 0;
padding: 5px;
padding-bottom: 15px;
}
#footer {
clear: both;
background: orange;
width: 800px;
height: 20px;
background: #000000
url(../images/website/footer.png);
}
Screenshot to show you whats actually displaying (firefox):

oh and the above was viewed in firefox but the below is viewed in IEXPLORE and the rollovers work but the page is messed up:
Screenshot (IEXPLORE)

Last edited: