Drop down menu alignment problems. Div wont vertically align.

[Itsumishi]

Hi everyone.

Last time I posted stuff on here I got fantastic support and I've learnt a lot through the process. I'm now convinced that the designer view of Dreamweaver should only ever be used so that you can see your page take some form while you code your stylesheet!

I've been working on a new site and so far it's looking fairly right with a few issues.
Firstly my drop down menus are not aligning properly.

Secondly I have 2 other smaller menus that I want to sit directly above the drop down menus, either side of the logo.

The whole site can be seen here.

http://www.tourismaccreditationvic.c...ainLayout.html

On the page there is also 2 links to some mock up images of how I wanted the site to look at when I started. They show you what I mean about the menus.

I've already run the HTML and the CSS through the W3C validator and there's no errors showing up.

As always, anyone's assistance is appreciated!

[Aso]

Hi Itsumishi

You have a lot of unnecessary code in there. Instead of wrapping all your lists in nested <div>'s, give the <ul> element the ID. Also, <div>'s like your #branding can be replaced with <h1> tags, and the text shifted using text-indent. Try replacing everything between

Code: Select all

<div id="TopLeftNav">
.
.
.
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>

With the following:

Code: Select all

<div id="banner">
    <h1>Service Skills Victoria</h1>
    <ul id="TopLeftNav">
        <li><a href="home.html">Home</a></li>
        <li><a href="faq.html">F.A.Q</a></li>
    </ul>
    <ul id="TopRightNav">
        <li><a href="about.html">About Us</a></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>
</div>

Now add this CSS. This is only the positioning, so keep the styles for your nav menus.

Code: Select all

#banner {
    height: 125px;    
    position: relative;
}
#banner h1 {
    display: block;
    height: 125px;
    width: 230px;
    margin: 0 auto;
    text-indent: -5000px;
    background: url('../Images/SSV-Logo-Web.gif') no-repeat;
}
#TopLeftNav, #TopRightNav {
    position: absolute;
    bottom: 0;
}
#topLeftNav {
    left: 0;
}
#TopRightNav {
    right: 0;
}

Let me know how it works (If you can, upload the changes so I can see the issues)

Regarding your drop down menu, I'm not sure what the problem is. It might be worth trying Son of Suckerfish dropdowns. These will definitely work for sure.

[Itsumishi]

Alright.
I've gone through and done the code cleanups that you have suggested.

I've also tried to implement the multi-level Son of Suckerfish Menu.

I manually entered all the HTML and CSS, however when it got to the javascript I just did a simple Copy & Paste as I currently don't know anything about Javascript (and my brain is struggling a bit to keep up with all the HTML and CSS I've learnt in the last 4 weeks, so I figure I'll learn some Java once I've wrapped my head around the HTML and CSS a bit first). I did fix the ID tag in the Java, but apart from that it's exactly as I copied it.


However it seems that something in the Java is slightly incorrect becasue the CSS validator wouldn't even validate it;

Servlet has thrown exception:javax.servlet.ServletException: Timed out

And in dreamweaver some of the brackets are showing up Red instead of their usual pink.

Code: Select all

sfHover = function() {
    var sfEls = document.getElementById("MainNav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Currently the drop down menus have a few issues, some of them I'm sure I can work out easily however I'm a bit confused as to why the second level of dropm down isn't displaying directly next to the first level when hovering. This of course is a problem because the second the mouse moves over the gap in between the menus, the entire thing disapears meaning you can't get to the 2nd level of items.

Also the positioning of the top levels of links is still a bit funny. Whilst they both are down just above the drop down menu, they're not sitting on the left and right of the logo.

Also somewhere along the line my 'Wrapper' Div that was giving me a border and background colour around the Site Info and content pages seems to have stopped doing anything. I'm not sure why this has happened as I haven't adjusted this Div at all.

The link to the page is still the same

http://www.tourismaccreditationvic.c...ainLayout.html

Edit- Ooops almost forgot. I also had to add a few <p>&nbsp;</p>'s in above the links because when I lost the wrapper div everything also got pushed up underneith the banner. The Links should now be showing so you can see how the site will eventually look like.

[Aso]

OK, not to worry! - Firstly, there's a small typo in your CSS

Line 104

Code: Select all

#TopLeftNav, #Topright Nav {

should be

Code: Select all

#TopLeftNav, #TopRightNav {

Notice the capitalization of the 'r' and no space?

Also, on line 147

Code: Select all

widows: 20em

when it should be

Code: Select all

width: 20em

Javascript is entirely different to CSS. You cannot put it in a stylesheet. It must be embedded in the HTML or, preferably, in an external file. (Note: the javascript is only required for it to work in IE6)

One more thing. Your HTML was also invalid. If you're using an xHTML doctype, all open ended tags must be closed using /> (fixed - see below)

I'll try and fix the menu and upload it. For now, here's the fixes mentioned above.

[Jack Franklin]

Also, might not make a difference, but:

Code: Select all

 var sfEls = document.getElementById("MainNav").getElementsByTagName("LI");

You are using 'LI' when in your actual code you use 'li'. It might not make a difference but worth changing?

[Aso]

Nah, Jack, I read through the documentation. It's definitely meant to be caps

The Javascript isn't the problem here (the script is only to fix :hover pseduo on elements other than a in IE6).

Something to do with the CSS but I can't seem to see what!

[Itsumishi]

Excellent. The site is definitely starting to look more how it should.
Thanks for all the help Aso.

One quick question for anyone. I want to put rounded corners onto the 4 edges of the top menus. I've got the graphics done but I noticed that when I place the graphic in the html directly it stuffs with the alignment of the text. I figured I could get around it by creating new divs and placing the images as background objects. Is this a good way to go about it or is there something I can do that will result in less superfluous code?

[Itsumishi]

Ok.

I've fiddled around with the design a fair bit and I have most things fixed.

However I've spent quite a few hours today trying to rectify the last few little issues and I just can't seem to get them sorted.

Firstly.
The page looks quite wrong in IE 6.

Secondly.
The page won't center in IE 7. (It does in IE 6!!!)

Thirdly.
There are a few minor allignment issues.
The Banner Image won't sit quite in the border. It also wont sit snug against the menus.
Also the main 'wrapperdiv' seems to want to be that itsy bit wider than the menu which looks a bit funny on the right edge.

Fourthly.
I've coded and re-coded then re-coded again and I just can't get the Son of SuckerFish menu to work right. Each time I do it the problems seem a bit different but I don't know why or how.

Links to page are

http://www.tourismaccreditationvic.c...ainLayout.html

http://www.tourismaccreditationvic.c...css/Styles.css

Any help would be great!