16 replies [Last post]
jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 10 years 5 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

I feel like a dweeb for being the guy who's always talking about some book i'm reading, and how i'm stumped on some chapter or exercise, or some bit of code that's not working. i say that 'cause i did the same thing a few weeks ago w/ PHP! oh well, maybe you've been there at some point in your own career and maybe you can relate. maybe not. whatever...

anyway, so, i'm going through this book on CSS, and although there haven't been exercises in the book, i'm trying to make some on my own so i can test my understanding of the concepts. so, what i have been doing is, depending on the style selector, or document structure being taught-- whatever it might be, i try to write a chunk of HTML which will sufficiently accept the Style, or demonstrate the CSS concept i'm currently learning at that moment. The last piece i tried, i decided that i was going to save myself some work by writing a good standard bit of HTML, and then to simply apply different stylesheets to that HTML, sort of like a "control" group, or a standard by which to compare all of my different trials. the first obstacle i've encountered is what HTML i'm going to need for this to be effective.

For example, i'm going to need some ordered and unordered lists, some <h1>'s and <p>'s, some <div>'s, some forms, etc.

Does anyone know if someone has already created such a piece of HTML for this very purpose? maybe you have written a piece for yourself? if anyone out there has something, or a link to something that i could use, i'd really appreciate it. for now, i'm going to try to come up w/ something good-- but with my luck, i'll probably leave out some key element, or code something in some way where i'll get a quirky output. if you can help me to arrive at "the perfect piece of html", then i'm all ears.

i hope this could turn into a fun thread for those advanced readers out there-- hehe... maybe try to see who can come up w/ the most concise, yet coolest piece for testing every last little bit of CSS. hmmm. i must say i'm really curious to see what comes of this. (and no, i'm not just waiting here for someone to do my work for me... i just think it might be an amusing challenge if you look at it as such)

thanks!

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 18 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

Seeking a &quot;good chunk&quot; of HTML for Stylesheet Test

This is my big chance . . . yep, I blew it . . .

Anonymous
Anonymous's picture
Guru

Seeking a &quot;good chunk&quot; of HTML for Stylesheet Test

n8gz4ez wrote:
CSS Zen Garden
+1 Laughing out loud

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 10 years 5 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

Seeking a &quot;good chunk&quot; of HTML for Stylesheet Test

i've been there before, and i'll go there now... but, i'm not sure what you're telling me to look for... are you suggesting i just "view source" and take that to use as my example code?

i take it then that is encouraged by the publishers?

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 10 years 5 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

Seeking a &quot;good chunk&quot; of HTML for Stylesheet Test

duh!

nevermind.
Wink

EDIT:
This is awesome. what fun to be had!

why do i feel like a kid who just opened up a long-awaited gift?!? is a man supposed to get excited over a piece of structured code?

definitely excited to play w/ this. wow.

GatorSr
Offline
Regular
Last seen: 16 years 42 weeks ago
Timezone: GMT-5
Joined: 2005-08-06
Posts: 42
Points: 0

Seeking a &quot;good chunk&quot; of HTML for Stylesheet Test

Your excitement is understandable. Right click and view source on THIS page for a clean example of code (except perhaps for the use of tables).

If you really want a challenge, set your goal as a page created with HTML and CSS, and No Tables. Good luck, and check back in with progress reports.

GatorSr
Be Nice to Everyone
Read Hebrews 132

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 4 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Seeking a &quot;good chunk&quot; of HTML for Stylesheet Test

GatorSr wrote:
Your excitement is understandable. Right click and view source on THIS page for a clean example of code (except perhaps for the use of tables).
.

Waaaaaah? There be no tables here, boy! Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

GatorSr
Offline
Regular
Last seen: 16 years 42 weeks ago
Timezone: GMT-5
Joined: 2005-08-06
Posts: 42
Points: 0

Seeking a &quot;good chunk&quot; of HTML for Stylesheet Test

Technically, no. Actually, yes. It's hidden in a <form> tag, so we won't count that. Do CTRL-F and search for </table>... that's what caught my eye.

GatorSr
Be Nice to Everyone
Read Hebrews 132

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 10 years 5 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

Seeking a &quot;good chunk&quot; of HTML for Stylesheet Test

GatorSr wrote:
Do CTRL-F and search for </table>... that's what caught my eye.

that's interesting... (although, i'm too lazy to look, and furthermore, to investigate the source here would be like throwing me into a forrest and telling me to pick out all of the different types of genus-- although i know they are trees, and i know there are in fact different genus, it's just something i'm not ready for yet-- in essence, the results would be irrelevant)

so, i must admit, i've grown bored w/ my zengarden html. not bored of the concept, but bored w/ my ability to do very little with what's there. besides, i really should be making my own-- when i started this thread, i was really just looking for ideas on what elements i should include in my test document, so i'd have a lot of the bases covered, and i'd be open to applying different styles in such a way that that trying out different selectors, declarations, cascades, etc would afford me a cornucopia of different "appearances".

i DO VERY MUCH want to try placing text in areas as i would w/ html tables, but again, i'm not ready. i'm trying to follow the progression of Cascading Stylesheets: the Definitive Guide... so far, i'm getting the hang of it, so i don't want to get off-track.

