HTML and CSS Help

diddy · January 30 '10, 03:13 AM (#1)

I'm so sorry to bother you all (again) but I'm really having problems. After getting my main navigation menu sorted, I thought I'd do a sub-nav menu. Well as you can see, for some reason my CSS dosen't seem to be working on this second menu. Any ideas as to why?

URL: http://diddy29.110mb.com/cr3/feelthefear.html

HTML:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>About Feel The Fear & Do It Anyway workshop | Essential Self Solutions</title>
<link rel="stylesheet" href="mainstyle.css" type="text/css" media="all" />
</head>
<body>
<div id="WhiteWrapper">
    <div id="ContentWrapper">
        <div id="Header">
        <a href="index.html" title="Essential Self Solutions"><img src="general-pics\logo.png" width="486" height="44" border="0" /></a>
        </div>
        <div id="navcontainer">
        <ul>
        <li><a href="index.html"><span>Home</span></a></li>
        <li><a href="feelthefear.html"><span>About &amp; Feel The Fear&reg;</span></a></li>
        <li><a href="other.html"><span>Other Workshops</span></a></li>
        </ul>
        </div>
        <div class="spacer">
        </div>
        <h1>About Feel The Fear &amp; Do It Anyway<sup>&reg;</sup> workshop</h1>
        <div id="SubNavcontainer">
        <ul>
        <li id="current"><a href="feelthefear.html">About Feel The Fear &amp; Do It Anyway<sup>&reg;</sup> workshop</a></li>
        <li><a href="cornelia.html">About Cornelia Ramsay</a></li>
        <li><a href="susan.html">About Susan Jeffers</a></li>
        </ul>
        </div>
        <div id="RightContent">
        
        </div>
        <div class="spacer">
        </div>
        <div class="spacer">
        </div>
        <div class="spacer">
        </div>
    </div>
</div>
        <div id="footer">
        <p>
        <a href="index.html">Home</a> <span class="bld">|</span> <a href="feelthefear.html">About &amp; Feel The Fear<sup>&reg;</sup></a> <span class="bld">|</span> <a href="other.html">Other Workshops</a>
        </p>
        <p>
        Copyright &copy; 2010 Nick Every for website design. 
        </p>
        <p>
        Feel The Fear And Do It Anyway<sup>&reg;</sup> is the registered trademark of Susan Jeffers Ph.D. and is being used with her expressed permission. These workshops are licensed and based on the teachings of Susan Jeffers Ph.D. as contained in her international bestseller.
        </p>
        </div>
</body>
</html>

CSS:

Code:

body {
background: #444444;
margin: 0;
padding: 0;
}

a:link,
a:visited,
a:active
{
color: #339900;
text-decoration: underline;
}

a:hover
{
color: #339900;
text-decoration: none;
}

div#WhiteWrapper {
background: #ffffff;
width: 950px;
margin: 0 auto;
padding: 0 auto;
}

div#ContentWrapper {
background: #ffffff;
margin: 0 auto;
padding: 25px 20px 25px 20px;
width: 800px;
}

div#Header {
width: 100%;
clear: both;
margin-bottom: 30px;
}

div#navcontainer {
width: 100%;
text-align: center;
}

div#navcontainer ul 
{
margin: 0;
min-width: 800px;
padding: 0;
}

div#navcontainer ul li 
{
list-style-type: none;
display: inline-block;
margin: 0 10px 0 0;
}

div#navcontainer ul li a,
div#navcontainer ul li a:link,
div#navcontainer ul li a:active,
div#navcontainer ul li a:hover, 
div#navcontainer ul li a:visited
{
display: block;
width: 209px;
height: 39px;
background-image: url(nav.png);
text-decoration: none;
}

div#navcontainer ul li a span 
{
display: block;
padding: 15px 0;
text-align: center;
color: #ffffff;
font-family: arial;
font-size: 15px;
font-weight: normal;
}

div.spacer {
width: 100%;
height: 30px;
clear: both;
}

h1 {
font-family: arial narrow;
color: #339900;
font-size: 220%;
}

h2 {
font-family: arial narrow;
color: #339900;
font-size: 160%;
}

p {
font-family: arial;
color: #333333;
font-size: 110%;
line-height: 130%;
}

div#pic-container {
width: 100%;
margin: 0 auto;
padding: 0 auto;
text-align: center;
}

table#promo-box {
width: 100%;
text-align: center;
}

table#promo-box tr {
width: 100%;
}

table#promo-box tr td {
width: 50%;
text-align: center;
font-family: arial;
color: #333333;
font-size: 100%;
}

span.byline {
font-family: arial;
color: #555555;
font-size: 90%;
}

table.contact {
width: 500px;
}

table.contact tr {
width: 100%;
}

table.contact tr td.left {
width: 250px;
font-family: arial;
color: #333333;
font-size: 110%;
font-weight: bold;
padding: 15px 0px 15px 0px;
}

table.contact tr td.right {
width: 250px;
font-family: arial;
color: #333333;
font-size: 110%;
padding: 15px 0px 15px 0px;
}

div#footer {
width: 950px;
clear: both;
background: #444444;
text-align: center;
padding: 40px 20px 40px 20px;
margin: 0 auto;
}

div#footer p {
font-family: arial;
color: #ffffff;
font-size: 80%;
line-height: 180%;
}

span.bld {
padding: 0px 8px 0px 8px;
font-weight: bold;
}

