Webmaster Webdesigner + + Builder projects

Here is a programming method I use to organize my CSS in an external file. This method will allow you to quickly find and you will save time.

I guess a xhtml file was created and a CSS file and that it was attached as an @ import or link. Let's start with the "body" of the XHTML page: First, encode a clear and simple. Use a DIV structure. Here's to your left, a typical overview of a website very simple: Everything will be in a div usually named "container" and you will notice that I will not use capital letters to name my tags. In terms of the capital were used only for better visibility.

Okay now here is the XHTML code of this little design:

 <div id="myContainer">
 <div id="header"> </ div>
 <div id="middle">
 <div id="left"> </ div>
 <div id="content"> </ div>
 </ Div>
 <div id="footer"> </ div>
 </ Div>

Of course, this code is found in the BODY tag. Then start the trick I use to improve your work. Copy the code inside your body tag and paste it into your CSS file. Here's what happens:

 <div id= "myContainer">
 <div id= "header"> </ div>
 <div id= "middle">
 <div id= "left"> </ div>
 <div id= "content"> </ div>
 </ Div>
 <div id= "footer"> </ div>
 </ Div>

Now (using Dreamweaver) use the search function (or CTRL-F). Search the following codes

 <Div id = "
 </ Pre>
 <p> replace them with symbols <strong> # </ strong>.  Then look for the following codes: </ p>
 <pre lang=">
 /> </ Div>

And replace them with open and closed braces {}. For the rest you can search for closing div tags and replace them with nothing. This will give you this:

  MyContainer # {}
    # Header {}
    # Middle {}
       # Left {}
       # Content {}
   # Footer {} 

Finally, you just have to put your width and height and other properties of DIV tags. Personally, I add a comment line above every line on my sections (header, middle, footer). Here's the code you get:

  # {MyContainer
 width: 760px;
 height: auto;
 }

 / * HEADER * /
    # Header {
    width: 760px;
    height: 250px;
    ; background-color: # 666;
    }

 / * MIDDLE * /
    # Middle {
    width: 760px;
    height: 500px;
    }
       # Left {
	   width: 160px;
	   height: 500px;
	   ; background-color: # ccc;
	   float: left;
	   }
       # Content {
	   width: 600px;
	   height: 500px;
	   ; background-color: # fff;
	   float: left;
	   }

 / * FOOTER * /
    # Footer {
    width: 760px;
    height: 70px;
    ; background-color: # 000;
    } 

For the rest of the code, you insert it inside tags and indent your code like this in your XHTML, you will see, this thing will accelerate your speed.

Tags: Code , CSS , Integration , Programming , Web

This article was published Friday, February 8, 2008 at 8:00 am and is filed under Tutorials . You can follow any responses through the RSS 2.0 feed . You can leave a comment , or trackback from your own site.