CSS Question

[Partial]

I was given the following assignment for school. It's listed below. I'm unsure how to accomplish a checkerboard effect with two colors if one cannot use ids or classes for the columns. Any thoughts? It's probably pretty simple and I'm overlooking something.

Create a web page that displays the beginning position of the pieces on a chess board. The squares of the board should be a pale ivory (for white) and deep mahogany (for black). Check the wikipedia pages on these colors for RGB information. Images of the pieces can be found at http://www.abacci.com/chess/rules_setup.asp.

Your XHTML document can contain only html, head, link, title, body, table, tr, td, th and img tags, but the image tags can only be used for the chess pieces. You may not use an attributes with the body, table, tr, td, and th tags, and only required attributes for the img tags. All formatting must be done in an external CSS style sheet.

Validate both the XHTML and CSS documents at http://validator.w3.org.

[Brad]

Rather than completely give away the answer, here's a big tip in the form of a question:

How do the TR, TD, and TH elements relate to each other in function?

[Partial]

Can you have headers and data cells in the same row? If so, thats very easy. It was my understanding that that is not the case.

I'll stick to flex. All these HTML and CSS mumbo jumbo is difficult!

[Brad]

I'll stick to flex. All these HTML and CSS mumbo jumbo is difficult!

Oh dear god I hope this post is in jest. Where's the sarcasm tag?

[Partial]

Nah, I'm the resident flex developer. I like it.

[Robo]

:err: :eek: :err: :eek:

[Brad]

Nah, I'm the resident flex developer. I like it.

Honestly, if you can't figure out something as fundamentally basic as HTML tables, I worry for any future projects you take on. :confused: Even Flash objects end up somewhere embedded in HTML. If you can't write basic HTML, you've got no delivery mechanism for whatever content you create in Flex.

[Partial]

Dude it was a piece of cake once I determined that th and td members can both be wrapped in a tr. I never use HTML. Didn't learn it in school until this dumb class.

I've never seen a table row with TD and TH in the same row. Seems like a horrible way of doing things. Besides, their isn't any reason to do that in commercial industry that way... teacher is having us do it that way to make sure we understand whats going on there.

I'm a software engineer, do some web stuff, but primarily flex code or server code.

[Brad]

Well, with such a kind of cavalier attitude towards learning the basics of ancillary technologies:

I never use HTML. Didn't learn it in school until this dumb class.

I wouldn't be so bold to say:

I'm a software engineer

:p

Generally speaking, the good software engineers are eager to learn these kinds of things.

But, hey, whatev. If being a Flex-only developer gets you a solid career, more power to ya'! :)

[Partial]

Well, with such a kind of cavalier attitude towards learning the basics of ancillary technologies:



I wouldn't be so bold to say:



:p

Generally speaking, the good software engineers are eager to learn these kinds of things.

But, hey, whatev. If being a Flex-only developer gets you a solid career, more power to ya'! :)

About to graduate in May with a degree in software engineering ;)

I was being sarcastic about the flex since everyone here seems to loathe it.

Legitimately didn't know you could use a th and td tag in the same row. Seems like a really poor practice to have. Using a class would be much more logical.

[chucker]

I'll agree that mixing td and th in the same row is a poor practice.

http://www.w3.org/TR/html401/struct/tables.html#h-11.2.6
The TH element defines a cell that contains header information.
http://dev.w3.org/html5/spec/Overview.html#the-td-element
The th element represents a header cell in a table.

This is not at all a header cell.

[torifile]

I hate pointless exercises like this. Especially when the "solution" encourages the inappropriate use of elements. Is there some other "right" answer that doesn't abuse the <th> element?

[Partial]

I hate pointless exercises like this. Especially when the "solution" encourages the inappropriate use of elements. Is there some other "right" answer that doesn't abuse the <th> element?

Yeah, it's dumb. I'm assuming one could use two classes to easily accomplish this.

[synotic]

