PDA

Click to See Complete Forum and Search --> : is this looking ok so far?

dyers78
02-27-2007, 05:15 PM
redoing a site using css - Before I get to hot n' heavy I wanted to make sure I am doing this right. Feel free to make any suggestions. It looks good so far when I preview it but I have a long way to go before it's done.

Thanks


<!DOCTYPE html PUBLIC "?//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http?equiv="content?type" content="text/html;charset=utf?8" />
<title>United Way of the Quad Cities Area</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<div id="main">
<div id="container">

<div id="heading">
<h1>United Way<br />of the Quad Cities Area</h1>
</div>
<div id="highlights">
<p>The shuttle's seven astronauts are on a mission to rewire the international space station, one leg of a three-year race to finish construction on the orbiting outpost before shuttles are retired in 2010.</p>
<p>The illumination from the shuttle turned night into day for spectators at the Kennedy Space Center.</p>
<p>A cloudy sky with blustery winds earlier in the day gave way to clear skies and a gentle breeze at launch time. Low clouds forced the space agency to scrub an attempt Thursday night during a countdown that ran down to the wire.</p>
<p>Managers decided not to try again Friday because the forecast looked even worse.</p>
<p>The shuttle's seven astronauts are on a mission to rewire the international space station, one leg of a three-year race to finish construction on the orbiting outpost before shuttles are retired in 2010.</p>
<p>The illumination from the shuttle turned night into day for spectators at the Kennedy Space Center.</p>
<p>A cloudy sky with blustery winds earlier in the day gave way to clear skies and a gentle breeze at launch time. Low clouds forced the space agency to scrub an attempt Thursday night during a countdown that ran down to the wire.</p>
<p>Managers decided not to try again Friday because the forecast looked even worse.</p>
</div>
<div id="news">

<div id="children">
<h1>Successful<br />
Children &amp; Youth,</h1>
</div>

<div id="community">
<h1>Caring Community</h1>
</div>

<div id="families">
<h1>Strong Families</h1>
</div>

<div id="reliantPeople">
<h1>Healthy,<br />
Self-Reliant People</h1>
</div>

</div>
</div>

<div id="nav">
<ul>
<li><img src="img/SiteWide/uw_rgb_ful_qc.gif" alt="" height="79" width="109" border="0" /></li>
<li>Get Involved</li>
<li><a href="#">Calendar of Events</a></li>
<li><a href="#">Rsvp for a Meeting/Event</a></li>
<li><a href="#">Day of Caring</a></li>
<li><a href="#">2006 Campaign Updates</a></li>
<li><a href="#">40 Developmental Assets</a></li>
<li><a href="#">Volunteer Opportunities</a></li>
</ul>
</div>

<div id="footer">
<p>copyright 2007 United Way of the Quad Cities Area</p>
</div>

</div>

</body>

</html>



css:


body {background-color: #fff; background-image: url(../img/SiteWide/MainBG.gif); background-repeat: repeat-x;}

/*general navigation links */
a:link { color: blue ;}
a:visited { color: purple ;}
a:hover { color: purple ;}
a:active { color: red ;}





/* main container centering all content*/
#main {width: 900px; margin-top: 15px; text-align: left; margin-left: auto; margin-right: auto;}

/* container holding left content */
#container {float: left; width: 698px; background-color: #fff; text-align: left; border: 1px solid #999;}

/* heading */
#heading {height: 115px; width: 700px;}
#heading h1 {font-family: Arial san-serif; font-size: 13pt; color: #0E2F80; padding: 25px 0 0 21px; line-height: 12pt;}

/* highlighted stories */
#highlights {width: 690px; border-top: 1px solid #999; border-bottom: 1px solid #999; margin: 0px 4px;}
#highlights p {font-family: Arial san-serif; font-size: 11px; color: #999;}




/* overall container for focus group news boxes */
#news {float: left; text-align: center; margin: 4px 0px;}

/* successful children and youth box*/
#children {width: 160px; height: 125px; float: left; border-right: 1px solid #999; padding: 5px}
#children h1 {text-align: left; font-family: Arial san-serif; font-size: 10px; font-weight: bold; color: #d12c1d}

/* caring community box */
#community {width: 160px; height: 125px; float: left; border-right: 1px solid #999; padding: 5px}
#community h1 {text-align: left; font-family: Arial san-serif; font-size: 10px; font-weight: bold; color: #d12c1d}

/* strong box */
#families {width: 160px; height: 125px; float: left; border-right: 1px solid #999; padding: 5px}
#families h1 {text-align: left; font-family: Arial san-serif; font-size: 10px; font-weight: bold; color: #d12c1d}

/* healthy self reliant people box */
#reliantPeople {width: 160px; height: 125px; float: left; padding: 5px}
#reliantPeople h1 {text-align: left; font-family: Arial san-serif; font-size: 10px; font-weight: bold; color: #d12c1d}





/* container holding main navigation */
#nav {float: left; width: 180px; padding-left: 20px; text-align: left; line-height: 25px;}
#nav li {list-style: none; font-family: Arial san?serif; font-size: 11pt; text-align: left; line-height: 16px;}
#nav ul {font-weight: bold; font-family: Arial san?serif; color: #03c; font-size: 11px; text-decoration: none; margin: 0; padding: 0;}
#nav ul img {margin: 23px 0 50px 0px;}

#nav a:link {font-family: Arial san?serif; color: #03c; font-size: 11px; text-decoration: none;}
#nav a:visited {font-family: Arial san?serif; color: #03c; font-size: 11px; text-decoration: none ;}
#nav a:hover {font-family: : Arial san?serif; color: #000; font-size: 11px; text-decoration: none ;}
#nav a:active {font-family: Arial san?serif; color: #000; font-size: 11px; text-decoration: none ;}


/* container holding footer */
#footer { float: left; border: 1px solid #999; text-align: left; width: 698px; margin-top: 5px}
#footer p {font-family: Arial; font-size: 7pt; color: #999; padding-left: 25px}
John G
02-28-2007, 04:34 PM
Looks alright to me (but I'm by no means an expert, so... ;))

When I'm doing my sites I usually, rather than make each section have it's own CSS properties, I try and create more of a "palette" of classes that each section draws from. That way if I have to change a body copy size, I change one line only, and if it needs extra formatting, use another div tag (which I can hopefully use in other instances in the site). Sorta like "#highlights p", if that text style is going to be used for all your body copy, you could define it "p[textisthisandcolor]" and just have your extra formatting considerations in "#highlights[]".
dyers78
03-01-2007, 04:02 PM
makes sense. I read a couple books and played with css here and there about three months ago. I got pulled away and am now back. Seems I forgot the details I learned a few months back.

Thanks for the comment.