Posts from our ‘CSS’ Category

June  17, 2008
Web Design: PSD to CSS, Part 4

by Joey, at 3:00 pm

Using CushyCMS to generate content and manage the site Through a tutorial located on Nettuts.com, we can use CushyCMS's service as a very basic Content Management System to include text and photos into a site. By going to CushyCMS.com, you sign up for the service and begin to include a specific web site. Once you upload all of your hosting login information and prepare to get the site ready, they provide you with the proper coding in order for it to work properly. The User Interface is relatively ...
read more



June  16, 2008
Web Design: PSD to CSS, Part 3

by Joey, at 1:00 pm

Developing a menu In this case, we're going to develop a CSS-driven navigation menu. First, we must decide what links we will have for other pages in our Web site. For RockRadio Records, we have decided on the following: Home | Artists | Releases | Tour | Links | Store | About | Contact Now, using Photoshop, develop the background for your navigation bar. We're developing a horizontal bar, so in this case, I want a black background with a small gray portion at the top. Starting out with a canvas size of 1 pixel wide by 36 pixels tall, create the background that will be set to repeat across the page. In order for this to happen, you will need a specific code, w ...
read more


June  10, 2008
Web Design: PSD to CSS, Part 2

by Joey, at 3:15 am

OK. Now that we have exported our PSD to CSS/XHTML, we can open our HTML file in your personal favorite code editor. I prefer Dreamweaver, however, you can even edit in TextEdit in Mac OSX. Once you open it up, you can see a few things. First, notice the code: <type="text/css"> This is your Cascading Style Sheet link, or CSS. This defines your stylesheet. Because of the way Photoshop exports the CSS file, it is included into the HTML file rather than creating a separate .css file within your folder. Below this code, you will begin to see #Table_01, which in this case is the start of your divisions within the web site. For this particular web site, in the first part of the stylesheet ...
read more


June  4, 2008
Web Design: PSD to CSS/XHTML exporting

by Joey, at 11:38 pm

This will be the first of a series involving the building of a web site in Photoshop and exporting it to XHTML/CSS. This is very basic, and as I'm blogging about this, I'm learning more about it too.

As a designer, this method of building the framework of the web site allows for each fixes and good looking, well-designed pages. There are many ways to build a web site, and this is just one of them. And there are a few tutorials on the web that discuss building web sites this way, such as Elegant Templates.

First, we will be working i ...
read more



May  7, 2008
Centering a DIV with CSS

by Dusty, at 12:14 pm

One of the biggest questions most people have when switching from the old-school tables way of coding a website, to the more-progressive CSS way of doing things is this: how do I center my website, using just CSS? The answer is actually quite easy. Simply add the following code to the main BODY class in your css document. An example would look like this: BODY  { 900px; margin: 0 auto; } In the above example, you are defining the width of your live area by stating 900px. This width is whatever the width you want your content to be. The margin: 0 auto clause centers the content wrapper in the browser, centering all your content within it, yet still allow ...
read more