I agree with torifile — exercises like these are completely nonsensical (if what's being proposed is actually the solution). Marking up alternating spaces as headers just encourages bad practice. I imagine that your teacher's requirement to "only use an external stylesheet" is possibly referring to the CSS3 nth-child selectors, but I don't know which browsers they're supported in, if any.

[Gargoyle]

Maybe the point of the exercise is to point out that the correct semantic way to render the chess board would be to correctly use id and possibly class tags. Also, I suspect that the question is worded to emphasise that the formatting be done in a css file - perhaps to stop you from using inline color="black", etc attributes.

This would be my submission (http://ga.rgoyle.com/an/chess.html) (I have not put the pieces in), but it does demonstrate a few css bits (note the !important to get the hover effect to work).

[Partial]

You can't use id or class tags. That was specified in an email. Could only use the tags listed, thats why I'm like WTFudge, as I didn't even think(or know) of putting TH and TD as alternating elements in a row.

[dmegatool]

You may not use an attributes with the body, table, tr, td, and th tags, and only required attributes for the img tags. All formatting must be done in an external CSS style sheet.

You can't use id or class tags. That was specified in an email.

How are you suppose to link the attibutes to an external CSS style sheet without id and classes ? And "You may not use an attributes" means you can specify widths, colors, etc ?

Sounds stupid... just quit the class and be done with it :)

[Partial]

It's a really dumb elective that I took because its easy. Learning XSLT should be worthwhile, though, as I hear it can get complicated.

To answer your question, I did this:

td{
background-color: color;
}

th{
background-color:color;
}


if I remember correctly.

[dmegatool]

I thought you were still trying to avoid using TH. As Chucker pointed, this isn't the best pratice... AT ALL :) But yeah it should work :\

Never heard of XSLT, sounds cool. Thanks for talking about it :)

[Partial]

I thought you were still trying to avoid using TH. As Chucker pointed, this isn't the best pratice... AT ALL :) But yeah it should work :\

Never heard of XSLT, sounds cool. Thanks for talking about it :)

Yeah, its a really bad practice. It was an all-around obnoxious portion of the homework :lol:

[Partial]

So, I have some questions, but it might be easier if I start with the assignment summary, and a picture.

I've created a joke business letter and given you the source in the file "letter.html". This is a well-formed (and almost valid) XHTML document whose content contains only "div" and "span" elements. I've also provided PDF files of two ways of formatting this sample document: Letter1.pdf and Letter2.pdf.

Your task is to write the external CSS style sheets needed to make the XHTML letter appear as shown in the PDF files when displayed in a decent browser that supports CSS. I believe that most modern browsers should be sufficient, but it is definitely the case that Opera is the best in terms of standards compliance.

Here is what you can and cannot do:

* You may not add any content or any additional elements to the XHTML file, except that you may add a LINK element to the HEAD in order to connect the stylesheet to the file.
* You may add "class" attributes to any element in the document.
* You may not add any other attributes to any element in the document.
* You many not place any CSS code in the document, except if you choose use style inclusion to connect your external CSS file.

The best solutions will closely match the appearance of the PDF files and show good software design, including good choice of class names and good levels of code reuse. By "code reuse", I mean that you shouldn't make every element be a unique class, but rather, should have elements of the letter that are formatted similarly belong to the same class.

Here's the sample HTML document we were given:
<?xml version="1.0" encoding="utf-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example letter</title>
</head>
<body>

<div>
<div>John Doe</div>
<div>Egregious Malfunction Corp.</div>
<div>1234 Bumble Road</div>
<div><span>Accident</span><span>WI</span><span>53333</span>
</div>
</div>

<div>April 3, 2009</div>

<div>
<div>Dear Mr. Doe,</div>

<div>
I am writing to follow up on our meeting of March 31, 2009. As you
will remember, we discussed the past and future relationship between
Egregious Malfunction Corp. and Blatant Embezzlement Finance Inc. I
sincerely believe that this relationship can be long and singularly
unproductive.
</div>

<div>
I want to confirm that we agreed on the following principles for our
corporations’ continuing interaction:
<div>
<div>That Egregious Malfunction (<span>EM</span>) will develop five new products for
established and emerging markets. The basic model of development
investment will be 80% marketing, 15% legal subterfuge, and 5% actual
research and development.
</div>
<div>Blatant Embezzlement Finance (<span>BEF</span>) will arrange financing for these
products via popular structured investment vehicles. <span>BEF</span>’s preferred
structural model for these vehicles is known as the O&amp;I model (Obscure
and Incomprehensible model). We have shown impressive success with
this model since we were spun off from Madoff Investments in 2007.
Total financing fees paid to <span>BEF</span> will be 98% of the investment value
and <span>BEF</span> will give <span>EM</span> a kickback of 40%.
</div>
<div>
All five products will be released simultaneously in <span>January 2010</span>.
</div>
<div>
All owners of <span>EM</span> and <span>BEF</span> will disappear and assume new identities in
<span>February 2010</span>.
</div>
</div>
</div>
<div>
Naturally, the content of this letter is confidential and is not for
publication. In fact, you should probably put it down within the
next 30 seconds, before it self-destructs.
</div>

<div>
See you on the beach in Antigua!
</div>

<div>
Sincerely,
</div>
</div>


<div>
<div>Jane Smith</div>
<div>Blatant Embezzlement Finance Inc.</div>
<div>567 Theft Circle</div>
<div>Larceny, IL 60666</div>
</div>

</body>
</html>


With that said, the pdf's containing the stylized version can be downloaded here:

I sincerely apologize that this site sucks for hosting. It takes a one minute wait before one can download the file
Letter 1 (http://www.webfilehost.com/?mode=viewupload&id=5049916)
Letter 2 (http://www.webfilehost.com/?mode=viewupload&id=8070290)



Ultimately, my question is how the does one add characters using only CSS? For example, in letter 1, "To:" at the top of the page is nowhere to be found in the html.

[Partial]

Anybody? The summary is: Is there a way to add characters via CSS? I'm stumped by the above scenario.

[chucker]

Anybody? The summary is: Is there a way to add characters via CSS? I'm stumped by the above scenario.

I'm still not sure if that's what you're asking for, but you can use the :before and :after pseudo-classes together with the content property, like so:

p:before {
content: "Stuff that gets added before every paragraph.";
}

Note compatibility limitations: http://www.quirksmode.org/css/beforeafter_content.html

[Partial]

That is exactly what I'm looking for Chucker. Thank you very much. I did some serious googling all to no avail.

Dan

[Kraetos]

This class sounds like hell. Abusing table elements? Adding content with CSS?

If a professor asked me to do these things I'd drop the class immediately. Luckily my HTML/CSS knowledge is on par with my professors to begin with :p

Actually, we don't even have HTML/CSS classes. I guess the assumption is that it isn't that hard, and if you're a CS major you can learn it on your own. The CS department here makes that assumption a lot, actually...

[Partial]

It's an optional class that I took because I thought it would be easy. It isn't super challenging but there is a lot of dumb stuff that I'd never heard of as you've listed above.

[chucker]

Adding content with CSS?

There are legitimate reasons to do that, such as adding Wikipedia's logo in front of links that point to Wikipedia, or a German flag in front of links that have hreflang set to 'de'. Such modifications do not belong in the markup because other presentations of your markup (such as, say, a print-out) shouldn't necessarily feature them.

[Kraetos]

It's an optional class that I took because I thought it would be easy. It isn't super challenging but there is a lot of dumb stuff that I'd never heard of as you've listed above.

Heh, I know what you mean. I've definitely taken classes like that before :p

There are legitimate reasons to do that, such as adding Wikipedia's logo in front of links that point to Wikipedia, or a German flag in front of links that have hreflang set to 'de'. Such modifications do not belong in the markup because other presentations of your markup (such as, say, a print-out) shouldn't necessarily feature them.

True, but it seems like this particular assignment is asking for an abuse of that particular CSS feature.

[chucker]

True, but it seems like this particular assignment is asking for an abuse of that particular CSS feature.

Agreed.

[Partial]

I have the following XML element structure. It's very simple.


<paragraph>
All five products will be released simultaneously in <highlight>January 2010</highlight>.
</paragraph>

I use the following XSLT call to access the contents of the paragraph element.


<li>
<xsl:value-of select="business-letter/core/body/list/paragraph[3]"/>
</li>

However, I get the following back, devoid of the highlight node.


<li>All five products will be released simultaneously in January 2010.</li>

With that said, I need to use CSS to underline the contents of the highlight node for an assignment. I'm not sure how I'd go about doing that. Any thoughts?

From the looks of it, there probably isn't a good way to access the highlight tag for the purpose of applying the style. Is there a good way of "reading the content" with CSS and applying a style based on some sort of conditional if pcdata matching?

[Partial]

Bump! Need to get the assignment in tonight!! Any thoughts on a google search query? I'm awful at formulating my thoughts into a query.