All posts tagged CSS

Creating a Web Page Layout with Blueprint CSS

by The Web Squeeze on January 11, 2010 in Tutorials with 6 Comments

Blueprint CSS is a framework designed to make web page layout easy–even for CSS newbies. Its strength is providing tools to build CSS columns that make the much frowned-upon practice of layouts with HTML tables unnecessary.

Create a basic layout

Before you start creating your first basic page layout with Blueprint, bear this fact in mind: Blueprint’s default number of columns per page is 24. All your column definitions should add to that number.

The layout we’ll use has a header and footer that spans the width of your page, but that you can configure to fit your needs.

Here’s the layout for our example:

1

Let’s implement that layout with Blueprint: download Blueprint from blueprintcss.org and unzip it. In the “parts” subfolder under the main Blueprint node, open a new HTML document in the editor of your choice.

Enter this markup in that document:


<html>
<head>
  <link rel=&quot;stylesheet&quot; href=&quot;../../blueprint/screen.css&quot;
  type=&quot;text/css&quot; media=&quot;screen, projection&quot; />
</head>

<body>
  <div class=&quot;container&quot;>
    <h1>put header here</h1>
    <hr />

    <div class=&quot;span-6&quot;>
      Column1
      <p>ENTER SEVERAL SAMPLE PARAGRAPHS HERE.</P>
    </div>

    <div class=&quot;span-12&quot;>
      Column 2
      <p>ENTER SEVERAL SAMPLE PARAGRAPHS HERE.</P>
    </div>

    <div class=&quot;span-6 last&quot;>
      Column3
<p>ENTER SEVERAL SAMPLE PARAGRAPHS HERE.</P>
    </div>
    <hr />

    <div>
      Footer
    </div>
  </div><!-- main container class -->
</body>
</html>

Walk through the code

We link to the Blueprint CSS files in the page’s . The key parts of the body start with the first div, which uses the “container” class. That div encloses the remaining divs in the page. We layout all our columns in the form of div elements inside that main div.

The markup between that first div and the second is where your page header goes. Place the first column of the body in the second div element. This element is where you start defining column widths by using classnames in this form: “span-[n]“, where n is the number of Blueprint-defined columns you want the column to span.

Do the Span Math

Our layout diagram tells us that the first column is 6 Blueprint-columns wide, so our div’s class name will be “span-6″. Our second column is 12 Blueprint-columns wide, so the div for that column uses the class “span-12.”

Blueprint needs to know which column is our last. We give it that info by indicating, in our layout’s last column, the “last” classname as follows:

.

If you haven’t displayed your page in a browser yet, do so now and see how you like Blueprint’s style.

Example two: reconfiguring the columns

Now let’s split the previous layout’s inner column into two columns, so you can better see how to manipulate columns in Blueprint. Here’s the layout we’re going for:

2

For this example, the head element of our page stays the same. Here’s the markup for the body element:
<body onload=&quot;inish();&quot;>
  <div class=&quot;container&quot;>
<h1>put header here</h1>
<hr />

<div class=&quot;span-6&quot;>
Column1
<p>ENTER A FEW <P> PARAGRAPHS OF SAMPLE TEXT HERE.</P>
</div>

<div class=&quot;span-6&quot;>
Column 2
</div>

<div class=&quot;span-6&quot;>
Column 2
</div>

<div class=&quot;span-6 last&quot;>
Column3
</div>
<hr />

<div>
Footer
</div>
</div><!-- main container class -->
</body>
</html>
All we did here was split up the one “span-12″ div into two “span-6″ divs. Notice that the columns still add to 24, Blueprint’s default.

Nested Columns

Try a layout with nested columns. Let’s design the layout first.
3

The div for the header is a no-brainer:

. You put the “last” class because there are no other columns in the header, just the one.

Make the div for column one a bit less than half the total column width of 24: 10 columns should do, so its div element is
.

Column two needs to take up the remainder of the 24 columns, so its class is 24 minus 10: “span-14,” and tack on the “last” class because column two is last in its row.

Columns 2.1 and 2.2 fit inside column two, so their column widths need to span only to column two’s width: 14. Their classes both contain “span-7,” with col2.2′s having the “last” added to it.

The footer, which is the last div, spans 24 columns, so its class attribute is “span-24 last.”

The markup, with a JavaScript tool to fill text

Here’s the full source that creates the layout just given.
<html>
<head>

<link rel=&quot;stylesheet&quot; href=&quot;../../blueprint/screen.css&quot;
type=&quot;text/css&quot; media=&quot;screen, projection&quot; />

<script type=&quot;text/javascript&quot;>

