CSS Templates for you to play with (Full Version)

All Forums >> [Community] >> OutFront Discoveries



Message

gorilla -> CSS Templates for you to play with (3/7/2004 8:00:33)

Outront has some very well written tutorials for those who want to learn how to use css. If you are new to css or are a bit unsure of your grasp of the basics read the Outfront tutorials first. You'll learn a lot and save yourself a great deal of time and trouble that way [:)].

The link below is to the first tutorial:

http://www.outfront.net/tutorials_02/adv_tech/css1.htm

This set of posted css code is to take you a bit further than the very basics. It is also a "sneak preview" of stuff from my coming CSS tutorial site.

They're all pretty easy, they're all cross-browser for the latest versions of the "big three."


  • Internet Explorer
  • Mozilla
  • Opera


You should always test your pages in at least those three browsers. Mozilla is the closest to complying with the W3C spec, Internet Explorer is the furthest.

There are a variety of measurement types and so on used again this is to give people a chance to see what they look like.

I've used shorthand for colour notations in some of them so you can see what it
looks like. it is perfectly valid to use shorthand btw. And can save you a bit of bandwidth.


Now some requests from me -

1. I have posted these as a resource for css newbies.

If you wish to post your own code please do so. But please don't use the code option as it often leads to irritating sideways scrolling. However please don't use such proprietary nonsense as div layers. The purpose of this thread is to give people the tools to learn how to do it properly. By "properly" I mean according to the spec, will work in any browser, and will work in all future versions of those browsers.

There are few things more annoying or useless for people who want to learn than to have to wade through endless irrelevant chit chat or to read the same code 4 times or more because members just quote something in its entirety without bothering to summarise or edit their replies.

2. Please don't post anything that relies on javascript or uses javascript.. Javscript is useful, powerful, and wideley used for just those reasons. But the purpose of this thread is to allow people to have some material to work with that doesn't need scripting. Many sites use javascript, but an increasing number of people for very good security reasons turn either turn javascript off completely or have their browsers configured to only run scripts from sites they know and trust. My hope is that web authors can avoid what is likely to be a growing problem by using css.

2.a Please do not post anything unless you know it works in Internet Explorer, Mozilla, and Opera.

3. If you wish to comment on the code that I've posted or anybody posts please do so but keep it relevant.

4. If you have questions post them in the css forum please.

5. This means you.

6. No little fluffy bunnys were hurt, harmed, or frightened during the production of this code. [:)]



So without further ado here are a variety of css templates for you to experiment with and learn how to do css layouts. Enjoy 'em, fiddle with 'em, see what does what to what. They're yours to "cut and keep."[:)]



gorilla -> RE: CSS Templates for you to play with (3/7/2004 8:01:51)

oops see next posting



gorilla -> RE: CSS Templates for you to play with (3/7/2004 8:02:40)

The code in the posting immediately below will give you a three column fluid layout:



gorilla -> RE: CSS Templates for you to play with (3/7/2004 8:05:27)

.rightcontent {
width:33%;
float:left;
background:#6495ED;
padding-bottom:10px;
}

.maincentercontent {
width:34%;
float:left;
background:#6495ED;
padding-bottom:10px;
}

.leftcontent {
width:33%;
float:left;
background:#6495ED;
padding-bottom:10px;
}



gorilla -> RE: CSS Templates for you to play with (3/7/2004 8:07:17)

The code in the posting immediately below will give you a four column fluid layout:



gorilla -> RE: CSS Templates for you to play with (3/7/2004 8:08:31)

.leftcontent {
position: absolute;
left:1%;
width:20%;
top:50px;
background:#6495ED;
}

.centerleftcontent {
position: absolute;
left:22%;
width:28%;
top:50px;
background:#6495ED;
}

.centerrightcontent {
position: absolute;
left:51%;
width:28%;
top:50px;
background:#6495ED;
}

.rightcontent {
position: absolute;
left:80%;
width:19%;
top:50px;
background:#6495ED;
}



