Subcide

8. Some basic text styles

Sweet jesus! Are you sick of looking at those awful background colours or what?!

Get rid of them. Rip them all out except for the red navigation.

That looks a little better, but the text still looks horrible. Lets set a global font family, colour, and size to use as a nice base. The font attributes we set on the body will automatically inherit down to any other text in the site unless specifically overridden with another style. Make a new CSS rule just before the "hidden" class near the top of the stylesheet:

body {
	font-family: Arial, Helvetica, Verdana, Sans-serif;
	font-size: 12px;
	color: #666666;
	background: #ffffff;
}

The stuff above is pretty self explainitory.

If everything is going according to plan, you should be looking at something like this:

What this needs is some padding to separate those blocks of content from each other.

According to the design, the gap below the content headings is roughly 15px, and the gaps below each paragraph are around 15px. So lets grab those 2 css rules we made earlier and apply padding-bottom rules to them:

#content h2 {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
}

#content p {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
}

We also need 25px of padding around the whole content div, and the whole padding div, giving them some space to breath.

This part SHOULD be easy. In theory you would just set padding: 25px; on the divs, but sadly, due to problems in Internet Explorer, we can't do this.

The IE problem is described in detail here.

There are 2 possible ways to tackle this problem, one involves writing some funky CSS "Hacks" to hide certain css rules from one browser, while showing it to another, but because padding is something we use a lot, we're going to do it the other way.

The other way is to insert an additional div inside the divs which we want padded, and set their class to "padding". Padding is the only thing that will be applied to these padding divs.

The reason this works is that the padding divs don't have a set width. As a rule, try not to add padding and a static width or height on the same element.

<div id="sidebar-a">
	<div class="padding">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
		Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
		Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
		euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
		Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
		purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
	</div>
</div>

Do the same for the content div.

Now in the stylesheet we will create 2 new rules, shown here in green:

#sidebar-a {
	float: right;
	width: 280px;
}

#sidebar-a .padding {
	padding: 25px;
}

#content {
	margin-right: 280px;
}

#content .padding {
	padding: 25px;
}

Using the same method as we did before, we have selected only the elements with a class="padding" that are children of the #sidebar-a, or #content divs.

The leading (vertical space between lines of text) on the content text and sidebar text should be larger, according to the graphic draft. In CSS, leading is set with the line-height attribute. Lets add a line height of 18px:

#sidebar-a {
	float: right;
	width: 280px;
	line-height: 18px;
}

#content {
	margin-right: 280px;
	line-height: 18px;
}

Moving on, the heading <h2>'s that we added look pretty ugly. Because the font they are using isn't a web font, we are going to have to replace them with images. Create 2 images like the ones below, and put them in the /images/headings/ directory

Replace the heading text with these images, but remember to keep the <h2> tags around the image tags, and remember to put alt attributes on the images. Alt attributes are designed to display as an alternative to the image if a user is viewing the page in a browser that does not support images, or has images turned off. It is also useful for search engine spiders, as they can not understand images.

<h2><img src="images/headings/about.gif" width="54" height="14" alt="About" /></h2>

<h2><img src="images/headings/contact.gif" width="98" height="14" alt="Contact Us" /></h2>

Its starting to take shape. You should be looking at something like this: