Division based xhtml and css Template

noman
Administrator

run away run away!!

Posts: 330

Division based xhtml and css Template Feb 7, 2007 7:22:51 GMT -5

Quote

Post by noman on Feb 7, 2007 7:22:51 GMT -5

How to use this template

Live Template preview

1.Create a new folder, and open up a text editor (Notepad), and copy (Ctrl+C) and paste (Ctrl+V) the template code. then save (Inside the new folder) the document as a .html file.

2. To view the template open up your browser and go to File > Open (Open File in Fire Fox)

3. To create an external stylesheet copy and paste all the css contained in the <style> tags. Create another document and save (Inside the new folder), as style.css

You do not need to use style tags in the external stylesheet.

Adding content to the template

All tags (elements), must be closed...

<p></p>
<blockquote></blockquote>
<div></div>

...or self closed

<br />
<hr />
<img src="" alt="" />

Text

1. All text should be contained in <p> (paragraph) tags.

<p>Example of a paragraph</p>

2. Quotes should be enclosed in both Blockquote and Paragraph tags

<blockquote><p>Example of a quote</p></blockquote>

Images

1. Image tags should contain the alt attribute, to give an alternative text description if the image fails to load.

<img src="http://img.jpg" alt="my image" />

2. Images should be enclosed in <div> tags.

<div><img src="http://img.jpg" alt="my image"/></div>

3. You can also add some caption text to the image, enclosed in <p> tags.

<div><img src="http://img.jpg" alt="my image" /><p>caption</p></div>

4. To align the image on the left of the page add:

<div><img class="imgfl" src="http://img.jpg" alt="my image" /><p>caption</p></div>

5. To align the image on the right of the page add:

<div><img class="imgfr" src="http://img.jpg" alt="my image" /><p>caption</p></div>

Navigation and side bar Links

These links are treated as list items (<li>) inside ordered lists (<ol>). To add more links, add another list item to the list:

<ol>
<li><a href="">Link one</a></li>
<li><a href="">Link two</a></li>
<li><a href="">Link three</a></li>
<li><a href="">Link four</a></li>
<li><a href="">Another Link</a></li>
</ol>

Hope that helps. Anyway, here's the code... ;D

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Division based xhtml and CSS Template</title>


<!-- To create an external stylesheet copy and paste all the css contained in the <style> tags. 
     Create another file called 'style.css', and upload to your website folder. You do not need 
     to use style tags in the external stylesheet. -->


<link rel="stylesheet" type="text/css" href="style.css" />
     
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="add a Website description here" />
<meta name="copyright" content="add your copyright info here © 2007" />
<meta name="robots" content="all" />
  


<style type="text/css">

<!--


/* COLOURS: (color: changes the text colour)  */


