EzPortal - Portal Software for Forums

EzPortal Forums => How To Section => How to XHTML => Topic started by: Maxx on May 08, 2010, 03:49:02 pm

Title: Here you'll find a complete xhtml page...
Post by: Maxx on May 08, 2010, 03:49:02 pm
Here you'll find a complete xhtml page using xhtml code a CSS code, no images!


Notes:

"<!-- Notice what goes with-in the head tags <head></head> and what goes in the <body></body> tags -->"


Cut page code and paste to your editor then browser view!

Code: [Select]
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Layout 14</title>

<style type="text/css" media="screen">
html, body { margin: 0; padding: 0; }
body { color: #333; font: 12px Helvetica, Arial, sans-serif; line-height: 18px; }
h2 { color: #333; }
a { color: #337810; }
p { margin: 0 0 18px; }
#wrapper { float: left; width: 100%; }

/* Header */
#header { background: #eee; border-bottom: 2px solid #ddd; }
#header h1  { color: #004b6f; margin: 0 0 3px; padding: 24px 18px 0; }
#header p { color: #666; font-size: 11px; font-weight: bold; padding: 0 18px; }

/* Content Style */
#navigation { border-bottom: 1px solid #ccc; padding-right: 18px; }
#navigation ul { padding: 0 18px 9px; }
#extra { border-bottom: 1px solid #ccc; padding-left: 18px; }
#extra small { font-size: 11px; line-height: 18px; }
#content p, #extra p { padding-right: 18px; }

/* Content Positioning & Size */
#navigation { float: left; margin-left: -200px; width: 182px; }
#content { margin: 0 225px 36px; }
#extra { float: left; width: 182px; margin-left: -100%; } /* Footer */
#footer { background: #333; border-bottom: 2px solid #999; clear: left; width: 100%; }
#footer a { color: #eee; }
#footer p { color: #ccc; margin: 0; padding: 0 18px 10px; }
#footer ul { border-bottom: 1px solid #555; list-style: none; margin: 0 18px 6px; padding: 10px 0 6px; }
#footer li { display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }
</style>
<!--[if IE]>
<style type="text/css">
    #navigation, #content, #extra { margin-top: 20px; }
</style>
<![endif]-->
</head>

<!-- Notice what goes with-in the head tags <head></head> and what goes in the <body></body> tags -->

<body>
<div id="container">
<div id="header">
<h1>This is the header.</h1>
<p class="description">Usually some sort of tagline or description is placed here.</p>
</div>
<div id="wrapper">
<div id="content">
<h2>Content Goes Here</h2>
<p>Cue the obligatory <em>Lorem Ipsum</em> riff-raff type text, <a href="">Followed by an example of a link.</a> There are many uses for <em>Lorem Ipsum</em>, using it as filled text isn't recommended. Make sure to always use actual content when building your websites! It just makes more sense. Now for the lipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="navigation">
<h2>Navigation Here</h2>
<ul>
<li><a href="">Navigation 1</a></li>
<li><a href="">Navigation 2</a></li>
<li><a href="">Navigation 3</a></li>
<li><a href="">Navigation 4</a></li>
<li><a href="">Navigation 5</a></li>
<li><a href="">Navigation 6</a></li>
</ul>
</div>
<div id="extra">
<h2>Extra Stuff Goes Here</h2>
<p>Sometimes this would be called a <em>sidebar</em>, but it doesn't always have to be on the side to be called a <em>sidebar</em>. Sidebars can be on tops of things, below things, but they are usually beside things &ndash; hence it being a called a sidebar.</p>
<p><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small></p>

</div>
<div id="footer">
<ul>
<li><a href="">Navigation 1</a></li>
<li><a href="">Navigation 2</a></li>
<li><a href="">Navigation 3</a></li>
<li><a href="">Navigation 4</a></li>
<li><a href="">Navigation 5</a></li>
<li><a href="">Navigation 6</a></li>
</ul>
<p>Footer stuff goes here. Copyright, disclaimers &ndash; stuff like that.</p>
</div>
</div>
</body>
</html>