//<![CDATA[
function makeDummyText (){
//put dummy paragraphs in each div of the document
var divs = document.getElementsByTagName(&quot;div&quot;);
var s = &quot;&quot;;
var j;
 var sSampleText = &quot;<P>If you are just learning to \
pick out melodies and play them on a musical &quot;;
sSampleText += &quot;instrument, and *if those melodies are \
confined just to C major,* you will begin&quot;;
sSampleText += &quot;playing melodies on the piano so \
quickly it will make your head spin. Do you know why? </P>&quot;;
sSampleText += sSampleText + sSampleText;

for (var i=0; i< divs.length; i++) {
//s += divs[i].innerHTML ;
j = divs[i];
j.innerHTML =  j.innerHTML + sSampleText;
}
}//makedummytext

function inish() {
makeDummyText();
}//inish
//]]>
</script>
</head>

<body onload=&quot;inish();&quot;>
<div class=&quot;container&quot;>
<div class=&quot;span-24 last&quot;>
<p>Header</p>
</div>

<div class=&quot;span-10 showgrid&quot;>
<p>Col 1</p>
</div>

<div class=&quot;span-14 last showgrid&quot;>
<p>Col 2</p><!-- nested columns here -->

<div class=&quot;span-7 showgrid&quot;>
<p>Col 2.1</p>
</div>

<div class=&quot;span-7 last showgrid&quot;>
<p>Col 2.2</p>
</div>

<p>Auto-filled text will come here</p>
</div>

<div class=&quot;span-24 last&quot;>
<p>Footer</p>
</div>
</div>
</body>
</html>
Notice the “showgrid” class in this code. Using that class displays a grid we can use to debug our layout. Delete “showgrid” when you’re satisfied with the layout.

Our source also contains a JavaScript function, makeDummyText(), that creates some sample text for us. Using this utility not only saves you from entering filler text yourself, but also keeps your CSS markup nice and clear, so you can see your column structure clearly.

The makeDummyText() function, as written, places all existing HTML markup first and adds the filler text after. If you want to place the filler text before the existing HTML, just switch this line:

j.innerHTML = j.innerHTML + sSampleText;

And replace it with the following:

j.innerHTML = sSampleText + j.innerHTML;

References

Blueprint Tutorials

Resources

Boks: Visual Grid Editor for Blueprint

A Roundup Of 25 Advanced CSS Tips And Tutorials

by The Web Squeeze on November 6, 2009 in Articles, Tips & Tricks, Tutorials with 17 Comments

Web-design has evolved greatly in the past couple years, thanks to all the great CSS tutorials out there. Of course now that browsers like Safari/webkit and Firefox/moz support some CSS3 properties, we’re seeing more and more designers use those newer techniques. Today I’d like to share with you some great CSS (and CSS3) tips, techniques and tutorials.

I hope you enjoy this post! Please make sure you stop by the comment section and feel free to share with us some tips and tutorials I may have missed. This is by no means a complete list of course.


How To Create A Pure CSS Polaroid Photo Gallery

How To Create A Pure CSS Polaroid Photo Gallery

Advanced CSS Menu Trick

Advanced CSS Menu Trick

Active State In CSS Navigations

Active State In CSS Navigations

A Festive Type Folly

A Festive Type Folly

Sticky (Fixed) SideNav Layout With CSS

Sticky Fixed SideNav Layout With CSS

Style A List with One Pixel

Style A List with One Pixel

Guidelines For Developing Your Own CSS Framework

Guidelines For Developing Your Own CSS Framework

How To Distribute Elements Horizontally Using CSS

How To Distribute Elements Horizontally Using CSS

The Mystery Of CSS Sprites: Techniques, Tools And Tutorials

The Mystery Of CSS Sprites: Techniques, Tools And Tutorials

How To Add Variables To Your CSS Files

How To Add Variables To Your CSS Files

CSS Absolute Positioning: Create A Fancy Link Block

CSS Absolute Positioning: Create A Fancy Link Block

The Mystery Of The CSS Float Property

The Mystery Of The CSS Float Property

Elastic Calendar Styling With CSS

Elastic Calendar Styling With CSS

Using Rounded Corners With CSS3

Using Rounded Corners With CSS3

8 Premium One Line CSS Tips

8 Premium One Line CSS Tips

Guide To CSS Font Stacks: Techniques And Resources

Guide To CSS Font Stacks: Techniques And Resources

Nicer Navigation With CSS Transitions

Nicer Navigation With CSS Transitions

Absolute Columns

Absolute Columns

CSS Sprites: What They Are, Why They Are Cool, And How To Use Them

CSS Sprites: What They Are, Why They’re Cool, And How To Use Them

The Z-Index CSS Property: A Comprehensive Look

The Z-Index CSS Property: A Comprehensive Look

Horizontal Subnav With CSS

Horizontal Subnav With CSS

Create A Letterpress Effect With CSS Text-Shadow

Create A Letterpress Effect With CSS Text-Shadow

Vertically Center Multi-Lined Text

Vertically Center Multi-Lined Text

Elegant Drop Menu With CSS Only

Elegant Drop Menu With CSS Only

CSS Selectors: A Guide To The Common And The Rare