#wrap {background-color:#f5efef;}
body {color:#421c1c; background-color:#e4d6d6;}
h1, h2, h3, h4, h5, h6 {color:#892d2d;} 

/* Border Colours  */

table, td {border:1px solid #892d2d;}
#content1 {border-bottom: 1px solid #892d2d;}
#content5 {border-top: 1px solid #892d2d;}
#wrap, #content3 {border-left: 1px solid #892d2d;border-right: 1px solid #892d2d;}
.hr {border-top:1px solid #892d2d;}

/* Navigation bar links  */

#content1 a:link, #content1 a:visited {text-decoration:none; color:#892d2d;}
#content1 a:hover {color:#421c1c;}

/* main links */

a:link {color:#892d2d;}  a:visited {color:#2d3a89;}  a:hover {color:#892d2d;}
a:hover, a:active, a:focus {text-decoration:none;}
a:active, a:focus {background-color:#892d2d; color:#f5efef;}



/* type selectors */

body {margin:0 auto; width:800px; font-family:arial, verdana, helvetica, sans-serif; font-size:0.8em;}
div div div {text-align:center;}
h1 {font-size:1.1em;}
h2, h3, h4, h5, h6 {font-size: 1em;}
h1, h2, h3, h4, h5, h6, p {margin:0 0.8em; padding:0.3em 0;} 
hr {display:none;}
img {border-style:none; margin:0.7em 0 0;}
li {List-style-type: none;}
ol, ul {padding:0; margin:0.5em 0.8em;}
table {margin:1em 0.8em;}



/* id selectors */


#content2, #content3, #content4 {float:left; padding: 1em 0;}
#content2, #content4 {width:148px;}
#content1, #content5 {clear:both; padding:0.8em 0;}
#content1 li {display:inline; padding:0 0.5em 0 0;}
#content3 {width:500px;}
#content5 {height: 20px;}



/* class selectors */

.imgfl, .imgfr {padding: 0 1em;}
.imgfl {float:left;}
.imgfr {float:right;}
.hr {margin:0.7em 0.8em 0.5em;}


-->

</style>

</head>


<body>

<div id="wrap">


                                            <!-- Content One -->


<div id="content1"> 

<h1>My groovy website (Content One)</h1>

<ol>
<li><a href="home.html">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Content</a></li>
<li><a href="">Email</a></li>
</ol>


<hr />
</div>

                                            <!-- Content Two -->


<div id="content2">

<h1>Content 2</h1>


<ol>
<li><a href="">Link one</a></li>
<li><a href="">Link two</a></li>
<li><a href="">Link three</a></li>
<li><a href="">Link four</a></li>
<li><a href="">Link five</a></li>
<li><a href="">Link six</a></li>
<li><a href="">Link seven</a></li>
<li><a href="">Link eight</a></li>

</ol>


<div class="hr"><hr /></div>


<table>
<tr><th colspan="2">Table Heading</th></tr>
<tr><td>left </td><td>right</td></tr>
<tr><td>left</td><td>right</td></tr>
<tr><td>left</td><td>right</td></tr>
<tr><td>left</td><td>right</td></tr>
</table>

<div class="hr"><hr /></div>


<h2>Unordered List</h2>

<ul>
<li>Star Trek</li>
<li>Lost</li>
<li>Lord of the Rings</li>
<li>Star Wars</li>
<li>Doctor Who</li>
</ul>


<div class="hr"><hr /></div>


<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed porta eros id magna ultrices dignissim. Maecenas turpis. Proin condimentum. Vivamus auctor porttitor neque.</p>


<div class="hr"><hr /></div>

<div><img src="http://img.photobucket.com/albums/v283/dudleythoth/testimg.jpg" alt="my image" /><p>caption</p></div>

<hr />
</div>

                                       <!-- Content Three -->

<div id="content3">

<h1>Content 3</h1>


<div class="imgfl"><img src="http://img.photobucket.com/albums/v283/dudleythoth/testimg.jpg" alt="my image" /><p>float left</p></div>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed porta eros id magna ultrices dignissim. Maecenas turpis. Proin condimentum. Vivamus auctor porttitor neque. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean cursus <a href="http:/nothinhere.com">purus sed lacus. In sodales mauris. Pellentesque habitant morbi tristique senectus et netus et</a> malesuada fames ac turpis egestas. Aliquam ut justo ut ligula pulvinar facilisis. Nam eget diam eu quam tincidunt imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis sollicitudin. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc hendrerit gravida dolor. Sed bibendum tincidunt velit. Maecenas lorem. Sed dui. Ut vel ante.</p>


<blockquote><p>Aenean pulvinar dui sed mauris. Vestibulum nibh ipsum, convallis sed, accumsan ac, accumsan vitae, ipsum. Ut ut urna ullamcorper ligula accumsan tempor. Proin diam. Donec sit amet mi.</p></blockquote>


<div class="imgfr"><img src="http://img.photobucket.com/albums/v283/dudleythoth/testimg.jpg" alt="my image" /><p>float right</p></div>

<p>Aenean pulvinar dui sed mauris. Vestibulum nibh ipsum, convallis sed, accumsan ac, accumsan vitae, ipsum. Ut ut urna ullamcorper ligula accumsan tempor. Proin diam. Donec sit amet mi. Curabitur et eros vitae quam rutrum placerat. Duis porttitor sapien ac metus. Pellentesque varius blandit lorem. Maecenas magna lacus, accumsan et, tincidunt ac, rutrum sed, velit. Nunc vel ipsum sed pede nonummy facilisis. Aenean consequat leo non magna. Cras lacus magna, sagittis eget, pulvinar at, consectetuer sed, metus. Suspendisse porttitor gravida pede. Ut in enim. </p>


<div class="hr"><hr /></div>

<table>
<tr><th colspan="2">Table Heading</th></tr>
<tr><td>left </td><td>right</td></tr>
<tr><td>left</td><td>right</td></tr>
<tr><td>left</td><td>right</td></tr>
<tr><td>left</td><td>right</td></tr>
</table>



<p>Etiam varius volutpat urna. Donec consequat felis. In hac habitasse platea dictumst. Sed arcu massa, pharetra dignissim, congue eu, nonummy ut, mi.</p>


<div class="hr"><hr /></div>


<h2>Unordered List</h2>

<ul>
<li>Star Trek</li>
<li>Lost</li>
<li>Lord of the Rings</li>
<li>Star Wars</li>
<li>Doctor Who</li>

</ul>


<div class="hr"><hr /></div>


<h2>more paragraphs</h2>

<p>Nam varius rhoncus justo. Curabitur ipsum sem, adipiscing eu, dignissim sed, suscipit eu, nulla. Nam pharetra ullamcorper arcu. Suspendisse sit amet tortor in neque blandit suscipit. Praesent ut est. Etiam varius volutpat urna. Donec consequat felis. In hac habitasse platea dictumst. Sed arcu massa, pharetra dignissim, congue eu, nonummy ut, mi. Morbi eget orci eu odio volutpat elementum. In vestibulum mattis justo. Suspendisse semper neque id elit. Suspendisse venenatis. Proin justo. Integer feugiat suscipit elit.</p>


<div class="hr"><hr /></div>

<p>Pellentesque hendrerit dolor et orci. Curabitur porta massa vitae felis. Duis dolor dolor, placerat eget, feugiat eget, nonummy ut, nisl. Fusce diam nulla, euismod eu, aliquam ut, vestibulum vitae, tellus. Mauris lobortis fermentum est. Pellentesque nec enim. Morbi semper venenatis ante. Vivamus vehicula eleifend lacus. Sed nunc. In nisi nisi, mattis in, tristique non, fringilla volutpat, justo.</p>


<hr />
</div>

                                        <!-- Content Four -->


<div id="content4">

<h1>Content 4</h1>

<p>Etiam varius volutpat urna. Donec consequat felis. In hac habitasse platea dictumst. Sed arcu massa, pharetra dignissim, congue eu, nonummy ut, mi.</p>

<div class="hr"><hr /></div>

<div><img src="http://img.photobucket.com/albums/v283/dudleythoth/testimg.jpg" alt="my image" /><p>caption</p></div>

<div class="hr"><hr /></div>


<ol>
<li><a href="">Link one</a></li>
<li><a href="">Link two</a></li>
<li><a href="">Link three</a></li>
<li><a href="">Link four</a></li>
<li><a href="">Link five</a></li>
<li><a href="">Link six</a></li>
<li><a href="">Link seven</a></li>
<li><a href="">Link eight</a></li>
</ol>


<div class="hr"><hr /></div>


<p>Sed consequat viverra odio. Proin eget sapien quis odio imperdiet interdum. Nullam malesuada, mi non tempor tincidunt, erat felis semper libero, vehicula fringilla nunc eros id diam. Vivamus vel lorem. Integer rhoncus augue mollis nulla. In at nunc at lectus rutrum tincidunt. Ut sagittis. Etiam tristique, odio at tempus venenatis, quam odio pretium dolor, commodo mollis nisi augue vel ligula.</p>


<hr />
</div>

                                           <!-- Content Five-->


<div id="content5"><p>mahud © 2007 (Content 5) <a href="http://validator.w3.org/check?uri=referer">XHTML 1.0 Strict</a></p></div>

</div>

</body>
</html>

If you are having any further difficulties, or want to modify the template, let me know

Last Edit: Feb 7, 2007 7:27:09 GMT -5 by noman

tentoes Student Posts: 0	Division based xhtml and css Template Feb 7, 2007 13:30:22 GMT -5 Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by tentoes on Feb 7, 2007 13:30:22 GMT -5 Seems difficult, fun, and cool.

Michael Administrator Posts: 4,496	Division based xhtml and css Template Feb 7, 2007 22:24:05 GMT -5 Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by Michael on Feb 7, 2007 22:24:05 GMT -5 Wow, Matt! Once again, I am AMAZED! ^^

Nya
Administrator

Who me? Im just the local cuddly Panda Bear...

Posts: 2,120

Division based xhtml and css Template Feb 8, 2007 3:58:42 GMT -5

Quote

Post by Nya on Feb 8, 2007 3:58:42 GMT -5

Wow im floored... thats amazing it looks like many websites I have before layout wise *in love*

But thats going to take me a bit to work on lol to figure it all out hehe.

But thank you *pick something really large* much ^^

noman Administrator run away run away!! Posts: 330	Division based xhtml and css Template Feb 8, 2007 13:26:01 GMT -5 Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by noman on Feb 8, 2007 13:26:01 GMT -5 Thanks, ĴΘѓÐªŋ, Michael, and Nya ;D It's not as complicated as it looks. All you really need to do is copy and paste the code and upload for it to work. Then you can just add your own content.

xklibur Virtuoso Tie My Heart Around With A Rubberbend Posts: 186	Division based xhtml and css Template Feb 21, 2007 5:24:40 GMT -5 Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by xklibur on Feb 21, 2007 5:24:40 GMT -5 that's interesting xD it's cool really ^___^
	* Avatar credit to Anneth

Nya Administrator Who me? Im just the local cuddly Panda Bear... Posts: 2,120	Division based xhtml and css Template Feb 21, 2007 5:33:38 GMT -5 Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by Nya on Feb 21, 2007 5:33:38 GMT -5 lol Hai it is im working on new page using it already hehe I show off once done lol

xklibur Virtuoso Tie My Heart Around With A Rubberbend Posts: 186	Division based xhtml and css Template Feb 21, 2007 5:36:13 GMT -5 Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by xklibur on Feb 21, 2007 5:36:13 GMT -5 The page you showed to me, righttt?
	* Avatar credit to Anneth

Nya Administrator Who me? Im just the local cuddly Panda Bear... Posts: 2,120	Division based xhtml and css Template Feb 21, 2007 5:38:24 GMT -5 Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by Nya on Feb 21, 2007 5:38:24 GMT -5 Yep sure is ^^

xklibur Virtuoso Tie My Heart Around With A Rubberbend Posts: 186	Division based xhtml and css Template Feb 21, 2007 6:02:40 GMT -5 Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by xklibur on Feb 21, 2007 6:02:40 GMT -5 awesome! I can't wait to see the end result xDD
	* Avatar credit to Anneth

Nya
Administrator

Who me? Im just the local cuddly Panda Bear...

Posts: 2,120

Division based xhtml and css Template Feb 24, 2007 6:21:49 GMT -5

Quote

Post by Nya on Feb 24, 2007 6:21:49 GMT -5

Eh I need bit of help Im trying to keep a site in the Strict and its not going well.

One my pages which I used this on is going to be my links page where I will have image based links. like a sites mini banner for instance. But when I did the validation test it found errors well I fixed a couple only for about double the first amount of errors >.< so is there another image linking code that will have the site linked open in a new window but still be of the Strict 1.0.1 thing?

Last Edit: Feb 24, 2007 6:24:19 GMT -5 by Nya

noman
Administrator

run away run away!!

Posts: 330

Division based xhtml and css Template Feb 24, 2007 8:31:56 GMT -5

Quote

Post by noman on Feb 24, 2007 8:31:56 GMT -5

Add this code inside the <head></head> tags

<script type="text/javascript">



</script>

and instead of using target="_blank", use rel="external" for links you want to open up in a new window.

That should work, and the page will validate

New-Window Links in a Standards-Compliant World

Last Edit: Feb 24, 2007 8:33:02 GMT -5 by noman

Nya Administrator Who me? Im just the local cuddly Panda Bear... Posts: 2,120	Division based xhtml and css Template Feb 24, 2007 22:17:10 GMT -5 Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by Nya on Feb 24, 2007 22:17:10 GMT -5 Thanks Matty I have gotten it down to one error Line 301 column 169: there is no attribute "border". ...hcom/ocgfxab.png" alt="OCgfx" border="0"/></a> I try fix it and it pops up more...

noman
Administrator

run away run away!!

Posts: 330

Division based xhtml and css Template Feb 25, 2007 3:52:48 GMT -5

Quote

Post by noman on Feb 25, 2007 3:52:48 GMT -5

I'm glad that helped

There's no border attribute in xhtml strict, so you need to remove border="0".

This isn't a problem as the image border has already been removed in the CSS img {border-style:none;}

I'm pretty sure that should fix things. It can seem like a bit of a fuss over nothing, but using the validator, really helped me to learn how to write better code

Nya Administrator Who me? Im just the local cuddly Panda Bear... Posts: 2,120	Division based xhtml and css Template Feb 25, 2007 6:03:33 GMT -5 Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by Nya on Feb 25, 2007 6:03:33 GMT -5 Yay thanks Matty ^^ the last time I removed that line 20 other errors popped up lol But its all good now ^^ till the next issue anyways lol.

Aled Master Stone.in//focus Posts: 360	Division based xhtml and css Template Apr 16, 2007 10:40:32 GMT -5 Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by Aled on Apr 16, 2007 10:40:32 GMT -5 Nice template you've made there Matt keep up the good work with learning xhtml, CSS and stuff.
	Stone.in//focus - Akaphabet - A Beautiful Country

Division based xhtml and css Template

Post by noman on Feb 7, 2007 7:22:51 GMT -5

Post by tentoes on Feb 7, 2007 13:30:22 GMT -5

Post by Michael on Feb 7, 2007 22:24:05 GMT -5

Post by Nya on Feb 8, 2007 3:58:42 GMT -5

Post by noman on Feb 8, 2007 13:26:01 GMT -5

Post by xklibur on Feb 21, 2007 5:24:40 GMT -5

Post by Nya on Feb 21, 2007 5:33:38 GMT -5

Post by xklibur on Feb 21, 2007 5:36:13 GMT -5

Post by Nya on Feb 21, 2007 5:38:24 GMT -5

Post by xklibur on Feb 21, 2007 6:02:40 GMT -5

Post by Nya on Feb 24, 2007 6:21:49 GMT -5

Post by noman on Feb 24, 2007 8:31:56 GMT -5

Post by Nya on Feb 24, 2007 22:17:10 GMT -5

Post by noman on Feb 25, 2007 3:52:48 GMT -5

Post by Nya on Feb 25, 2007 6:03:33 GMT -5

Post by Aled on Apr 16, 2007 10:40:32 GMT -5