however, i am getting antsy. take a look at one of the very first pages i ever made (it has evolved a LOT since the first version). it's no stellar accomplishment by any means-- but it IS a general informative document, w/ a heck of a lot of table cells. it just occurred to me that perhaps that would be a good project for me. i'd say, if i can re-make that page, using CSS to draw the table (not that it needs to look like the table you see necessarily, but to effectively structure the info in that type of a grid), i'd feel like i have made a lot of progress. (oh, and don't make fun of me for the content on that page... you'll see what i mean if you look... the reason the table is mostly empty {it used to be quite full} is that i abandoned everything here where i live [near Penn State U], moved to San Antonio, TX for one week in April '05 before i thought "i've GOT to get out of here", and came back "home"... but this is personal info, i don't expect you to care or anything)

tell ya what... if you can give me a few hints on what i need to study in my book in order to fix that page, i'll hop to it, and report back when i'm finished... deal?
Wink

EDIT:

doh!
Oh GOD, this is an ugly piece of code! sorry! this WILL be a good project. i'm gonna try to clean this up a bit. in case you haven't figured it out, this is very much Dreamweaver dookie. DookieWeaver!

edit2: here, visit this ONLY if you have a sense of humor and are not easily offended. if anyone finds it offensive, i'll delete the link. just let me know. i thought it was funny, so i couldn't help myself.

GatorSr
Offline
Regular
Last seen: 16 years 42 weeks ago
Timezone: GMT-5
Joined: 2005-08-06
Posts: 42
Points: 0

Seeking a &quot;good chunk&quot; of HTML for Stylesheet Test

WOW. Thanks for the link to your site. It gives a very favorable first impression (understanding your table is blank for a reason).

Please FORGET MY CHALLENGE. The table tag should be abandoned in favor of layout, however, it is PERFECTLY ACCEPTABLE when you have tabled data like your lesson schedule.

CSS ZenGarden is an impressive demonstration of one slant on using styles. Deciding to follow the concept for your site may be a mistake.

If you decided to display your schedule as one column down the left or right of your page (both?), perhaps then pure CSS would make sense without tables. You may want to wait for some of the gurus to take a look at your site before you get too far upstream.

Meanwhile, here are some other examples you may want to visit for another perspective to round out your impression of how CSS is used.

http://www.positioniseverything.net/
http://bonrouge.com/br.php?page=home
http://www.brainjar.com/

Good luck.

GatorSr
Be Nice to Everyone
Read Hebrews 132

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 10 years 5 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

Seeking a &quot;good chunk&quot; of HTML for Stylesheet Test

GatorSr wrote:
WOW. Thanks for the link to your site. It gives a very favorable first impression (understanding your table is blank for a reason).

I'm not sure if i understand what you mean. If you've given me a compliment, then, thank you!

Personally, I think that page is... rather bad, for lack of a more descriptive term. I've been messing around w/ web design for almost ten years (i just counted, and i'm shocked!), so if i can't make a table grid by now, then i might as well hang it up for sure-- not to mention, i did that w/ dreamweaver, although i could hand code it too. dreamweaver makes stuff like that a piece of cake. it's also why the code is littered w/ stupid class attributes like "style1" through "style15", many of which look like this <td><span class="style15"></span>blah, blah</td>... who knows how it got there, but i assure you it wasn't put there on purpose by me hand-coding-- it was dreamweaver all the way. i must have changed font sizes and colors on that page a hundred times trying to polish that piece of ____ into something at least semi-legible. to me, it is what it is... a schedule grid. although, it would be nice if i could spice it up by making the table at the bottom look better-- in some way to emphasize those "resource" links... that would be cool. that's the way i'm looking at it now at least. currently, i'm going through it and taking out all of those garbage dreamweaver classes, and trying to make it at least a clean bit of code. then, when i'm finished w/ that, i might try some CSS positioning. i forgot that i actually have the images at the top positioned w/ CSS. that's about as advanced as i ever got, and i'm telling you, i think dreamweaver did that too-- although i must have got in there and tweaked it to make it look right. ha! i was actually surprised when i saw that. i forgot i did those images like that.

GatorSr
Offline
Regular
Last seen: 16 years 42 weeks ago
Timezone: GMT-5
Joined: 2005-08-06
Posts: 42
Points: 0

Seeking a &quot;good chunk&quot; of HTML for Stylesheet Test

It was a compliment. You have 3-5 seconds to get someone's attention visiting your home page or they're gone. Your site has attractive features with a professional look, so the impression is there waiting for content.

You are ambitious to say the least. Good luck in the next phase.

GatorSr
Be Nice to Everyone
Read Hebrews 132

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 10 years 5 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

Seeking a &quot;good chunk&quot; of HTML for Stylesheet Test

thank you! i really appreciate the compliment.