CSS Selectors – A Guide To The Common And The Rare

Your Turn Now!

I hope you have enjoyed this post! Please don’t forget to share your own findings with the rest of us in the comment section below! :)

From Photoshop to WordPress – Part II – Coding

by The Web Squeeze on October 19, 2009 in Tutorials with 29 Comments

Here is Part II of our “From Photoshop to WordPress” series. In Part I – Design, we looked at how to make a nice grungy-looking blog design in Photoshop. Today, we’ll be looking at slicing that design and coding it in HTML.

The great thing about Photoshop (and most high-end graphics programs) are the layers. Putting elements on different layers will help you tremendously when comes the time to slice that design up for the web. And so here we go. Let’s get this thing rolling.

Laying down the mark-up

So, let’s start off with some default code for a basic 2 column layout with header and footer. Our layout will be a fixed layout, meaning that it will not stretch depending on the visitors’ browsers’ resolution.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA">

<head>
	<title>Some title</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>

<div id="header">
        <div id="navigation"></div>
        <div id="branding"></div>
        <div id="categories"></div>
</div>

<div id="content"></div>

<div id="sidebar"></div>

<div id="site-info"></div>

</body>
</html>

It can’t get more simple than that. It’s pretty bare-bone and that’s how we start the mark-up, just like we did in the tutorial A websites’ structure from A to Z, then we will go and put all our content in and then we will deal with styling it and adding backgrounds, colors and fonts.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA">

<head>
	<title>Some title</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<!-- header -->
<div id="header">

<!-- navigation -->
<div id="navigation">
	<ul class="left">
		<li><a href="">Home</a></li>
		<li><a href="">About</a></li>
		<li><a href="">Archives</a></li>
		<li><a href="">Contact</a></li>
	</ul>
	<ul class="right">
		<li><a href="" class="rss-link">RSS</a></li>
	</ul>
</div>
<!-- END OF navigation -->

<!-- branding -->
<div id="branding"><h1>Eroded by Time</h1></div>

<!-- categories nav -->
<div id="categories">
	<ul>
		<li><a href="">CatOne</a></li>
		<li><a href="">CatTwo</a></li>
		<li><a href="">CatThree</a></li>
		<li><a href="">CatFour</a></li>
		<li><a href="">CatFive</a></li>
	</ul>
</div>
<!-- END OF catories nav -->

</div>
<!-- END OF header -->

<!-- content -->
<div id="content">

	<!-- post featured -->
	<div class="post featured">
		<h2>Lorem ipsum dolor sit amet</h2>
		<p class="post-date">Posted August 17th, 2008</p>
		<div class="post-content">
			<p><img src="" class="post-thumb" alt="Lorem ipsum dolor sit amet" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
imperdiet. Sed ullamcorper varius nibh. Vestibulum augue. Aenean id justo. Nullam sit amet lectus. In odio. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Nam feugiat.
Quisque nibh nibh, scelerisque ac, ultrices ut, iaculis at, ligula. Duis tempor odio in ipsum.</p>
			<p>Donec condimentum eros a tellus. Phasellus mauris. Aenean magna. Pellentesque enim ante, hendrerit
sed, luctus ut, tempor in, lacus. Aliquam erat volutpat. Nam semper enim et enim. Sed sagittis nisi a urna. Proin mattis
neque. Vivamus faucibus ipsum eu augue. Proin diam dui, posuere eu, posuere eu, elementum vel, diam.</p>
			<p class="post-continue"><a href="">Continue reading ...</a></p>
		</div>
	</div>
	<!-- END OF post featured -->

	<!-- post -->
	<div class="post">
		<h2>Lorem ipsum dolor sit amet</h2>
		<p class="post-date">Posted August 17th, 2008</p>
		<div class="post-content">
			<p><img src="" class="post-thumb" alt="Lorem ipsum dolor sit amet" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
imperdiet. Sed ullamcorper varius nibh. Vestibulum augue. Aenean id justo. Nullam sit amet lectus. In odio. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Nam feugiat.
Quisque nibh nibh, scelerisque ac, ultrices ut, iaculis at, ligula. Duis tempor odio in ipsum.</p>
			<p class="post-continue"><a href="">Continue reading ...</a></p>
		</div>
	</div>
	<!-- END OF post -->

	<!-- post -->
	<div class="post">
		<h2>Lorem ipsum dolor sit amet</h2>
		<p class="post-date">Posted August 17th, 2008</p>
		<div class="post-content">
			<p><img src="" class="post-thumb" alt="Lorem ipsum dolor sit amet" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
