First,let’s have a overview of the 2 columns xhtml layout.There are five sections : Header (include Logo,Blog Name,Blog Description …),Top Dropdown Menu,Main Content,
Right Content and Footer
Image may be NSFW.
Clik here to view.
Let’s make this template:
- fixed-width:875px
- Tableless, W3C-compliant xhtml1-transitional(also can be xhtml1-strict)
- Cross Browsers and tested in all browers, such as IE6,IE7, IE8,Firefox 2,3 , Google chrome, opera and Safari.
Ok,Lets start right now:
<!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>2 columns xhtml layout frame</title> <link href="frame.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="menus"></div> <div id="maincontent"></div> <div id="rightcontent"></div> <div id="footer"></div> </div> </body> </html> |
Check the above the html code.the first line we define DTD xhtml1-transitional ，and then in the head add a Extenal css frame.css.In the body we defined the five sections in a container wrapper.now lets see whats in the frame.css
body { margin:0px; padding:0px; } #wrapper { width:875px; margin:auto; overflow:hidden; } #header { height:100px; } #menus { height:37px; } #maincontent { width:600px; float:left; } #rightcontent { width:250px; float:right; } #footer { height:82px; clear:both; } /* --- the codes below just help you to see the frame,those code will be delete and the end --*/ #header { background:#f80; } #menus { background:blue; } #maincontent { background:green; height:500px; } #rightcontent { background:#f90; height:500px; } #footer { background:#666; } |
In order to see the each section i add background color and height. click here to see the result.You may notice there is a blank space between the maincontent and the rightcontent.Yes,Usually there is a space between the main content and the right content,u can change the main content width to change the space.
whats next we need to do? its just a frame and can’t use to as a template,lets go ahead,add some decorations to each element.look the following codes,we will add some background image ,border color etc ..
body { margin:0px; padding:0px; background:url(images/pagebg.gif) repeat-x; } #wrapper { width:861px; margin:auto; overflow:hidden; padding:0px 7px; background:url(images/wrapperbg.png) repeat-y; } #header { height:100px; } #menus { height:37px; background:url(images/menu_bg.png) repeat-x; } #maincontent { width:600px; float:left; } #rightcontent { width:250px; float:right; } #footer { height:82px; clear:both; background:url(images/footer_bg.png) repeat-x; } /* --- the codes below just help you to see the frame,those code will be delete and the end --*/ #maincontent { height:500px; } #rightcontent { height:500px; border-left:solid 1px #ddd; } |
click here to check the result . good , like magic , it looks better now . if you look at the css carefully,you may find a the wrapper “width:861px;” its not 875 px.thats beacuse add 7px padding left and right to wrapper , it’s 7px + 7px + 861px = 875px .
Finally , we will convert this template to wordpress theme . Frame aready done , what’s next we need to do now . Of course add elements to each sections . Go on How to code a w3c valid 2 columns xhtml layout–step 2 , it’s nearly done !!!