How To Create A Beautiful Home Page In Html
Read Time: 42 mins Languages:
As a sequel to the popular tutorial, "Design a Beautiful Website From Scratch", we will be converting our beautiful design into a valid HTML/CSS website. Even though we used the 960.gs template, we will not use its CSS framework to build the site. Instead, we will be coding this design from scratch!
It's always important to create strong and clean markup first, Why is that? One of the reasons is because, if we need to change our design or rearrange some things in our web site, we only need to make modifications to our CSS file and never touch our markup.
Introduction
Today we're going to learn how to prepare this design for coding and will code it to a valid (X)HTML/CSS, cross browser website. We will cover only the homepage of the website, and if you're interested in practicing more, the design is available at Themeforest.net. This is a very detailed tutorial; so you better prepare yourself with a huge cup of tea and some biscuits. We're starting in 3,2,1......
Step 1 - Organizing folders
Before we start our new project, we will need to create a new folder where we can save all our data. I usually create one folder for each project named after the website I'm designing. Inside, I create a set of folders for various purposes like "files", "PSD", "HTML", "pdf" etc.. We will need only one folder now and you can call it "HTML". Inside that folder, create 3 more folders and name them "css", "js" and "images". Then open the "css" folder and create another folder and call it simply "i" (which stands for images ). Why did we do that? Well...the reason I did this is because I want to separate my content images from those which create my web layout. This can come in handy if I would ever need to move my folders on the server, then the paths to my images will not be affected, and I would not need to modify my CSS file again to correct it.
Step 2 - Analyzing the design
So, we're done with organizing our folders. Now we can take a closer look at our design. Take a screenshot of Beautiful Website Design and try to think "behind the scenes", just like I did. Every element of our future web site will need to be coded and wrapped inside an HTML tag. We should also keep in mind that this is going to be a template that someone will use later and modify it to their needs, so we need to make it as flexible as possible for our users. We need to make sure that if a user want's to put a bigger logo instead of this one, that the placeholder (div) where the logo goes is expandable. Also other parts of the site need to stretch with the content. This is why we're going to have maybe few extra placeholders (div's) to accomplish this. If you were to code a site for a client you might not slice it this way because it would probably stay as is. Let's go step by step and see which elements goes in which tags.
First, the backgrounds. We need to break the top part into two smaller parts: top _top where the logo and search field goes, and top _bottom where the navigation is placed. Further, there is a big header holder, main content and footer. Notice that there is an extra box for footer nav. This is because we want the footer to be expandable too because someone might want to have 10 recent posts or comments instead of just 3, like I designed. This way footer content will push the footer navigation further down and there will always be more room for extra content.
Now the interface. The logo is usually wrapped inside an H1 tag, so we're gonna do the same thing here. The search form will be wrapped inside the "form" tag, which will be given a background image as seen on the screenshot. Before we move on I suggest that we see where we can use all our 6 Headings (H1 to H6). H1 is done, we said it will be our logo as it is the most important and comes always first. H2 is the second most important heading and we will use it to wrap our tag line image. Don't worry we will provide an alternative text for screen readers though. I decided that the third heading could be used to display our services descriptions or tag lines. So let's do it. Because what clients say about us is very important. I decided that it should go inside the H4 tag and not just a paragraph, even if it looks like a paragraph text. H5 are used for our footer headings and H6 for Latest Blog entries. Ok, so our H's are gone, we can move on. As you can see every element that has one sentence or more is put inside a paragraph and links are of course
"a"'s. Bulleted lists, like the one in the main content, is a simple unordered list "ul" where the bullet on "li" is replaced with a custom image. Also, all our navigation's, top, middle and bottom are placed inside unordered lists - just styled differently.
If you pay attention, you will notice that I've used only 5 HTML elements/tags to create our layout. For example, I have put the "Sign up" button directly inside the "a" tag because it is a link after all, no matter if it has a button graphic behind it. There's no reason to create a div with our button graphic first and then to put a link "a" inside. When we're done with our analyses we can open Photoshop and prepare our PSD for slicing.
Step 3 - Preparing the PSD
In this tutorial, we will be using the Slice Tool to cut out our layout images. Yes, you heard me right, the Slice tool. I use it only when I create templates that are for someone else or for sale on Themeforest because not everybody has skills to change their logo image or other graphic and replace it without breaking the layout. Essentially everyone would also need to make some modifications inside the CSS file (change dimensions etc.).
Remember that we are talking about how to make it easier for someone to modify it later, well that's one of the ways to do it.
If you feel like you don't need to do that then just skip this step.
Since we have a lot of graphics in our design, we need to separate them to make it easier for us to slice. I usually hide all content and buttons etc. and leave just the backgrounds and save that file as backgrounds.psd. The same goes for buttons etc. just without the backgrounds. So, now we have two psd files. One with backgrounds and one with buttons, bullets, headings etc..
background.psd
content.psd
Step 4 - Slicing the images
Now we can start slicing our layout. We have the "background.psd" and "content.psd". We will first start with "background.psd". As said before, you can cut out your graphics from a single psd file, just like I do sometimes, but this time it's important to have it separated so it's easier for our client to make modifications later.
Open the "background.psd" file. From Tools panel on the left, choose Slice Tool.
Step 5
With the Slice Tool selected, draw a slice from the top of the document to the next stripe (navigation part). Make the slice about 20px wide. NOTE: sometimes it's better to make a repeated background image wider. The reason for this is because our browser will repeat the image to create the background, and browser rendering engine needs to calculate the background width and add images to create full background. If our image would be 1px, imagine how much calculation needs to be done and of course your CPU usage would rise a bit more. Having said that, it's wiser to make a wider background image with maybe larger file size (just a few kilobytes) to save us CPU usage.
Pull the slice just near the dark gray line as this is where our navigation background starts. Notice how we always leave a solid color at the bottom of every slice. This is because this way we make this area expandable. Later we will add a background color to the placeholder and this repeated image, and if our content would be bigger our site won't break!
Step 6
We don't need to draw in slices every time, we can just copy and resize existing ones. Hold Shift+Drag the slice from above further down. Adjust the height only! Make it so that the bottom part of the slice is light gray solid color.
Step 7
Header background is the only part that will stay fixed in height. That's how we're going to slice this background image. Copy the slice from above again and adjust the height to fit the whole blue header part, including the small shadows.
Step 8
Main content background does not need to be sliced in full height. We need to look for the last solid color that appears in the gradient, and that's #ffffff (white). Use the Color picker Tool to find that part of the gradient and adjust the height of the slice to that point.
Step 9
Footer. Copy the slice from above, shift it down and adjust the height to fit the dark gray footer background.
Step 10
Now we have left only the small bottom navigation background to cut out. Again, copy the slice from above and adjust the height until you reach the end of the document.
Step 11
We're not done with backgrounds yet. We have the picture frame and light effects left. To slice the picture frame, we need to disable all background layers so we end up having only the frame. Then draw in a slice and zoom in. Adjust the slice so that the whole image is placed inside that slice.
Step 12
Here's how the light effect would look like when all background layers are turned off. Make sure that you stay inside the 960 grid when creating slices. The top light (1) and bottom light (3) will be exported as transparent PNGs, and the middle part (2) as a JPEG. We could have sliced the whole light effect with the Background and saved as JPEG but I prefer to do it this way.
Step 13
Now open your "content.psd" file, as we will now be cutting out our buttons, images, navigation etc.
Create slices just the same way you have done it before. Make sure to zoom in a lot to precisely create a slice for every object. This is how it should look.
You can always enable the background to get a better contrast when slicing.
Step 14
Zoom in 100% the two buttons in the header to see where the shadow ends and draw a slice around it. It is important to be very precise here because we don't want our shadow to be cut off somewhere. It would look awkward in the browser.
Step 15
Time to export our slices as transparent PNGs. Go to File > Save for Web. From the drop down choose PNG 24 .
Step 16
Now hold Shift and select all slices we have created as we won't to export only those. Maybe you would need to select PNG 24 from the dropdown again. Click Save . When the dialog window opens, choose Save selected slices only, from the drop down at the bottom of the window. Make sure to specify the folder where to export the images.
Step 17
We're using the sliding doors technique for our navigation buttons. If You want to learn more about it, make sure that you visit this article at A List Apart. We need to ensure that we have a long enough left part of our button to fit the longest word in menu (PORTFOLIO). This is why we had to expand the :hover/:active state in our design to fit that word. It's always better to make it few pixels wider than to have it sliced again if it doesn't fit.
Step 18
For our tabbed navigation, we will use CSS sprites. For more about CSS Sprites, read Exactly How to Use CSS Sprites . We need to create one button for the inactive and active state. This is done so that we can move the inactive tabs above the active and slice each tab with both states.
This is how one tab slice should look like. Make sure to leave 1px gap between tabs.
Step 19 - Naming images
It's time to give our exported images meaningful names. I've made a screenshot of all my images and their names so you can just follow my example. These images are all placed inside the "CSS/i" folder because they are part of our website layout. Other images like footer "Ads" or the "Featured work" image are placed inside the "/images" folder, which is in the root.
Step 20 - Preparing HTML and CSS templates
We are ready to close Photoshop and start coding this beautiful design. Before doing so, let's make a tiny preparation work. This is just an optional step, you may skip it if you like. I usually have prepared my HTML and CSS files for every project. Once you do that too you will only need to copy them to your working folder. I like to have my blank HTML file like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="#" /> <meta http-equiv="cahe-control" content="cache" /> <meta http-equiv="Content-Language" content="en" /> <meta http-equiv="Copyright" content="Copyright #" /> <meta name="keywords" content="PLEASE ENTER YOUR KEYWORDS HERE" /> <meta name="robots" content="index" /> <meta content="all/follow" name="robots" /> <meta content="general" name="rating" /> <meta content="7days" name="revisit" /> <!--CSS --> <link href="css/main.css" rel="stylesheet" type="text/css" media="screen" /> <!--JAVASCRIPT --> <!--PAGE TITLE --> <title>BVD - Beautiful Website Design</title> </head> <!--BEGIN BODY --> <body> </body> </html>
And inside the CSS file, I like to write something about the website I'm coding, so it would look something like this:
/* CSS Document for BVD */ /* Title: main.css Browser(s): All Author: Marko Prljic (http://www.markoprljic.iz.hr) Created: 11.05.2009 */
Step 21 - The Markup
First thing first. We will start with our markup. As said in the introduction, it's very important to create strong and clean markup. This is why we have first analyzed our design, made some notes and thought about our markup structure before we start coding. I suggest you do this every time before you start coding any project. If the site will be later adopted on some sort of CMS then it's also a good idea to sit next to your developer and go through the markup again and eventually make some changes if needed. Since we won't be adopting this to any CMS, we can just stick with our notes from Step 2.
Step 22
Let's start with backgrounds. To do this we need to create placeholders for our content. Place this code inside the body.
<div id="top_content"> <div class="center" id="top_light1"> </div> </div> <div id="nav_content"> <div class="center" id="top_light2"> </div> </div> <div id="header"> <div class="center" id="top_light3"> </div> </div> <div id="main_content"> <div class="center1" id="top_light4"> </div><!--end center 1 --> </div><!-- end main content--> <div id="footer"> <div class="center" id="top_light5"> </div> </div> <div id="footer_nav"> <div class="center"> </div> </div>
Remember how we sliced our images from the PSD file? First we sliced the top background, then the navigation background, then the main content background etc. Now when we create our markup, we will do it in the same order as we sliced our images. So I created "top_content" div first, then "nav_content", then "main_content", "footer_content" and "footer_nav". You will notice that I've immediately created some extra div's called "center". The reason I did this is because these "center" divs are our true content holders, so to speak. The "top_content" div is used to display our repeated background image and will be set 100% wide via the CSS file. We need to create an extra div that will be centered so our content also appears centered inside the browser.
Step 23
Now we have made all our main placeholders for the content. The next step is to go one by one and start putting some code for other elements. Inside the "top_content" div we have a logo and a search input field. Let's crate them.
<div id="top_content"> <div class="center" id="top_light1"> <h2><a href="#">BVD-Beautiful Website Design</a></h2> <form id="search" action="" method="post"> <fieldset> <label for="search">Search</label> <input name="search" type="text" id="search" tabindex="1" /> </fieldset> </form> </div> </div> <div id="nav_content"> <div class="center" id="top_light2"> <ul id="nav"> <li><a href="#"><span>home</span></a></li> <li><a href="#"><span>about</span><</a></li> <li><a href="#"><span>service</span></a></li> <li><a href="#"><span>portfolio</span></a></li> <li><a href="#"><span>blog</span></a></li> <li><a href="#"><span>contact</span></a></li> <li><a href="#"><span>pricing</span></a></li> </ul> <p ><a href="#">Log in</a> <span >or</span></p><a href="#">Sign up</a> </div> </div> <div id="header"> <div class="center" id="top_light3"> <h2>We make beautiful websites at affordable prices </h2> <p>Because web design is our passion and that's what we do </p> <p><strong>Gratuitous octopus </strong> niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. </p> <a href="#">Get a qoute </a> <a href="#">View portfolio </a> <img src="images/header_images.png" alt="featured work" width="471" height="370" /> </div> </div> <div id="main_content"> <div class="center1" id="top_light4"> <!-- Leave room for the slider here, we will do this later--> <div id="testimonials"> <div id="testimonials_inner"> <p >BVD is the best agency I've ever worked with...</p> <h4>"These guys are simply awesome. I sent them my brief, they answered within few hours and one week later they delivered me the best design ever!"</h4> <p ><span>said</span> <strong>John Doe</strong> <span>of</span></p><a href="#">Awesomeness</a> <a href="#">SEE WHAT OTHERS ARE SAYING</a> </div> </div> </div> </div> <div id="footer"> <div class="center" id="top_light5"> <div class="column"> </div> <div class="column"> </div> <div class="column"> </div> <div class="column"> </div> </div> </div> <div id="footer_nav"> <div class="center"> <a class="footer_logo" href="#">BVD</a><p>Copyright 2009. All rights reserved. Valid (X)HTML / CSS.</p> <ul> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">service</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">blog</a></li> <li><a href="#">contact</a></li> <li><a href="#">pricing</a></li> </ul> </div> </div>
First we have to create the "H1" and wrap our logo inside (we'll do this with CSS later). Then we have our search input field. We need to create a form because we will add a background image to it. Next comes the navigation. It is a simple unordered list which we will style with CSS later. Notice that I've added an extra "span" inside the "li"'s. This is because we will be using the sliding doors technique and it requires a span element to achieve the effect. After the navigation we have our Login or Sign up buttons. Since these two are going to be links I've put them inside the "a" .
The header is made from a heading, few paragraphs, two buttons and one big image.
The "main_content" will include a jQuery slider, but for now I left that empty and created just the testimonials part. I'm not very good with jQuery to write my own script and markup, so I would probably be using one of the free available scripts and make just few modifications to fit our needs.
Client testimonials are made from two divs. We have 4 borders to create and this is possible with these two divs. The outer div will have a 1px border, background color, and padding applied, and the inner div will also have a 1px border and background color. This way, we can create that effect.
All that is left now is the footer. We will create just empty columns and fill them later on the go. I suggest we should see how our website looks inside a browser.
Step 24
This is how our site looks currently. There's still no CSS styling applied so the browser renders it by default. This way we can also see how other screen readers will interpret our site, because screen readers have no CSS or JS enabled. Our site needs to be accessible and this is one way to test it.
And now to see how it will look like on mobile.
Nice!
Step 25 - The Fun part (CSS)
It's time to give our site more style! We've set the base, we have clean markup, almost all elements of our website are here. We will be touching the markup again because we will need to add some extra classes and id's to some elements so we can style them. I will go from top to bottom again and once and a while do the testing and present you with a screenshot. Let's bring it on!
Step 26
Open the main.css file. Add some basic CSS reset styles and body definitions, like this:
* { margin: 0 auto 0 auto; /* GLOBAL RESET */ padding: 0; } body{ margin:0; font-size: 62.5%; font-family: Arial, Sans-Serif; /*change font*/ line-height: 150%; color:#4b4d4a; /*change font color*/ background: #fff; /*background color*/ } div, p, ul, img{ padding:0px; margin:0px; border:none; } ul{ list-style-type:none; } Step 27
Next we will style our Headings and add some browser fixes.
a { outline:none; /* Remove Firefox's dotted borders */ text-decoration:none; color:#d05606; padding:0; margin:0;} a img { border:none;} /* Remove IE's blue borders */ h1 {font-size: 2.4em;} h2 {font-size: 2.2em;} h3 {font-size: 3.2em;} h4 {font-size: 1.6em;} h5 {font-size: 1.8em;} h6 {font-size: 1.2em;} Step 28
I usually declare a few extra classes just in case I need them. Mainly they are for text formatting, floating elements and margins and padding.
.hr{ border-bottom:1px solid #CCCCCC; border-left:none; border-right:none; border-top:none; margin:10px 0 20px 0; } .left{ float:left;} .left_margin_right{ float:left; margin:0 10px 0 0; font-size:1.2em;} .left_margin_right_top{ float:left; margin:4px 10px 0 0;} .right{ float:right;} .right_margin_top{ float:right; margin:40px 0 0 0;} .right_margin_right{ float:right; margin:0 20px 0 0;} p {font-size: 1.2em; padding:0; line-height:1.4em;} .gray {color: #666; font-size:1em; font-style:normal;} .fat{font-weight:bold;} .small {font-size: 1.1em; padding:0; line-height:1.4em;} .big {font-size: 1.8em; padding:0; line-height:1.2em; color:#f1f1f1; margin:0 0 22px 0;} .white {font-size: 1.2em; padding:0 10px 0 0; line-height:1.4em; color:#fff;} .title{ font-size:1.1em; font-style:italic; color:#227ab0;} .stroke { border:1px solid #fff;} Step 29 - The backgrounds
Now we're going to give color to our layout. Let's select all outer div's and attach repeated background images to them.
#top_content{ background:#dddddd url(i/bg_top.jpg) top center repeat-x; height:81px;} #nav_content{ background:#e4e4e3; height:52px;} #header{ background:#268abe url(i/bg_header.jpg) top center repeat-x; height:418px;} #main_content{ background:#fff url(i/bg_cont.jpg) top center repeat-x; padding:0 0 50px 0;} #footer{ background:#4b4d4a url(i/bg_footer.jpg) top center repeat-x; height:368px;} #footer_nav{ background:#dcdcda url(i/bg_footer_nav.jpg) top center repeat-x; height:32px; padding:15px 0 0 0;} .center{ width:960px; height:100%; margin:0 auto; padding:0;} Now let's see how this looks like in the browser.
Step 30
We have our backgrounds set, now we only need to place the light effect overlay in each div. To do this we will create a set of id's with transparent png's set as backgrounds.
#top_light1{ background:transparent url(i/bg_top_overlay.png) top center no-repeat; } #top_light2{ background:transparent url(i/bg_nav_overlay.png) top center no-repeat; } #top_light3{ background:transparent url(i/bg_header_overlay.jpg) top center no-repeat; } #top_light4{ background:transparent url(i/bg_cont_overlay.png) top center no-repeat; } #top_light5{ background:transparent url(i/bg_footer_overlay.png) top center no-repeat; } To avoid adding extra div's in our markup we will just add an id to the already defined div. For that we need to change our markup just a bit.
<div class="center" id="top_light1"></div>
After modifying all the .center div's, let's preview the changes.
Step 31
Now we have set the base and we can go step by step styling all elements. First comes the logo and search form. For that just add this CSS code:
h1 a { float:left; margin:20px 0 15px 0; display:block; width:350px; height:46px; background: transparent url(../images/logo.png) no-repeat; text-indent:-9999px; overflow:hidden;} #searchform {float: right; margin:30px 0 15px 0; background: transparent url(i/bg_search.png) no-repeat;} fieldset.search { border: none; width: 146px; } .search input, .search button { border: none; float: left; } .search input.box { color: #a4a3a3; font-size: 1.2em; width: 109px; height: 17px; padding: 5px; vertical-align:middle; margin: 0; background:none; outline: none; } .search input.box:focus { background: none; outline: none; } .search button.btn { width: 27px; height: 27px; cursor: pointer; text-indent: -9999px; background: url(i/bg_search.png) no-repeat top right; } .search button.btn:hover { background: url(i/bg_search.png) no-repeat bottom right; } First we declare the heading "h" followed by the "a" tag. We specify the width and height and background image (which is our logo image). Because "a" is an inline element we need to convert it to a block level element and we do that by adding "display:block;" property. "text-indent:-9999px;" is used to move the text off the screen so only the image is visible. "overflow:hidden;" removes the big dotted border around the link and makes it the same width and height as declared earlier. With the search form we did a little trick. We gave our "form" a background image (the whole field with button). Then we said that our input field will be 109px wide and 17px high. Actually the image is 27px high but because we added 5px padding we need to subtract 10px from the width and 10px from the height (5px from every side) of the input field. This is something we will be doing a lot later so try to remember this. Next we added a button, gave it the same background image but made it only 27px wide and 27px high, like the "GO" button itself. Additionally we declared the :hover state of the button.
Step 32 - Navigation
Navigation is made with the sliding door technique. I will not explain that technique here in detail so you should read this article first. Here's the code for our navigation.
/*NAVIGATION*/ .nav ul {margin:10px 0 0 0; padding: 0; list-style: none; float:left; } .nav ul li{float: left; display: block; margin: 0 10px 0 0; padding: 0;} .nav ul li a.button { /* Sliding right image */ display: block; float: left; height: 27px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */ margin-right: 6px; padding-right: 14px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */ /* FONT PROPERTIES */ text-decoration: none; color: #848484; font-size:1.2em; font-family: Arial, Helvetica, sans-serif; font-weight:normal; text-transform:uppercase; } .nav ul li a.button span { /* Background left image */ display: block; line-height: 27px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */ padding:0 0 0 15px; } .nav ul li a.button:hover { /* Sliding right image */ background: transparent url(i/button_nav_right.png) no-repeat scroll top right; display: block; float: left; height: 27px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */ margin-right: 6px; padding-right: 14px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */ /* FONT PROPERTIES */ text-decoration: none; color: #7b3500; font-size:1.2em; font-family: Arial, Helvetica, sans-serif; font-weight:normal; text-transform:uppercase; } .nav ul li a.button:hover span { /* Background left image */ background: transparent url(i/button_nav_left.png) no-repeat; display: block; line-height: 27px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */ padding:0 0 0 15px; } .nav ul li.selected a { /* Sliding right image */ background: transparent url(i/button_nav_right.png) no-repeat scroll top right; display: block; float: left; height: 27px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */ margin-right: 6px; padding-right: 14px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */ /* FONT PROPERTIES */ text-decoration: none; color: #7b3500; font-size:1.2em; font-family: Arial, Helvetica, sans-serif; font-weight:normal; text-transform:uppercase; } .nav ul li.selected a span { /* Background left image */ background: transparent url(i/button_nav_left.png) no-repeat; display: block; line-height: 27px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */ padding:0 0 0 15px; } Before you test this in your browser make sure to make a small change to the markup.
<div id="nav_content"> <div class="center" id="top_light2"> <div class="nav"> <ul id="nav"> <li><a href="#"><span>home</span></a></li> <li><a href="#"><span>about</span><</a></li> <li><a href="#"><span>service</span></a></li> <li><a href="#"><span>portfolio</span></a></li> <li><a href="#"><span>blog</span></a></li> <li><a href="#"><span>contact</span></a></li> <li><a href="#"><span>pricing</span></a></li> </ul> </div> <a class="signup" href="#">Sign up</a><p class="login" ><a class="fat" href="#">Log in</a> <span class="gray" >or</span></p> </div> </div>
Step 33
To the right of the navigation we have a "Sign up" button we need to style. Paste this code in your CSS file.
.signup { float:right; width:87px; height:30px; display:block; margin:10px 0 0 0; background:transparent url(i/button_signup.png) no-repeat; text-indent:-9999px; overflow:hidden;} .login {float:right; margin:15px 10px 0 0;} We floated both elements to the right and gave them top and right margin so they are centered and moved apart from each other.
Step 34 - The Header
Here we have to change the markup again a bit, but it all comes down to adding classes to existing elements and maybe adding something new. I've divided the header into two parts, the left side and the right side. For that I created two new classes in the CSS file:
.left_column { width:469px; float:left; padding:55px 0 40px 0;} .right_column { width:470px; float:left; padding:50px 0 0 0;} The left column will be used to contain the tag line, paragraphs and buttons, and the right column will not be used here as we have a big image on the right that is big enough to hold the header together. This column will be used inside the main_content. Here is our new header markup:
<div id="header"> <div class="center" id="top_light3"> <div class="left_column"> <h2>We make beautiful websites at affordable prices </h2> <p>Because web design is our passion and that's what we do </p> <p><strong>Gratuitous octopus </strong> niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. </p> <a href="#">Get a qoute </a> <a href="#">View portfolio </a> </div> <img src="images/header_images.png" alt="featured work" width="471" height="370" /> </div> </div>
And the CSS:
.tagline{ width:436px; height:97px; background:transparent url(../images/tagline.png) no-repeat; text-indent:-9999px; overflow:hidden;} .getquote {float:left; margin:42px 0 0 -4px; display:block; width:168px; height:45px; background: transparent url(i/button_quote.png) no-repeat; text-indent:-9999px; overflow:hidden;} .portfolio {float:left; margin:42px 0 0 10px; display:block; width:168px; height:45px; background: transparent url(i/button_portfolio.png) no-repeat; text-indent:-9999px; overflow:hidden;} This is how our site should look like now.
Step 35 - Main content
Remember that we left the main content out when we were writing the markup? Well, the reason why I did this is because we're going to use the slider from Chris Coyier's article Building a Better Blogroll: Dynamic Fun with SimplePie and jQuery. Now, read this article if you're interested in the whole process of creating this slider. I was not really interested in dynamic generated content with PHP so I downloaded the source code and copied it here. I made some modifications to the HTML, CSS and JS file to get the same effect but with my own design. To do the same first insert this code in the head of the document:
<script src='js/jquery-1.2.6.min.js' type='text/javascript'> </script> <script src="js/jquery-easing.1.2.js" type='text/javascript'> </script> <script src="js/jquery-easing-compatibility.1.2.js" type='text/javascript'> </script> <script src="js/coda-slider.1.1.1.js" type='text/javascript'> </script>
Next add this code inside the center div which is inside the main_content:
<div id="blogSliderWrap"> <div id="blogSlider"> <div class="innerWrap"> <div class="panelContainer"> <div class="panel" title="Web design"> <div class="wrapper"> <div class="left_column"> <div class="featured"> <img src="images/featured_0.jpg" alt="featured work" /> </div> <p class="small"><span class="title">Freelance designer</span> - January 2009</p> </div> <div class="right_column"> <h2>We make the best websites!</h2> <p class="big">Because web design is our passion and <br />that's what we do.</p> <ul class="listing"><!-- left list--> <li>Adobe Photoshop</li> <li>Adobe Illustrator</li> <li>Adobe Flash</li> <li>Adobe Fireworks</li> </ul> <ul class="listing"><!-- right list--> <li>Adobe Dreamweaver</li> <li>Adobe Swift 3D</li> <li>Adobe Photography</li> </ul> <p class="description">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. </p> </div> </div> </div> <div class="panel" title="Marketing"> <div class="wrapper"> <div class="left_column"> <div class="featured"> <img src="images/featured_0.jpg" alt="featured work" /> </div> <p class="small"><span class="title">Freelance designer</span> - January 2009</p> </div> <div class="right_column"> <h2>We make the best websites!</h2> <p class="big">Because web design is our passion and <br />that's what we do.</p> <ul class="listing"><!-- left list--> <li>Adobe Photoshop</li> <li>Adobe Illustrator</li> <li>Adobe Flash</li> <li>Adobe Fireworks</li> </ul> <ul class="listing"><!-- right list--> <li>Adobe Dreamweaver</li> <li>Adobe Swift 3D</li> <li>Adobe Photography</li> </ul> <p class="description">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. </p> </div> </div> </div> <div class="panel" title="Consulting"> <div class="wrapper"> <div class="left_column"> <div class="featured"> <img src="images/featured_2.jpg" alt="featured work" /> </div> <p class="small"><span class="title">Freelance designer</span> - January 2009</p> </div> <div class="right_column"> <h2>We make the best websites!</h2> <p class="big">Because web design is our passion and <br />that's what we do.</p> <ul class="listing"><!-- left list--> <li>Adobe Photoshop</li> <li>Adobe Illustrator</li> <li>Adobe Flash</li> <li>Adobe Fireworks</li> </ul> <ul class="listing"><!-- right list--> <li>Adobe Dreamweaver</li> <li>Adobe Swift 3D</li> <li>Adobe Photography</li> </ul> <p class="description">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. </p> </div> </div> </div> <div class="panel" title="Support"> <div class="wrapper"> <div class="left_column"> <div class="featured"> <img src="images/featured_3.jpg" alt="featured work" /> </div> <p class="small"><span class="title">Freelance designer</span> - January 2009</p> </div> <div class="right_column"> <h2>We make the best websites!</h2> <p class="big">Because web design is our passion and <br />that's what we do.</p> <ul class="listing"><!-- left list--> <li>Adobe Photoshop</li> <li>Adobe Illustrator</li> <li>Adobe Flash</li> <li>Adobe Fireworks</li> </ul> <ul class="listing"><!-- right list--> <li>Adobe Dreamweaver</li> <li>Adobe Swift 3D</li> <li>Adobe Photography</li> </ul> <p class="description">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. </p> </div> </div> </div> </div><!--end panel container --> </div><!-- end inner wrap--> </div><!--end blog slider --> </div> <!--end blog slider wrap -->
I found out that I mostly needed to change dimension and paths to images from the original Chris's CSS file for the slider. The new slider CSS:
/* WIDGET STRUCTURE */ #blogSliderWrap { width: 1167px; margin: 0 auto; padding:50px 0 30px 0; background: url(i/bg_tabs.png) 35px 57px no-repeat; position: relative; } #blogSlider { margin: 0 auto; width: 960px; } .stripViewer { position: relative; overflow: hidden; clear: both; } .stripViewer .panelContainer { position: relative; left: 0px; top: 0px; } .stripViewer .panelContainer .panel { float: left; position: relative; width: 960px; } .stripNav { position: relative; top: 0; left:114px; z-index: 99; } .wrapper { padding: 10px; } .innerWrap { width: 960px; overflow: hidden; } /* MAIN TABBED NAVIGATION */ .stripNav ul li { float: left; } .stripNav li a { /* Generic "CSS image replacement" */ display: block; height: 69px; text-indent: -9999px; } /* The below class names are auto-generated by the JavaScript */ .stripNav li.tab1 a { background: url(i/tab_1.png) top center no-repeat; width: 231px; } .stripNav li.tab2 a { background: url(i/tab_2.png) top center no-repeat; width: 240px; } .stripNav li.tab3 a { background: url(i/tab_3.png) top center no-repeat; width: 240px; } .stripNav li.tab4 a { background: url(i/tab_4.png) top center no-repeat; width: 230px; } .stripNav li a:hover, .stripNav li a:active, .stripNav li a:focus { /* Restore focus styling that we removed when we removed outlines */ background-position: top center; } /* It is neccessary to repeat the image paths here */ .stripNav li.tab1 a.current { background: url(i/tab_1.png) bottom center no-repeat; } .stripNav li.tab2 a.current { background: url(i/tab_2.png) bottom center no-repeat; } .stripNav li.tab3 a.current { background: url(i/tab_3.png) bottom center no-repeat; } .stripNav li.tab4 a.current { background: url(i/tab_4.png) bottom center no-repeat; } Further we have updated the "right_column" with a few new classes so we need to style it in the CSS:
.right_column .description{ float:left; width:100%;} .featured { width:407px; height:237px; padding:17px 0 0 13px; background:transparent url(i/bg_image.png) no-repeat;} ul.listing{ float:left; padding:12px 80px 28px 10px; margin:0;} ul.listing li{ list-style-image: none; background-image:url(i/ico_li.png); background-repeat: no-repeat; background-position: left center; padding:0 0 2px 25px; margin:0 0 5px 0; font-size:1.2em;} ".featured" is the div on the left where our featured image goes. We set the background to be that image frame and used the "padding" property to center the content inside. "ul.listing" is the unordered list (bullet list) we have on the right. It's floated left and has some padding to separate it from surrounding content. Further we replaced default bullets on "ul.listing li" with our custom bullet image (blue) using the "list-style-image: none; background-image:url(i/ico_li.png);". With the "background-position: left center;" we aligned the bullet to the left and centered it with text. Finally add some padding to give everything more space. ".right_column .description" is a class for the paragraph that appears underneath the two bullet lists. It just tells the paragraph to be 100% wide so it doesn't wrap around the lists, since they are floated left.
And finally the JS file. I just deleted unnecessary code that we're not using here. New coda-slider.1.1.1.js file look like this:
jQuery(function(){ jQuery("div.csw").prepend("<p class='loading'>Loading...<br /><img src='http://tutsplus.s3.amazonaws.com/tutspremium/web-development/013_BeautifulWebsiteFromScratchCoding/images/ajax-loader.gif' alt='loading...'/ ></p>"); }); var j = 0; jQuery.fn.codaSlider = function(settings) { settings = jQuery.extend({ easeFunc: "expoinout", easeTime: 750, toolTip: false }, settings); return this.each(function(){ var container = jQuery(this); // Remove the preloader gif... container.find("p.loading").remove(); // Self-explanatory... container.removeClass("csw").addClass("stripViewer"); // Get the width of a panel, set from CSS... var panelWidth = container.find("div.panel").width(); // panelCount gives us a count of the panels in the container... var panelCount = container.find("div.panel").size(); // Calculate the width of all the panels when lined up end-to-end... var stripViewerWidth = panelWidth*panelCount; // Use the above width to specify the CSS width for the panelContainer element... container.find("div.panelContainer").css("width" , stripViewerWidth); // Set the navWidth as a multiple of panelCount to account for margin-right on each li var navWidth = 240; // Specify the current panel. // If the loaded URL has a hash (cross-linking), we're going to use that hash to give the slider a specific starting position... if (location.hash && parseInt(location.hash.slice(1)) <= panelCount) { var cPanel = parseInt(location.hash.slice(1)); var cnt = - (panelWidth*(cPanel - 1)); jQuery(this).find("div.panelContainer").css({ left: cnt }); // Otherwise, we'll just set the current panel to 1... } else { var cPanel = 1; }; // Create appropriate nav container.each(function(i) { // Create the Tabs jQuery(this).before("<div class='stripNav' id='stripNav" + j + "'><ul><\/ul><\/div>"); jQuery(this).find("div.panel").each(function(n) { jQuery("div#stripNav" + j + " ul").append("<li class='tab" + (n+1) + "'><a href='#" + (n+1) + "'>" + jQuery(this).attr("title") + "<\/a><\/li>"); }); // Tab nav jQuery("div#stripNav" + j + " a").each(function(z) { // Figure out the navWidth by adding up the width of each li navWidth += jQuery(this).parent().width(); // What happens when a nav link is clicked jQuery(this).bind("click", function() { jQuery(this).addClass("current").parent().parent().find("a").not(jQuery(this)).removeClass("current"); // wow! var cnt = - (panelWidth*z); cPanel = z + 1; jQuery(this).parent().parent().parent().next().find("div.panelContainer").animate({ left: cnt}, settings.easeTime, settings.easeFunc); }); }); // Same-page cross-linking jQuery("a.cross-link").click(function(){ jQuery(this).parents().find(".stripNav ul li a:eq(" + (parseInt(jQuery(this).attr("href").slice(1)) - 1) + ")").trigger('click'); }); // Set the width of the nav using the navWidth figure we calculated earlier. This is so the nav can be centred above the slider jQuery("div#stripNav" + j).css("width" , navWidth); // Specify which tab is initially set to "current". Depends on if the loaded URL had a hash or not (cross-linking). if (location.hash && parseInt(location.hash.slice(1)) <= panelCount) { jQuery("div#stripNav" + j + " a:eq(" + (location.hash.slice(1) - 1) + ")").addClass("current"); } else { jQuery("div#stripNav" + j + " a:eq(0)").addClass("current"); } }); j++; }); }; Step 36
After we've made all these changes we just need to insert a tiny bit of code in the "head" of our document to trigger the slider. After that we can test our page.
<script type='text/javascript'> $(function () { $("#blogSlider").codaSlider(); }); </script> This is how the main content area should now look. We still need to style the testimonials part.
Step 37
The testimonials box is made up of 2 individual divs. The outer div is given a background color and 1px solid border. Inner box is also given a background color, 1px border and margin of 10px. This margin ensures that the inner box will be 10px smaller on all sides then the outer div, creating a fat border effect of the outer div. Let's see the CSS.
#testimonials { margin:0 auto; width:960px; background:#f2f2f2; border:1px solid #e0e0df;} #testimonials_inner { margin:10px; padding:20px; width:900px; background:#f8f7f7; border:1px solid #ececec;} "margin:0 auto;" is used to center the testimonial box within the main_content. "padding:20px;" for inner div is used to distance the content from the border. Notice how the width of the inner box got smaller? This is caused by adding margins and padding. Every time we add padding to an element, we need to lower the width or height of that element depending on which padding was given.
Step 38
Now we have to style the content of the testimonials box. I've made a few extra classes for every part of the content and it looks like this:
#testimonials_inner p.intro{ color:#d05606; font-weight:bold; font-size:1.4em;} #testimonials_inner h4{ padding:20px 0; font-family:"Times New Roman", Times, serif; font-size:2.6em; color:#666; font-weight:normal; font-style:italic; line-height:1.4em;} #testimonials_inner a.all { display:block; width:192px; background:#f2f2f2; border:1px solid #e0e0e0; color:#6c6c6c; font-size:1.2em; padding:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} #testimonials_inner a.all:hover { display:block; width:192px; background:#fff; border:1px solid #e0e0e0; color:#6c6c6c; font-size:1.2em; padding:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} #testimonials_inner p.sig{ float:right; padding:0 20px 0 0;} #testimonials_inner p.sig span{ font-size:1.1em; font-style:italic; color:#666;} #testimonials_inner a.logo {float:right; width:162px; height:16px; display:block; background: transparent url(../images/logo_testimonials.png) no-repeat; text-indent:-9999px; overflow:hidden;} First I declared the paragraph font color, size and weight. Then the testimonial is wrapped inside the "h4" tag because I felt that it is an important part of the content and should be emphased this way. We could have wrapped it inside the "p" tag as well. The ".all" class is used for the "view more testimonials" button. You will notice that I used some CSS3 properties, like rounded corners. Most browser support it except IE of course. IE will render it as a square box. We can live with that :). Last thing to style is the signature and logo of the client, which will be a link to his homepage. I had to rearrange the markup a bit to get the "more button" and "signature" display in the right order, so this is how the new markup looks like:
<div id="testimonials"> <div id="testimonials_inner"> <p >BVD is the best agency I've ever worked with...</p> <h4>"These guys are simply awesome. I sent them my brief, they answered within few hours and one week later they delivered me the best design ever!"</h4> <a class="logo" href="#">Awesomeness</a><p class="sig"><span>said</span> <strong>John Doe</strong> <span>of</span></p> <a class="all" href="#">SEE WHAT OTHERS ARE SAYING</a> </div> </div>
Step 39
We're almost done with this layout. All that is left is the footer area. Let's see how our markup for footer looks like.
<div id="footer"> <div class="center" id="top_light5"> <div class="column"> </div> <div class="column"> </div> <div class="column"> </div> <div class="column"> </div> </div> </div> <div id="footer_nav"> <div class="center"> <a class="footer_logo" href="#">BVD</a><p>Copyright 2009. All rights reserved. Valid (X)HTML / CSS.</p> <ul> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">service</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">blog</a></li> <li><a href="#">contact</a></li> <li><a href="#">pricing</a></li> </ul> </div> </div>
Now we need to fill every column with some content. Let's do this.
<div id="footer"> <div class="center" id="top_light5"> <div class="column"> <h5>latest blog entries</h5> <div class="hr"></div> <p class="date">12.06</p><h6><a href="#">Some heading goes here</a></h6> <p class="lead">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.</p> <p class="date">12.06</p><h6><a href="#">Some heading goes here</a></h6> <p class="lead">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.</p> <p class="date">12.06</p><h6><a href="#">Some heading goes here</a></h6> <p class="lead">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.</p> </div> <div class="column"> <h5>recent comments</h5> <div class="hr"></div> <div class="recent_comment"> <p><span class="fat">Ben</span> said:</p> <a class="comment" href="#">Gratuitous octopus niacin, sodium glutimate. </a> </div> <div class="recent_comment"> <p><span class="fat">Joe Santos</span> said:</p> <a class="comment" href="#">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. </a> </div> <div class="recent_comment"> <p><span class="fat">Marko</span> said:</p> <a class="comment" href="#">Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate. </a> </div> </div> <div class="column"> <h5>adverstising</h5> <div class="hr"></div> <a class="ad_odd" href="#"> <img width="86" height="86" class="stroke" src="images/ad1.jpg" alt="advertising" /> </a> <a class="ad" href="#"> <img width="86" height="86" class="stroke" src="images/ad2.jpg" alt="advertising" /> </a> <a class="ad_odd" href="#"> <img width="86" height="86" class="stroke" src="images/ad3.jpg" alt="advertising" /> </a> <a class="ad" href="#"> <img width="86" height="86" class="stroke" src="images/ad4.jpg" alt="advertising" /> </a> </div> <div class="column_odd"> <h5>twitter stuff</h5> <div class="hr"></div> <div id="tweeter"> <a class="from" href="#">wisefalco</a>: <p>@<a href="#">simnor</a>Haha, this is really funny ( <a href="#">http://tinyurl.com/cnfd2</a> )</p> <p class="posted">5 minutes ago from web</p> <a class="follow" href="#">Follow us on Twitter</a> </div> </div> </div> </div>
First we added all headings in each column followed by the horizontal rule. The "Latest Blog" entry is made from a date, heading and lead text. Date is displayed with a background image (icon), and Heading is a link to the full article. I've added few extra classes to paragraphs and links so I can style them with CSS later. Recent comment is done almost the same way. The difference is that every comment is wrapped inside a "recent_comment" div. Advertising images have a fat border, so I made them the same way as I did the testimonials box. You should notice that one ad div has a class "ad_odd" and the other just "ad". This is because I've given a different margin to every add so they stay aligned and equally spaced. Last thing to note is the last column class "column_odd". The reason for doing this is the same as with ads earlier. We'll see that in CSS shortly. Twitter box has a simple background image with padding applied.
Step 40
Let see how the CSS for footer looks.
.column { width:225px; padding:0 15px 0 0; margin:30px 0; float:left; color:#f0f0f0;} .column h5{ font-size:1.4em; font-weight:bold; letter-spacing:-1px; text-transform:uppercase;} .column h6 { margin:0 0 10px 0;} .column h6 a { margin:0 0 10px 0; color:#fafafa;} .column h6 a:hover { margin:0 0 10px 0; color:#d05606;} .column .date{ float:left; width:34px; height:17px; padding:0 0 0 5px; margin:0 10px 0 0; background:transparent url(i/ico_date.png) no-repeat; font-size:1.1em; font-weight:bold;} .column p {font-size:1.1em;} .column p.lead {font-size:1.1em; margin:0 0 20px 0;} .column_odd { width:235px; padding:0; margin:30px 0; float:left; color:#f0f0f0;} .column_odd p {font-size:1.1em;} .column_odd h5{ font-size:1.4em; font-weight:bold; letter-spacing:-1px; text-transform:uppercase;} .column_odd #tweeter { width:181px; height:185px; padding:18px 20px 18px 20px; background: transparent url(i/bg_twitter.png) no-repeat; position:relative; font-size:1.4em; color:#333; font-family:"Times New Roman", Times, serif; font-style:italic;} .column_odd #tweeter a.from { font-weight:bold;} .column_odd #tweeter a.follow { position:absolute; bottom:60px; left:0; color:#fff; font-family:Arial, Helvetica, sans-serif; text-decoration:underline; font-size:0.8em; font-style:italic;} .column_odd #tweeter a.follow:hover { position:absolute; bottom:60px; left:0; color:#d05606; font-family:Arial, Helvetica, sans-serif; text-decoration:underline; font-size:0.8em; font-style:italic;} .column_odd #tweeter p.posted { font-size:0.8em; margin:5px 0 0 0; color: #999;} .column .ad{ float:left; display:block; width:88px; height:88px; border:1px solid #fff; padding:5px; margin:0; background:#eaeaea;} .column .ad_odd { float:left; display:block; width:88px; height:88px; border:1px solid #fff; padding:5px; margin:0 15px 15px 0; background:#eaeaea;} .column .recent_comment { background:transparent url(i/ico_comment.png) top left no-repeat; padding:0 0 0 40px; margin:0 0 20px 0; font-size:1.2em;} .column a.comment { display:block; font-size:0.9em; margin:5px 0 0 0; color:#f0f0f0;} .column a.comment:hover {display:block; font-size:0.9em; margin:5px 0 0 0; color:#d05606;} The width of the ".column" is calculated based on the grid and padding we added to each of them. "margin:30px 0;" gives the columns 30px space from top and bottom and 0px from left and right. As said before ".date" has a background image applied to it (orange icon). "h5" are column headings and "h6" are Latest Blog entries headings. We also defined the :hover state for "h6". The "column_odd" is the one with Twitter box. Notice that ".column" has a right padding of 15px set, whereas "column_odd" has padding of 0px set. This way, we get them all nicely aligned within our grid. The Twitter div is positioned relatively because, this way, we can easily absolutely position the "Follow us on Twitter" link to be displayed outside the Twitter balloon. We could have done this the other way round, but I thought this would be the best solution here.
Step 41
The bottom navigation is an easy task now. All we need to do is add the logo and some copyright notice and the small repeated navigation that is wrapped inside the unordered list. We have our markup ready, now we need the CSS for it. Here's the CSS code:
#footer_nav .center a.footer_logo{ float: left; display:block; width:25px; height:16px; background: transparent url(../images/logo_footer.png) no-repeat; text-indent:-9999px; overflow:hidden;} #footer_nav .center p { float:left; font-size:1.1em; color:#848484; padding:0 0 0 20px; } #footer_nav .center ul { float:right;} #footer_nav .center ul li{ float:left; margin:0 20px 0 0; } #footer_nav .center ul li a { font-size:1.1em; text-transform:uppercase; color:#848484;} #footer_nav .center ul li a:hover { color:#505457;} #footer_nav .center ul li a:active { color:#505457;} Step 42 - What about IE?
Yes, we need to fix some issues in IE7 and IE6. To do this, we first need to see which elements are not displayed correctly in both browsers. I won't explain much how to fix bugs in IE, but I can just say that it mainly comes down to adjusting the margins and padding. There are also few resources on common IE bugs and how to fix them:
- 10 Fixes That Solve IE6 Problems
- Let Internet Explorer 6 Behave Like Internet Explorer 7
- How to get Cross Browser Compatibility Every Time
- CSS for IE6, 6 common problems and fast ways to fix them
First put this bit of code inside the head of our document.
<!--[if IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" ><![endif]--> <!--[if IE 7]><link rel="stylesheet" href="css/ie7.css" type="text/css" ><![endif]-->
Step 43
Create ie6.css and ie7.css and save them inside the "css" folder where the main.css is also saved. For ie7.css paste this code:
div { overflow:hidden;} .signup { float:right; width:87px; height:30px; display:block; margin:-25px 0 0 0; background:transparent url(i/button_signup.png) no-repeat; text-indent:-9999px; overflow:hidden;} .login {float:right; margin:-15px 10px 0 0;} .description{ float:left; width:100%;} ul.listing{ float:left; margin:12px 60px 28px 10px; padding:0;} ul.listing li{ list-style-image: none; background-image:url(i/ico_li.png); background-repeat: no-repeat; background-position: left center; padding:0 0 2px 25px; margin:0 0 5px 0; font-size:1.2em;} .column .ad{ float:left; display:block; width:88px; height:88px; border:1px solid #fff; padding:5px; margin:0 0 15px 0; background:#eaeaea;} .column .ad_odd { float:left; display:block; width:88px; height:88px; border:1px solid #fff; padding:5px; margin:0 15px 0 0; background:#eaeaea; clear:left;} #searchform {float: right; margin:30px 0 0 460px; padding:0; background: url(i/bg_search.png) no-repeat;} #blogSliderWrap { background: none; width: 1167px; position: relative; overflow: hidden; background:transparent url(i/bg_tabs.png) no-repeat 30px 58px; } #blogSlider { background: none; width: 960px; position:relative; padding: 0; margin: 0; margin-left:115px; } .stripNav { margin: 0; top: 0px; } .signup { margin-top:10px; } .login { margin-top:14px; } .column_odd #tweeter a.follow { margin-top:400px; float:left; } And this is the ie7.css :
div { overflow:hidden;} .signup { float:right; width:87px; height:30px; display:block; margin:-25px 0 0 0; background:transparent url(i/button_signup.png) no-repeat; text-indent:-9999px; overflow:hidden;} .login {float:right; margin:-15px 10px 0 0;} .description{ float:left; width:100%;} ul.listing{ float:left; margin:12px 60px 28px 10px; padding:0;} ul.listing li{ list-style-image: none; background-image:url(i/ico_li.png); background-repeat: no-repeat; background-position: left center; padding:0 0 2px 25px; margin:0 0 5px 0; font-size:1.2em;} .column .ad{ float:left; display:block; width:88px; height:88px; border:1px solid #fff; padding:5px; margin:0 0 15px 0; background:#eaeaea;} .column .ad_odd { float:left; display:block; width:88px; height:88px; border:1px solid #fff; padding:5px; margin:0 15px 0 0; background:#eaeaea; clear:left;} #searchform {float: right; margin:30px 0 0 460px; padding:0; background: url(i/bg_search.png) no-repeat;} Step 44 - What about transparency in IE6?
We have a medicine for that too ;) . There are several IE6 PNG fix scripts available on the internet but I like to use the "DD belated" PNG fix. It rarely messes up IE6 and is easy to implement. First go to this website and download the script. To make it work we need another Conditional Comment in the head of our document.
<!--[if IE 6]> <script src="js/DD_belatedPNG_0.0.7a.js" type="text/javascript"></script> <script src="js/png_fix_elements.js" type="text/javascript"></script> <![endif]-->
Next open the "png_fix_elements.js" and edit inside. You need to specify all id's and classes of elements that have a transparent PNG applied to it.
DD_belatedPNG.fix ('#top_light1,h1 a,#top_light2,.tagline,.right_margin_top,.getquote,.portfolio,#blogSliderWrap,#top_light5,.column .date,.column .recent_comment,#footer_nav .center a.footer_logo,.stripNav li.tab1 a.current,.stripNav li.tab2 a.current,.stripNav li.tab3 a.current,.stripNav li.tab4 a.current,#top_light4,.stripNav li.tab1 a,.stripNav li.tab2 a,.stripNav li.tab3 a,.stripNav li.tab4 a,.featured, #footer .center .column_odd #tweeter'); That's it!
Wow, it has been a long and exhausted tutorial in which you learned how to code a website from scratch. We touched almost every topic in this process. From organizing folders, analyzing the design, defining the markup structure, preparing the PSD's, slicing images, and coding. I hope you have enjoyed it just as I did.
If you're interested in coding the full website, the design is available at Themeforest.net
- Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Digital Media Designer (UX) from Croatia with a global reach. His fields of expertise are human behavior, interaction principles and design. Founder of Twinkle Tap, Co-founder & UX director at DUXAD LLC.
How To Create A Beautiful Home Page In Html
Source: https://code.tutsplus.com/tutorials/coding-a-beautiful-website-from-scratch--net-4940
Posted by: riverahiscriand68.blogspot.com
0 Response to "How To Create A Beautiful Home Page In Html"
Post a Comment