imperdiet. Sed ullamcorper varius nibh. Vestibulum augue. Aenean id justo. Nullam sit amet lectus. In odio. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Nam feugiat.
Quisque nibh nibh, scelerisque ac, ultrices ut, iaculis at, ligula. Duis tempor odio in ipsum.</p>
			<p class="post-continue"><a href="">Continue reading ...</a></p>
		</div>
	</div>
	<!-- END OF post -->

	<!-- page-navigation -->
	<div class="page-navigation">
		<div class="left"><a href="">Older Posts</a></div>
		<div class="right"><a href="">Newer Posts</a></div>
	</div>
	<!-- END OF page-navigation -->
</div>
<!-- END OF content -->

<!-- sidebar -->
<div id="sidebar">

	<!-- sidebar-ads -->
	<div class="sidebar-ads">
		<a href=""><img src="" /></a>
		<a href=""><img src="" /></a>
		<a href=""><img src="" /></a>
		<a href=""><img src="" /></a>
	</div>
	<!-- END OF sidebar-ads -->

	<!-- sidebar-search -->
	<div class="sidebar-search">
		<form action="">
			<p><input type="text" name="search" /> <input type="submit" value="Search"/></p>
		</form>
	</div>
	<!-- END OF sidebar-search -->

	<!-- sidebar-tags -->
        <h4>Tags</h4>
	<div class="sidebar-tags">
		<ul>
			<li><a href="">Bloggers</a></li>
			<li><a href="">CSS</a></li>
			<li><a href="">Miscelaneous</a></li>
			<li><a href="">Standards</a></li>
			<li><a href="">Web Design</a></li>
		</ul>
	</div>
	<!-- END OF sidebar-tags -->

	<!-- sidebar-pop-posts -->
        <h4>Popular Posts</h4>
	<div class="sidebar-pop-posts">
		<ul>
			<li><a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Lorem ipsum dolor sit amet</a></li>
		</ul>
	</div>
	<!-- END OF sidebar-pop-posts -->

	<!-- sidebar-comments -->
        <h4>Recent Comments</h4>
	<div class="sidebar-recent-com">
		<ul>
			<li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li>
		</ul>
	</div>
	<!-- END OF sidebar-comments -->

</div>
<!-- END OF sidebar -->

<!-- site-info -->
<div id="site-info">

	<div class="left">
		<p>Copyright 2008 - Karinne Legault</p>
		<p>Hosted by <a href="">Hosting Company</a> / Powered by <a href="http://www.wordpress.org">Wordpress</a></p>
	</div>
	<div class="right">
		<ul>
			<li><a href="">Home</a></li>
			<li><a href="">About</a></li>
			<li><a href="">Archives</a></li>
			<li><a href="">Contact</a></li>
			<li><a href="">RSS</a></li>
		</ul>
	</div>
</div>
<!-- END OF site-info -->
</body>
</html>

There! Mark-up is pretty much done. We will probably come back to it to either adjust/change the names of some of our classes or ID’s, or even add some but for now, this has pretty much all the important components.

Slicing it up

Back in the days when tables for layout were everybody’s business, we could go in Photoshop and use the Generate HTML with the slicing tool. But then that generates an insane amount of images and deprecated code so we will be staying well clear of that and instead, we’ll do it by hand.

I can hear the exasperated sigh’s from here. The way I look at it, we only need to slice/copy/cut 6 images. Yep… not 50, like the generator would normally give you, but 6, six, seis. One for the main grungy background (1), one for the top navigation (2), one for the header (3), one for the logo (4), one for the category menu (5) and one for the footer (6). That’s it. The rest are icons that we have already downloaded from pinvoke so we don’t need to touch those.

Ready? Let’s get started!

Our main background

As I previously stated, the great things about Photoshop (and most advanced graphics programs) is the layers and the ability to hide/show them at will. So in order to get out background, we’ll hide pretty much everything in our document.

Now it’s just a matter of flattening the layers and saving it to main-bg.jpg

Header

Now we need to get that checkered background. And we want it as a transparent file so the grunge from our main background image will show through. So, like we did with the main background, we’ll hide all the layers except those making the grungy checkered image.

So you’ll end up with something like this

To get our image, we’ll change the Canvas Size to 1000px x 235px

And save that image as a Transparent PNG named header-bg.png

Top navigation

Since our top navigation has a slight gradient effect, we need a background image for that as well. We don’t need a big image for this. Only 5px x 55px will suffice.

So you would end up with this and save it as top-nav-bg.jpg

Branding

Here want simply the title to show up against a transparent background. So what we will do is open up a new document of 350px x 60px

and put our title in there using the same font (Times New Yorker – 48px) and save that as branding.png

Category menu

Pretty simple now that we’ve done a few already. Here we’ll hide everything except our image that makes up that grungy background.

Now, by hitting Command+Mouse click (ctrl+right mouse-click in Windows) on that Layer 7 copy, it automagically hightlights everything I need.

Then I copy, create new file, paste and voilà, my category background. I just need to set the Opacity to 65% and I’m off to the races. Let’s save that one as cat-nav-bg.png

Footer

