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

try using padding insyead of margin.

and you want Clear examples eh...
so you read post 19 (or even post 3)?

Take a llok at http://happy.sdf-eu.org/test/index.html and see tthe NS4 solution I've come up with

..as I said it was the links in post 19 that made the placement thing so clear.

Looking at your other link now, thought about padding, but must have got sidetracked this PM at work as never got round to trying it.

Cheers

CH

It's an example of degradation - still need a bit of work (should be updating late Sunday/early Monday) so take another look Monday morning

"larger" maps properly in most browsers. If you explicitly set the text size for the body element, "larger" and "smaller" work wonderfully when defining footnotes, headings, etc..

I tend not to use absolute font sizes just as a personal preference.

Regarding specifying a minimum or maximum size for a div, you can use (min|max)height and (min|max)width. Here's the catch - it doesn't work in Internet Explorer. Thank you Microsoft.

A word of warning: Mixing percentage and absolute positioning is potentially dangerous. It will likely not look like you want it to and you may end up with extraneous scrollbars and other oddities, especially if you have margins and padding defined.

Here's another potential "gotcha": Margins are _added_ to widths, not subtracted from them! If you have 3% margins and your divs are 30% and 70% respectively, your page will be 106% of screen width (except in IE which is broken here as well). Be sure to define margins appropriately.

If you feed NS4 certain CSS it will fail to render correctly or even crash (!). As far as Netscape 4 goes, I send it a bare unstyled page with a little note that the site looks much better in a browser that sucks less. Okay, I'm not quite that blunt but that's the gist of it. Check out http://www.webstandards.org/act/campaign/buc/tips.html for an example of browser detection that won't break.

on the above note Top Style Lite
apart from being free is excellent in that as well as selecting CSS by level you can select by browser.

__________________

http://happy.sdf-eu.org/test/index.html
Had some time on my hands so updated.
the basic CSS is from the W3C core styles (http://www.w3.org/StyleSheets/Core/). These are good as a style sheet optimised for the browser or device used for viewing the page is used.

Next is the CSS for Printing - This hides the logo & navigation so only the Content is printed.
There is a tiny bit of CSS on the page that modifies the W3C Core Style
Older browser such as NS4 will use only these style sheets.

Finally for Modern browsers there is another style sheet, which gives a (IMHO) pretty layout

and now sorted the degrading NS4.x thing - saw your site but didn't suss why it worked till I read http://www.mako4css.com/csstwo.htm - always like to do things I know more or less how they work rather than simply copying.

Now pages - table only used for banner graphics, the relevant links as text and layout of actual content in DIVs.

CH

(I've just tidyed up my CSS, might make more sense now)

I'm particularly proud of the way I used unordered list for menus

ARRRGGGHHH. Now I come to define in my CSS the style for the links elsewhere in my site and this then totally over-writes the classes/divs set for the links I wanted to different!!!!

I give up, anyone know of a job in a field working with sheep?

CH

Arh, now I see, I have to specify the ful range in the CSS thus

a.headertext:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
background-color : #ff0000;
color: #FFf;
text-decoration : none;

}
a.headertext:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
background-color : #ff0000;
color: #FFf;
text-decoration : none;

}
a.headertext:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
background-color : #ff0000;
color: #FFf;
text-decoration : none;

}

Of the things I want different to the default.

Still looking for a sheep based job.

CH

*giggles*

but as no sheep....how do you use the same DIV definition again and stay "legal" I have a DIV defined in the CSS that places a float box on the screen, works well, and I can use it more than once (<div id="rightbox"&gt but if I do the w3c validator thows it out as I have used the same ID twice!

DOh! don't answer, found this

http://codepunk.hardwar.org.uk/acss06.htm using class and id together with my divs - is this the best way?

BTW - what your opinions on WebSafe coulrs?

Chris

websafe - if you want to be safe and have total control use 'em, but I these days there is no real need to use them.

no solution to reusing

you will have to put the code in your style sheet multiple times with slightly differnt names.

Use class="" instead of id??

could do but that raise other questions

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

it's the best place I know of for CSS advice

Using class instead of ID should work fine for most things, with no difference in the appearance. ID should be used for things like positioning because generally you only want one thing in one place anyway.

Of course you can further differentiate styles without using at all, by compounding the tags like this

p a:hover { color: red }
// only affects links within paragraphs

b a:hover { color: red; font-weight: bold }
// only affects links within bold tags

li a:hover {...}

etc.

I was just playing with colors yesterday. It seems that if you do not use web safe colors, there are still marked differences between Mac and Windows even with stylesheets. Theoretically web safe is not needed because everything displays with thousands or millions of colors nowadays anyway, but it doesn't hold true.

Think of ids as a primary key - it's for identifying a given section. Think of class as a style type - it's for defining what a section should look like. I usually assign ids based on what the content of the div is, e.g. or .

I don't normally post work links here but as you lot had a large impact on how I did it here is the test page I have been working on.

http://www.swro.info/index_new.asp

Any comments (apart from the fact I use a table for the top navigation, and Javascript for the menus - still works without script enabled as the headers will take you to an index page, so users will get to the right place but will have one extra page to go via)

Cheers all.

Chris

...and the fact it looks pants in NS4.x - still working on that.