Re: Advice required for cascading vertical menu.



guv mumbled the following on 23/11/2005 00:37: 
On Tue, 22 Nov 2005 13:11:36 GMT, Gazza <news@xxxxxxxxxxxxxxxxxxxxxxx>
wrote:



guv mumbled the following on 20/11/2005 22:40:


<http://www.les37b.f2s.com/gazza.htm> 

Have a look at:
<http://garyjones.co.uk/development/aims.html>
Quite a few differences made:



Indeed! ;-)


Valid XHTML, CSS, and passes automated WAI and S508. 


Should I change all Heading doc text? (Its currently HTML 4.01
transitional)

It's up to you. Go and read the ongoing debate to decide whether you want/need XHTML. Personally, everything I do is in XHTML 1.0, if not 1.1 (but there's extra issues there with mime-types, which is why I would only recommend you use 1.0 Strict), but then again, I'm not doing any commercial sites.

Works for 800x640 screens. 


Yes, thats a great improvement. Was the change "min-width" that did
this and changing the position absolute in wrapper to relative that
did this?

wrapper to position: relative; wrapper margins: 0 auto; then text-align: center in the body (for the sake of IE), wrapper text-align: left (for the previous IE hack) and finally min-width for the wrapper for the sake of Mozilla which has been known to drop half the div off the screen.

Looks good / works in Netscape 4.08, Lynx, Opera8.02, IE6 and FF 1.07
CSS and Javascript in external files.


I noticed youve got 2 css files now?

That's something extra I put up after I posted here. The aimsprint.css simply removes the content padding-right, and doesn't display the breadcrumb or nav menu, since hyperlinks have a tendancy not to work on paper...

Also just noticed the header logo
is clickable to homepage also! ;-)


Does this get across the point I was trying to make?

Navigation and breadcrumb trail (added in) moved to bottom of page, with "Jump to Navigation" added in at the top. This pushes all your content (the important bit of the page) much higher up the source. 


Again, a big improvement. Its much nicer than scrolling down - though
the skip nav did fix that....

True, that fixed it for accessibility purposes, but not for search engine purposes. Content at the top of the page is considered generally more important than content further down the page, which is one of the reasons why the CSS and JS are removed to an external file.

CSS issues should all be fixed, with resultant .css file tidied up.
Quick to load (about 9 seconds, even quicker once .css, .js and images cached): <http://www.websiteoptimization.com/services/analyze/wso.php?url=http://garyjones.co.uk/development/aims.html>

The plain HTML file is now more usable (with extra headings):
<http://garyjones.co.uk/development/nocssnoimages.png>
(basically what Netscape4.08 shows).

Yes that is very good.

Personally, this is in the realm of what I call good design - not graphical design, just the overall structure to put your CSS onto. Anyone can hang a coat on the hook, it's getting the hook in the wall in the first place that's the tricky bit. Antime the site needs a redesign now, you just have to change the CSS, leaving the HTML alone.

Using the Outline Block Elements from Pederick's Developer Extension, things look nice and tidy:
<http://garyjones.co.uk/development/outline.png>


As you say, nice and tidy!

If you've got the extension yourself now, it's worth having a look at the outline of your original page(s).

Feel free to use as you see fit... 


I will impliment pretty much all of it. Only real change is not having
underline for h3 or 4. Easy enough - even for me! ;-)

Ah, that was me and the OCD my students keep telling me I have - I wanted all the headings to look the same :o)

I really appreciate the time you have taken Gazza........ 

No worries, just wait for the bill...

I've been bogged down this evening (and will be agian tomorrow
unfortunately) but the quick look I have looked at so far - a couple
of comments......

I certainly wasnt expecting the wholesale changes and improvements
you've made, but did notice the ul's are not via a <div> is that no
longer an issue? Just consious of what you had said previously!

Not sure what your question is - if you mean the <ul>s in the main body, then nope, they're not in a seperate div - only the same parent div as the surrounding paragraphs. The content has a padding on the right to stop it going into the area used for the menu. This space under then menu could be used to have an advert, news or some other content fit for a column, maybe a graphic to suit the page. (If so, put it in a div at the bottom of the page, position it absolutely so it lines up with the menu.)

I have noticed one minor thing.....

When the page loads, the icon in h1 and silver underline sometimes
loads, sometimes doesnt and sometimes disappears after scrolling down
the page.

Think you mean h2. Yeah I noticed that too, especially in IE. Can't explain it, although the image is pulled direct from yoursite (as are all images, except the background image for the wrapper, which I had to tweak).

[Screenreader]

Only time my computer talks to me is if I run a page through Opera 8. It has a built in text-to-speech facility, though how representative it is of 'proper' screenreaders, I couldn't say.

--
Gazza
Mobile Number Network Checker - http://mnnc.net/
Leovanna Leonbergers - http://leovanna.co.uk/
Scarlet Town - http://scarlettown.co.uk/
.

Relevant Pages

  • Re: how to make web site align in the middle
    ... Simple CSS properties... ... "wrapper" div. ... And set CSS properties for 'wrapper" width to ...
    (alt.html)
  • Re: how to make web site align in the middle
    ... Simple CSS properties... ... div. ... And set CSS properties for 'wrapper" width to something specific ...
    (alt.html)
  • Re: Why shouldnt I use Frontpage? >> drifting OT to CSS
    ... My full page div is ... and your CSS is so convoluted I don't know what all's going ... because of the number of screens and resolutions out there in ... hbbqrffw = Heavy Border, Blockquote Replacement, Fixed Font, White ...
    (alt.html)
  • Re: IE/Firefox XHTML Strict
    ... The http headers may reveal that the content-type of the css is not type/css. ... Here is the HTML: ... You have a 5 level deep nested divs and every div is styled: so, it become extremely difficult to figure out exactly what you are actually coding for. ...
    (alt.html)
  • Re: January statistics available
    ... within each of those narrow <div> elements are stacked up ... Have I read that .CSS StyleSheet right? ... & the Border still has a width? ... Just the CSS (& possibly the Perl Program that Calculates the Sizes) ...
    (uk.people.silversurfers)