For our footer, we’ll be using the same technique we used for our category navigation background. So ctrl+right-click on the footer layer, and paste in a new file, change the opacity to 15% and we’re done. We’ll save this last one as footer-bg.png.

And now we’ve got all our images so we’re ready to go ahead and put it all together.

Creating the stylesheet and putting it all together

First thing we need to take into consideration is that our original canvas was 1000 pixels in width so we will want to contain certain parts of our content in a 960 pixels space. We will make adjustments to our mark-up as we go along and add wrapper div’s.

First things first, let’s add a link to our stylesheet in the our mark-up:

<head>
	<title>Some title</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	<link rel="stylesheet" media="screen" href="css/styles.css" />

</head>

Now let’s remove the default borders around the page. We’ll also go ahead and add our main background to the body element as well as font sizes and family, and text colors.

html, body {
	margin: 0;
	padding: 0;
}

body {
       font: 12px/16px Verdana, Geneva, sans-serif;
       color: #000;
       background: url(../i/main-bg.jpg) repeat 0 0;
}

Header

For our header, all we need to set here is the grungy checkered background and we’ll center it to stay in our 960px width with the rest of the content.

/*** header
****************************************/
#header {
	background: url(../i/header-bg.png) no-repeat top center;
	height: 235px;
	overflow: hidden;
}

Notice that we’ve set a height (235px) as well as the overflow: hidden property to clear the floats from our navigation.

Navigation

Our top navigation has a slight gradient which we have sliced up from our Photoshop file and we have one part of our navigation on the left and one to the right. Not sure if you’ve notice in the mark-up but those 2 classes that I have used in there (.left and .right), I also use them in a few more spots so we’ll set up a “Common class and ID” section in our CSS where we will put those 2 classes as well as styles for links, etc….

/*** common styles
****************************************/
.left {
	float: left;
}

.right {
	float: right;
}

Since we will want to contain our navigation in a 960px space, we will add a wrapper div to our navigation.

<!-- navigation -->
<div id="navigation">
<div id="navigation-wrapper">
	<ul class="left">
		<li><a href="">Home</a></li>
		<li><a href="">About</a></li>
		<li><a href="">Archives</a></li>
		<li><a href="">Contact</a></li>
	</ul>
	<ul class="right">
		<li><a href="" class="rss-link">RSS</a></li>
	</ul>
</div>
</div>
<!-- END OF navigation -->

Our black bar with the gradient we want to have it stretch the width of the browsers’ viewport so it’s only the links that we want to contain.

/*** navigation
****************************************/
#navigation {
	background: #2c2c2c url(../i/top-nav-bg.jpg) repeat-x 0 0;
	height: 55px;
}

#navigation-wrapper {
	width: 960px;
	margin: 0 auto;
	padding: 15px 0 0 0;
}

#navigation-wrapper .left {
	width: 400px;
}

#navigation-wrapper .right {
	width: 80px;
	text-align: right;
}

#navigation-wrapper ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#navigation-wrapper ul li {
	float: left;
	display: inline;
	margin: 0 20px 0 0;
	padding: 0;
}

#navigation-wrapper ul li a {
	color: #fff;
	font: 14px Georgia, serif;
	text-decoration: none;
	text-transform: uppercase;
}

#navigation-wrapper ul li a:hover {
	text-decoration: underline;
}

#navigation-wrapper ul li a.rss-link {
	background: url(../i/icons/feed.png) no-repeat 0 0;
	padding: 0 25px;
}

Branding

Our heading has that square tiled background as well as the custom font so we’ll be using an image for this. We’ll set our image in an &ht;h1<>/h1< for SEO purposes and for the visually impaired, the text we will put in the >img alt="text" /< will be read.

So let’s go ahead and change this line here:

<!-- branding -->
<div id="branding"><h1>Eroded by Time</h1></div>

…to incorporate our logo and a link back to the home page as well.

<!-- branding -->
<div id="branding"><h1><a href=""><img src="i/branding.png" width="350" height="60" alt="Eroded by Time" />&amp;l;/a></a></h1></div>

Category menu

This is where our categories for our blog posts will be showing up on our pages. In our “Slicing up” section, we created a jagged background that we’ll be repeating horizontally. Like our navigation at the top, we will want to contain this in a 960px zone and for this we’ll need to add a wrapper div to do this.

<!-- categories nav -->
<div id="categories">
<div id="categories-wrapper">
	<ul>
		<li><a href="">CatOne</a></li>
		<li><a href="">CatTwo</a></li>
		<li><a href="">CatThree</a></li>
		<li><a href="">CatFour</a></li>
		<li><a href="">CatFive</a></li>
	</ul>
</div>
</div>
<!-- END OF categories nav -->

We’ll use much of the same code as with our nav.

/*** cateogies
*******************************/
#categories {
	background: url(../i/cat-nav-bg.png) repeat-x 0 0;
	height: 80px;
}

#categories-wrapper {
	width: 960px;
	margin: 0 auto;
	padding: 30px 0 0 0;
}