this page was very important to me (and still is, although i have shamefully sought and acquired a "nine to five", and i do terribly miss teaching). you're right about the "3 seconds" bit. i wanted to really grab my students' attention, or potential students-- i posted flyers all around PSU and the rest of town to try to bolster my student roster-- i had the URL on the poster, so i wanted to catch the attention of students who would have difficulty finding transportation to the music store, so i offered to do house-calls. i put a lot of work into trying to structure that page for impact-- much like the way i probably designed those flyers. i still don't think it looks very good... all that align="center" mess, but i guess for this purpose, maybe it's not so bad?

i'm proud to say that last night i used margin-left and margin-right to fix that bit of text between the guitar images. as i was working on it locally, something that i did caused the paragraph near the top begining w/ "time slots marked..." to have the final line wrap down under the image on the top left. after thinking about it for a while, i found a solution. the guitars are 200px wide, so i did a margin of 220px on either side, then i was able to remove the <blockquote> tag. i later did the same the w/ the "cancellations..." paragraph. i was delighted when i found that it worked.

i was honestly surprised to discover that i had used CSS positioning to fix those guitars in the corners. for the past 9 months or so, i've been working on dynamic web application development, starting w/ DW and ColdFusion, then more recently hand-coding PHP. this is why i refer to the CSS stuff as if it was in the past, and my memory isn't that good about where i left off. I was introduced to the power of CSS by a friend who shared my apt w/ me last PSU Fall semester. he was a Staff instructor at PSU's ITS training, so he did a lot of classroom work w/ dreamweaver, not to mention did a substantial amount of work on one of their sites-- he basically did the entire ITS section, i think, at least starting from the link i provided. he taught me a lot when he lived here. he is the sole reason that i've gotten into CSS (and an interest in XHTML). i do recall donig the image positioning on my own, but he may have coached me on how to find the settngs in DW. how i would annoy him by calling his name every 20 mins to come help me with something or other.

i'm begining to realize that i may actually remember more CSS stuff than i thought-- he taught me a good bit. as i was going through that schedule page w/ a fine-tooth comb, i found stuff in there that i must have done purposefully. and also, many CSS resources i've looked at are familiar. but, so much of what i did was either guesswork, or coached by my friend. had i been quized, i wouldn't have been able to tell you what is a selector and what is a declaration block, not to mention what are classes, pseudo-classes, ID's, etc. so, this is why i'm taking my time w/ the Eric Meyer book.

my polishing job on my schedule page is coming along nicely. i'll probably post the new version later today. however, i still have a LONG way to go before i feel confident about hand-coding, and styling w/ CSS

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 10 years 5 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

Seeking a &quot;good chunk&quot; of HTML for Stylesheet Test

okay. i've completed my update. i have probably sacrificed good layout and form for just trying out a few things (like trying to use a motif of colors at the top based on the guitars), but regardless, i did put effort into cleaning up the code, and trying to make it look pretty, and did a bit of research along the way at this site that i found, which i think is a really useful quick reference-- kind of like a cheat sheet!

anyway, i experimented w/ a few things. for example, take a look at the guitar at the top right. i stuck my bio link there (to show that i know how to position like that, considering my heavy use of tables otherwise). i wanted to have a background image there. i made one w/ 20% opacity in Fireworks, but i couldn't achieve my desired result. i wanted to have a see-through background so you more easily read the text for the links, yet still see the guitar behind. is there a way to do that w/ CSS?

i'm excited to hear what y'all have to say!

GatorSr
Offline
Regular
Last seen: 16 years 42 weeks ago
Timezone: GMT-5
Joined: 2005-08-06
Posts: 42
Points: 0

Seeking a &quot;good chunk&quot; of HTML for Stylesheet Test

The site looks fine. The real issue is code errors. You used a DTD in your first line that says you designed to HTML "Strict", however, you have 73 errors. It's impossilbe to comment on assisting you until the code is clean.

Visit http://www.w3schools.com/site/site_validate.asp for validation results and a list of errors.

You may want to try a different DTD, like <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Good luck.

GatorSr
Be Nice to Everyone
Read Hebrews 132

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 4 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Seeking a &quot;good chunk&quot; of HTML for Stylesheet Test

Very nice Laughing out loud

The validator is only throwing up errors because you're styling html instead of through CSS, and making little mistakes. For example:

<strong><span class="white">Last Updated</strong> 

The first error - it's missing the </span> tag

Verschwindende wrote:
  • CSS doesn't make pies

briski
briski's picture
Offline
Elder
London
Last seen: 9 years 50 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Seeking a &quot;good chunk&quot; of HTML for Stylesheet Test

thepineapplehead wrote:
Very nice Laughing out loud

The validator is only throwing up errors because you're styling html instead of through CSS, and making little mistakes. For example:

<strong><span class="white">Last Updated</strong> 

The first error - it's missing the </span> tag

Also, and this is not really wrong or in error mind, just best practice, class and id names should be style independant.

Using the class "white" might make sence now cause you want that text to be white.

However, imagine in a years time, when you redesign the site and decide that your last updated bit should be in shocking pink instead.

If you had a style independant name you could just change the CSS to make it shocking pink and have no confusion between HTML and CSS.

As it is at the moment you would probably either want to change the html to match your new style, or risk getting in a muddle.

Just a thought Laughing out loud

P.S. You might want to think about using shocking pink now, it's a very fetching colour... honest :whistle: