PixelForLife: the Designer and Coders blog of influence! » CSS

Corporate Website Series

Steve875 — Sat, 07 Aug 2010 16:09:58 +0000

In this series we create a complete corporate-type website. We begin by showing you how to design the template using Photoshop. Then we go into how to slice and code the website using HTML and CSS.

In this designing series we go through the steps of designing a corporate-style website design.
This is a complete series, from start to finish. From creating a new document to slicing up the template to prepare it for coding.

The final PSD can be found at the bottom of the videos.

Part 1 – Planning the layout

Part 2 – Middle splash zone

Part 3 – 3 Content boxes

Part 4 – Bottom & Sidebar

Part 5 – Finishing up

In this part of the series, we code up the template that we just designed.
We use HTML, CSS, and a little bit of CSS3. Grab a bottle of water and lets get started.

The image files, index.html, and styles.css can be downloaded from the download button at the end the bottom of the videos.

Part 1 – Slicing the template

Part 2 – Navigation Bar

Part 3 – Navigation Bar Styles

Part 4 – Banner Styles

Part 5 – 3 Columns using Divs

Part 6 – Twitter Feed

Part 7 – Content Area & Footer

Modern Navigation Bar

Steve875 — Mon, 24 May 2010 18:43:46 +0000

In this small series, we go from designing all the way to programming a modern-style navigation bar.

Designing the navigation bar:

Programming the navigation bar: Part 1

Programming the navigation bar: Part 2

Lesson files:

Click the following link to download the image files and css/html files.
PixelForLife – nav bar files

Defining A Dreamweaver Website

Steve875 — Sat, 06 Jun 2009 19:51:59 +0000

This is one of the most important steps when you decide to use Dreamweaver.
This should be done before you even create a new page, but if you have already created one, it’s not too late to define your website.

Beginning CSS – part 1

Steve875 — Thu, 11 Dec 2008 05:52:10 +0000

This is part one of many CSS videos.
This tutorial is the absolute beginning of CSS. I introduce you to the basic and most commonly used CSS attributes.
Not only is this video the begging of CSS, but also the beginning of DIV tags. I feel they both go hand-in-hand with each other, so it’s very helpful to learn both at the same time.

How to slice and code a psd website template! Part 3

shandaman — Wed, 10 Dec 2008 17:47:41 +0000

In this 3 part series I walk your through how to slice and then code a psd website template into html / css! Come along for the journey guys!

Download the slice-code-examples now!

How to slice and code a psd website template! Part 2

shandaman — Tue, 09 Dec 2008 15:57:39 +0000

In this 3 part series I walk your through how to slice and then code a psd website template into html / css! Come along for the journey guys!

How to slice and code a psd website template! Part 1

shandaman — Fri, 05 Dec 2008 16:56:39 +0000

In this 3 part series I walk your through how to slice and then code a psd website template into html / css! Come along for the journey guys!

CSS Rollover Buttons

Steve875 — Mon, 01 Dec 2008 07:35:09 +0000

This is a tutorial on creating rollover buttons using CSS/HTML
The program I used for my coding was PSPad

Just incase you can’t understand me, or see what I’m typing, here is a copy of the code:

Images Used:

styles.css:
body { background-color: #708c83;}

/* NAVIGATION */
#navigation {
width:255px;
margin: 0 auto;
}

ul#navigation {
list-style: none;
}
ul#navigation li {
display: inline;
}
ul#navigation li a {
text-indent:-9999px;
display: block;
height: 42px;
float: left;
}

ul#navigation li a.home {
width: 86px;
background: url(“images/btn_home.png”) no-repeat scroll center bottom;
}

ul#navigation li a.about {
width: 84px;
background: url(“images/btn_about.png”) no-repeat scroll center bottom;
}

ul#navigation li a.contact {
width: 85px;
background: url(“images/btn_contact.png”) no-repeat scroll center bottom;
}

ul#navigation li a.home:hover, ul#navigation li a.about:hover, ul#navigation li a.contact:hover {
background-position: top center;
}

index.html

CSS Rollover Menu Tutorial

shandaman — Mon, 24 Nov 2008 14:11:03 +0000

Hello everyone, I am sure you all know what a CSS Rollover Menu is but do you know how to hand code one yourself? Most do not and they use a auto program but what they don’t understand is that those programs often times code for older standards and or have messed up coding and people don’t know how to hand correct those problems for a working menu.

With that said today you can remove those auto programs from your computer because I am going to show you how to hand code the CSS Rollover Menu from scratch! If you don’t want to read this how-to and would rather just get a working menu that you can mess with, at the end of this tutorial is a place you can download the work files for this tutorial and experiment with them on your own, however I suggest you read this tutorial if you really want to learn! Its not that hard and you will thank yourself later on!

Tutorial Name: CSS Rollover Menu
Software Needed: Notepad But I recommend the free Edit Pad Pro program myself!
Skill Level: Basic HTML / CSS

To start you will need to know some basic HTML, nothing to advanced here but we want to create a basic bullets list and ensure the text from each bullet is linked to a page. If you don’t have one ready or if you just want to use ours for sake of example just copy and paste this code between the and tags of your page.

Menu Item Name1



Menu Item Name2


Menu Item Name3

Menu Item Name4

You will notice I left of the UL tag around these LI tags. I did this on purpose and if you add the UL tag after we complete this tutorial you will understand why I did this!

Now that you have your bullet list created its time to define a CSS class for them! Lets start by creating a

tag around the whole code. We will name the CSS Div Class “rollOverColor”, the code should look like this!

Menu Item Name1



Menu Item Name2


Menu Item Name3


Menu Item Name4

You may be wondering what this div class will do, well basically we are going to use it as the background around our menu items. I mean we want our menu to have a specific background color right? We also want the menu to have a specific width to it, this div class will do both jobs nicely.

Now that we have our css class made its time to actually write the css for our page. I am assuming you will be placing your css in an html page or into a cms systems theme. However you do it make sure you call the stylesheet somehow. I use the following line to call mine…

Now thats all fine and dandy but what do we actually have in our roll-over.css file to make the actual roll over menu? Glad you asked, lets break it down!

Here is what is in the roll-over.css file…

.rollOverColor a:link, li { color: #006bb5; font-family: arial; font-weight: bold; background-color: #e4eeee; text-decoration: none; text-align: center; width: 200px; height: 25px; list-style-type: none; }

.rollOverColor a:hover { color: #302f2a; font-family: arial; font-weight: bold; background-color: #eae9e1; text-decoration: none; text-align: center; width: 200px; height: 25px; list-style-type: none; }

We have esentially created two css classes in our css file. The first one deals with the roll over menu background color, the font type and the black bullet all at the same time.

I won’t get into to much detail here as you can copy and past what is above and then tweak how you like it. The most important thing to remember here is that the CSS is pretty basic and if you import the style sheet to dreamweaver or any other css editor you will easily be able to edit these real time in a wysiwyg editor!

I hope this tutorial has proved useful to you and I hope you now know the basics to a roll over menu!

Here is the source files if you want to grab them, enjoy!