CSS positioning??

liunx

Guest
You all mention CSS positioning once in a while, which really gives me a headache.<br />
<br />
My life would be much easier if I only knew what it implies. Anyone care to give me an update?<br />
<br />
-aslefo<!--content-->they are style sheets so you can apply a style or look to lots of pages with less space<!--content-->A stylesheet can also be used to create highlights etc.<br />
<!doctype html public "-//w3c//dtd html 3.2//en"><br />
<br />
<br />
<html><br />
<br />
<head><br />
<title>(Type a title for your page here)</title><br />
<!--This page created on Tuesday, July 10, 2001 00:29:53 --><br />
<br />
<META name="description" content="starting with arachnophilia the html editor"><br />
<META name="keywords" content="arachno, html, updat, email, content, starting, homepage"><br />
<meta name="GENERATOR" content="Arachnophilia 4.0"><br />
<meta name="FORMATTER" content="Arachnophilia 4.0"><br />
<meta name="Author" content="Peter Vazed"><br />
<META name="robots" content="index, follow"><br />
<META name="revisit" content="7 days"><br />
<br />
<STYLE TYPE="text/css"><br />
<!--<br />
A:link { text-decoration: none; color: #000000 }<br />
A:visited { text-decoration: none; color: #990000 }<br />
A:active { text-decoration: none; color: #0000FF }<br />
A:hover { text-decoration: underline; color: #FF0000 }<br />
<br />
.klgrn {background-color: #669999;}<br />
.klgl {background color: #FFCC00;}<br />
.info {font-family:verdana, tahoma, arial, ms sans serif;font-size:12;}<br />
BODY { scrollbar-3d-light-color:#FFFFFF;<br />
scrollbar-arrow-color:#FFFF33;<br />
scrollbar-base-color:#e39be3;<br />
scrollbar-dark-shadow-color:#333333;<br />
scrollbar-face-color:#a40616;<br />
scrollbar-highlight-color:#999999;<br />
scrollbar-shadow-color:#cec553}<br />
--><br />
</STYLE><br />
<br />
</HEAD><br />
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" Marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 BACKGROUND="#" ><br />
<a name="link"></a><br />
<br />
<br>THIS SCRIPT BROUGHT TO YOU BY JAVAFILE.COM<br />
<br />
Just paste the code you want into the BODY tag of your page:<br />
<br />
<br />
<!----------------- PLEASE ATTACH THIS IF USED --------------><br />
<meta name=author <br />
content="Raul R. Edwards"><br />
<meta name=copyright <br />
content="Software Angel, Inc. (c) April 1, 1999"> <meta license=GNU<br />
content="GNU General Public License Version 1.2<br />
as published by the Free Software Foundation"<br />
<!-----------------------------------------------------------><br />
<style><br />
body { background:silver; font-family:Arrus BT,Garamond,Times New Roman; }<br />
div { position:absolute; }<br />
</style><br />
<br />
<br><br><br><br />
<br />
<!--- Example #1 ---><br />
<style><br />
.shade1 { top:+5; left:+5; color:black; }<br />
.fill1 { top:0; left:0; color:red; }<br />
</style><br />
<div class=Example1><br />
<br />
<div class="shade1"><br />
<center><h1>Shadow</h1></center><br />
</div><br />
<div class="fill1"><br />
<center><h1>Shadow</h1></center><br />
</div><br />
<br />
</div><br />
<br />
<br><br><br><br />
<br />
<!--- Example #2 ---><br />
<style><br />
.light2 { top:-1; left:-2; color:white; }<br />
.shade2 { top:+1; left:+2; color:black; }<br />
.fill2 { top:0; left:0; color:silver; } </style><br />
<div class=Example2><br />
<div class="light2"><br />
<center><h1>Emboss Background Example</h1></center><br />
</div><br />
<div class="shade2"><br />
<center><h1>Emboss Background Example</h1></center><br />
</div><br />
<div class="fill2"><br />
<center><h1>Emboss Background Example</h1></center><br />
</div><br />
</div><br />
<br />
<br><br><br><br />
<br />
<!--- Example #3 ---><br />
<style><br />
.light3 { top:-2; left:-2; color:white; }<br />
.shade3 { top:+2; left:+2; color:lightblue; }<br />
.fill3 { top:0; left:0; color:blue; } </style><br />
<div class=Example3><br />
<div class="light3"><br />
<center><h1>Emboss Color Example</h1></center><br />
</div><br />
<div class="shade3"><br />
<center><h1>Emboss Color Example</h1></center><br />
</div><br />
<div class="fill3"><br />
<center><h1>Emboss Color Example</h1></center><br />
</div><br />
</div><br />
<br />
<br><br><br><br />
<br />
<!--- Example #4 ---><br />
<style><br />
.light4 { top:-2; left:-2; color:yellow; }<br />
.shade4 { top:+2; left:+2; color:yellow; }<br />
.fill4 { top:0; left:0; color:darkgreen; } </style><br />
<div class=Example4><br />
<div class="light4"><br />
<center><h1>Color Highlight Example</h1></center><br />
</div><br />
<div class="shade4"><br />
<center><h1>Color Highlight Example</h1></center><br />
</div><br />
<div class="fill4"><br />
<center><h1>Color Highlight Example</h1></center><br />
</div><br />
</div><br />
<br />
<br><br />
<br />
<center><a href=http://www.htmlforums.com/archive/index.php/"#link"> top </a><br />
</center><br />
</body><br />
<br />
</html><!--content-->Well sure, I'm familiar with stylesheets.<br />
It's just the term CSS positioning that I'm curious about.<br />
Does it merely mean CSS formatting?<br />
<br />
(by the way, those were some pretty neat effects)<!--content-->Originally posted by aslefo <br />
You all mention CSS positioning once in a while, which really gives me a headache.<br />
<br />
My life would be much easier if I only knew what it implies. Anyone care to give me an update?<br />
<br />
-aslefo <br />
<br />
okay, grab your css code, open a text file, just stick it in there and save it as whatever.css<br />
<br />
In your page, instead of putting the css code, put <br />
<link REL=stylesheet HREF=http://www.htmlforums.com/archive/index.php/"/wherever/style.css" TYPE="text/css"><!--content-->CSS positioning means using an external or internal style sheet or inline style tags to position elements on a webpage. <br />
<br />
The advantages are that very precise positioning is possible and you can stack elements on top of each other using z-indexing and throw in java scripting for DHTML effects. <br />
<br />
Think of the browser window as a series of pixels (which it is) starting in the top left corner, that is position left: 0px; top : 0px;<br />
<br />
browsers start at the top left corner and work from there, like reading English, left to right top to bottom. <br />
<br />
HTH,<br />
Kevin<!--content-->oh sorry aslefo... I thought you said 'css pointing'<br />
<br />
Thanks for opening my eyes kevin :)<!--content-->LOL<br />
<br />
Kevin<!--content-->Then we got that sorted out.<br />
Thank's, guess I have some catching up to do.<!--content-->
 
Back
Top