GRC 175 Learning and Discussion Forum

Done for now until my questions in Ask/Tell are answered...
I think it's my best work yet... it involves a mix of my blue design everyone liked and about 3 of my thumbnails. It solves the problem and it offers solutions to the advice people gave about my design in preliminary too.
I had trouble figuring out the blue spot with transparency. At first I made a div with background color blue with CSS's opacity rule... this affected not only the blue but the text as well, which made it look gray and hard to read.
Then I made two divs... one with a blue background and CSS opacity and the other with no background... put them on top of eachother. This did annoying things with the scrollbars.
Then I had a eureka moment... and made a partially transparent 10x10 blue square in Photoshop and used it as the background image for the main div.
Don't know why I didn't think of that before.
So anyway...
http://www.grc175.com/student/fall_2011 ... ndex3.html
Tell me what you think. I'm posting it early this time because I want advice so I can hopefully find time for any changes.
I DESPERATELY want to raise my grade from a B to an A.

a few things that immediately stick out to me:
- increase the resolution of the TMCC logo. It's broken and hurts man.
- look at Hilary's project 2 (or just exercise some google-fu) and find a script that resizes your background image to the size of the window.
- make sure your blue box extends at least all the way to the bottom of the window. (some css hacking involving height: 100% should help) the different sizes feel weird in this case.
- why the performing arts images and instructors? this is for the GRC department, not theater or music. (also, it's GRC, not ART.)
- for your gallery, I would investigate using some sort of lightbox or something. There's plenty of gallery scripts on the web, go find one and use it if you don't want to program something yourself.
- You may want to think about doing something with your "banner". A basic sans serif type with no frills or anything isn't drawing much interest to me.
- similarly, I would dress up your navigation a bit more. You can very easily create buttons with css only (no images) by using the pseudo classes for anchor tags (a:link, a:hover, etc) and the background-color, border, and color properties. In the same vein, to me the mix of serif and sans serif there feels weird to me.

GLHF!

Something that just occurred to me for the transparency thing (although I likely would have done the transparent image solution too) but instead of trying to make separate divs and place them on top of each other (which is more trouble than it's worth) try nesting the divs as you normally would and on the inner div (which actually holds your content) just reassign the value of the opacity property.

Visual aid:
<-- HTML Snippet -->
<div id="transparent">
<div id="opaque">
<p>Content goes here</p>
</div>
</div>

<-- CSS Snippet -->
#transparent { opacity: 0.5; }
#opaque { opacity: 1.0; }

Blue box extending to the bottom of the window: Just tried that. height: 100% did nothing. So then I ALSO added height of 100% to body and html tags (a solution I found on a website) and that didn't work because it tricked the vertical scrollbar into doing a BAD thing... Chris, do you know how to have the div with the blue background extend to the bottom of the screen without messing with the scrollbar?

Why the performing arts images and instructors: Because I copied verbatim the instructors page for the existing GRC website and for some reason they're on there. So I decided to go ahead and use 'em. If the department were actually using my design they could choose whether or not they want them there or gone but for the time being I didn't see a problem with using the existing information.

The gallery: That's a good idea. The eight images are actually in a separate div from the blue, so I might toy with decorating that div.
The banner: Thanks for the advice on that too.

And your idea for nesting the divs: Great idea... I didn't think of actually nesting them... I'm not sure it would have worked but if I'd thought of it it would have been worth trying for sure! Would be great to find out whether the child div can go less transparent than the parent div. Hmm. Might experiment with that.

These are all good ideas and I hope to have time to implement them after preparing the envelope with the turn-in part of the project.

Couple things I noticed as I look at your site as well from a typography stand point. I think you hierarchies are a bit messed up. For instance your navigation text is smaller than your regular body copy. I don't like how the only serif font is your navigation when everything else is sans serif. I'm not sure why you chose to stagger the images of instructors back and forth while keeping the type in the general same location for all. It just looks like a mistake. I think if you're going to go with the staggered look you need to right alight the type to the right aligned images so it makes more sense.

As far as the blue box issue you are having with your blue box. You don't want to use opacity because it effects all child elements within the div you apply it to. Instead when you apply the background color with css use rgba. To make your box go all the way to the top and bottom of the page is just some positioning. below I have written up a quick sample that shows you way to fix your issues assuming that you do want your blue box to go to the top and bottom of the screen.

Here is the html


<div id="pageWrapper">
<div id="blueOpacity">
<p>text</p>
</div><!--blueOpacity-->
</div><!--pageWrapper-->

Here is the css that goes with it commented to help explain if you don't get it.

/*gets rid of white space between page and browser window */
body {
margin:0px;
padding: 0px;
}

/* centers page and sets up width etc. positioned relative
so everything inside will position off of this div */
#pageWrapper {
margin-left:auto;
margin-right: auto;
width: 960px;
position: relative;
}

/* this sets up the ble background. position is set to fixed
so it goes from the top of the page to the bottom with the
background set to a blue at 50% opacity. */
#blueOpacity {
width: 960px;
height: 100%;
background-color: rgba(0,100,255,.5);
position:fixed;
}

Hope it helps.

Wow thanks... I don't think I'll have time to adjust the site before final critique... certainly will if I do have time... but either way I think I'll hang onto that code for future use.
Thanks much!
And I see what you mean about the serif fonts for links. I didn't even notice that my sans serif font styles didn't affect my link bar. I'm not sure why that is but that was actually a mistake. Just fixed it. Thanks.

To all who want to comment on it I did more on it. Don't have time to change the blue box but thanks for telling me how it can be done.

I just got the gallery to popup the images into popup windows.

While that is an easy fix for your problem it puts me back to like the 1990s with the aesthetic look of it. I'm not sure how serious you are about learning good coding or web design but there are much better alternatives to that with open source libraries and plug-ins such as jQuery. For instance I used jQuery and a plug in for my site called fancy box which can be found here... http://fancybox.net/

If you are at all serious you need to get with the times and start implementing newer stuff.

I hope to find the time to do that today but time constraints are becoming an issue.

First, I think that your navigation good use something other than just a text link with bullet points in between them.

Second, I think your blue box is too transparent, the image behind gets mixed up with the text.

Finally, I agree about the size of the blue box, It should at least extend to the bottom of the page.