#categories-wrapper ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#categories-wrapper ul li {
	float: left;
	display: inline;
	margin: 0 20px 0 0;
	padding: 0;
}

#categories-wrapper ul li a {
	color: #363636;
	font: bold 18px Verdana, Geneva, sans-serif;
	text-decoration: none;
	text-transform: uppercase;
}

#categories-wrapper ul li a:hover {
	text-decoration: underline;
}

And that concludes our header section! Hooray!

On to the next section: content

Content

Before we start diving into our content, we’ll need to add another wrapper div around the content and sidebar to contain both those elements in a 960px area.

<!-- END OF header -->

<!-- content-wrapper -->
<div id="content-wrapper">

<!-- content -->
<div id="content">

	<!-- post featured -->
	<div class="post featured">
		<h2>Lorem ipsum dolor sit amet</h2>
		<p class="post-date">Posted August 17th, 2008</p>
		<div class="post-content">
			<p><img src="" class="post-thumb" alt="Lorem ipsum dolor sit amet" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
imperdiet. Sed ullamcorper varius nibh. Vestibulum augue. Aenean id justo. Nullam sit amet lectus. In odio. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Nam feugiat.
Quisque nibh nibh, scelerisque ac, ultrices ut, iaculis at, ligula. Duis tempor odio in ipsum.</p>
			<p>Donec condimentum eros a tellus. Phasellus mauris. Aenean magna. Pellentesque enim ante, hendrerit
sed, luctus ut, tempor in, lacus. Aliquam erat volutpat. Nam semper enim et enim. Sed sagittis nisi a urna. Proin mattis
neque. Vivamus faucibus ipsum eu augue. Proin diam dui, posuere eu, posuere eu, elementum vel, diam.</p>
			<p class="post-continue"><a href="">Continue reading ...</a></p>
		</div>
	</div>
	<!-- END OF post featured -->

	<!-- post -->
	<div class="post">
		<h2>Lorem ipsum dolor sit amet</h2>
		<p class="post-date">Posted August 17th, 2008</p>
		<div class="post-content">
			<p><img src="" class="post-thumb" alt="Lorem ipsum dolor sit amet" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
imperdiet. Sed ullamcorper varius nibh. Vestibulum augue. Aenean id justo. Nullam sit amet lectus. In odio. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Nam feugiat.
Quisque nibh nibh, scelerisque ac, ultrices ut, iaculis at, ligula. Duis tempor odio in ipsum.</p>
			<p class="post-continue"><a href="">Continue reading ...</a></p>
		</div>
	</div>
	<!-- END OF post -->

	<!-- post -->
	<div class="post">
		<h2>Lorem ipsum dolor sit amet</h2>
		<p class="post-date">Posted August 17th, 2008</p>
		<div class="post-content">
			<p><img src="" class="post-thumb" alt="Lorem ipsum dolor sit amet" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
imperdiet. Sed ullamcorper varius nibh. Vestibulum augue. Aenean id justo. Nullam sit amet lectus. In odio. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Nam feugiat.
Quisque nibh nibh, scelerisque ac, ultrices ut, iaculis at, ligula. Duis tempor odio in ipsum.</p>
			<p class="post-continue"><a href="">Continue reading ...</a></p>
		</div>
	</div>
	<!-- END OF post -->

	<!-- page-navigation -->
	<div class="page-navigation">
		<div class="left"><a href="">Older Posts</a></div>
		<div class="right"><a href="">Newer Posts</a></div>
	</div>
	<!-- END OF page-navigation -->

</div>
<!-- END OF content -->

<!-- sidebar -->
<div id="sidebar">

	<!-- sidebar-ads -->
	<div class="sidebar-ads">
		<a href=""><img src="" /></a>
		<a href=""><img src="" /></a>
		<a href=""><img src="" /></a>
		<a href=""><img src="" /></a>
	</div>
	<!-- END OF sidebar-ads -->

	<!-- sidebar-search -->
	<div class="sidebar-search">
		<form action="">
			<p><input type="text" name="search" /> <input type="submit" value="Search"/></p>
		</form>
	</div>
	<!-- END OF sidebar-search -->

	<!-- sidebar-tags -->
	<div class="sidebar-tags">
		<ul>
			<li><a href="">Bloggers</a></li>
			<li><a href="">CSS</a></li>
			<li><a href="">Miscelaneous</a></li>
			<li><a href="">Standards</a></li>
			<li><a href="">Web Design</a></li>
		</ul>
	</div>
	<!-- END OF sidebar-tags -->

	<!-- sidebar-pop-posts -->
	<div class="sidebar-pop-posts">
		<ul>
			<li><a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Lorem ipsum dolor sit amet</a></li>
		</ul>
	</div>
	<!-- END OF sidebar-pop-posts -->

	<!-- sidebar-comments -->
	<div class="sidebar-pop-posts">
		<ul>
			<li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li>
			<li><a href="">Someone</a> on <a href="">Lorem ipsum dolor sit amet</a></li>
		</ul>
	</div>
	<!-- END OF sidebar-comments -->