gorilla -> RE: CSS Templates for you to play with (3/7/2004 8:11:46)

For a nested float you can play with the code below:



gorilla -> RE: CSS Templates for you to play with (3/7/2004 8:12:09)

.body {
border:1px solid #000;
background:#fff;
}


.main {
border-left:1px solid #000;
border-bottom:1px solid #000;
float:right;
width:230px;
background:#eee;
margin:0px 0px 10px 10px;
}



gorilla -> RE: CSS Templates for you to play with (3/7/2004 8:14:34)

So you admire the 2 column layout on "A List Apart" do you? Stripped down to its essentials you you could use something like this:



gorilla -> RE: CSS Templates for you to play with (3/7/2004 8:15:13)

.main {
float:left;
width:67%;
background:#fff;
border-right:5px solid #000;
border-bottom:5px solid #000;
margin-right:15px;
padding-bottom:25px;
}



gorilla -> RE: CSS Templates for you to play with (3/7/2004 8:19:51)

Soetimes for thing like forms, fora (yes I know it looks likes its spelt wrongly, "Forum" is Latin and I'm picky [:)] ergo I like to use the the latin plural "fora,") guestbooks and the like you may need to have tables. Igonore the embittered rantings of the "tables are evil" crowd. A professional approach uses the right tool for the right job and sometimes tables are the way to go


You'll avoid the notorious form background colour glitch this way too :



gorilla -> RE: CSS Templates for you to play with (3/7/2004 8:20:35)

.top{
background-color: #6BBCF8;
padding-left: 10px;
font-family: Arial;
}
.table{
padding-left: 8px;
font-family: Arial;
padding-top: 2px;
font-size: 12px;
}

.bottom{
padding-left: 10px;
font-family: Arial;
font-style: oblique;
font-variant: normal;
font-weight: bold;
font-size: 13px;
background-color: #CFCFCF;}

textarea
{
background-color: #f5f5f5;
border: 1px #7f9db9 solid;
width: 100%; }

input.textbox
{
border-color: #7f9db9;
border-width: 1px;
border-style: solid;
background-color: #f5f5f5;}



a:link {color: #3481d3;text-decoration: none;}

a:active {color: #3481d3;text-decoration: none;}

a:visited {color: #3481d3;text-decoration: none;}
a:hover {
color: Red;
border-bottom: 1px dashed red;
}


.linetype1 {width:75%; margin-top: 8px; border-width: 0.1pt; border-color: #336699; border-style: dotted none none none;text-align: center;}

.linetype2 {
border: 1px dotted #336699; width:100%;

}



gorilla -> RE: CSS Templates for you to play with (3/7/2004 9:15:03)

Finally many people want to know how to do coloured scroll bars. Mozilla doesn't support these because it is as close to being fully standards compliant as possible. Personally I dislike them quite intensely as I strongly believe that you shouldn't mess with people's browsers but here goes:



gorilla -> RE: CSS Templates for you to play with (3/7/2004 9:16:09)

body {
scrollbar-3dlight-color : #999999;
scrollbar-arrow-color : #999999;
scrollbar-base-color : #666666;
scrollbar-darkshadow-color : Black;
scrollbar-face-color : #666666;
scrollbar-highlight-color : #999999;
scrollbar-shadow-color : #999999;
scrollbar-track-color : #8B8B8B;
}



gorilla -> RE: CSS Templates for you to play with (3/7/2004 10:43:45)

The next two listings are:

1. a complete html layout.
2. and the css.

as you read the html or even better paste into your editor of choice you'll see it is tableless. Don't let that intimidate you out of using tables if you have to. I've shown one way of doing it and it is a very simple design for teaching purposes.

onwards[:)]

First the html:



gorilla -> RE: CSS Templates for you to play with (3/7/2004 10:44:06)

<html>
<head>
<title>Put in your own title</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<meta content="TRUE" name="MSSmartTagsPreventParsing" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>Welcome to Somewhere or Another - H1</h1>
<div id="breadcrumb">
<a href="index.html">Home Page</a> > Where am I? :-)
</div>
<h2> This is complete simple useable (X)HTML/CSS Web design - H2</h2>
<div id="page">
<div id="menu">
<div><a href="index.html">Menu option 1</a></div>
<div><a href="index.html">Menu option 2</a></div>
<div><a href="index.html">Menu option 3</a></div>
<div><a href="index.html">Menu option 4</a></div>
<div><a href="index.html">Menu option 5</a></div>
</div>
<div id="content">
<div class="article">
<div class="article-title">
An Article title or whatever should go here
</div>
<p>Just some filler text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas blandit adipiscing ligula. Sed sed turpis id velit ultrices scelerisque. Praesent pharetra enim sed urna. Ut cursus mauris. Sed id nisl. Nam eu diam vel quam volutpat nonummy. Aenean ornare diam eget nisl. Sed lacus. Cras vehicula tincidunt massa. Aliquam rhoncus tortor sit amet urna. Ut sagittis commodo urna. Aliquam laoreet, dui ut lobortis dapibus, dolor enim vulputate tellus, sit amet facilisis pede diam quis velit. Fusce tempus congue felis. Sed purus. Maecenas malesuada, dolor non volutpat rhoncus, est elit pulvinar neque, eu rhoncus nulla tortor eget eros. Vestibulum enim. Phasellus condimentum, ante in semper aliquet, neque justo volutpat wisi, vel elementum lectus sapien vel felis. Donec vel leo ut leo tincidunt ultrices. In hendrerit justo ut felis. Vivamus elementum, eros ut volutpat adipiscing, nulla velit dignissim augue, at sollicitudin wisi tellus ac nulla.</p>
<p>Duis malesuada egestas justo. Nunc non metus ac velit viverra tincidunt. Donec ligula wisi, tristique a, porta et, ultricies non, dui. Duis egestas nibh eu augue. Sed facilisis sapien non est. Donec aliquet, nunc vel hendrerit tempus, quam turpis dignissim est, id dapibus dui ipsum et massa. Suspendisse blandit ornare enim. Morbi libero neque, mollis in, rutrum sed, tempus at, sem. Sed id enim. Vestibulum pharetra urna sed nulla. Etiam ultricies, urna non fringilla aliquam, turpis diam venenatis diam, quis vestibulum mi nunc a velit. Curabitur volutpat turpis vel nibh. Maecenas id pede eget turpis varius fermentum. Donec venenatis, erat nec pretium euismod, eros enim elementum est, et congue turpis ante id velit. Nam nec est ut mauris hendrerit consectetuer. Etiam nibh. Donec fermentum eleifend velit. Aenean libero mi, tincidunt sed, cursus quis, convallis vitae, erat. Aenean magna neque, accumsan nec, convallis in, hendrerit sed, dui.</p>
<div class="article-footer">
Posted by: <span class="author">Gorilla</span> at <span class="datetime">15:30 Sunday March 7th, 2004</span>
</div>
</div>
<div class="article">
<div class="article-title">
This is an example of a form
</div>
<form id="example" action="index.html" method="post">
<div>
<label for="frm_firstname">Name:</label>
<input type="text" class="textbox" id="frm_firstname" name="frm_firstname" /></div>
<div><label for="frm_select">Options:</label>
<select name="frm_select" id="frm_select" class="textbox">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select></div>
<fieldset>
<legend>Options to select from</legend>
<label for="frm_check1">Option 1:</label><input type="checkbox" value="1" name="frm_check1" id="frm_check1" /><br />
<label for="frm_check2">Option 2:</label><input type="checkbox" value="2" name="frm_check2" id="frm_check2" /><br />
<label for="frm_radio1">Option 3:</label><input type="radio" value="1" name="frm_radio1" id="frm_radio1" /><br />
<label for="frm_radio2">Option 4:</label><input type="radio" value="2" name="frm_radio2" id="frm_radio2" /><br />
</fieldset>
<div><input type="submit" value="Next >>" name="submit" class="button" /></div>
</form>
<div class="article-footer">
Posted by: <span class="author">Banana Breath</span> at <span class="datetime">15:31 Sunday March 7th, 2004</span>
</div>
</div>
<div id="footer">
<p>This is valid xhtml and css, in real life I suggest that people use html 4.01 loose as their dtd because Internet Explore goes into quirks mode otherwise. <a href="http://validator.w3.org/check/referer">standards compliant document</a> will take you the validator.</p>
</div>
</div>
</div>
</body>
</html>



gorilla -> RE: CSS Templates for you to play with (3/7/2004 10:46:04)

Now the css. Notice how you can have the css laid out in differnt ways. I suggest you do it in a line by line format until you are sure it works. Then take out the unecessary line feeds as I've done in the first two selectors. It saves a bit of bandwidth. But it can be harder to read alway keep a back up copy in case you have to come back to it later.



gorilla -> RE: CSS Templates for you to play with (3/7/2004 10:46:43)

body { background-color: #F0FFF0; color: Black; border: 0px; margin: 0px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;}
h1 { font-family: Georgia, "Times New Roman", serif; font-size: x-large; font-style: italic; color: #556B2F; background-color: #FFFFF0; border: 1px dashed #556B2F; padding: 10px 15px 10px 15px; margin: 15px; white-space: nowrap; }
h2 {
font-family: Georgia, "Times New Roman", serif;
font-size: large;
color: #2F6A44;
background-color: transparent;
margin-right: 25px;
text-align: right;
white-space: nowrap;
}
#breadcrumb { font-family: Arial, Helvetica, sans-serif; font-size: small; border-bottom: 1px solid green; border-top:1px solid green; padding-top: 10px; padding-bottom: 10px; padding-left: 50px; background-color: #FAFAD2; color: #2F4F4F; white-space: nowrap; }

#breadcrumb a{ color: Maroon; text-decoration: none; background-color: transparent;}
#breadcrumb a:hover {
text-decoration: underline;
}
#page {
margin: 10px;
padding: 10px;
}
#menu {
position: absolute;
width: 150px;
top: 180px;
text-align: left;
font-size: small;
}
#menu a{
text-decoration: none;
background-color: #F0FFF0;
font-weight: bold;
display: block;
padding: 5px;
width: 120px;
margin-bottom: 5px;
border: 1px solid #8FBC8F;
color: #556B2F;
}
#menu a:hover {
background-color: #6B8E23;
color: White;
border-top: 1px solid #8FBC8F;
border-left: 1px solid #8FBC8F;
border-right: 1px solid #8FBC8F;
border-bottom: 1px solid #2F4F4F;
}
#options a{
background-color: #6B8E23;
color: White;
border-top: 1px solid #8FBC8F;
border-left: 1px solid #8FBC8F;
border-right: 1px solid #8FBC8F;
border-bottom: 1px solid #2F4F4F;
}
#content {
position: absolute;
border-left: 1px solid green;
padding-left: 20px;
left: 170px;
top: 180px;
}
#content p {
padding-left: 30px;
font-size: small;
}
#footer {
border: 1px dotted black;
color: #556B2F;
background-color: #FAFAD2;
margin-top: 20px;
margin-bottom: 20px;
}
a { color: Maroon; text-decoration: none; background-color: transparent;}
a:hover {
text-decoration: underline;
}
.article-footer {
text-align: right;
font-size: xx-small;
color: Gray;
padding-bottom: 15px;
}
.author, .datetime {
font-weight: bold;
color: #4F4F4F;
}
.article-title {
font-size: large;
font-weight: bold;
font-family: Georgia, "Times New Roman", Sans-serif;
font-style: italic;
}
#content form {
padding-left: 30px;
font-size: small;
vertical-align: middle;
}
#content form p{ }
.textbox {
border: 1px solid gray;
margin: 5px;
}
.button { border: medium outset; background-color: #F5F5F5; margin-left: 150px; color: black; margin-top: 10px;}
fieldset {
margin-top: 5px;
width: 200px;
}
form {
border: thick double #90EE90;
padding: 10px;
margin: 10px;
width: 280px;
margin-left: 30px;
margin-top: 10px;
}



gorilla -> RE: CSS Templates for you to play with (3/7/2004 11:11:26)

Result in Mozilla:

[image]local://upfiles/2870/Rp444013959.jpg[/image]



gorilla -> RE: CSS Templates for you to play with (3/7/2004 11:14:14)

Result in opera

[image]local://upfiles/2870/Pn372438031.jpg[/image]



gorilla -> RE: CSS Templates for you to play with (3/7/2004 11:28:04)

Result in Internet Explorer 6

[image]local://upfiles/2870/Lj223902875.jpg[/image]



gorilla -> RE: CSS Templates for you to play with (3/7/2004 11:37:18)

OK I've finished now [:)] - Once again the purpose of this is to provides templates for newbies to css, and maybe even for some not so newbies [;)],


It can be nice to have something to work with, so here it is.

Please keep any responses relevant to the code. And please if you have any questions ask them in the css forum.

Good luck and happy css coding!



Giomanach -> RE: CSS Templates for you to play with (3/9/2004 4:52:14)

If I may add my bit to the templates. This is my CSS frames, gets round the browser compatibility issue, AFAIK, it works in Firefox NN7 and Opera 7.23, tried at home. It does not work like frames as it loads a new page, instead of within a frame, but it does give the look and feel of frames.

Here's the stylesheet:

html{
overflow: hidden;
}

body{
overflow: hidden;
font-size: 12px;
font-family: Verdana, Tahoma, Arial, Sans-serif;
color: #FFF;
background: #000;
margin: 0;
}

a:link{
color: #FFF;
text-decoration: none;
font-weight: bold;
}

a:visited{
color: #FFF;
text-decoration: none;
font-weight: bold;
}

a:hover{
color: #FFF;
text-decoration: underline;
font-weight: bold;
}

img{
border: 0px;
}

#page{
width: 750px;
}

#top{
height: 100px;
padding: 5px 5px 0px 5px;
}

#nav{
position: fixed;
float: left;
width: 120px;
top: 10px;
}

#nav a:link{
display: block;
padding: 5px 10px 5px 10px;
text-align: center;
border: 1px outset #AAA;
background: transparent;
}

#nav a:visited{
display: block;
padding: 5px 10px 5px 10px;
text-align: center;
border: 1px outset #AAA;
background: transparent;
}

#nav a:hover{
display: block;
padding: 5px 10px 5px 10px;
text-align: center;
border: 1px inset #AAA;
text-decoration: none;
color: #555;
}


#content{
position: relative;
overflow: auto;
top: 10px;
left: 10px;
height: 400px;
scrollbar-3dlight-color : #999;
scrollbar-arrow-color : #FFF;
scrollbar-base-color : #000;
scrollbar-darkshadow-color : #888;
scrollbar-face-color : #000;
scrollbar-highlight-color : #555;
scrollbar-shadow-color : #444;
scrollbar-track-color : #000;
}

Yes I've been lazy with the HexDec colors, but they do work. As for the HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
.:: Tha Club ::.
</title>
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<center>
<div id="page" align="left">
<div id="top" align="center">
<h1>Somewhere Or Another</h1>
</div>
<div id="nav"><br>
<a href="#" title="Menu Item 1" >Menu Item 1</a><br><a href="#" title="Menu Item 2">Menu Item 2</a><br><a href="#" title="Menu Item 3">Menu Item 3</a>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<br><br>
© Company Name 2004
</div>
</center>
</body>
</html>

M, if you want to rip it to pieces feel free, but it is only for people to play with.

Have Fun

Dan



gorilla -> RE: CSS Templates for you to play with (3/26/2004 9:08:37)

Further very good information about form coding has been posted by Clum1 here:

http://www.frontpagewebmaster.com/m-190626/tm.htm



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.125