Jump to content

Basic XHTML/CSS Framework

Guest Anonymous

Recommended Posts

Guest Anonymous

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">
<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; }



<div id="wrapper">

<div id="header">


<div id="menu">
		[*]Main Menu
		[*]Sub Menu

<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 id="footer">


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.

Link to comment
Share on other sites

  • 3 months later...
  • 4 months later...

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...