div#SubNavcontainer {
float: left;
width: 300px;
}

div#SubNavcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
}

div#SubNavContainer ul li {
display: block;
}

div#SubNavContainer ul li a:link,
div#SubNavContainer ul li a:active,
div#SubNavContainer ul li a:visited
{
display: block;
width: 300px;
font-family: arial;
color: #339900;
font-size: 18px;
padding: 10px 0px 10px 0px;
border-bottom: 1px solid #339900;
}

div#SubNavContainer ul li a:hover, 
div#SubNavContainer ul li.current
{
display: block;
width: 300px;
font-family: arial;
color: #339900;
font-size: 18px;
padding: 10px 0px 10px 0px;
border-bottom: 1px solid #339900;
background: #aaaaaa;
}

Dorky · January 30 '10, 03:48 AM (#2)

div#WhiteWrapper is overkill. #WhiteWrapper would be just fine. in fact you have a lot of overkill code that is making your job harder. you dont need spacer divs, just use margin. thats what its for. google for some css shorthand, strip your code to the most basic state possible, then take another look at your problem. as long as you over code you will continue to have these basic issues. also it takes to long to load and if you ever do a large scale project you will get lost in the miles of code. if you are cutting out of templates i would suggest against doing so because templates are always bloated and over coded.

diddy · January 30 '10, 03:54 AM (#3)

Hi Dorky,

No, I am not using a template. I hand code everything.

Personally I prefer coding space divs and I don't mind either way whether I used div#WhiteWrapper or #WhiteWrapper. I doesn't matter much at the moment although later down the track I may use the shorthand version. I have always coded like this and it hasn't failed me yet.

But all that is irrelevent to my current problem, which is the second nav menu. So since this is urgent I would appreciate it if you addressed the problem at hand, but thanks again for the comments.

Dorky · January 30 '10, 04:01 AM (#4)

ok. well whats it doing or not doing that you need it to or not do.

diddy · January 30 '10, 04:44 AM (#5)

As I stated in my original post:

Quote:

Originally Posted by diddy

my CSS dosen't seem to be working on this second menu

Dorky · January 30 '10, 05:02 AM (#6)

ok well i read your code and it is doing what your code is telling it to. so if you could tell me what you would like it to do,i would be glad to help.

diddy · January 30 '10, 05:05 AM (#7)

Remember I"m not talking about the main horizontal list, I'm talking about the list below that. It's supposed to be a verticle menu with a bottom border and a hover effect of light grey, plus font stuff. Can you give us a screenshot of what you're seeing? cause it's not working for me.

What browser are you using? I've been working with firefox at the moment but haven't got round to testing the menu in other browsers yet.

Dorky · January 30 '10, 05:06 AM (#8)

div#SubNavContainer ul li a:hover,
div#SubNavContainer ul li.current

you are giving the same commands to the list and the link. do you ant the link or the list to have this. no need to give this to both. this is the problem with the over coding that hasnt failed you.

Dorky · January 30 '10, 05:08 AM (#9)

id="current" and you have addressed it with .current

this should be #current

Dorky · January 30 '10, 05:09 AM (#10)

and seriously with what you have on the page you should have less then 20 lines of css

diddy · January 30 '10, 05:24 AM (#11)

I always go

Code:

div#navcontainer ul li a:link {
...
}

And it has never failed me. I've tried playing around with that just now but to no avail.

I changed the class current to an id; thanks for picking up on that.

Could you please post a coded solution up? cause there's something that we're not connecting with obviously. You seem to get it but I can't get it.

Dorky · January 30 '10, 01:08 PM (#12)

im sorry. maybe someone else will but im not giving a fish in this case because your style of coding is and will be the problem. strip it down and take a look. if you still have issue after that i will give you the fish.

Dorky · January 30 '10, 01:21 PM (#13)

and to better explain. there are things like this that apply to all things on the page
font-family: arial;

you could put this at the top and take it out of all the other places.

* { font-family: arial; }

the * is a wildcard and will carry the style under it to all applicable elements.
if you have just one or two that dont carry this make a class for those two instead
of repeating the font on every given link or paragraph.

you can make generic style to almost everything like "a { Color: #222222; }" and then
as stated above only give special style when needed. this loads faster, easier to
edit, and troubleshoot.

diddy · January 30 '10, 07:32 PM (#14)

Thanks Dorky, and I will try it, but first I need to get this menu fixed. I'm pretty sure excessive CSS ain't the problem; there must be something else.

So in other words, you know the solution but aren't going to give it to me? You know, as I said this is quite urgent.

Dorky · January 31 '10, 01:39 AM (#15)

no, i told you it is doing what the code is telling it to. i dont see a contradiction from code to output nor have you described what it is or is not doing. unless you can be more specific, i can only help you narrow it down until you find it.

aeroweb99 · January 31 '10, 01:43 AM (#16)

You have a typo in your css as compared to your markup.

SubNavContainer
SubNavcontainer

diddy · January 31 '10, 06:06 AM (#17)

Thanks Areo! You did it! Thanks for pointing that error out. It is now working properly. So many times errors are caused by little things like that.

Dorky, I will be cleaning up my CSS when I get the chance, but it isn't urgen for me at the moment.

The site is now updated at the URL.

aeroweb99 · January 31 '10, 09:58 AM (#18)

Sometimes we look right at it and don't see it! All it takes is another set of eyes.

HTML and CSS Help

Sub-nav menu won't work (this is stupid)