Raymond Selda » XHTML and CSS

Convert A Content Box Design Into XHTML and CSS

Raymond Selda — Wed, 27 May 2009 16:39:22 +0000

Are you a web designer who doesn’t know how to write markup? Have you ever followed an interface tutorial in Photoshop and requested for a follow up on how to convert a design? I’ve read in an interview that web designers who don’t code is kinda like working at McDonalds and calling themselves a chef.

Today I am going to convert a content box with an orange heading design into markup using XHTML and CSS.

View Finished Content Box

The inspiration for this tutorial came from a comment asking how to code the content box. This is going to be fun so let’s get started.

Step 1 – Slice the PSD

I don’t use the Slice tool in Photoshop whenever I chop off a design. What I do is use the Rectangular Marquee Tool to select the graphic I need to slice then go to Image Menu and Crop (F2).

For this tutorial we only need to chop three design elements… the orange header, the rounded content box and the separator for each menu (you can also apply a CSS bottom border in place of the separator if you like).

You should chop a longer content box if you think you’re going to have a longer list of links. This will bulletproof your markup in case you decided to put in more links.

Step 2 – Write A Solid Structure (XHTML)

We only need a header and a menu list inside our content box division. Very simple.




Content Box






	Site Main Menu
	
		Home
		News
		About
		Portfolio
		Contact Us

Step 3 – Apply Basic Body Styles

For the purposes of this tutorial we’re going to apply some basic styling. We’re just changing the background to black and setting our font face.

body {
	background:#000;
	font-family:Arial, Verdana, sans-serif;
}

Step 4 – Content Box Styles

Set the background for our content box. The graphic’s width is going to be the width for our content box division.

#content-box {
	width:300px;
	margin:100px auto 0;
	padding-bottom:30px;
	background:transparent url(images/content-boxbg.gif) no-repeat center bottom;
}

Step 5 – Header Styles

We apply the orange header for the background. The key here is the relative position of the header so we can shift it to the left with a negative value giving us that “out of the box” effect.

h2#site-menu {
	width:330px;
	height:79px;
	background:transparent url(images/menu-header.gif) no-repeat;
	position:relative;
	left:-15px;
	text-indent:-99999em;
}

Step 6 – List Styles

Remove the bullets from the list and apply the separator as background for each individual list elements.

ul#menu {
	list-style-type:none;
	padding:0 0 0 10px;
	margin:0 0 0 7px;
}

ul#menu li {
	width:265px;
	text-indent:10px;
	background:transparent url(images/separator.gif) no-repeat center bottom;
}

Step 7 – Link Styles

We then finish off by styling the links. Here we apply a color and adjust the padding for each links. We also styled the hover state.

ul#menu li a {
	color:#aaa;
	font-size:14px;
	font-weight:bold;
	display:block;
	padding:15px 0;
	text-decoration:none;
}

ul#menu li a:hover {
	color:#fff;
}

Conclusion

I enjoyed doing this tutorial and if you’re a web designer who doesn’t code, I do hope this article will encourage you to learn XHTML and CSS.

Articles on converting a design into markup will be a part of my blog so stay tuned as I roam around PSD tutorial sites and provide answers on how to convert designs. Thank you for reading.

Importance of HTML Headings for Accessibility

Raymond Selda — Wed, 20 May 2009 16:00:06 +0000

This past few days I’ve been working on a WordPress theme and again I was faced with the question on what heading tag to use in the front page blog titles and in the articles page. This question never fails to creep up so I decided to once and for all look for a solution that I’m going to be comfortable with.

Importance of Headings

According to a screenreader survey, 76% of screenreader users use headings to navigate either ‘often’ or ‘all the time’. With that statistic we can’t argue how important headings are especially for people with disabilities.

One way to make your site more accessible is through the use of headings. Headings in HTML are created with the h1-h6 elements and they should be used as headings just like the ones you see in newspapers, books and other print documents.

Screenreaders

I’ve heard of screenreaders but I really didn’t have any idea on how a screenreader user’s experience would be like until now thanks to this video:

The video was presented by a blind person giving a brief tour how he uses a screenreader and it was really a discovery on how screenreaders actually work. Then at the end of the video he visited a big time video sharing site and I was shocked that no headings were used for accessibility navigation.

Google Is Accessible

After watching, I decided to further investigate the other sites and looked at how their headings are organized. I tried to check how Google uses headings and I was really impressed by what I saw.

You have Google’s logo for heading 1 followed by ‘Sponsored Links’ and ‘Search Results’ for heading 2 then the actual results as heading 3. What’s interesting here is that the ‘Search Results’ heading is actually hidden using CSS. This means that even if the search results page doesn’t actually show the actual text, we are assured that screenreaders will be able to navigate the document because of the meaningful markup.

Make Your Site Accessible

So I decided to tweak my headings to make it more accessible. First take a look at how the headings are outlined in your document. If you have Firebug installed you can click on Information then View Document Outline. After doing some analysis I came up with the following outline for the headings in the frontpage:

The heading outline for the article page would be different. The article title would be heading one and sub sections as heading two. The remaining headings would also be marked as heading 2 as well.

In my opinion this is the most meaningful outline for a document and I would place more importance on using headings to help people with disabilities rather than for SEO purposes. This is more or less the heading structure that I will be using in my projects.

Conclusion

This small changes can really help the Web to be a better place for everyone. This is only one way you could make a site accessible and I urge you to build websites to be as accessible as possible. Thoughts, comments and violent reactions are always welcome.

Professional Dark CSS Menu

Raymond Selda — Wed, 22 Apr 2009 16:00:17 +0000

I love to follow Photoshop tutorials on designing website layouts and interfaces. One thing I like to do after finishing up a tutorial is to slice the design and convert it into a working website using XHTML and CSS. I recently finished a Professional Dark Header tutorial and decided to slice it up and convert it to XHTML and CSS.

I’ve provided a little screenshot below of the menu that we’re going to convert. Feel free to download the source files and you can check out a live demo if you want.

Overview

These are the only graphics you will need to create our dark menu. You can download them from the zip.

We’re going to use the container and menu backgrounds to tile horizontally for the container and menu using CSS. The menu matrix background is an image sprite we’re going to use for the links. This is only a single image with the default state on the top half and the hover state below the other half. We’re going to control how they are displayed using background positioning in CSS.

XHTML Source

Here we have a container div and another div to wrap our unordered list. Take note that we have assigned a unique id for each of the individual list elements.





	Professional Dark Menu
	
	
	




	
		
		Home
		Articles
		Videos
		Services
		About
		Contact Us

CSS Source

#container

You can specify any width for the container but the height must be equal to the height of containerbg.jpg. You can then tile the container background.

#container {
    width:960px;
    height:132px;
    margin:0 auto;
    background:transparent url(images/containerbg.jpg);
}

#menuwrap

Set the width to 100% so it will expand to whatever the width of the parent (#container). Height will be equal to the height of the menubg.jpg. We then apply a position:relative so we can place the #menuwrap 25 pixels from the top of the container.

#menuwrap {
	width:100%;
	height:63px;
	position:relative;
	top:25px;
	background:transparent url(images/menubg.jpg) repeat-x;
}

ul#menu

Set the width and height then float the list to the right. You can easily remove float:right if you want to left align the menu. We then remove the margins, padding and remove the default bullets beside the list.

ul#menu {
	width:535px;
	height:59px;
	float:right;
	margin:0;
	padding:0;
	list-style-type:none;
	background:transparent url(images/menubg.jpg) repeat-x;
}

ul#menu li

Now let’s float our individual list elements to the left to display the links horizontally. You could experiment and try floating them to the right.

ul#menu li {
	float:left;
}

ul#menu li a

Very important to set display:block for anchor elements especially when doing image replacements because anchors are inline elements by default. The height would be the height of the menu-matrix.jpg divided by 2 which is 59 pixels. Setting the overflow to hidden will only outline the individual block of link. Then we hide the text by setting a huge negative text-indent value.

Update: Thanks to Soh Tanaka for his suggestion on optimizing the CSS for our menu. I’ve made some CSS modifications to the code below and I believe this will make our CSS easier to understand. Thank you Soh.

ul#menu li a {
	display: block;
	height:59px;
	overflow:hidden;
	text-indent:-99999px;
	background:transparent url(images/menu-matrix.jpg) no-repeat;
}

ul#menu li#home a

Now we go to the fun part! We’re going to control how our image sprite (menu-matrix.jpg) will be displayed using CSS background positioning. I’ve created a guide so you can better visualize how I came up with the values.

First we’re going to style our home menu by showing only the default home graphic. We can do this by setting the horizontal and vertical position to zero. I’m writing it this way so you will have a clear idea on how the values are set. We’re also going to set the width for each of the graphic that will be shown.

ul#menu li#home a { background-position:0 0; width:82px; }

ul#menu li#home a:hover

For the hover state of the home menu, the horizontal value will be the same but we will adjust the vertical value to -59 pixels. This will position the graphic 59 pixels below starting from the top of the menu-matrix.jpg.

ul#menu li#home a:hover { background-position:0 -59px; width:82px; }

From here on it’s just a matter of calculating where you need to position the graphic. You can view the rest of the menu styles below.

Complete XHTML and CSS Source





	Professional Dark Menu
	
	





	
		
		Home
		Articles
		Videos
		Services
		About
		Contact Us

I hope you will find this article helpful in creating your own optimized menu using XHTML and CSS. I want to learn from you guys so if there’s anything that you want to improve in this tutorial or anything in this blog please feel free to leave your comments below. Thank you.

Emastic CSS Framework

Raymond Selda — Mon, 29 Sep 2008 17:01:57 +0000

Just when I was getting comfortable with Blueprint another CSS framework has come into play. Emastic is yet another CSS framework and has the following features:

Lightweight (compressed version weighs less than 4KB)
Page width in “em”s, pixels and percentages.
Use of fixed and fluid columns in the grid and
Elastic layouts using “em”s

New stuff in their second beta release are:

gadgets.css (plugin)
Vertical Spacing and
Improved Typography (baseline grid)

One feature that I really like of course is the framework’s small filesize. But one intriguing feature is having your page widths sized in “em”s and percentages. It sounds really interesting and at the same time exciting because it allows you to not get stuck in using pixels for fixed width layouts. Both types of layouts whether fixed or fluid has its advantages and disadvantages depending on what your situation is.

I wonder how will it size up with Blueprint and the other CSS frameworks around. I guess I have to wait until morning to check out Emastic.

How about you? Did you already get your hands dirty with Emastic? How was it? I would really love to hear your thoughts.

CSS Layout Version of W3Schools.com

Raymond Selda — Wed, 09 Apr 2008 14:55:19 +0000

Its been my practice every time I stumble on a website to check if the design especially the layout is in CSS. One morning around 1am I was looking for some tutorials when I landed at W3Schools. Although CSS controls much of the presentation, it still uses tables for laying out their columns. Not concerned what time it was I decided to strip those table tags and overhaul it with CSS. Here’s the W3Schools CSS Version in case you’re eager to check out the final result.

First I worked on the HTML markup then determining the source order of of the elements. The source order will help you to decide on what floating techniques to use. The source order will be: header, content, left nav, right nav and the footer. They say that having the content near the top of the source will help improve search engines to crawl your site. With this kind of order I will have to use floats and negative margins in order to line up the columns.

I start by resetting the the margin and padding:

* {
margin:0;
padding:0;
}

Common styles:

body {
font:70% "Verdana", "Tahoma", "Arial", sans-serif;
color:#000;
background:#F1F1F1 url(images/bodyback.gif) repeat-x top;
}

h1 {font-size:160%;}
h2 {font-size:120%;}
h3 {font-size:110%;}
h4 {font-size:100%;}
h5 {font-size:90%;}
h6 {font-size:80%;}

Header:

#masthead {
height:97px;
background-color:#F1F1F1;
color:#000;
width:400px;
}

#masthead h1 {
background:url(images/w3logo.jpg) no-repeat;
width:420px;
height:90px;
}

#masthead span {
display:none;
}

Container wrapper:

#wrapper {
width:790px;
}

Layout styles for the three main elements (content and the two side columns)

#content {
width:500px;
float:left;
display:inline; /* for IE */
margin-left:145px;
}

#mainNav {
width:145px;
float:left;
margin-left:-500px;
position:relative;
left:-140px;
}

#sideBar {
width:145px;
float:left;
margin-right:-145px; /* for IE */
}

These last 3 rules are the key in this type of CSS layout. By using negative margins we can put the content at the beginning of the source. You can view the final result here.

Scenery CSS Tweak

Raymond Selda — Wed, 29 Aug 2007 03:02:21 +0000

I want to share this to everyone who’s using the “Scenery” theme so you won’t be kicking yourself in the end.

It all began in my homepage. I’m a little OC so I started noticing that my entry paragraphs didn’t look like normal paragraphs. I wanted my entries to have a top and bottom margin. So I checked my WP editor and for countless times modified my article, put line break and paragraph tags in the code view and eventually re-installed everything! After all of the work the line breaks still wasn’t showing.

I then decided to take a look at the theme from the theme viewer and saw that the paragraphs didn’t have the top and bottom margins as well. It was all the template’s fault! hahaha. I checked the structure and of course the stylesheet. There was this little CSS rule:

p { margin:0; padding:0; }

As you can see this was the rule that’s been giving me the trouble. I then decided to edit the rule by turning it into:

p { line-height:1.5em; margin-top:1.5em; margin-bottom:1.5em; }

This rule based on an article by Richard Rutter did all the trick! The paragraphs were styled according to my liking but there was one minor catch. It also affects the date styling for an entry! So I’m forced to switch back to the previous CSS for paragraphs and added a new rule instead:

#right-column .box .entry p {
line-height:1.5em;
margin-top:1.5em;
margin-bottom:1.5em;
}

I decided to forcibly apply a rule to target the paragraph entry and lucky for me it didn’t explode in IE! Hope this article will somewhat ease the burden when trying to modify the Scenery theme or any stylesheet in general that you’re dealing with. Of course comments and reactions are welcome. Thanks for reading.