Newbie - CCS help?

Can anyone show me the code for a external CSS that would cover the below
referenced page and then allow me to link it to all the other web pages?

Wish to include in the CSS the following:

Top Table with the Image (logo) and the links.
Left-hand side Table with the links.
Then be able to add text and images in the portion below the top table and
the left-hand table.

http://www.unclewaynes.net/miscTEST.htm

Any direction or help would be appreciated as I'm very new to CSS.

Thanks,
Lewis

Uzytkownik "Lewis" <shirtmen (AT) example (DOT) com> napisal w wiadomosci
news:TIyhd.70$gH4.25 (AT) fe39 (DOT) usenetserver.com...

Can anyone show me the code for a external CSS that would cover the below
referenced page and then allow me to link it to all the other web pages?

Wish to include in the CSS the following:

Top Table with the Image (logo) and the links.
Left-hand side Table with the links.
Then be able to add text and images in the portion below the top table and
the left-hand table.

http://www.unclewaynes.net/miscTEST.htm

Any direction or help would be appreciated as I'm very new to CSS.

You don't even get the idea of css, do you?
So let me explain, I've got a good day...

(X)HTML is to contain the data and document structure.
CSS is to describe how the content of (x)html document should be rendered.

So you put links, texts, forms, tables and images* to html document.
Then you create stylesheet that describes how browsers should display it.

*images - you should avoid decorative images in the document, it's better to
place them as bacground images for particular elements.

Now ask google where you can find css tutorials

PS. To include parts of code in external files to use in multiple pages (and
I think it is what you are asking for) you need php or other server-side
language, but this is not good group to ask about it.

--
pawel[dot]knapik[at]gmail[dot]com

Uzytkownik "Brian" <usenet3 (AT) julietremblay (DOT) com.invalid> napisal w wiadomosci
news:EMFhd.55470$OD2.51909 (AT) bgtnsc05-news (DOT) ops.worldnet.att.net...

vatore wrote:

you should avoid decorative images in the document, it's better
to place them as bacground images for particular elements.

Only if you intend for the images to be background, that is, potentially
behind other content. Otherwise, it belongs in the html.

The images that belong to html are images that are complementar to the
document's content, that provide some data.
The 'alt' attribute is required in xhtml not to leave it empty just for
validation. You need the alt / longdesc because if image can not be
displayed the document will lack some information, so you give alternative
text and optionally long description to give as much as possible information
for those who don't see the image.

If an image is only decoration I prefere to move it to css as background
image ( :before / :after pseudoclasses would be great, but there is browser
support problem for this feature).
I prefere
<h1><span>header text</span><h1> + span {display: none;} h1 { background:
.... }
Instead of
<img alt="header text" src="header.gif" />

or
<p>some pargraph</p>
<p>other paragraph</p>
+ p { background: url(decoration.gif) bottom no-repeat; padding-bottom:
20px }

instead of
<p>some pargraph</p>
<img alt="" src="decoration.gif" />
<p>other paragraph</p>
<img alt="" src="decoration.gif" />

Imagine loading both the <img src... examples on gprs mobile device
Imagine re-design, when you have to change tons of such imgs

But, on the other hand
<div style="background: url(chart.gif)...
when 'chart' provides some data to the site it is very stupid, it should be
<img src="chart.gif" alt="what does the chart show" /> to keep document
complete if for any reason stylesheet is not loaded.

--
pawel[dot]knapik[at]gmail[dot]com

"vatore" <vatore (AT) wp (DOT) pl> wrote:

If an image is only decoration I prefere to move it to css as background
image

Thus breaking a useful UA feature: the ability to disable display of
images and have the screen space freed up.

( :before / :after pseudoclasses would be great, but there is browser
support problem for this feature).

Old browsers like IE and Opera 6 yes, these can be fed a background
image as a fall back if you're inclined to push things:
http://www.spartanicus.utvinternet.i...with_css.ht m

--
Spartanicus

.oO(vatore)

If an image is only decoration I prefere to move it to css as background
image ( :before / :after pseudoclasses would be great, but there is browser
support problem for this feature).
I prefere
h1><span>header text</span><h1> + span {display: none;} h1 { background:
... }

This fails with CSS enabled, but images disabled.

Instead of
img alt="header text" src="header.gif" /

<h1><img src="header.gif" alt="header text"></h1>

Micha

Thank you Vatore, Brian, and Spartanicus for your respective response.

Needless to say I'm more confused now than prior to my post.

I was referred to the authoring stylesheets newsgroup from several people in
the alt. internet-search engines newsgroup. Yes, I really have no idea about
CSS and what their main asset is, however I was told in the alt. ISE
newsgroup that the future is "not using tables", but using CSS. Right or
wrong I do not know.

I have spent hours searching and then reading CSS tutorials, I read most of
Spartanicus "Web Tips". I have found very little about "tables" or what I
call a "header" (our company logo with links in a given table at the top of
each webpage). I found instructions for "box", the "header", much on "text"
(display colors, sizes, etc.) and several tutorial on "1 column, 2-column,
and 3-column" CCS - just don't understand which relates to what I'm trying
to obtain.

