Creating our HTML & CSS website
Created by Martin Angelov on Jul 28th, 2009
What are we doing today?
We will create the HTML backbone behind BloggyBits.com, and style it with CSS. I am also going to demonstrate some interesting CSS tricks, that will be of a good use for any developer.
The layout
As you can see from the site itself, the layout is clean and simple, and you might guess that so is the code. We start with the <HEAD> section of the page:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>BloggyBits - your social widget</title> <link rel="stylesheet" type="text/css" href="/main.css"> <link rel="stylesheet" type="text/css" href="/jquery-ui/css/vader/jquery-ui-1.7.2.custom.css"> <script type="text/javascript" src="/jquery.js"></script> <script type="text/javascript" src="/jquery-ui/1.7.2.custom.js"></script> <script type="text/javascript" src="/jquery-ui/jquery.scrollTo-min.js"></script> <script type="text/javascript" src="/pp/jQuery.pagePeel.js"></script> <script src="/swfobject_2_2.js" type="text/javascript"></script> <script src="/main.js" type="text/javascript"></script> </head>
In the head section we include the CSS and JS files. On line 5 we include our main CSS file, which we will create in a minute. Later we include the jQuery UI styles, the jQuery javascript library & plugins, and our self-prepared js file – main.js, which we will cover in the next tutorials.
Now let’s take a look at the layout itself (the BODY section).
<div class="mainContent"> <!--main container--> <div id="pageTitle"> <!--page title--> <h1>BloggyBits</h1> </div> <div id="topBar"> <!--navigation bar--></div> <div class="topContainer"> <!--top container--> <div id="mainDescr"> <!--main information block about the widget--></div> <div id="slidesArea"> <!--screenshot of the wigdet with text--></div> <!--closing the top container--></div> <div id="chooseContainer"> <!--block for choosing services--></div> <div> <!--block for rearranging the tabs--></div> <div class="contentBlock"> <!--generation of the widget--></div> <div class="contentBlock marg"> <!--feedback form--></div> <!--closing the main container--></div>
This is the backbone of the site. It is stripped of all unnecessary content so that the example is better illustrated. To make it a little bit easier, here is how it renders in the browser:
The layout
So how do we convert the previous DIVs into a layout like the one above? With the help of the following CSS methods.
Centering a div with CSS
As you can see from the code posted above, I have set IDs to some of the DIVs, and the others have class names assigned (with class=”"). This allows us to specify specific rules for a single page element by id, or to a set of elements that share the same class.
The first rules we should take a look at are those that center the main container on the screen.
h1, h2, h3, h4, form, blockquote, small, input, body, p, label {
margin:0px;
padding:0px;
}/*we reset some of the page elements*/
body {
background:#282828;
font-family:Tahoma,Arial,Verdana;
color:#fcfcfc;
font-size:12px;
}
.mainContent{
width:767px;
margin:0px auto;
padding-top:20px;
}
On line 1 you can see that we specify a series of elements by tag name and we set their margin and padding properties to 0px. Browsers have different values for these elements, so we reset them. This way our site will look the same at every browser.
There are even separate CSS reset files available on the net, that do this for you and reset absolute every element. However for the purpose of this project that seems like an overkill.
Later we style the body and after that we define a class mainContent. This is the class name assigned to the main DIV container. We set up its width, margin and padding.
Line 14 is where the magic happens. We set the element’s margin 0px for its top and auto for its right, bottom and left parts. It makes the DIV centered on the page, with its upper end touching the top of the inner side of the browser window.
It is important to note, that you need to have specified a width in order for the above method to work.
Also a quick tip for you – always name your styles, so you can, just by looking at them, easily remember what they were about.
Putting an image in H1
Now let’s take a look at another interesting trick in CSS. Remember the following code from the the page layout?
<div class="mainContent"> <!--main container--> <div id="pageTitle"> <!--page title--> <h1>BloggyBits</h1> </div> ................
What this does is create a text H1 heading with text inside. But you don’t see such a thing in the site – there you see an image instead of the text. So why and how is this done?
It was done because as you can remember, we already made a logo for our site. But if we put a regular <img> in there, it won’t be search engine friendly – robots don’t know what is written in images. That is why a H1 heading is used – for search bots it has the biggest weight and it is very important for your page rankings. But for human visitors we want a image displayed instead of the pain text.
To answer the second part of the question you need to see some more of our CSS.
h1{
background: url(/images/logo.gif) no-repeat;
width:200px;
height:41px;
text-indent:-200px;
overflow:hidden;
}
We set the logo as a background and set the width and height. With the text-indent property, the text is positioned 200px to the left and is hidden with the overflow property.
What we are doing is basically placing the text to the left, so that it disappears while the background image is clearly visible. For search engines it is a regular H1, and for visitors with browsers that support CSS it is an eye-candy graphic.
Creating the CSS file
We create a new .css document in Dreamweaver with all the above styles and save it as main.css in the root directory. This way we have a separate file, which improves the speed of the site and aids for clean and understandable code – something that pays on the long run.
In the following tutorials we are going to build upon this and gradually style the whole site.
To sum it up
We followed through the first stages of development behind the BloggyBits homepage and created the main layout of the site. Next time we will improve upon this and create a CSS navigation menu with the help of the jQuery scrollTo plug in for smooth page scrolling.
Related:
4 Responses
Leave a Reply
thank you bro for this! good for beginners like me!
wow this is an awesome resource, Thanks so much for sharing in such details!
I am following your website on twitter and can’t wait to learn some more
Dreamweaver has been lately my goto program for a long time. I really do not know what I would do without it. There were periods when I initially began making use of the software, and I thought it was way too complex. Now I fly around it, and it has grown to be a great asset in my personal tool box. Anyhow thank you for the post.
Thank’s for this tutorial..