View Single Post
  #3   Spotlight this post!  
Unread 11-10-2011, 13:26
Q. Sheets's Avatar
Q. Sheets Q. Sheets is offline
Student - Web Enthusiast
AKA: Quentin Sheets
no team (FIRST Chat)
Team Role: College Student
 
Join Date: Nov 2005
Rookie Year: 2004
Location: Rochester, MI, USA
Posts: 108
Q. Sheets has a spectacular aura aboutQ. Sheets has a spectacular aura about
Re: IT Web Design Noob in need of help.

You've made a great start. A few things I would suggest:

Try not to use serif fonts (Times, Century, etc.) on dark backgrounds as they tend to be hard to read.

Don't use <table> where it isn't necessary. There a some places where I noticed tables holding headers and paragraphs when the semantic tag (h1, h2, h3, p, and the like) would've been sufficient. You could also float the dates of the news postings off to the right and images to the left. For example:

Code:
<h3 style="border-top: 1px solid #C5C5C5; border-bottom: 1px solid #C5C5C5;"><span style="float: right;">10.8.2011</span><a href="/internalpages/newsarchive/article0000002.html">Build 2 Update 1 Now Live!</a></h3>

<div style="float:left; width:150px;">
    <img src="_images/newsbuttons/webnews.jpg" alt="state fair pic" width="135" height="136" align="absmiddle" />
    <p style="font-size:9px; text-align: center;"><em>New Website Build</em></p>
</div>

<p>The IT Department has Launched Website Build 2 Update 1! To read more about what it includes and what it means to you, click the title.</p>
Last, but not least, I noticed that on the sponsors page, some of the text went below the bottom of the content area and into the footer. There is a way to prevent this in a 2-column layout without having to define a definite height for the content box. What you do is set a container up as the main box (with the same background/border as the sidebar) and put the 2 inside it. The content will push it down and make the sidebar appear longer, when it really isn't. To do this, here's an example:

CSS:
Code:
#wrapper {
    background: #900;
    border: 3px solid #000;
    border-bottom: none;
    width: 960px;
}
.sidebar {
    float: left;
    font: Georgia, "Times New Roman", Times, serif;
    font-size:18px;
    padding: 0 5px;
    width: 135px;
}
.content {
    background:#FFF;
    border-left: 3px solid #000;
    float: left;
    min-height: 640px; // set this to a height greater than that of your sidebar by at least 25px
    padding: 5px;
    width: 802px;
}
HTML:
Code:
<div id="wrapper">
    <div class="sidebar">
        <!-- Sub-navigation, extras go here -->
    </div>
    <div class="content">
        <!-- Gimme all your content -->
    </div>   
</div>
Hope this helps,
Q. Sheets
__________________
You should follow me on Twitter, here

Our first endeavors are purely instinctive prompting of an imagination vivid and undisciplined. As we grow older reason asserts itself and we become more and more systematic and designing. But those early impulses, though not immediately productive, are of the greatest moment and may shape our very destinies. --Никола Тесла