Again, thanks one and all for your time.

Any good books with examples you could recommend? Any specific online CCS
site relating to "tables" and horizontal links?

Lewis


"Spartanicus" <me (AT) privacy (DOT) net> wrote

"vatore" <vatore (AT) wp (DOT) pl> wrote:

If an image is only decoration I prefere to move it to css as background
image

Thus breaking a useful UA feature: the ability to disable display of
images and have the screen space freed up.

( :before / :after pseudoclasses would be great, but there is browser
support problem for this feature).

Old browsers like IE and Opera 6 yes, these can be fed a background
image as a fall back if you're inclined to push things:

http://www.spartanicus.utvinternet.i...with_css.ht m

--
Spartanicus

"Lewis" <shirtmen (AT) example (DOT) com> wrote:

Please don't top post in this group, please do snip quotes.

I have spent hours searching and then reading CSS tutorials, I read most of
Spartanicus "Web Tips". I have found very little about "tables" or what I
call a "header" (our company logo with links in a given table at the top of
each webpage).

My site clearly mentions that it only deals with more exotic issues,
it's definitely not a site to learn coding from.

Neal likes http://www.w3schools.com , try that.

--
Spartanicus

On Tue, 2 Nov 2004 11:07:54 +0100, vatore <vatore (AT) wp (DOT) pl> wrote:

The images that belong to html are images that are complementar to the
document's content, that provide some data.
The 'alt' attribute is required in xhtml not to leave it empty just for
validation. You need the alt / longdesc because if image can not be
displayed the document will lack some information, so you give
alternative
text and optionally long description to give as much as possible
information
for those who don't see the image.

Sometimes this strategy is correct. However, there are times when the
image is foreground material, it requires page space, but is not essential
for the sight-disabled or others for comprehending the content of the
page. In those cases, alt="" is recommended and correct.

If an image is only decoration I prefere to move it to css as background
image

Indeed. But the line between a merely decorative background image and an
essential piece of content is not so clean. An illustrative image might
not be a required part of the content - it may be an additional visual aid
supplementing the text content - but it is not a background image either.
Background images do not command screen space. Basically, a background
image is one which you aren't upset if the text should happen to cross
over it (even if it's undesirable, it may happen in extremely accomodating
renderings).

Imagine loading both the <img src... examples on gprs mobile device

A handheld, like many browsers, can be configured to display only images
requested. The user need not be troubled.

Imagine re-design, when you have to change tons of such imgs

PHP and arrays.

But, on the other hand
div style="background: url(chart.gif)...
when 'chart' provides some data to the site it is very stupid, it should
be
img src="chart.gif" alt="what does the chart show" /> to keep document
complete if for any reason stylesheet is not loaded.

Agreed. But the alt should be a sentence or more which fits the prose on
the page and communicates the same information. If the text already
communicates this same information, and the chart is supplementary, the
chart does not require an alt, nor is is background.

On Tue, 02 Nov 2004 17:29:32 +0000, Spartanicus <me (AT) privacy (DOT) net> wrote:

"Lewis" <shirtmen (AT) example (DOT) com> wrote:

Please don't top post in this group, please do snip quotes.

I have spent hours searching and then reading CSS tutorials, I read
most of
Spartanicus "Web Tips". I have found very little about "tables" or what
I
call a "header" (our company logo with links in a given table at the
top of
each webpage).

My site clearly mentions that it only deals with more exotic issues,
it's definitely not a site to learn coding from.

Neal likes http://www.w3schools.com , try that.

Actually, I'd prefer http://www.htmldog.com/ if it weren't for the
devotion to unrealistic XHTML. The CSS advice is well written and paced,
though, so long as the learner knows that the XHTML isn't needed, it
applies as well to HTML 4.01 and to better overall effect.

Sadly, while these cover the basics of CSS well, I have yet to see a
really well-designed tutorial on CSS layout. Too many tack it on as an
afterthought to a basic tutorial, and it really IMO is a whole area of its
own, sharing only the syntax and good coding practice necessary of
text-style CSS.

Neal wrote:

On Tue, 02 Nov 2004 17:29:32 +0000, Spartanicus <me (AT) privacy (DOT) net> wrote:
Neal likes http://www.w3schools.com , try that.

Actually, I'd prefer http://www.htmldog.com/ if it weren't for the
devotion to unrealistic XHTML. The CSS advice is well written and paced,
though, so long as the learner knows that the XHTML isn't needed, it
applies as well to HTML 4.01 and to better overall effect.

Sadly, while these cover the basics of CSS well, I have yet to see a
really well-designed tutorial on CSS layout. Too many tack it on as an
afterthought to a basic tutorial, and it really IMO is a whole area of
its own, sharing only the syntax and good coding practice necessary of
text-style CSS.

I'd definitely agree that there's no really good tutorial for CSS layout
- learning by example is the only way you get to see many techniques
built up. However, the Floatutorial at Max Design
(<http://css.maxdesign.com.au/floatutorial/>) gives a nicely structured
introduction to floats, starting with images and moving onto their use
for multi-column layouts - I think it's a good starting place.

P