In the first part,we aready done the 2 columns layout frame.
Let’s go on, add elements to each sections also style it and finish the html template.
First the header , usually the header include the blog name and description sometimes maybe have a login box or search box . ok , let’s add it .
<div id="header"> <div id="headtxt"> <h1 id="blogname"> <a id="A1" href='http://www.brightyoursite.com'> Bright Your Site </a></h1> <h3 id="blogdesc">Professional Css Xhtml business -- w3c valid css xhtml 2 columns layout </h3> </div> <div id="searchbox"><input class="inputbox" /> <input id="gobtn" type="button" /></div> </div> |
Check the codes,you can see we add blog name ,blog description and a search box.the blog name is the most important,that’s why i use h1 tag (for SEO optimise) so dose blog description.Usually,the blog name , description should be the left and the search box right.ok,let’s see how it be styled in the css .
/*-- begin header --*/ #header { height:100px; } #headtxt { float:left; } #blogname { padding:0px; margin:20px 0px 0px 15px; } #blogname a { text-decoration:none; color:#d4242b; font-size:28px; } #blogdesc { font-size:14px; color:#333; margin:15px 0px 0px 15px; } #searchbox { float:right; padding:0px; vertical-align:middle; margin:30px 5px 0px 0px; height:30px; line-height:30px; border:solid 1px #900; } .inputbox { width:150px; border:0px; height:20px; padding:5px 0px; float:left; margin:0px 0px 0px 2px; font-size:13px; font-size:16px; color:#000; } #gobtn { background:url(images/go.png) no-repeat; border:0px; width:47px; height:30px; overflow:hidden; } /*-- end of header --*/ |
The most important part is the Main Content, in this section we will list all articles here .
it’s simple and easy to code .Let’s see the html codes:
<div class="item_head"> <div class="item_header_text"><h1><a href=''>title here</a></h1></div> </div> <div class="item_description"> content here <div class="tags" >Tags:<span> tags here</span></div> <div class="author">Gepost door <span>admin</span> in: <span>tags here</span> </div> </div> |
the post title is the essence of the post , so we need h1 tag it ( you know why , check the header section ) . for the content we just need need add space , font-size , color … . Of course , we also can add post date , tags , author … in the list . the style codes :
/*-- begin main content -- */ #maincontent { width:580px; float:left; margin-left:20px; } .item_head { border-bottom:solid 1px #8d0b03; height:33px; margin-top:20px; } .item_header_text { font-size:12px; font-weight:bold; line-height:36px; display:inline-block; float:left; background:url(images/tlbg.png) repeat-x; } .item_header_text a { padding:0px 10px; display:inline-block; background:url(images/tacorner.png) no-repeat right top; font-size:14px; font-weight:600; color:#fff; text-decoration:none; } .item_header_text h1 { display:inline-block; background:url(images/tbefore.png) no-repeat left top; padding:0px; margin:0px; } .item_description { color:#333333; line-height:18px; } .item_description p { margin:5px 0px 10px 0px; padding:0px; } .tags ,.author { color:#696969; line-height:16px; } .author { height:25px; } .tags span ,.author span { color:#9a1209; } .tags a,.author span a { color:#9a1209; text-decoration:none; } /*-- end of main content --*/ |
The right content aways are Archives , Categories , Blogroll …. .We can do it just use ul li list .
<ul> <li> <h2>Links</h2> <ul> <li><a href=''>birghtyoursite</a></li> <li><a href=''>birghtyoursite</a></li> <li><a href=''>birghtyoursite</a></li> <li><a href=''>birghtyoursite</a></li> </ul> </li> <li> <h2>Links</h2> <ul> <li><a href=''>birghtyoursite</a></li> <li><a href=''>birghtyoursite</a></li> <li><a href=''>birghtyoursite</a></li> <li><a href=''>birghtyoursite</a></li> </ul> </li> <li> <h2>Tags</h2> <a>Ajax</a> <a>Cat</a> <a>Wordpress</a> <a>Template</a> </li> </ul> |
The css is also simple
/*-- begin right content --*/ #rightcontent { width:240px; float:right; margin-right:10px; } #rightcontent ul { padding:0px; margin:0px; color:#000; margin-top:10px; } #rightcontent ul h2 { margin:0px; padding:0px; } #rightcontent li { height:auto; line-height:25px; } li { list-style :none; } a { text-decoration:none; } #rightcontent li ul li { background:url(images/arrow.png) no-repeat left 5px; padding:0px 0px 0px 13px; list-style:none; line-height:18px; } #rightcontent ul li img { vertical-align:middle; } #rightcontent ul li h2 { margin:0px 0px 5px 0px; padding:0px; font-size:14px; line-height:30px; background:url(images/dot.jpg) repeat-x left bottom; } #rightcontent ul li a { color:#9a1209; font-size:12px; text-decoration:none; line-height:20px; font-weight:600; font-weight:normal; vertical-align:middle; } /*-- end of right content --*/ |
At last , add some links and copyright to the footer to finish it.
<div id="footer"> <a href='/'>Home</a> | <a href='/'>Portfolio</a> | <a href='/'>Services</a> | <a href='/'>Projects</a> | <a href='/'>Articles</a> | <a href='/'>About</a> | <a href='/'>Contact</a> <h1> © 2009 www.brightyoursite.com All Rights Reserved.</h1> </div> |
/*-- begin footer --*/ #footer { height:82px; clear:both; text-align:center; background:url(images/footer_bg.png) repeat-x; line-height:35px; vertical-align:middle; font-weight:bold; color:#E9E9E9; margin-top:20px; } #footer a { color:#E9E9E9; text-decoration:none; display:inline-block; margin:0px 5px; } #footer h1 { font-size:12px; font-weight:lighter; padding:0px; margin:0px; } /*-- end of footer --*/ |
Up to now,we add most of the elements.let’s see the final result click here .
Now, you may notice there is important part missed.The Menu. This is also important to a site .there is tons of menus . So next lession we will introduce the ul li css seo fridenly menu . Click here to go directly:
The simple ul li css SEO friendly horizontal menu
And
ul li css none-js SEO friendly sub-menu