SpyreStudios

Web Design and Development Magazine

  • Design
  • Resources
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Brilliante Blog Layout – Coding The PSD File Into CSS and HTML

January 3, 2011 by Taty Grassini 16 Comments

In this tutorial, we’ll be revisiting the Brillante blog design, covering the PSD slicing, HTML/CSS coding, custom fonts embedding and some handy cool tips to improve your website performance.

This is Part 2 of 3 of the Photoshop blog design called Brilliante, published some time ago on SpyreStudios and designed by Mahmoud Khaled Deiab.

In this second part, I’m gonna walk you through the PSD to HTML/CSS coding process. Third part will be about creating a WordPress theme. Let’s begin!

Brilliante PSD to HTML and CSS

Step 1

Download the Photoshop file and take a look to the 4 main sections: header, content, footer and bottom.

Layout 4 main sections

Step 2

Let’s create a folder for our Brilliante Layout with the following file structure:

File structure

Note that we’ll include all the images in a “img” folder inside the “css” folder.

Step 3

In the index.html file let’s type our basic layout with the main divs.

[html]
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Brillante</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
</head>
<body>
<div id="header">
</div><!– #header –>

<div id="content">
</div><!– #content –>

<div id="footer">
</div><!– #footer –>

<div id="bottom">
</div><!– #bottom –>
</body>
</html>
[/html]

Step 4

Open the PSD file and, with the Rectangular Marquee Tool, select the header top background, including the thin white line at the bottom.

Header top background selection

About Photoshop slicing and exporting images

The slicing process I use the most is not by using the Slice Tool, but the Marquee Tool instead. I find it to be quicker and effective considering the way I write code.

These are the steps:

  1. With the Marquee Tool, draw the slice selection you want to export. The more zoom you have the better. I recommend to zoom-in enough to the “pixel-point” to avoid anti-alising and getting the sharpest exported image you may get.
  2. Then, Edit > Copy Merged – Command+Shift+C (Control-Shift+C if you’re on a PC). This way, you make sure you select exactly the image you see, no matter how many layers this is made with.
  3. File > New. Note that Photoshop will create a new file with exactly the same height and width as your selection.
  4. Edit > Paste. A new layer will be created with the image.
  5. File > Save for Web and Devices. You have many options here. We’re gonna focus on image format and size. My preferences are: JPEG for plain photos, banners and (not so often) logos. GIF for little icons, separating lines, ornaments. And PNG for high quality images with transparent backgrounds, such as custom font-face titles, slogans, big icons.
  6. Save. Try to be simple and obvious here. Always name your images thinking about your CSS.

Step 5

Open your style.css file and start filling it with the reset properties.

[html]
/* —————– Resets —————- */

* { margin: 0; padding: 0; outline: 0; }

body {
font: 15px/23px Arial, sans-serif;
color: #1a1e27;
background-color: #ededed;
}

img { border: 0; }

.notext, .notext-footer { font-size: 0; line-height: 0; text-indent: -9999px; background-repeat: no-repeat; }
[/html]

The “notext” classes will be used later in this tutorial.

Step 6

In Photoshop, select and export the navigation arrow for the selected and hover states.

Selecting the navigation arrow

Grid-Fixed and Fluid sections in the same layout

The Brilliante design is made over a 24-grid system. The page content is exactly 950px wide. But, the 2 dark-blue areas are wider. No matter how wide your viewport is, the blue areas behave like a 100% fluid layout, with the content fixed inside.

Take for example, the

div. Inside, we have the “top” div, and inside we have the “top-content” div. As you might be guessing, the “top” will be all along your browser with the dark-blue background, and the “top-content” will be centered and with a fixed width of 950px.

Full width and fixed width sections

Step 7

So here’s the CSS code for the layout.

[html]
/* —————– Layout —————- */

.top {
background: transparent url(img/top-bg.gif) repeat-x;
color: #fff;
position: relative;
height: 71px;
}

.top-content,
.logo,
.featured,
#content,
.footer-content,
#bottom {
margin: 0 auto;
width: 950px;
}

.main {
width: 550px;
float: left;
}

.sidebar {
width: 350px;
float: right;
}

#content, .featured, #footer, #bottom {
clear: both;
}

#footer {
background: #1a1e27 url(img/footer-bg.jpg) repeat-x 0 0;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
}
[/html]

Important!

Sharp-eye readers might ask: “Why the top area needs a background image when we could achieve the same with CSS?” As we clearly did with the footer. Answer is: IE. My first try was CSS for the top area background and the white border, but IE was not rendering the hover state as I want it to.

IE6 bug on navigation hover state

As you can see, when hovering over, IE cuts the arrow with a dark blue line. So I replaced the CSS code with a background image and then all browsers agreed. ;)

Top Content

Inside the header tag, the top content area has the main navigation, RSS feed and the search field.

Main nav: the links here have the Frutiger font. We could use CSS sprites for this special font, or rendering with one of the font-linking services out there, or using Cufón. I’ll stick to this last option, since the CSS sprites technique won’t be practical for the future WordPress theme implementation.

So, what’s Cufón?

By definition, it’s a fast text replacement with canvas and VML – no Flash or images required. If you want to learn more about Cufón, check here.

Step 8

First, you download the Cufón YUI from here and save it to your “js” folder. Download the font (or free similar ones) from here. Then, go to the Cufón Generator and browse for your local font file with the following options…

Cufon - browse for your font types

Cufon - selecting options

Finally, click the Let’s Do This! button and download your font file.

Cufon - Lets Do This button

Rename the file with the font name frutiger.font.js and drop it to your “js” folder. Open your index.html file and include the following lines of code before the tag.

[html]
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/frutiger.font.js" type="text/javascript"></script>
<script src="js/func.js" type="text/javascript"></script>
[/html]

This is the correct order for the script tags: first the Cufón YUI, the font file next, and your func.js file at the end. Create this last file, we’ll need it later.

Step 9

Right after the opening div for “header” type this:

[html]
<div class="top">
<div class="top-content">

<ul>
<li class="first selected"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>

</div><!– .top-content –>
</div><!– .top –>
[/html]

As we saw earlier, we’ll be needing “inner” sections in the markup (in this case, “top-content“) to accomplish the centered 950px wide content within the “fluid” background all along the viewport.

Step 10

Let’s code the CSS for this section.

[html]
/* —————– Top —————- */

.top-content ul {
float: left;
height: 42px;
margin-top: 29px;
}

.top-content li {
margin: 0 7px;
line-height: 14px;
height: 42px;
list-style: none;
float: left;
height: 42px;
display: inline;
}

.top-content li.first {
margin-left: 0;
}

.top-content li a {
color: white;
text-decoration: none;
height: 42px;
display: block;
cursor: pointer;
}

.top-content li.selected, .top-content li a:hover {
background: url(img/nav-arrow.gif) no-repeat scroll center bottom transparent;
}
[/html]

Here we floated our unordered list to the left, gave margins to the items, except the left margin on the first one, and applied the arrow image for the selected and hover state.

Note we don’t need to type url(../img/image.gif) with the dots before the image folder, because we already structured our images folder inside the css folder.

Step 11

Open the func.js file to style the links with Cufón.

[html]
Cufon.replace(‘.top-content a’);
[/html]

Here’s what the website should look like so far:

Brilliante Layout browser testing

RSS feed: select the RSS icon and the text like this:

Photoshop - selecting the RSS feed

Step 12

Repeat the Photoshop steps we learnt in step 3 to export our images. We’ll name it feed.gif. The same for the search input field and submit button area.

Photoshop - selecting the search input field background

First, we’ll export the search background and name it search-bg.gif. Before doing this, be sure to disable the submit button/arrow like this.

Photoshop - submit button/arrow layer disabled

Then, enable it back and select and export it with the name search-arrow.gif.

Photoshop - selecting the search arrow

Step 13

Now, after creating the navigation, we’ll need to create another inner section for both the RSS and search sections. Back to the index.html file we’ll type the code for the inner block section after the navigation “ul” closing tag.

[html]
<div class="block">
<p><a href="#">Grab our feeds</a></p>
<form id="search">
<input type="text" name="" class="search_input" value="Search…" name="s" id="s" onfocus="if (this.value == ‘Search…’) {this.value = ”;}" onblur="if (this.value == ”) {this.value = ‘Search…’;}"/>
<input type="submit" name="" class="search_submit" value="Go" />
</form>
</div><!– .block –>
[/html]

The javascript code you see inline is for the simple “onfocus” event – you know, when you click on the word “Search” in the input field, the field clears itself. If we click outside, the word shows again.

Step 14

In the CSS, we float the “block” div to the right and position its descendent elements with the absolute property.

[html]
.block {
float: right;
height: 71px;
position: relative;
}

.block a {
position: absolute;
right: 221px;
display: block;
height: 71px;
line-height: 71px;
text-indent: -9999px;
background: url(img/feed.gif) no-repeat 0 0 transparent;
width: 127px;
height: 21px;
margin-top: 25px;
}

#search {
position: absolute;
top: 0;
right: 0;
float: right;
width: 169px;
background: url(img/search-bg.gif) no-repeat 0 0 transparent;
height: 41px;
padding-left: 35px;
margin-top: 14px;
margin-left: 17px;
}

.search_input {
background: none repeat scroll 0 0 transparent;
border: 0 none;
color: #1a1e27;
display: inline;
font: italic 15px Arial, sans-serif;
height: 24px;
margin-top: 7px;
text-transform: lowercase;
width: 144px;
}

.search_submit {
background: url(img/search-arrow.gif) no-repeat scroll center top transparent;
width: 15px;
height: 17px;
font-size: 0;
text-indent: -9999px;
border: 0;
cursor: pointer;
position: absolute;
top: 12px;
right: 7px;
}
[/html]

This is what we have so far:

Brilliante Layout browser testing

Step 15

Export the logo image, selecting the separation lines on the right.

Photoshop - selecting the logo

Step 16

Still inside the “header” we type:

[html]
<div class="logo">
<a href="#"><img src="css/img/logo.jpg" width="196" height="42" alt="Brillante – A Brilliant Website Design" /></a>
<p>A very short description about the website goes here. And that’s it!</p>
</div><!– .logo –>
[/html]

Step 17

Style the logo area.

[html]
/* —————– Logo —————- */

.logo {
height: 148px;
overflow: hidden;
}

.logo img {
margin: 62px 22px auto 42px;
float: left;
}

.logo p {
margin-top: 67px;
width: 229px;
float: left;
font: italic 15px/17px Georgia, serif;
color: #646464;
}
[/html]

Step 18

Last div inside header is for the featured content. In Photoshop, we’ll select the elements, first, by selecting the layer, and then, doing Cmd+Click (Ctrl+Click on the PC) on it to obtain the selection as shown in the screenshots. This way you’ll go faster with the image exporting process. Disabled the “Hire Us” text and background, select and export the banner with pencils featured.jpg. Enable back the button and export it as hireUsButton.gif. Finally, select and export the thumbnails (th1.jpg, th2.jpg, th3.jpg), just the pictures without the borders.

Photoshop - selecting the proper layer with Command Control Click

Photoshop - selecting the proper layer with Command Control Click

Photoshop - selecting the proper layer with Command Control Click

Step 19

In our index.html file we type the code for the featured area, after the logo div.

[html]
<div class="featured">
<div class="img">
<img src="css/img/featured.jpg" width="600" height="248" alt="" />
<p class="button"><a href="#">Hire us</a></p>
</div><!– .img –>

<div class="desc">
<h3>It&rsquo;s Brilliant!</h3>
<p>Brilliante, Lorem ipsum dolor sit amet, con-<br />sectetur adipisicing elit, sf sed dos eiusmod lorem ipsum dolot sit amto. It is brillaint!</p>
<div class="thumbs">
<a href="#"><img src="css/img/th1.jpg" width="73" height="61" alt="" /></a>
<a href="#"><img src="css/img/th2.jpg" width="73" height="61" alt="" /></a>
<a href="#"><img class="last" src="css/img/th3.jpg" width="73" height="61" alt="" /></a>
</div><!– .thumbs –>
</div><!– .desc –>
</div><!– .featured –>
[/html]

Step 20

The CSS for the featured content.

[html]
/* —————– Featured —————- */

.featured {
height: 248px;
overflow: hidden;
}

.featured .img {
position: relative;
margin-left: 1px;
}

.featured .desc {
background-color: #1d1f25;
width: 316px;
height: 208px;
padding: 21px 15px 19px;
overflow: hidden;
}

.featured .img,
.featured .desc {
float: left;
}

.featured .thumbs {
padding: 20px 13px 19px;
border-top: 1px solid #393939;
height: 61px;
}

.featured .thumbs a img {
margin-right: 31px;
}

.featured .thumbs a img.last {
margin-right: 0;
}

.featured .desc h3, .featured .desc p {
padding: 0 13px;
font-weight: normal;
}

.featured .desc h3 {
margin-bottom: 7px; /*PSD 18px*/
}

.featured .desc p {
margin-bottom: 18px; /*PSD 25px*/
line-height: 23px;
}

.featured .button a {
position: absolute;
left: 1px;
bottom: 20px;
background: url(img/hireUsButton.gif) no-repeat 0 0 transparent;
display: block;
text-indent: -9999px;
width: 107px;
height: 37px;
}

.desc h3 {
font-size: 30px;
}

.desc h3, .desc p {
color: #ededed;
}
[/html]

We’re coding this banner section with a fixed height, assuming it will have a javascript fading effect, showing different big images when we click on the thumbnails. The text there have the same overflow:hidden to limit the number of lines in the paragraph, avoiding extra content messing with the layout.

Note the “PSD” comments in the code. They’re just little reminders from the measuring process in Photoshop. In both, the Photoshop ruler and Firefox Web Developer ruler there are little discrepancies when measuring and positioning elements in the browser. (Pixel-perfect geeks stuff.)

Step 21

The title “It’s Brilliant!” here is using the Frutiger font. So we’ll include the h3 tag in the func.js.

[html]
Cufon.replace(‘h3’);
[/html]

The webpage at this point:

Brilliante Layout browser testing

Step 22 – Content: Main

We’ll start coding the content area, focusing on the main section with the blog posts. We need to export the posts images without the borders (post-img1.jpg, post-img2.jpg, post-img3.jpg) and the separation lines sep.gif you see in between the Categories and the Date. Remember to zoom-in deeply enough to select both lines accurately. And the Read More button readMoreButton.gif.

Photoshop - selecting the proper layer with Command/Control+Click

Photoshop - selecting the separation lines

Photoshop - selecting the proper layer with Command Control Click

Step 23

Here’s the html code for the main section, inside the content div.

[html]
<div class="main">
<h2 class="cufon-h2"><span>Latest from the blog</span></h2>
<div class="post">
<h3><a href="#">An Example of a Post Goes Here.</a></h3>
<div class="cat-date">
<span class="posted">Posted in: </span>
<em><a href="#">Category One</a>, <a href="#">Category Two</a></em>
<span class="sep">&amp;nbsp;</span>
<span class="date">Date:
<em><a href="#">08 April 2010</a></em>
</span>
</div><!– .cat-date –>
<div class="post-teaser">
<img src="css/img/post-img1.jpg" width="142" height="140" alt="" />

<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sf sed dos eiusmod tempor incididunt ut labore et dolorea ab magna aliqua. Utlo enim ad minim veniam, quis nostrudaw exercitation ullamco laboris nisi ut aliquip ex ea commodo!</p>

<div class="readMore">
<span>Author: </span>
<em><a href="#">Mahmoud Khaled</a></em><br />
<span>Reaction: </span>
<em><a href="#">10 comments</a>, <a href="#">5 Pingback</a></em>
<input type="submit" name="" class="readMoreButton notext" value="Read More" />
</div><!– .readMore –>
</div><!– .text –>
</div><!– .post-teaser –>

</div><!– .post –>

<div class="post">
<h3><a href="#">Another Post from the Blog Goes Here!</a></h3>

<div class="cat-date">
<span class="posted">Posted in: </span>
<em><a href="#">Category One</a>, <a href="#">Category Two</a></em>
<span class="sep">&amp;nbsp;</span>
<span class="date">Date:
<em><a href="#">10 April 2010</a></em>
</span>
</div><!– .cat-date –>

<div class="post-teaser">
<img src="css/img/post-img2.jpg" width="142" height="140" alt="" />
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sf sed dos eiusmod tempor incididunt ut labore et dolorea ab magna aliqua. Utlo enim ad minim veniam, quis nostrudaw exercitation ullamco laboris nisi ut aliquip ex ea commodo!</p>

<div class="readMore">
<span>Author: </span>
<em><a href="#">Mahmoud Khaled</a></em><br />
<span>Reaction: </span>
<em><a href="#">3 comments</a>, <a href="#">10 Pingback</a></em>
<input type="submit" name="" class="readMoreButton notext" value="Read More" />
</div><!– .readMore –>
</div><!– .text –>
</div><!– .post-teaser –>

</div><!– .post –>

<div class="post">
<h3><a href="#">It’s Brilliant. Yes, It Is!</a></h3>

<div class="cat-date">
<span class="posted">Posted in: </span>
<em><a href="#">Category One</a>, <a href="#">Category Two</a></em>
<span class="sep">&amp;nbsp;</span>
<span class="date">Date:
<em><a href="#">12 April 2010</a></em>
</span>
</div><!– .cat-date –>

<div class="post-teaser">
<img src="css/img/post-img1.jpg" width="142" height="140" alt="" />

<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sf sed dos eiusmod tempor incididunt ut labore et dolorea ab magna aliqua. Utlo enim ad minim veniam, quis nostrudaw exercitation ullamco laboris nisi ut aliquip ex ea commodo!</p>

<div class="readMore">
<span>Author: </span>
<em><a href="#">Mahmoud Khaled</a></em><br />
<span>Reaction: </span>
<em><a href="#">No comments</a>, <a href="#">2 Pingback</a></em>
<input type="submit" name="" class="readMoreButton notext" value="Read More" />
</div><!– .readMore –>
</div><!– .text –>
</div><!– .post-teaser –>

</div><!– .post –>
</div><!– .main –>
[/html]

Each blog post here will have a h3 title, a metadata section for categories and date, the post excerpt and a Read More section with the author, number of comments and a button linking to the full single post.

As you see, we applied the “notext” class we defined in the CSS Resets for the Read More button.

Step 24

[html]
/* —————– Content —————- */
.post {
margin-bottom: 40px;
}

span.sep {
text-indent: -9999px;
background: url(img/sep.gif) no-repeat center top;
}

.cat-date {
margin-bottom: 10px;
}

.post-teaser {
overflow: hidden;
}

.post-teaser img {
margin: 0 11px 11px 0;
border: 1px solid #cacaca;
padding: 3px;
float: left;
}

.post-teaser .text{
padding-left: 160px;
}

.post-teaser .text p {
margin-bottom: 9px;
line-height: 23px;
}

.readMore {
border-top: 1px solid #bdbdbd;
line-height: 17px;
padding-top: 9px;
}

.readMoreButton {
background: url(img/readMoreButton.gif) no-repeat;
width: 110px;
height: 29px;
float: right;
cursor: pointer;
border: 0 none;
margin-top: -15px;
}
[/html]

Note we did the post images borders with CSS, that’s why we ignored them when exporting the images.

Again, we have to think about the future WordPress theme impelementation for the h2 titles. So we assign a class h2 class="cufon-h2" for the Cufón titles with the dark blue background. And the tag to avoid the default block background. In other words, we give the heading a “span” just to color the text background, not its whole width. This way, the titles will be rendered dynamically via CMS.

Step 25

The func.js file will need one more line.

[html]
Cufon.replace(‘h2’);
[/html]

Step 26

It’s time to style our main fonts.

[html]
/* —————– Fonts —————- */

h2.cufon-h2 {
margin: 50px 0 25px;
font-size: 26px;
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
}

h2 span {
background-color: #1a1e27;
padding: 1px 6px;
text-align: center;
}

h3 a {
color: #1a1e27;
font-size: 25px;
text-decoration: none;
font-weight: normal;
}

h4 {
color: #646464;
font-size: 20px;
margin-bottom: -5px;
font-weight: normal;
}

.author em {
font: italic 15px Georgia, serif;
color: #646464;
margin-top: -3px;
}

.cat-date a, .readMore a {
font: italic 14px/20px Georgia, serif;
color: #646464;
text-decoration: none;
}
[/html]

Step 27 – Content: Sidebar

Export the author’s photo (author.jpg), the dummy-banners (advertiseHere.gif) and the categories arrow/bullet (cat-arrow.gif).

Photoshop - selecting the proper layer with Command Control Click

Photoshop - selecting the proper layer with Command Control Click

Photoshop - contracting selection 1px to avoid border

Note we had to modified the Advertise Here picture selection, because it has 1px border around, and we’ll just use CSS to do this. In Photoshop: Menu Select > Modify > Contract > 1px.

Step 28

Right after the main div, we type the sidebar html code.

[html]
<div class="sidebar">

<div class="author">
<h2 class="cufon-h2"><span>About the author</span></h2>

<img src="css/img/author.jpg" width="99" height="99" alt="" />
<h4>Mahmoud Khaled</h4>
<p><em>Web &amp; Graphics Designer</em></p>
<p>Sectetur adipisicing elit, sf sed dos eiusmod tempor incididunt utto po Web and graphics designer!</p>
</div><!– .author –>

<div class="sponsors">
<h2 class="cufon-h2"><span>Sponsors</span></h2>

<a href="#"><img src="css/img/advertiseHere.gif" width="164" height="164" alt="" /></a>
<a href="#"><img class="last" src="css/img/advertiseHere.gif" width="164" height="164" alt="" /></a>
</div><!– .sponsors –>

<h2 class="cufon-h2"><span>Categories</span></h2>

<ul class="cat">
<li><a href="#">Category Number One</a></li>
<li><a href="#">Photoshop Designs</a></li>
<li><a href="#">Identity Branding &amp; Logo Design</a></li>
<li><a href="#">Giveaways, and Freebies</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Another Category Goes Here</a></li>
</ul>
</div><!– .sidebar –>
[/html]

Step 29

The author’s name and the category links have the Frutiger font. Let’s include both in the func.js file.

[html]
Cufon.replace(‘h4’);
Cufon.replace(‘.cat a’);
[/html]

Step 30

Here, we style the picture borders with CSS one more time.

[html]
/* —————– Sidebar —————- */

.author img {
float: left;
margin: 0 10px 10px 0;
border: 1px solid #cacaca;
padding: 3px;
}

.sponsors img {
margin-right: 13px;
}

.sponsors img.last {
margin-right: 0;
}

.cat li {
list-style: none;
}

.cat li a {
text-decoration: none;
color: #1a1e27;
background: url(img/cat-arrow.gif) no-repeat left center transparent;
padding-left: 23px;
font-size: 16px;
line-height: 42px;
}

.cat li a:hover {
text-decoration: underline;
}
[/html]

This is how our awesome webpage look like so far:

Brilliante Layout browser testing

Footer

We won’t apply Cufón in the footer headings. Here we’ll use the text-replacement technique, using images for the titles and hiding the heading text with CSS.

Step 31

In Photoshop, disable the footer background layer, so there’s nothing behind the titles, just transparency, and select one by one, as pixel-perfect as you can, including the border lines at the bottom. Export them in PNG format (txt-links.png, txt-flickr.png, txt-twitter.png).

Photoshop - selecting footer heading with transparent background

Step 32

Select the footer background like this, just the blue area (there’s a subtle linear gradient). Export it as JPEG (footer-bg.jpg).

Photoshop - selecting footer background

Photoshop - selecting footer background

Step 33

And finally, the Twitter bird. Select it with Command+Click on the layer image (Control+Click on a PC). This way, you’ll have the bird icon selected like this…

2Photoshop - selecting Twitter icon

Step 34

We need the footer background showing all along the browser width, that’s why we create the footer-content div inside the footer.

[html]
<div id="footer">
<div class="footer-content">

<div class="links">
<h2 class="notext-footer txt-links">Links worth spreading</h2>
<ul>
<li><a href="#">Link Number One Goes Here</a></li>
<li><a href="#">Link Number Two Should Go Here</a></li>
<li><a href="#">Another Link would Go Here</a></li>
<li><a href="#">And Maybe Yet Another One</a></li>
<li><a href="#">Awakening Website Design</a></li>
<li><a href="#">Mahmoud&rsquo;s Design Blog And Portfolio</a></li>
</ul>

</div><!– .links –>

<div class="flickr">
<h2 class="notext-footer txt-flickr">Watch us on flickr</h2>

<a href="#"><img src="css/img/flickr-th1.jpg" width="74" height="74" alt="" /></a>
<a href="#"><img src="css/img/flickr-th2.jpg" width="74" height="74" alt="" /></a>
<a href="#"><img src="css/img/flickr-th3.jpg" width="74" height="74" alt="" /></a>
<a href="#"><img src="css/img/flickr-th4.jpg" width="74" height="74" alt="" /></a>
<a href="#"><img src="css/img/flickr-th5.jpg" width="74" height="74" alt="" /></a>
<a href="#"><img src="css/img/flickr-th6.jpg" width="74" height="74" alt="" /></a>
</div><!– .flickr –>

<div class="twitter">
<h2 class="notext-footer txt-twitter">Tweet tweet!</h2>

<p><em>&#8220;Lorem ipsum dolor sitet ameto, is simply an example of a tweet. And probably some more blahs shoud actually go here which works as a tweet!&#8221;</em></p>

<p class="cufon">10 hours ago. From <a href="#">TweetDeck</a><br />
In reply to <a href="#">@MahmoudKhaled</a></p>

<h4><a href="#">Follow us on Twitter!</a></h4>
</div><!– .twitter –>
</div><!– .footer-content –>
</div><!– #footer –>
[/html]

Step 35

Here’s the h2 tag class notext-footer (we included this one at the very beginning on the CSS Resets), because there’s no need for the Cufón magic this time. Followed by new special classes for each title (txt-links, txt-flickr, txt-twitter).

[html]
/* —————– Footer —————- */

h2.notext-footer { height: 38px; }

h2.txt-links { background-image: url(img/txt-links.png) }
h2.txt-flickr { background-image: url(img/txt-flickr.png) }
h2.txt-twitter { background-image: url(img/txt-twitter.png) }

#footer {
overflow: hidden;
height: 288px;
}

.footer-content {
padding-top: 28px;
}

.footer-content h2 {
margin-bottom: 17px; /*PSD 22px*/
}

.links, .flickr, .twitter {
float: left;
width: 281px;
margin-right: 53px;
}

.twitter {
margin-right: 0;
}

.links li {
padding: 0;
margin: 0;
}

.links li a {
text-decoration: none;
color: #ededed;
font-size: 15px;
line-height: 29px;
}

.flickr a img {
margin-right: 10px;
border: 3px solid #646464;
}

.twitter {
background: url(img/twitter.png) no-repeat scroll 100% bottom transparent;
}

.twitter p, .twitter a {
color: #ededed;
}

.twitter a {
text-decoration: none;
}

.twitter h4 a {
color: #818181;
font-size: 20px;
}

.twitter em {
font: italic 15px Georgia, serif;
}
[/html]

Step 36

Well, there’s two more elements using Cufón here: the links and the Twitter text. Func.js:

[html]
Cufon.replace(‘.links a’);
Cufon.replace(‘.twitter p.cufon’);
[/html]

We could group all the Cufon.replace tags into one, like this:

[html]
Cufon.replace(‘h3, h4, .cat li a, .links li a, .twitter p.cufon, .top-content li’);
Cufon.replace(‘h2’);
[/html]

Note I’m extracting the “h2” tag from the group because it would mess everything on IE :-(

The webpage so far.

Brilliante Layout browser testing

Step 37 – Bottom

Finally, the bottom area. There’s no need for nested divs this time, because no special background is showing.

[html]
<div id="bottom">
<ul>
<li class="selected"><a href="#">Home</a>&amp;nbsp;|&amp;nbsp;</li>
<li><a href="#">About Us</a>&amp;nbsp;|&amp;nbsp;</li>
<li><a href="#">Services</a>&amp;nbsp;|&amp;nbsp;</li>
<li><a href="#">Portfolio</a>&amp;nbsp;|&amp;nbsp;</li>
<li><a href="#">Blog</a>&amp;nbsp;|&amp;nbsp;</li>
<li><a href="#">Contact</a></li>
</ul>

<p>Copyright 2010 – <a href="#">Brilliante</a> – All rights reserved</p>
</div><!– #bottom –>
[/html]

Step 38

And its CSS.

[html]
/* —————– Bottom —————- */

#bottom {
height: 70px;
}

#bottom ul {
float:left;
}

#bottom li {
float:left;
list-style:none;
}

#bottom li a {
text-decoration:none;
color: #1a1e27;
}

#bottom li.selected a, #bottom li a:hover, #bottom p a {
text-decoration:none;
color: #646464;
}

#bottom p {
float:right;
}

#bottom ul, #bottom p {
line-height: 70px;
}
[/html]

We use the line height equal to the div height to center the elements vertically. Here’s our final website showing in a decent browser. ;)

Brilliante Layout browser testing

IE CSS

Before jumpt into CSS fixing for Internet Explorer, there’s a little piece of code we need to add to our markup. This will help to prevent some IE speed and rendering issues with Cufón.

Step 39

Include this before the tag.

[html]
<script type="text/javascript"> Cufon.now(); </script>
[/html]

Step 40

Create the ie.css file inside your css folder, then call it from your markup with a conditional comment, right after the style.css line.

[html]
<!–[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie.css" /> <![endif]–>
[/html]

You might be familiar with this one. This line here is adding some extra css rules only if the browser is Internet Explorer 6 or below.

There’s a good article here about conditional comment rules for your css files. Or if you wish to go really deep into css debugging, read about the In-CSS hacks technique.

We didn’t use HTML5 tags for this website (except for the Doctype, of course), but if you wish to ensure IE compatibility with HTML5 elements, I suggest you to read about these two awesome javascript frameworks: Modernizr and HTML5 Shiv.

Step 41

In our ie.css file, we group all the divs with margins on both sides, left and right, to prevent the (in)famous IE double-margin bug.

[html]
.readMoreButton,
#search,
.featured .img,
.featured .thumbs a img,
.featured .thumbs a img.last,
.featured .desc h3,
.top-content ul li,
.sponsors img {
display: inline;
}
[/html]

Step 42

First IE bug you see is on the top navigation links, aligned vertically. If you give them the CSS property “inline-block” they would show like we mean to, horizontal aligned.

IE6 bug - navigation links vertically aligned

[html]
.top-content li a {
display: inline-block;
}
[/html]

Step 43

We push down the search field a couple of pixels, because it was a little too high.

[html]
.search_input {
padding-top: 3px;
}
[/html]

Step 44

The Read More button was way too much on the right side, even trespassing on the sidebar, so we give it some more room from the right till it falls back in the blog post position, and pull it higher with negative margin-top.

[html]
.readMoreButton {
right: 190px;
margin-top: -35px;
}
[/html]

Step 45

We fix the padding for the h2 headings with the dark blue background.

[html]
h2 span {
padding: 3px 6px 1px;
}
[/html]

Step 46

Stretch the line-height for the category links on the sidebar.

[html]
.cat li a {
line-height: 40px;
}
[/html]

Step 47

Reduce the right margin for the three columns on the footer in 1px.

[html]
.links, .flickr, .twitter {
margin-right: 52px;
}
[/html]

And that’s it! It wasn’t that painful, was it?

IE PNG Fix

If you do some research about how to fix the PNG-images bug on IE, you’ll see there’s a ton of options. Here’s how our PNG footer headings look in Internet Explorer:

IE6 bug - PNG images

Step 48

We’ll use the “BelatedPNG” hack. Download the belatedPNG.js file to your js folder and include this conditional comment in your index.html, before the Cufón scripts. So both the conditional comments for IE css and PNG will be there together, just for the sake of simplicity.

[html]
<!–[if IE 6]>
<script src="js/belatedPNG.js"></script>
<script>
DD_belatedPNG.fix(‘*’);
</script>
<![endif]–>
[/html]

Cufón and the link selectors issue on IE

If you check the webpage on a Windows machine at this very point, you’ll note something’s missing with the links styling: top navigation links, sidebar category links and footer links and Twitter paragraph. Oh yeah, we already include this rules on our func.js file and the design looks amazing on Firefox, Safari, Chrome, etc.

Obviously Cufón and IE aren’t very good friends. No, they don’t hang out or have a beer together, when you try to apply custom font types on “a” tags for links. To be completely honest, I googled for this, and I found that including a Javascript framework (as jQuery) to our design helps IE to render link tags as we meant to. We’re not using jQuery in our website to create beautiful animations or effects, just to make IE a little smarter.

Step 49

We only need to include the jQuery library from the Google CDN in our mark-up before the Cufón scripts.

[html]
<!– jQuery makes Cufon rendering links properly on IE –>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
[/html]

I downloaded the jQuery file in the js folder and added it in the last line here (as fallback), just in case I want to work with this website offline.

Here’s how the website should look on IE6 now.

IE6 browser testing

Cross-Browser Testing

I recommend you to test your websites in different browsers and platforms. A cool online tool for this is BrowserShots. In this case, you should deploy your website somewhere and paste the URL in the text field. Check or uncheck the different Browser/Platforms combinations to see the website screenshots.

BrowserShots - selecting platforms/browsers

BrowserShots - screenshots thumbnails

Validate Your Code

Normally, I start with the Photoshop slicing and exporting, then the whole HTML and finally the CSS. It’s a good practice to validate your code when you finish any of them. In this tutorial I walked you through working with markup and presentational layers at once, and we didn’t have the chance, yet.

Step 50

So, go to W3C and validate your HTML…

HTML validation

…and your CSS.

CSS validation

Step 51 – Compress Your CSS and order the properties

Once your website is on production, working on a server, you would like to save some HTTP requests by minifying your CSS files. Here’s another handy online tool for this.

Styleneat - selecting options

Styleneat - minified CSS

Step 52 – Minify your Javascript files

In our case, there’s no need for this, because all our javascript files are already compressed, but, if you wish to add some custom js flavors to the design, well, here you have two more online tools:

  • JavaScript Compressor
  • Online Javascript Compression Tool

Step 53 – Don’t forget the “alt” tags

Yeah, almost forgot about it. Doing some quick revision, I found we didn’t comment our alt tags in the images, except for the logo. I leave this to your own taste. Have in mind that completing the alt tags is a good SEO practice.

Step 54 – Create the FavIcon

Last, but not least, we’ll use html-kit to produce our “favicon”. We need a square image to upload, in this case I cropped the”featured.jpg” image with Photoshop.

Favicon generation - uploading custom image

Favicon generation - ico files ready to download

Save the generated image (.ico file) in the website root, and include the following piece of code in the header, right before the css lines.

[html]
<link rel="shortcut icon" href="favicon.ico">
[/html]

Here’s how your favicon should look on a couple of browsers:

Favicon testing on different browsers

Be sure to deploy your website somewhere, favicons won’t show on your local machine.

Fork this project on Github!

If you liked this project and want to experiment with its last version to date, or if you discover and fix any other cross-browser bug, please let me know in the comments. Or, if you do version control with Git in your Mac or PC for development, you may also download or fork this project on Github.

Thanks!

Wow! That was a lot of reading, wasn’t it? Well guys, thank you and hope you enjoyed this tut. See you all in the 3rd part for the WordPress theme development!

Filed Under: CSS, Design, Development, Photoshop, Tutorial

Comments

  1. Arshad Cini says

    January 3, 2011 at 7:44 pm

    This is one of the best complete tutorial i have ever seen.

    Thanks Taty

  2. psd2cssonline says

    January 3, 2011 at 9:20 pm

    Hi,This tutorial is amazing for building a portfolio site from scratch! It definitely teaches you the ins and outs of coding your Photoshop design, in a wonderfully easy and friendly way. – Stephanie

  3. Bruno says

    January 3, 2011 at 10:24 pm

    What a tutorial : huge, brilliant and unbelievably complete.
    Thanks A LOT!!

  4. Wozzza says

    January 4, 2011 at 8:30 am

    Great in-depth post, I’ll have to give it a try later starting on #1, must do some invoicing now though, thanks for sharing :)
    Wozzaa

  5. Alessavv says

    January 4, 2011 at 8:58 am

    Thanks!!!!

  6. Bruno says

    January 4, 2011 at 1:41 pm

    Brilliant!

  7. Joshua Pinter says

    January 4, 2011 at 10:13 pm

    Good work my man. Thanks for the effort to do this and for the sweet links like StyleNeat. Didn’t know about that :)

  8. neosheet says

    January 5, 2011 at 1:39 am

    Bookmarked!

  9. Uxguru says

    January 5, 2011 at 9:31 am

    wow! great examples. XHTML coding really help

    Thanks

  10. Carmella says

    January 5, 2011 at 4:39 pm

    Bookmarked! This is an incredibly detailed tutorial, learned a lot just in the first few steps!

  11. Chris says

    January 6, 2011 at 9:19 am

    Should have been written for WordPress since this is a blog layout. Nice job, though. Lots of detail and great information.

  12. Jon Phillips says

    January 6, 2011 at 9:20 am

    It will be – a WP tutorial is coming soon.

  13. Noel says

    January 12, 2011 at 1:20 am

    Thank you so much for the tutorial. It’s great and I definitely learned a lot!

  14. valarioni says

    January 20, 2011 at 5:51 pm

    Wow Taty, this is the best tutorial for PSD to xHTML I’ve seen for a very long time.
    I have learned several things only reading it once. I am sure there will be more things coming.

    The only suggestion I can make, is if you can show us how to produce CSS styling, that you already showed us here, because most of don’t know how you set them up. Was it through Dreamweaver ???

    Also I look forward for next series for xHTML -> WordPress. Bokkmarked for future reference.

  15. salwar says

    January 24, 2011 at 11:54 am

    Nice tutorial.. Thanks for sharing,…

  16. Sohail says

    June 11, 2011 at 2:03 am

    Simply Perfect, Most complete tutorial ever i seen,

    Great job,

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

Recent Posts

  • How to Choose a Stunning Font Package for Your Brand
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022