|
| |
|
|
gorilla
Posts: 2974
From: Denmark
Status: offline
 |
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."
< Message edited by gorilla -- 3/7/2004 13:54:48 >
_____________________________
Mháircaish
Signature self-censored to protect the sensibilities of the thin-skinned .
May we never confuse honest dissent with disloyal subversion. – Dwight D. Eisenhower
|
|
|
|
gorilla
Posts: 2974
From: Denmark
Status: offline
|
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:
< Message edited by gorilla -- 3/7/2004 9:21:45 >
| |
|
|
|
gorilla
Posts: 2974
From: Denmark
Status: offline
|
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>
< Message edited by gorilla -- 3/7/2004 10:52:57 >
_____________________________
Mháircaish
Signature self-censored to protect the sensibilities of the thin-skinned .
May we never confuse honest dissent with disloyal subversion. – Dwight D. Eisenhower
| |
|
|
|
gorilla
Posts: 2974
From: Denmark
Status: offline
|
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;
}
_____________________________
Mháircaish
Signature self-censored to protect the sensibilities of the thin-skinned .
May we never confuse honest dissent with disloyal subversion. – Dwight D. Eisenhower
| |
|
|
|
Giomanach
Posts: 6115
Joined: 11/19/2003
From: England
Status: offline
|
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
< Message edited by Giomanach -- 3/10/2004 16:38:44 >
_____________________________
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
, 