Re: Advice required for cascading vertical menu.



guv mumbled the following on 20/11/2005 20:11: 
On Sun, 20 Nov 2005 17:32:46 GMT, Gazza <news@xxxxxxxxxxxxxxxxxxxxxxx>
wrote:

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

It appears onscreen as I want it too, but my ul and ol margins are not
as I would have expected. The right margin for instance in ul li seems
to inherit and add to those shown in ul... but it hasnt for the left
margin.

Get hold of Firefox, and Chris Pedrick's Web Designer Extension - it's invaluable. From it, you'll be able to draw boxes around block's to highlight where elements actually start and finish, and easily disable page colours/images/CSS.

I'll admit, it looks a dogs dinner - but it does work. Can you take a
look at the source (www.les37b.f2s.com/gazza.css)


http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.les37b.f2s.com/gazza.htm

I did note that if I tried to add text styles in the li lines, the
menu text changed.

That's because you still haven't got your non-menu content in a seperate div. You either need to add this div in (see below), or else make the change you want in ul li{} and un-make the change in ul#navul li{} etc.

Based on what you've already got, I would structure the HTML like so:

<body>
<div id="skipnav">...</div>
<div id="bodywrapper">
  <div id="header"><h1>...</h1></div>
  <div id="contentwrapper">
    <div id="nav"> ... </div>
    <div id="content"> ... </div>
  </div>
  <div id="footer">...</div>
</div>
</body>

That way, you can refer to any commonly occuring elements in each of the section, say list items, by div#nav, div#content, div#footer etc.

Some people will tell you that being able to set up the HTML in a way that will make adding CSS easier, saves a lot of time later on. Trying to hang CSS on poorly structured HTML just becomes a vicious circle of changes. It's sometimes easier to create a page that has all type of content (lists of all types, various headings, paragraphs, blockquotes, images, form elements, objects, tables, etc) in it, coming up with a solid HTML structure around it, *then* fitting the CSS around it, just on that one page. You'll find fewer problems when creating actual pages, and should have ironed out any bugs, before trying to make the changes across 40 pages.


So your criticism where it says "Workshops" for a header, is not how
you or I see it - but for accessabilty purposes?

Yes, and for search engine (SE) purposes. It's claimed that content higher up the page (closer to the start of the source), and content marked as headings (with <h1> being of more importance than <h2>) influence the search engine more when ranking on key words.

Would adding H5 hidden - and listing it above the H1 heading as it
stands do the job? Or does it have to be H1? (I can increase the H5
size in the CSS to suit)

Would you expect a the heading for a sub-paragraph in a chapter in a section in a book come before the title on the front cover? Nope, neither would I.

Well, its there as shown above in 2 places on the gazza.htm page - but
nothing appeared to happen my end. I can now see it does. I have added
a style for this. What would be best? underline, italics, change of
colour? I want it to look different from the rest - but not go bold!

I like the green style you have at the moment. Cross-browser support of acronym and abbr is hazy at best.


Maybe both. I like to have the first <h1> on the page to give the name of the site, or otherwise at least appear above all of your links. 


The biggest problem here is the need for a page header to stand out.
Including "Bromley Autistic Trust - " as shown in the page title uses
up virtually all the space available. Plus visually, it doesnt look
right.

So use CSS to hide it - it doesn't have to appear on the CSS'd version. My eyes can skim over all the content far quicker and with less limitations than what a screenreader can when it's just looking at the pure HTML content.

Also, can you recommend a browser that I can see how its
going to appear when ignoring my menu? I think it will help me
enormously!


Firefox with Pedrick's extension, as mentioned above.

Sorry - youve lost me! "h1 higher up the HTML"? 

Closer to the start of the source.

Bearing in mind your suggestion of an H1=hidden, this I assume would
be my next line and be a new horizontal link listing and above what is
currently my h1 header?

Where you place the breadcrumb trail is entirely upto you, though I would place it under your current h1 logo, but above any content. Not sure I would mark it up as a list (never really thought about it), as it's giving a path, rather than options or variations.

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

Relevant Pages

  • 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: dynamically building layers?
    ... layers but it has elements like elements and then CSS can be applied to those elements to stack them if needed then you simply need to learn the W3C DOM where in a HTML document you can create any element if you know its tag name as follows: ... e.g. for a <div> element object you do ... Now within the HTML DOM you can script most HTML attributes of the HTML element as properties of the script object created so you can do ...
    (comp.lang.javascript)
  • Re: clearing floats to content edge
    ... sort of thing the OP wants, but with captioned pictures. ... div to wrap) and misc after that. ... As for size specs for the thumbs, I tried putting them in the css ... to save repeating in the html itself. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: Who cant add up, me or Internet Explorer?
    ... And CSS tables are unknown to IE ... because the HTML shouldn't contain presentational code. ... DIV elements with 3 children at the 2nd level for each 1st level. ... |>the same CSS to create a layout applicable to many _different_ page meanings, ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: margins on cleared floats in Opera
    ... This works in both IE and firefox, ... It appears Opera only honours the clearing div for margins if it ... until you make the margin smaller - say 2 ...
    (comp.infosystems.www.authoring.html)