Site Sponsors

Posts Tagged ‘SEO layout’

3 column layout seo (search engine optimisation)

Thursday, October 2nd, 2008

The example below is for creating a 3 column layout which keeps SEO in mind as the first thing we want the bots to see is our content and not our navigation.

HTML Example code

<!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>
    <title>3 Column Fixed Width layout</title>
    <link type="text/css" rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
    <div id="header">HEADER</div>
    <div id="container">
		<div id="centre">
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed molestie mauris id wisi. Morbi nisl urna, sollicitudin vitae, mattis non, sagittis eu, mauris. Nulla tellus. In faucibus mi id lorem. Quisque quis tortor et odio scelerisque consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae& Proin
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed molestie mauris id wisi. Morbi nisl urna, sollicitudin vitae, mattis non, sagittis eu, mauris. Nulla tellus. In faucibus mi id lorem. Quisque quis tortor et odio scelerisque consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae& Proin
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed molestie mauris id wisi. Morbi nisl urna, sollicitudin vitae, mattis non, sagittis eu, mauris. Nulla tellus. In faucibus mi id lorem. Quisque quis tortor et odio scelerisque consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae& Proin
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed molestie mauris id wisi. Morbi nisl urna, sollicitudin vitae, mattis non, sagittis eu, mauris. Nulla tellus. In faucibus mi id lorem. Quisque quis tortor et odio scelerisque consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae& Proin
			</p>

        </div>
        <div id="navigavtion">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed molestie mauris id wisi. Morbi nisl urna, sollicitudin vitae, mattis non, sagittis eu, mauris. Nulla tellus. In faucibus mi id lorem. Quisque quis tortor et odio scelerisque consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae& Proin
        </div>
        <div id="rightSide">
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed molestie mauris id wisi. Morbi nisl urna, sollicitudin vitae, mattis non, sagittis eu, mauris. Nulla tellus. In faucibus mi id lorem. Quisque quis tortor et odio scelerisque consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae& Proin
			</div>

    </div>
    <div id="footer">FOOTER</div>
</body>
</html>

The CSS code below does all the positioning of the columns for us so it looks like the typical 3 column layout

CSS example code

#header, #footer {
width:770px;
margin:0px auto 0px auto;
height:50px;
background-color:#dedede;
}

#navigavtion, #rightSide {
width:150px;
}

#navigavtion {
float:left;
background-color:blue;
padding:0px 0px 1000px 0px;
margin:0px 0px -1000px -620px;
}

#centre {
width:470px;
float:left;
background-color:green;
margin-left:150px;
}

#rightSide {
background-color:red;
float:right;
padding:0 0 1000px 0;
margin:0 0 -1000px 0;
}

#container {
width:770px;
margin:0px auto 0px auto;
overflow:hidden;
}

#footer {
clear:both;
}

This works in all browsers on the PC apart from the usual suspect IE6 (typical!!). I will look into this issue tomorrow as I have just got in and written this tutorial within 15 minutes and I will also explain what some of the more important parts of the CSS are doing.

Tags: ,
Posted in:Layouts | 1 Comment »

2 column layout using CSS with SEO in mind (fixed width)

Sunday, April 27th, 2008

Have you ever wanted a layout with 2 equal column centred in the page without the use of tables by just using CSS? eg:

Well the following tutorial will help you achieve this and is compatible with IE 6/7, FF, Opera, Netscape and Safari (PC)

OK, what we will start off with is a basic XHTML transitional web page with the infamous “Lorem ipsum” as content. You will notice the following <div> tags in the page:

  • header - this section is the header of the page, where the contents are usually a logo, sometimes a quick search and contact details
  • container - the container plays an important role in this page, it is what helps us centre the 3 columns. The following columns are all contained in between the containers opening and closing <div> :
    • navigation - were all the links for the site will be allocated
    • content - were the main content of the site is to be placed
  • footer - this is the section located at the bottom of the page.
<!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>
    <title>3 Column Fixed Width layout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link type="text/css" rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
    <div id="header">HEADER</div>
    <div id="container">
        <div id="content">
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed molestie mauris id wisi. Morbi nisl urna, sollicitudin vitae, mattis non, sagittis eu, mauris. Nulla tellus. In faucibus mi id lorem. Quisque quis tortor et odio scelerisque consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae& Proin
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed molestie mauris id wisi. Morbi nisl urna, sollicitudin vitae, mattis non, sagittis eu, mauris. Nulla tellus. In faucibus mi id lorem. Quisque quis tortor et odio scelerisque consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae& Proin
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed molestie mauris id wisi. Morbi nisl urna, sollicitudin vitae, mattis non, sagittis eu, mauris. Nulla tellus. In faucibus mi id lorem. Quisque quis tortor et odio scelerisque consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae& Proin
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed molestie mauris id wisi. Morbi nisl urna, sollicitudin vitae, mattis non, sagittis eu, mauris. Nulla tellus. In faucibus mi id lorem. Quisque quis tortor et odio scelerisque consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae& Proin
        </p>
        </div>
        <div id="navigation">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed molestie mauris id wisi. Morbi nisl urna, sollicitudin vitae, mattis non, sagittis eu, mauris. Nulla tellus. In faucibus mi id lorem. Quisque quis tortor et odio scelerisque consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae& Proin
        </div>
    </div>
    <div id="footer">FOOTER</div>
</body>
</html>

You are probably asking “why have I placed the content above the navigation section in the code?”. Well the answer is to do with SEO, as search engine spiders through your site you will want the most important content to appear at the top of your (X)HTML pages so it is read as the highest prority. More information about SEO and page layouts.

Now for the CSS. The CSS will position all the columns, header and footer into the centre of the page. You will notice that there is no body tag called in the CSS, reason being there is no need for the positioning of these elements.

#header, #footer {
width:770px;
margin:0px auto 0px auto;
height:50px;
background-color:#dedede;
}

#navigation {
width:150px;
}

#navigation {
float:left;
background-color:blue;
padding:0px 0px 1000px 0px;
margin:0px 0px -1000px 0px;
}

#container {
width:770px;
margin:0px auto 0px auto;
overflow:hidden;
}

#content {
width:620px;
float:right;
background-color:green;
}

#footer {
clear:both;
}

Breaking down the important parts

Because we dont have the XHTML in the logical order of how we want to view it on the web so we need to re-position the navigation and the content sections using the CSS float property

With the navigation section, we need it on the left so we add float:left; to the css this now re-positions the navigation to the left.

example

#navigation {
float:left;
...
}

With the content section, we need it on the right so we add float:right; to the css this now re-positions the content to the right.

example

#content {
float:right;
...
}

So now we have the main content read by the search engine spiders first as this is our highest priority and on the right hand side of our website. COOL BEANS!!!

This has been tested in the following browsers:

IE 5.x (only problem is the centring of the entire site but the floats are working fine)
IE 6/7
Firefox 1.5/2+
Opera
Netscape
Safari (PC)

The above code has also going through the WSC CSS & HTML validator and passed. :)

Tags: , , ,
Posted in:CSS, Layouts | No Comments »