OCgfx
« Division based xhtml and css Template »

Welcome Guest. Please Login or Register.
Nov 20, 2009, 5:41pm

[Home] [Help] [Search] [Calendar] [Login] [Register]


Welcome To Ocgfx
Recent Posts | Bookmarks | Gfx Tutorials | Code index | Pbv4 Templates | Pbv4 Skins/Forum Colors

OCgfx :: Gfx Factory :: Web Templates :: Division based xhtml and css Template
   [Search This Thread][Send Topic To Friend] [Print]
AuthorTopic: Division based xhtml and css Template (Read 1,769 times)
matty
Administrator
*****
member is offline

[avatar]

run away run away!!


[homepage]

Joined: Jul 2006
Gender: Male
Posts: 330
Karma: 4
Division based xhtml and css Template
« Thread Started on Feb 7, 2007, 7:22am »
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

Code:
<!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 &#169; 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:27am by matty »Link to Post - Back to Top  IP: Logged
[image]
[image]
[image]
tentoes
Student
*
member is offline





Joined: Aug 2007
Posts: 0
Karma: 0
Re: Division based xhtml and css Template
« Reply #1 on Feb 7, 2007, 1:30pm »
Seems difficult, fun, and cool. 8-)
Link to Post - Back to Top  IP: Logged
Michael
Administrator
*****
member is offline

[avatar]

[aim]

Joined: Jan 2005
Gender: Male
Posts: 4,496
Location: Callahan
Karma: 32
Re: Division based xhtml and css Template
« Reply #2 on Feb 7, 2007, 10:24pm »
Wow, Matt! Once again, I am AMAZED! ^^
Link to Post - Back to Top  IP: Logged
[image]
[image]
Nya
Administrator
*****
member is offline

[avatar]

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


[homepage]

Joined: Jun 2005
Gender: Female
Posts: 2,120
Location: Georgia, USA
Karma: 34
Re: Division based xhtml and css Template
« Reply #3 on Feb 8, 2007, 3:58am »
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 ^^
Link to Post - Back to Top  IP: Logged
[image]
[image]
[image]
[image]
[image]
matty
Administrator
*****
member is offline

[avatar]

run away run away!!


[homepage]

Joined: Jul 2006
Gender: Male
Posts: 330
Karma: 4
Re: Division based xhtml and css Template
« Reply #4 on Feb 8, 2007, 1:26pm »
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. 8-)
Link to Post - Back to Top  IP: Logged
[image]
[image]
[image]
xklibur
Virtuoso
***
member is offline

[avatar]

Tie My Heart Around With A Rubberbend

[yim] [msn] [aim]
[homepage]

Joined: Oct 2006
Gender: Female
Posts: 186
Location: tr@$h c@n
Karma: 2
Re: Division based xhtml and css Template
« Reply #5 on Feb 21, 2007, 5:24am »
that's interesting xD

it's cool really ^___^
Link to Post - Back to Top  IP: Logged
[image]
[image]
[image]
[image]
* Avatar credit to Anneth
Nya
Administrator
*****
member is offline

[avatar]

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


[homepage]

Joined: Jun 2005
Gender: Female
Posts: 2,120
Location: Georgia, USA
Karma: 34
Re: Division based xhtml and css Template
« Reply #6 on Feb 21, 2007, 5:33am »
lol Hai it is im working on new page using it already hehe I show off once done lol
Link to Post - Back to Top  IP: Logged
[image]
[image]
[image]
[image]
[image]
xklibur
Virtuoso
***
member is offline

[avatar]

Tie My Heart Around With A Rubberbend

[yim] [msn] [aim]
[homepage]

Joined: Oct 2006
Gender: Female
Posts: 186
Location: tr@$h c@n
Karma: 2
Re: Division based xhtml and css Template
« Reply #7 on Feb 21, 2007, 5:36am »
The page you showed to me, righttt?
Link to Post - Back to Top  IP: Logged
[image]
[image]
[image]
[image]
* Avatar credit to Anneth
Nya
Administrator
*****
member is offline

[avatar]

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


[homepage]

Joined: Jun 2005
Gender: Female
Posts: 2,120
Location: Georgia, USA
Karma: 34
Re: Division based xhtml and css Template
« Reply #8 on Feb 21, 2007, 5:38am »
Yep sure is ^^
Link to Post - Back to Top  IP: Logged
[image]
[image]
[image]
[image]
[image]
xklibur
Virtuoso
***
member is offline

[avatar]

Tie My Heart Around With A Rubberbend

[yim] [msn] [aim]
[homepage]

Joined: Oct 2006
Gender: Female
Posts: 186
Location: tr@$h c@n
Karma: 2
Re: Division based xhtml and css Template
« Reply #9 on Feb 21, 2007, 6:02am »
awesome! I can't wait to see the end result xDD
Link to Post - Back to Top  IP: Logged
[image]
[image]
[image]
[image]
* Avatar credit to Anneth
Nya
Administrator
*****
member is offline

[avatar]

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


[homepage]

Joined: Jun 2005
Gender: Female
Posts: 2,120
Location: Georgia, USA
Karma: 34
Re: Division based xhtml and css Template
« Reply #10 on Feb 24, 2007, 6:21am »
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:24am by Nya »Link to Post - Back to Top  IP: Logged
[image]
[image]
[image]
[image]
[image]
matty
Administrator
*****
member is offline

[avatar]

run away run away!!


[homepage]

Joined: Jul 2006
Gender: Male
Posts: 330
Karma: 4
Re: Division based xhtml and css Template
« Reply #11 on Feb 24, 2007, 8:31am »
Add this code inside the <head></head> tags

<script type="text/javascript">

<!--

function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;
//-->

</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:33am by matty »Link to Post - Back to Top  IP: Logged
[image]
[image]
[image]
Nya
Administrator
*****
member is offline

[avatar]

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


[homepage]

Joined: Jun 2005
Gender: Female
Posts: 2,120
Location: Georgia, USA
Karma: 34
Re: Division based xhtml and css Template
« Reply #12 on Feb 24, 2007, 10:17pm »
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...
Link to Post - Back to Top  IP: Logged
[image]
[image]
[image]
[image]
[image]
matty
Administrator
*****
member is offline

[avatar]

run away run away!!


[homepage]

Joined: Jul 2006
Gender: Male
Posts: 330
Karma: 4
Re: Division based xhtml and css Template
« Reply #13 on Feb 25, 2007, 3:52am »
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
Code:
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 :)
Link to Post - Back to Top  IP: Logged
[image]
[image]
[image]
Nya
Administrator
*****
member is offline

[avatar]

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


[homepage]

Joined: Jun 2005
Gender: Female
Posts: 2,120
Location: Georgia, USA
Karma: 34
Re: Division based xhtml and css Template
« Reply #14 on Feb 25, 2007, 6:03am »
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.
Link to Post - Back to Top  IP: Logged
[image]
[image]
[image]
[image]
[image]
Aled
Master
****
member is offline

[avatar]

Stone.in//focus

[yim] [msn]
[homepage]

Joined: Mar 2006
Gender: Male
Posts: 360
Location: A rail in the sky
Karma: 2
Re: Division based xhtml and css Template
« Reply #15 on Apr 16, 2007, 10:40am »
Nice template you've made there Matt :) keep up the good work with learning xhtml, CSS and stuff.
Link to Post - Back to Top  IP: Logged
Stone.in//focus - Akaphabet - A Beautiful Country
[image]
   [Search This Thread][Send Topic To Friend] [Print]


Click Here To Make This Board Ad-Free


This Board Hosted For FREE By ProBoards
Get Your Own Free Message Boards & Free Forums!