</div>
<!-- END OF sidebar -->

</div>
<!-- END OF content-wrapper -->

<!-- site-info -->
<div id="site-info"></div>

And our CSS for our content-wrapper is basically like our navigation and categories menus.

#content-wrapper {
	margin: 20px auto 20px;
	width: 960px;
}

Notice the margin: 20px auto 20px;? I’m applying a 20px margin to the top and bottom but the left and right have auto so it will center.

Now we are ready to style the content area. Nothing very complicating is happening to this apart from floating the whole thing to the left. If you’ve never use the float property in CSS, no better time like the present to dive right in.

The total width of our content box is 655 but since we are adding a 1px border all around and 15px of padding, we’ll need to adjust the width.

/*** content
*******************************/
#content {
	background: #f4f1e2;
	border: 1px solid #b4b2aa;
	float: left;
	padding: 15px;
	width: 623px; /*655px - 1px - 1px - 15px - 15px = 623px */
}

Styling the posts

When creating our markup, we went ahead and assigned a class called post to each post sections. The first one (or latest entry) will be slightly different so we’ve added a second class (yes, you can do that) called featured.

Let’s start with the general posts then we’ll add the styles for the featured post.

/*** content - post
*******************************/
.post {
	border-bottom: 1px solid #ada997;
	padding: 20px 0;
}

.post h2 {
	font-size: 24px;
}

.post-date {
	background: url(../i/icons/calendar.png) no-repeat 0 0;
	color: #777777;
	font-size: 10px;
	padding: 0 0 0 25px;
}

img.post-thumb {
	border: 10px solid #fff;
	float: right;
	margin: 0 0 10px 10px;
}

.post-continue a {
	color: #b54646;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}</pre>
Now let's add our styles for the featured post
1.featured {
	background: #fefdf6;
	padding: 5px 15px;
}

.featured img.post-thumb {
	border-color: #000;
}

.featured .post-content {
	font-size: 14px;
}

Page navigation links

The page navigation links that the bottom of the page will enable the user to navigation through the archives.

/*** content - page navigation
*******************************/
.page-navigation {
	margin-top: 25px;
}

.page-navigation .left {
	background: url(../i/icons/arrow-180-medium.png) no-repeat 0 0;
	padding: 0 0 0 25px;
}

.page-navigation .right {
	background: url(../i/icons/arrow-000-medium.png) no-repeat right 0;
	padding: 0 25px 0 0;
}

.page-navigation a {
	color: #89835a;
	text-decoration: none;
}

Sidebar

The sidebar is very easy to do now that the content’s done. A few blocks here and there without too much styling.

/*** sidebar
*******************************/
#sidebar {
	float: right;
	margin-left: 10px;
	width: 295px;
}

Ads
For the ads, I usually have a stack of “dummy images” with different sizes already created. So for this I’ll just change the colors of one I already have on my computer to match the scheme of this site. I suggest you do the same. They are so easy to make: create a new 125×125 image, fill it up with color, add a nice 1px stroke (on the inside) and put the side of the ad. These are very helpful to simply just drop on your mock-ups for client work.

The ads as you can see are 2 x 2 and that will arrange itself in the browser due to the width we have given to our #sidebar so there really isn’t any need to add CSS to this.

<!-- sidebar-ads -->
<div class="sidebar-ads">
	<a href=""><img src="i/ads-blank.png" alt="Ad image" /></a>
	<a href=""><img src="i/ads-blank.png" alt="Ad image" /></a>
	<a href=""><img src="i/ads-blank.png" alt="Ad image" /></a>
	<a href=""><img src="i/ads-blank.png" alt="Ad image" /></a>
</div>
<!-- END OF sidebar-ads -->

If you are running this along with me and you check out the page right now, you’ll notice some big ugly borders around our ads. Eewwww! To fix this, we’ll set our images and linked images to have a border of 0.

/*** common styles
****************************************/
.left {
	float: left;
}

.right {
	float: right;
}

img, a img {
	border: 0;
}

Ahhh… That’s better!

Search

The only we will do here is add a little padding to this section so that it’s not stuck up to the ads.

/*** sidebar - search
*******************************/
.sidebar-search {
	margin: 20px 0 0;
}

Tags
Like the other 3 sections that will follow, we have to style the heading and the box.

#sidebar h4 {
	color: #776a23;
	font-size: 18px;
	font-weight: normal;
}

.sidebar-tags, .sidebar-pop-posts, .sidebar-recent-com {
	background: #f4f1e2;
	border: 1px solid #b4b2aa;
	padding: 8px;
}

The only thing (apart from the icons) that’s different with the tags is that the list is inline with no style.

