Brilliante Blog Layout – Coding The PSD File Into CSS and HTML
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!
Step 1
Download the Photoshop file and take a look to the 4 main sections: header, content, footer and bottom.
Step 2
Let’s create a folder for our Brilliante Layout with the following 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.
<!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>
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.
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:
- 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.
- 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.
- File > New. Note that Photoshop will create a new file with exactly the same height and width as your selection.
- Edit > Paste. A new layer will be created with the image.
- 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.
- 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.
/* ----------------- 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; }
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.
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
Step 7
So here’s the CSS code for the layout.
/* ----------------- 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;
}
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.
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…
Finally, click the Let’s Do This! button and download your font file.
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.
<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>
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:
<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 -->
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.
/* ----------------- 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;
}
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.
Cufon.replace('.top-content a');
Here’s what the website should look like so far:
RSS feed: select the RSS icon and the text like this:
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.
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.
Then, enable it back and select and export it with the name search-arrow.gif.
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.
<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 -->
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.
.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;
}
This is what we have so far:
Step 15
Export the logo image, selecting the separation lines on the right.
Step 16
Still inside the “header” we type:
<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 -->
Step 17
Style the logo area.
/* ----------------- 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;
}
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.
Step 19
In our index.html file we type the code for the featured area, after the logo div.
<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’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 -->
Step 20
The CSS for the featured content.
/* ----------------- 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;
}
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.
Cufon.replace('h3');
The webpage at this point:
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.
Step 23
Here’s the html code for the main section, inside the content div.
<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">&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">&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">&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 -->
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
/* ----------------- 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;
}
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.
Cufon.replace('h2');
Step 26
It’s time to style our main fonts.
/* ----------------- 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;
}
Step 27 – Content: Sidebar
Export the author’s photo (author.jpg), the dummy-banners (advertiseHere.gif) and the categories arrow/bullet (cat-arrow.gif).
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.
<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 & 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 & 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 -->
Step 29
The author’s name and the category links have the Frutiger font. Let’s include both in the func.js file.
Cufon.replace('h4');
Cufon.replace('.cat a');
Step 30
Here, we style the picture borders with CSS one more time.
/* ----------------- 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;
}
This is how our awesome webpage look like so far:
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).
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).
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…
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.
<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’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>“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!”</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 -->
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).
/* ----------------- 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;
}
Step 36
Well, there’s two more elements using Cufón here: the links and the Twitter text. Func.js:
Cufon.replace('.links a');
Cufon.replace('.twitter p.cufon');
We could group all the Cufon.replace tags into one, like this:
Cufon.replace('h3, h4, .cat li a, .links li a, .twitter p.cufon, .top-content li');
Cufon.replace('h2');
Note I’m extracting the “h2″ tag from the group because it would mess everything on IE :-(
The webpage so far.
Step 37 – Bottom
Finally, the bottom area. There’s no need for nested divs this time, because no special background is showing.
<div id="bottom"> <ul> <li class="selected"><a href="#">Home</a>&nbsp;|&nbsp;</li> <li><a href="#">About Us</a>&nbsp;|&nbsp;</li> <li><a href="#">Services</a>&nbsp;|&nbsp;</li> <li><a href="#">Portfolio</a>&nbsp;|&nbsp;</li> <li><a href="#">Blog</a>&nbsp;|&nbsp;</li> <li><a href="#">Contact</a></li> </ul> <p>Copyright 2010 - <a href="#">Brilliante</a> - All rights reserved</p> </div><!-- #bottom -->
Step 38
And its CSS.
/* ----------------- 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;
}
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. ;)
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
Comments: