CSS cascading style for layout

Here is a simple example of using a separate CSS file for html or php page layout. I prefer to use separate css file, because it controls layout and style for all your pages. If you want to change something you do not have to edit every page on your site. Instead, you edit only one style.css file. Probably, you can find on Internet a better example, so I encourage you do that later. Now I want you to try this example to feel all advantages of CSS layout vs. tables layout.

I used absolute positioning for blocks of the page. A page with absolute block positioning is rigit and is not adjust itself to fit the screen if user change screen resolution. It is a disadvantage of absolute positioning. It advantage is that it is supported by all browsers. Floting blocks make a page layout more adjustable, but not all browser display floating block in the same way. I will give you floating block layout in another example.

CSS layout for PC and mobile device. $2.95
By S.Skudaev, (an eBay Excellent seller)

Contents:
1. How to install Pocket PC emulator on your Windows PC
2. Three columns layout CSS styles for regular PC browsers
3. One column layout CSS styles for mobile device

css styles for mobile device

Pay via PayPal. You should not be concern about my web site security, because when you click the link, you will be redirected to PayPal site and it can be trusted. You will have your financial transaction with PayPal, not with me. So, please do not afraid to buy from my site. Credit cards are accepted. After payment is done, on the PayPal thank you page

click the Return to Merchant link.

You will be redirected to the download page! Also, You will receive email with link to download the tutorial.In case of any problem please contact us:administration@configure-all.com

Three columns layout template created in such a way that the middle column content coming first in the HTML code. This way, Google spider, while visiting your page, will see your main content first. Then the right and the left columns are placed.

In mobile device, web page has only one column. The same web page is used for regular browsers and a mobile device. It is very important because if you create two pages with the same content, Google will punish you for duplicate content.

Download My tutorial in PDF

My tutorials are different from all other tutorials and books because I do not skip initial steps that a reader needed to start learning. Some times, you buy a book and start to read it. You understand everything from the point the author starts, but you do not know how to get to that starting point. I never miss the beginning!

Let us imagine that our web page has a logo and a title at the top of the page and three columns as the graphics above. So we have to reserve space a horizontal rectangle 800px X 100px at the top of the page. In style.css file copy and paste the following logo <div> definition:

#logo{
     position: absolute;
     top: 10px;
     left: 20px;
     width: 800px;
     background-color: #33FFFF;
     border-style: solid;
     border-color: #336699;
   }

Where logo is div id. Top is a distance from top edge of the page in pixels. Left is a distance from left edge of the page in pixels. Width is rectangle width in pixels. Background color is defined by a hexadecimal number.

000000 is for black color
FFFFFF is for white color
FF0000 is for red color
00FF00 is for green color
0000FF is for blue color.
The whole color palette code you can find on internet.

Okey, let us continue to design web page:
Our page has a menu, a vertical rectangle 150px wide on the left of the page. It should start just below the logo rectangle, so its top coordinate must be a little greater than 100px. Copy and paste in your style.css file definitions for the menu <div> rectangle

#left_menu {
     position: absolute;
     top: 115px;
     left: 10px;
     width: 150px;
     background-color: #336699;
     border-style: solid;
     border-color: #336699;
}

On the right side of the page we place a vertical banner 150px x 400px from an affiliated program. Copy and paste in style.css file definitions for the banner rectangle.

#right_banner {
     position: absolute
     top: 115px;
     left: 680px;
     width: 150px;
     background-color: #CCFFCC;
     border-style: solid;
     border-color: #336699;
  }

I do not define height of the rectangle because, depending on page length, we can place more than one banner.

Between left menu and right banner, goes page contents rectangle. A web page is about 800px wide or greater depending on screen resolution. The width of the page contents must be 500px - 600px. ( 800px - 150px left menu - 150px banner = 500px ).

#page {
     position: absolute;
     top: 115px;
     left: 170px;
     width: 500px;
     background-color: #FFFFFF;
     border-style: solid;
     border-color: #336699
   }

Our style.css file for layout is complete. Now add definitions for the rest elements of web page. For example, headings and links. Please copy and paste in style.css file the following text.

A.menu { font-family: Arial, Helvetica, sans-serif; color: #ffffff; FONT-SIZE: 10px; font-weight:bold; TEXT-DECORATION: none; }
A.menu:link { font-family: Arial, Helvetica, sans-serif; color: #ffffff; FONT-SIZE: 10px; font-weight:bold; TEXT-DECORATION: none; }
A.menu:visited { font-family: Arial, Helvetica, sans-serif; color: #ffffff; FONT-SIZE: 10px; font-weight:bold; TEXT-DECORATION: none; }
A.menu:hover { font-family: Arial, Helvetica, sans-serif; color: #ffffff; FONT-SIZE: 10px; font-weight:bold; TEXT-DECORATION: underline; }

Since menu background color is dark, we can use white font color for link text. You can play with colors.

<!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" lang="en-US" xml:lang="en-US">

<html>
<head>
<title>CSS style example</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<div id="right_banner">
<p>Right side banner goes here; Main page body goes here;</p>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

is very important because it tells what document type your HTML page is. Search engine robots visiting you page will know document type and it helps them to crawl the page.

The line: <link rel="stylesheet" href="style.css" type="text/css"> defines what file to use to read CSS style.

It is wise to validate your css page. Go to W3C CSS Validator and enter the URI of a document (HTML with CSS or CSS only) you would like to validate

Computer Programming Web programming Tips

How to use CSS cascading style for layout

Introduction

Logo goes here