/*** sidebar - tags
*******************************/
.sidebar-tags ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sidebar-tags ul li {
	display: inline;
	margin: 0;
	padding: 0 3px;
}

Popular Posts and Recent Comments

As we said above these three blocks are all very similar. So we’ll combine the last 2 together and reuse code to shorten our CSS.

/*** sidebar - popular posts / recent comments
*******************************/
.sidebar-pop-posts ul, .sidebar-recent-com ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sidebar-pop-posts ul li, .sidebar-recent-com ul li {
	background: url(../i/icons/bookmark-document.png) no-repeat 0 0;
	margin: 8px 0 10px;
	padding: 0 0 0 25px;
}

.sidebar-recent-com ul li {
	background: url(../i/icons/balloon.png) no-repeat 0 0;
}

Oh and let’s not forget changing the color of those links too

"]
/*** common styles
****************************************/
.left {
	float: left;
}

.right {
	float: right;
}

img, a img {
	border: 0;
}

a:link, a:visited, a:active {
	color: #b54646;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

And the sidebar is done.

Site info (or footer)

Now if you look at the site in a browser, you’ll notice the footer stuff is tucked in the sidebar. Not good. So we’ll add a clearing div to clear the floats (see Extending the background around two floating div’s) and have the footer site nicely under all the content.

/*** common styles
****************************************/
.left {
	float: left;
}

.right {
	float: right;
}

img, a img {
	border: 0;
}

a:link, a:visited, a:active {
	color: #b54646;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.clear {
	clear: both;
}

And in our HTML

<!-- END OF sidebar -->

<div class="clear"></div>

<!-- END OF content-wrapper -->

Alright, now we start styling. When we started Part II, we cut up a few background/images we would need and now it’s time to use the last one, footer-bg.png. We’ll add that to our site-info div

/*** site-info
*******************************/
#site-info {
	background: url(../i/footer-bg.png) repeat-x 0 0;
	height: 61px; /*81px*/
	padding-top: 20px;
}

Notice I’ve added a bit of padding at the top and that’s because of the rough edge. We don’t want the text to just lie up there so that’s why our height is 61 instead of 81, we need to compensate for the padding.

Now, like our content area, we want our text in the footer to stay within our 960px boundaries. So we’ll add a site-info-wrapper div to help us achieve that.

<!-- site-info -->
<div id="site-info">
<div id="site-info-wrapper">

	<div class="left">
		<p>Copyright 2008 - Karinne Legault</p>
		<p>Hosted by <a href="">Hosting Company</a> / Powered by <a href="http://www.wordpress.org">Wordpress</a></p>
	</div>
	<div class="right">
		<ul>
			<li><a href="">Home</a></li>
			<li><a href="">About</a></li>
			<li><a href="">Archives</a></li>
			<li><a href="">Contact</a></li>
			<li><a href="">RSS</a></li>
		</ul>
	</div>

</div>
</div>
<!-- END OF site-info -->

Bottom navigation

Let’s tackle the bottom navigation first. We’ll re-use much of the code we wrote for the tags box, except we’ll add border to the right of the menu item.

/*** site-info - navigation
*******************************/
#site-info .right ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#site-info .right ul li {
	border-right: 1px solid #000;
	display: inline;
	margin: 0;
	padding: 0 10px 0 5px;
}

If you look at this in your browser, you’ll notice the last menu item (RSS) has a border on the right which sort of look funny since there’s nothing after it. So let’s go ahead and add a class to that last item and remove the border.

<div class="right">
	<ul>
		<li><a href="">Home</a></li>
		<li><a href="">About</a></li>
		<li><a href="">Archives</a></li>
		<li><a href="">Contact</a></li>
		<li class="last"><a href="">RSS</a></li>
	</ul>
</div>

and the code to remove the border

"]
/*** site-info - navigation
*******************************/
#site-info .right ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#site-info .right ul li {
	border-right: 1px solid #000;
	display: inline;
	margin: 0;
	padding: 0 10px 0 5px;
}

#site-info .right ul li.last {
	border-right: none;
}
[/html]

<strong>Copyright and other info</strong>

Let's make the copyright and other info fit nice and snug together. In order to do this, we'll simply remove all margins and padding to the <code>&gt;p&lt;&gt;/p&lt;</code> tags

1"]
/*** site-info
*******************************/
#site-info {
	background: url(../i/footer-bg.png) repeat-x 0 0;
	height: 81px;
	padding-top: 20px;
}

#site-info-wrapper {
	margin: 20px auto 0;
	width: 960px;
}

#site-info p {
	margin: 0;
	padding: 0;
}

We’re done!

That’s it! We are done!

I hope this helps some of you in understanding how to slice a mock-up in Photoshop. Like anything else in Web Design, understand that this is merely one way of doing it. It’s how I’ve done it for the past 10 years and it’s worked great for me.

Download and Demo

← Older Entries
Newer Entries →