Guest Anonymous Posted May 2, 2008 Share Posted May 2, 2008 I often find the need to create a simple framework for a site prior to filling in the meat (aka the text, graphics etc). In keeping with the newer standards for layout, it is desirable to use div tags for layout and to keep the markup as clean as clean as possible. So, lets look at a simple example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>XHTML Test</title> <style type="text/css"> * { margin:0;padding:0; } html { font-family:sans-serif;font-size:62.5%; } body { background:#F6F6F6; } #wrapper { width: 750px;background:#FFF;margin:1em auto; } #header { height:6em;background:#FEE; } #header h1 { font-size:2em;color:#444;padding-top:0.5em;padding-left:0.5em; } #header p { font-size:1.2em;color:#333;padding-left:0.9em; } #menu { width:150px;float:left; } #menu ul { padding:1em;font-size:1.2em; } #menu ul li { font-size:110%;font-weight:bold;color:#999;list-style-type:none; } #menu ul li a { color:#369;text-decoration:none;font-weight:normal; } #menu ul li a:hover { color:#036;text-decoration:underline; } #body { width:600px;float:left; } #body p { margin:1em;font-size:1.2em;color:#222; } #footer { clear:both; background:#EEF;text-align:center;font-size:1.2em;padding:0.5em 0; } </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>Title</h1> Tagline</p> </div> <div id="menu"> <ul> [*]Main Menu [*][url="#"]Link[/url] [*][url="#"]Link[/url] [*][url="#"]Link[/url] [*][url="#"]Link[/url] [/list] <ul> [*]Sub Menu [*][url="#"]Link[/url] [*][url="#"]Link[/url] [*][url="#"]Link[/url] [*][url="#"]Link[/url] [/list] </div> <div id="body"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc euismod congue libero. Mauris ac turpis. Phasellus eu ligula non velit elementum dignissim. Praesent vehicula risus et libero. Phasellus non eros. Vivamus urna ligula, mattis nec, consectetuer commodo, semper nec, risus. Nunc tincidunt porttitor nunc. Curabitur dignissim bibendum neque. Aenean dictum. Proin nec dui a leo tempor rhoncus. Mauris vitae ligula. Morbi interdum elit euismod eros. Donec tincidunt elit sit amet tellus. Vivamus est. Quisque ut tortor in lorem facilisis sollicitudin.</p> Phasellus eget ligula et lacus sodales pretium. Phasellus vitae sapien. Donec nec velit lobortis quam pretium vehicula. Vestibulum elementum laoreet eros. Ut pede odio, venenatis at, congue id, luctus ac, nulla. Suspendisse tincidunt leo et purus. Aenean venenatis viverra risus. Curabitur enim tortor, cursus ac, lobortis tincidunt, condimentum a, elit. Quisque lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent lacinia fringilla velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ac dui. Curabitur tempor, eros vitae dapibus rhoncus, nunc justo sodales nisi, non ultricies ipsum enim at est.</p> Maecenas ligula elit, interdum a, venenatis in, gravida ac, odio. In luctus scelerisque turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec risus tellus, hendrerit et, vestibulum at, facilisis id, lorem. Maecenas volutpat diam vel nulla. Sed congue nisl non ante. Phasellus id lacus sit amet lorem vulputate fermentum. Phasellus convallis, velit non vehicula luctus, erat quam ultricies purus, vitae viverra velit ante sed nisl. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut nibh lorem, sodales non, cursus aliquam, tristique aliquet, nisl. Pellentesque id augue. Praesent mattis. Sed vitae mi. In fringilla, ligula a ultrices sollicitudin, nisl purus ultricies erat, non mattis tortor eros at orci. Fusce quis mi eu metus tincidunt laoreet. Donec pharetra justo non lectus. Nulla id dui sit amet urna facilisis tincidunt. Nunc elementum felis vitae justo. Fusce quis orci eu ante bibendum porttitor.</p> </div> <div id="footer"> Footer </div> </div> </body> Now, as this is just a simple example.. a quick description then I'll let you have a play with it... #wrapper is our main wrapper - it contains all other elements and allows us to perform some nice like centering the main "page". #header is a a simple header containing two elements - a title and a tagline. #menu is (surprising enough) our left-hand menu with a couple of menus created as simple lists. #body is the where all our usual content will go. and of course #footer contains a simple bit of text - often a copyright notice. Demo: http://nyna.co.uk/xhtml.html View Source on that page, save it onto your local machine and have a play. It's full XHTML 1.0 strict and CSS level 2.1 compliant, so you have a good starting point to create simple pages. Quote Link to comment Share on other sites More sharing options...
Tezza` Posted May 2, 2008 Share Posted May 2, 2008 Re: Basic XHTML/CSS Framework Thanks Nyna, this could definatlly come in handy for a lot of things for me... although i think i should try to make my own ;P. Quote Link to comment Share on other sites More sharing options...
oxidati0n Posted August 20, 2008 Share Posted August 20, 2008 Re: Basic XHTML/CSS Framework Often known as Web2.0 :-P Quote Link to comment Share on other sites More sharing options...
Mafia-Club Posted January 2, 2009 Share Posted January 2, 2009 Re: Basic XHTML/CSS Framework Page not found Quote Link to comment Share on other sites More sharing options...
Tezza` Posted January 2, 2009 Share Posted January 2, 2009 Re: Basic XHTML/CSS Framework Page not found So copy paste and try yourself. Quote Link to comment Share on other sites More sharing options...
Mafia-Club Posted January 2, 2009 Share Posted January 2, 2009 Re: Basic XHTML/CSS Framework Well am just saying Page Not found ! Quote Link to comment Share on other sites More sharing options...
POG1 Posted January 3, 2009 Share Posted January 3, 2009 Re: Basic XHTML/CSS Framework These are very useful and i have created a few "blanks" so it is faster that writing a lot of lines from scratch. Many people here are yet to learn CSS and table less layouts so this would help to show how its done. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.