h2g2 The Hitchhiker's Guide to the Galaxy: Earth Edition

OK - I am rebranding my work site, and part of it is I am having text navigation buttons to replace the grapics to conform to Single A accessibility criteria, they are going to be in a table, with the cell coloured (By CSS) to match the graphics (simple prettys).

I have created a custom class for the text as

.headerlink {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFFFFF;
background-color: #FF0000;

}

However when I make it into a link, the default properties for the tag overwrite the colour and underlines it.

Now I want my links in the bulk of the site to be a set colour and undelined, so how do I get the custom class style to be king as it were?

Cheers

CH

BTW

I can do it in the page using

style="color: white;text-decoration: none"

But really want to control every style component with the CSS

CH

Using Tables for layout is not very Accessibility friendly.

but...

In your CSS something like

#button a {
display : block;
padding : 4px 5px 4px 5px;
border-left : 10px solid #174f6b;
border-right : 10px solid #2b6687;
background-color : #205a77;
color : #fff;
text-decoration : none;
width : 150px;
}

and enclose your table in appropiate 's

Check Out
http://bobby.watchfire.com/bobby/html/en/index.jsp
http://www.w3.org/WAI/

and

http://two.pairlist.net/mailman/listinfo/css-discuss

Finally - I've got a few test pages up for a site I'm putting together, a site in which Accessibility is an important factor, take a look - NO tables http://happy.sdf-eu.org/test/index.html

Not quite sure if that is what I want, I simply want to somehow have "text-decoration: none" in the style for the text (I'll be using this elsewhere as well) to take precedence over the default style.

I know that tables are considered by some as not totally accessible, luckily I only have to meet simple A grade which seems to allow it (well in the UK Govs interpretation it does), maybe when I get better at this lark I'll re-visit these.

Cheers

CH

but I see what it does now....now for some tweaking, cheers

CH

Without looking at the page I can't be sure, but try this...

create a thingy in the style sheet like this...

.undecorated {
text-decoration: none
}

and then use the <a.undecorated href....

or is it <a class="undecorated" href....

it's something like that, unfortunatly work's a bit too busy to check up for you...

To meet even WAI Leval 1 Links should be distinct.

Use a Div not Class
#headerlink {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFFFFF;
background-color: #FF0000;
text-decoration : none;
}

So enlighten me, what is a DIV? I am (as I have said elsewhere) a ameteur, trust into doing pages that have to meet e-gov standards)

Cheers

CH

From "Web Content Accessibility Guidelines 1.0"
http://www.w3.org/TR/WCAG10/#gl-table-markup


"Tables should be used to mark up truly tabular information ("data tables"). Content developers should avoid using them to lay out pages ("layout tables"). Tables for any use also present special problems to users of screen readers "

put the code in post 7 into your CSS

then before the section you want it act upon put



and after the section



hope that makes sense.

(also download yourself a copy of "Topstyle Lite")

try viewing the source on the test site I linked to before and you will see how I used 's

Cool, will stick with the tables for now through to use the phrase pinned up on my PC (although missing right now)

"Here is Edward Bear, coming downstairs now, bump, bump, bump, on the back of his head, behind Christopher Robin. It is, as far as he knows, the only way of coming downstairs, but sometimes he feels that there really is another way, if only he could stop bumping for a moment and think of it."

© AA Milne of course.

Got to get site re-branded using existing pages (all in tables) before management board tomorrow (or may have till early next week)

Cheers

Chris

Good Luck

Sorry HappyDude but things haven't worked.

Now I am at home I can post pages to my site so can post a link to a test page

http://www.chawke.co.uk/links.htm

For ease of checking here is the CSS

.headertext {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FF3333;
text-decoration : none;
text-decoration: none;
}

#headerlink {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FF3333;
text-decoration : none;
}


As you'll see using the doesn't work as planned, indeed the top one has the sammler font in Mozilla, whilst the second one is smaller in IE, the only method I can find that does what I want is the class method - which for some reason I couldn't get working at work, but thats not a problem.

Any ideas? Willing to learn, this is what actually makes my otherwise dull job

CH

Sorted - using your *button* example above, that had the all important extra "a" on the first line

Mine is all happy now



Plagarise, Plagarise.......

Cheers

CH

Notes on Divs:

A div in a way, is a sort of page wrapper. Think of it as a chunk of a page.

So, you get something like...

stuff to be contained in the page


Shouldn't be used in the way of...



stuff



So, they're wrappers for html tags rather than being mixed among them.

In a way they're sort of like a way of having lots of tags in one page.

Mix them in with the style attribute and you can have a very powerful way of getting a page looking exactly how you want. The position allows for placement...


stuff in here


This would place the div, and it's contents twenty pixels in from the left and twenty pixels down from the top.

I'd also dump the xml declaration from the top, they usually only cause errors between browsers.

So, given your test page using a div to place the link instead of a table, you'd get...



link text



However, divs aren't a replacement for tables. Divs really should be used to layout different sections of the page. Having a table within a div is perfectly acceptable. So,





Home




First




Second





...could quite easily be used.

CSS posditioning is a replacement for layout tables and its better to put CS in a style sheet than in-line.

Some useful sites on CSS layout are

http://glish.com/css/
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

But css positioning doesn't have the fluidity of tables and isn't as widely support on a cross-browser standard with backward compatable support.

But, that aside, I'm a fan of css possitioning.