Had I designed the template, I would have done a few things different. But any shortcomings with the way the template was coded is not your fault.
There are a few things that you can clean up, however. I'll try to make as few changes as possible to the template, but rather to the style sheet. Let's work from the top down.
1. First and foremost, there should never be more than one 'h1' tag per page. You can use as many of the other 'h' tags ('h2' through 'h6') on each page as you like, but not 'h1'. So in other words, 'California Financial Services' should be the only thing between your 'h1' tags.
2. Remove the 'big' tags from your code. Proper styling of the 'h' tags should do the trick.
3. Rather than having the tagline ("Building a better tomorrow, today") designated as an 'h2', I would recommend placing it in a paragraph tag and giving it a class to define it like so:
Code:
<p class="tagline">Building a better tomorrow, today</p>
4. Styling should never be done within the HTML code; keep it all in the CSS file. Remove the style code for the image icons at the top of the page and replace them with a single line of code in the CSS.
Code:
#icons img { border-style: none; border-width: 0; }
5. Remove the 'br' tags from within the slogan area. Also, there is no such thing as an 'st' tag, so get rid of it, as well.
6. This template suffers from div-itis (too many div tags). Nevertheless, if you want the top gray area ('#prec') to expand when you add additional navigational points, you need to remove the height rule.
Code:
#prec { /*height: 220px;*/ margin:0 0 15px; padding: 0 0 20px; background: #f6f6f6; border-bottom: 1px solid #dcdcdc;
overflow: hidden; }
(Note that the height rule is commented out; it can be deleted. I also added some bottom padding to the div so that it will maintain its style no matter how much height is gained.)
7. I adjusted the navigation styles, adding a bit of padding on the right-hand side and making the clickable link area to the be the entire width of the invisible box (instead of just on the link words themselves). I also used CSS to make the navigation links uppercase, rather than having to type everything in all caps in the HTML.
Code:
#wrap #menu a { font: 0.9em/2.2em Arial, sans-serif; background-image: url(images/lm-li.gif);
background-repeat: no-repeat; background-attachment: scroll; background-position: left 50%; padding-left: 25px;
text-decoration: none; text-transform: uppercase; height: 2.2em; padding-bottom: 3px; display: block;50%; }
#wrap #menu li { line-height: 26px; background-image: url(images/li-line.gif); background-repeat: no-repeat;
background-attachment: scroll; background-position: left bottom; margin-right: 15px; list-style: none; }
8. I added styling for an 'acronym' tag, since you continually refer to 'CFS' throughout the site. It's courteous to wrap any acronyms in an acronym tag, like so:
Code:
<p><acronym title="California Financial Services">CFS</acronym> staff includes industry specialists...</p>
I made a few other changes to the page and the CSS, as well, which is why I am attaching them for your reference. I'm sure I didn't catch everything but this should get you headed in the right direction. My code should be a bit tighter, size-wise, and should now validate (the old code didn't).
In answer to your third question, you can assign the body tag on each page a specific #id, like so...
Code:
<body id="home">
or
<body id="services">
You can then reference specific parts of those pages like so:
Code:
body#services #prec { css rules go here }
So in layman's terms, you're basically creating a rule specifically for the #prec div on the #services page.
Edit : Sidescrolling is bad, mmk?
(I edited your code segments by adding linebreaks to the some of the lines. This 'wrapped' the long text to the next line, which allowed the bbs formatting to be preserved and eliminate side-scrolling on most sane resolutions. Your code should still be 100% functional if copy pasted.)
--_l0ser
Previous Topic
Index
