A page on the website I hate

[Otaku]

I hate this page: http://jhsenglipediaproject.com/JHS_Textbook_NewHorizon_SpeakingListeningWritingMultiPlus.aspx

It's messy! It looks like a child made it.

I'm looking for suggestions to clean this page up.

Keep in mind multiple textbooks flow into this page.

I also don't like it because it's New Horizon focused and I want to make it more textbook-friendly for all textbook series. Sometimes, the various textbooks share the same topic but sometimes they don't. So, how can I make the sub-areas activities of the textbooks cross-over? I mean, I could create an independent page for each of the topics on this page but for the topics that aren't shared throughout the various textbooks series (for example, Multi+ 3 in the 3rd New Horizon textbook: Writing a 5-line poem), if I create an independent page for this topic, other textbooks that doesn't have this topic won't be able to see it.

Comeon, someone step up and give me an idea...

[jessen100]

idk what you use to make the pages, but i think having the text highlighted like that is really ugly, perhaps you could put them in textboxes or something then change the boxes background so they are more like solid blocks rather than highlighted text. reducing the color contrast with these things could be good too, they are pretty bright.

also i think that if you just made the background of the whole thing a solid color it would be easier on the eyes.

i dont use the book but i dont really understand the order that they are in.
putting them in chronological order, then having a speaking/listening/etc icon by them mght be good too.

[peet]

I would also prefer them in textbook chronological order.

I'd also maybe get rid of the 3 grade columns, which would allow color coding to be strictly for differentiating Speaking/Writing/Multi/etc, and would also free up space since the page is pretty busy/crowded now.

You could then have either an intro page with links to a separate page for each grade, or what I might do is overlay the content for each grade on top of each other and use some CSS z-index tricks to bring Grade 1, Grade 2, or Grade 3 to the front when you click a tab for that grade at the top. Hard to explain, but like this demo:
http://htmlrockstars.com/blog/using-css-to-create-a-tabbed-content-area-no-js-required/
http://htmlrockstarsdemo.com/playground/tab-example/index.html
edit - just noticed this demo uses advanced css so might break in IE, but it's easy to find similar versions that use javascript instead of CSS for clicking between tabs.

[Otaku]

Thanks guys. I'm rebuilding the JHS Grammar page right now. When I finish that, I'll reread your suggestions and see how it goes.

@Peet, that CSS idea won't work in IE...which is what most users are forced to use.

[peet]

Ha - you beat me. I noticed that too, but you replied before my edit. You can get the same results with a bit of Javascript, but maybe not worth your time to build all that for just a simple list of materials (it would look sweet though :) )

[Otaku]

If you wanna build it... :)

[peet]

If it can wait until the school year ends, I should have plenty of time for messing around with web stuff in March..

[Otaku]

Sure! Just let me know and I'll bring you onto the site.