Another CSS Question

[bigmaddaz]

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)

 

[donofkarma]

any chance of a link?

 

[bigmaddaz]

Bumpio !

 

[172.com]

#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);}

Change them to '/images' for starters.

A link would be nice or paste the full html.

 

[bigmaddaz]

link for html file is: (although it isnt using the css to view for some reason so easier just to download it and copy it into local folder)

http://www.aoqo38.dsl.pipex.com/css/index2.html

css file is:

http://www.aoqo38.dsl.pipex.com/css/master.css

 

[donofkarma]

will have a look when i get home, don;t think they'll like me messing about with other sites while I'm at work!

 

[cava83]

are you causing trouble again !

Seems to me like the CSS file cannot be found, so it canot apply the styles

Attach the files on here as a rar or zip

 

[bigmaddaz]

cheeky git!

ive found a 2 column layout with header and footer very basic, then just modifying it to my layout how I want it, finding this way much easier, gonna try the rollover again soon. lol

 

[cava83]

you love it

just think, more mistakes, more you ask, more you learn, I am sure you know lots of things I have not got a clue about

Templates are good, but knowing the basics of how those templates are done is excellent too

Let us know how you get on and post some links to your examples.

 

[b3nje]

How many rollovers are you wanting?

If you're just starting up...why not use the rollover feature in dreamweaver

 

[cava83]

Rollover feature in DW is mainly JS which adds a lot of un-required coding which is gash, CSS is more efficient for this aspect



:rasp:

How many rollovers are you wanting?

If you're just starting up...why not use the rollover feature in dreamweaver

 

[donofkarma]

Hi mate. Had a quick look and the first thing you need to do is change the png's to either jpg or gifs as ie6 doesn't show them properly due to some alpha tranparency thing. Secondly you need to edit the css so all attributes for each property are on one line, eg:

background: #000000 url(../images/website/footer.png);

Some browsers are picky as to how you declare things and could be why Firefox isn't displaying properly. Also, putting your CSS in the right order is (imo) important, eg having the styling for the ul, then ul li, then ul li a, then ul li a:hover, etc. This will help you keep things neat and tidy and will help in bug fixing.

As for DW rollovers, they can be handy when starting out but if the user has JS disabled they won't work. You need to keep in mind the users of your website. When it's up and running Google Analytics will help, plus it's free!