Ads Slots – Fluid Stylesheet




Tagged Under : , , , , ,

Version: 13.2
Revision: 43 Build 13

Ads Slots – Fluid Stylesheet

Introduction:
this tutorial will show you how to implement your own “advertisement block”, without paying for somebody to do it for you! This script is very easy to use and modify. However, you must give me some credits if you’re using this script.

Thank you for your support.

1.] Download notepad++ from the original author or from another source.
——————————-

http://sourceforge.net/projects/notepad-plus/

http://filehippo.com/download_notepad/

——————————-

2.] Copy this script and save it as “style-fluid.css”
However, it must be in a “Stylesheet” format!

File: style-fluid.css
—Copy Source Code—

.upperblock {
  width: auto;
  height: auto;
  padding: 10px;
}
.left-top {
  width: 125px;
  height: 125px;
  background: url(images/125x125.gif) no-repeat;
  margin-bottom: 10px;
}
.left-bottom {
  width: 125px;
  height: 125px;
  background: url(images/125x125.gif) no-repeat;
  }
.right-top {
  float: right;
  width: 125px;
  height: 125px;
  background: url(images/125x125.gif) no-repeat;
}
.right-bottom {
  float: right;
  width: 125px;
  height: 125px;
  background: url(images/125x125.gif) no-repeat;
}
.lowerblock {
  width: 100%;
  clear: both;
}

—End Source Code—

3.] Now, you’ll need to add these “html” strings. Nevertheless, these code can also be added into your Blog’s sidebar. However, you must remember to insert: “style-fluid.css” into the “head” of the page.

File: header.php / head tags
—Copy Source Code—

<link rel="stylesheet" type="text/css" href="style-fluid.css" /></link>

—End Source Code—

Finally, just add this code into your body – tags or your Blog’s sidebar.

File: sidebar.php / body tags
—Copy Source Code—

<div class="upperblock">

<div class="right-top">Ad code</div>
<div class="left-top">Ad code</div>

<div class="lowerblock"></div>

<div class="right-top">Ad code</div>
<div class="left-bottom">Ad code</div>

—End Source Code—

Notes: this script is designed to be fluid. It’s not a fixed – width version…

5.] Save everything and check your website!

Enjoy!

Copyrighted by Lair360




Blue Chrome – Vertical Menu v2




Tagged Under : , , , ,

Version: 32.1
Revision: 48 Build 12

Blue Chrome ~ Vertical Menu v2

Introduction:
this vertical menu – project was designed in my studio.
However, it was a struggle cleaning up the “CSS script”, so that it could synchronize with the text – menu. But, I managed to complete it and it was a big improvement from my previous edition: “Blue Chrome ~ Verticle Menu”.

This vertical menu will shift itself when you hover your mouse over their body.
But, this time, the width will be smaller so that it could fit any website with a smaller table.

Enjoy my new project and don’t forget to linkback!

1.] Download notepad++ from the original author or from another source.
——————————-

http://sourceforge.net/projects/notepad-plus/

http://filehippo.com/download_notepad/

——————————-

2.] Copy this ‘CSS Stylesheet’ source code and save it as “bluecr_sidebar.css” [without the quotes].

Warning: please don’t alter the stylesheet!
You might break the script and cause it to trigger errors or syntax errors!!

File Name: bluecr_sidebar.css
—Copy Source Code—

/* Copyrighted By Lair360*/
/* Version: 11.2d
   Revision: 43 Build 16*/

#globalnews {
}
#globalnews ul {
 width: 145px;
 letter-spacing: 1px;
 font-weight: bold;
 font-style: italic;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 border-top: 1px solid #000000;
 border-right: 3px solid #000000;
 border-bottom: 3px solid #000000;
 border-left: 1px solid #000000;
 margin:0;
 padding:0;
 list-style:none;
}
#globalnews li a {
 font-family: Courier New, Courier, mono;
 font-size: 12px;
 font-weight: bold;
 font-style: normal;
 text-decoration: none;
 padding-left: 6px;
 padding-bottom: 3px;
 color: #FFFFFF;
 padding-top: 3px;
 padding-right: 12px;
 text-align: left;
 background: #0000FF url(image/Blue_Chrome.gif);
 border-top: 1px #000000;
 border-right: 1px #000000;
 border-bottom: 1px solid #000000;
 border-left: 2px solid #000000;
 display:block;
 width:100%;
}
#globalnews li a:hover {
 color: #FFFFFF;
 font-family: Courier New, Courier, mono;
 font-size: 12px;
 font-weight: bold;
 background: #FFFFFF url(image/Blue_Crystal.gif);
 border-bottom: 1px solid #000000;
 border-left: 6px solid #000000;
}
#globalnews li.menucurrent a {
 text-align: right;
 background: #000000 url(image/Red_Chrome.gif);
}
#globalnews li.menucaption {
 color: #FFFFFF;
 font-style: normal;
 padding-left: 6px;
 font-size: 15px;
 padding-bottom: 4px;
 padding-top: 4px;
 font-family: Times New Roman, Times, serif;
 letter-spacing: 1px;
 text-align: left;
 background: #333333 url(image/Blue_Crystal.gif);
 display:block;
}
html>body #globalnews li a {
 width: auto;
}

—End Source Code—
Copyright 2001-2009 Lair360


3.] Add this code into the “body” tags and save it as a HTML extension.

File Name: Template.html
—Copy Source Code—

<div id="globalnews"><ul>
<li class="menucaption">Index-HTML</li>
<li><a href="Menu-001" title="Home">Home</a></li>
<li><a href="Menu-002" title="Tools">Tools</a></li>
<li><a href="Menu-003" title="Contact">Contact</a></li>
<li><a href="Menu-004" title="AboutUS">AboutUS</a></li>
<li class="menucaption">Submenu</li>
<li><a href="Menu-001" title="DeviantArt">DeviantArt</a></li>
<li><a href="Menu-002" title="Downloads">Downloads</a></li>
<li><a href="Menu-003" title="Wordpress">Wordpress</a></li>
<li><a href="Menu-004" title="Screenshots">Screenshots</a></li>
<li><a href="Menu-005" title="Examples">Examples</a></li>
</ul></div>

—End Source Code—
Copyright 2001-2009 Lair360


4.] Insert this little link into the “head” tags.
So that the “div” tags could synchronize with the “CSS Stylesheet”.

File Name: Template.html
—Copy Source Code—

<link rel="stylesheet" type="text/css" href="bluecr_sidebar.css" /></link>

—End Source Code—
Copyright 2001-2009 Lair360


5.] Now, you’ll need to download this file which has the images for the vertical menu.
But, you must create a sub-folder called: image (without capital).

http://dinom6.deviantart.com/art/Special-Colour-Stripes-125220598

Notes: create a sub-directory under your html menu and name it as: image (without capital).

6.] Save your progress and anything else.
After that, just execute your html webpage and give it a little test drive!

Advice: if you want it in a single file, you’ll need to copy this script and save it as a HTML format.

—Copy Source Code—

<head>
<style type="text/css">
<!--
/* Copyrighted By Lair360*/
/* Version: 11.2d
   Revision: 43 Build 16*/

#globalnews {
}
#globalnews ul {
 width: 145px;
 letter-spacing: 1px;
 font-weight: bold;
 font-style: italic;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 border-top: 1px solid #000000;
 border-right: 3px solid #000000;
 border-bottom: 3px solid #000000;
 border-left: 1px solid #000000;
 margin:0;
 padding:0;
 list-style:none;
}
#globalnews li a {
 font-family: Courier New, Courier, mono;
 font-size: 12px;
 font-weight: bold;
 font-style: normal;
 text-decoration: none;
 padding-left: 6px;
 padding-bottom: 3px;
 color: #FFFFFF;
 padding-top: 3px;
 padding-right: 12px;
 text-align: left;
 background: #0000FF url(image/Blue_Chrome.gif);
 border-top: 1px #000000;
 border-right: 1px #000000;
 border-bottom: 1px solid #000000;
 border-left: 2px solid #000000;
 display:block;
 width:100%;
}
#globalnews li a:hover {
 color: #FFFFFF;
 font-family: Courier New, Courier, mono;
 font-size: 12px;
 font-weight: bold;
 background: #FFFFFF url(image/Blue_Crystal.gif);
 border-bottom: 1px solid #000000;
 border-left: 6px solid #000000;
}
#globalnews li.menucurrent a {
 text-align: right;
 background: #000000 url(image/Red_Chrome.gif);
}
#globalnews li.menucaption {
 color: #FFFFFF;
 font-style: normal;
 padding-left: 6px;
 font-size: 15px;
 padding-bottom: 4px;
 padding-top: 4px;
 font-family: Times New Roman, Times, serif;
 letter-spacing: 1px;
 text-align: left;
 background: #333333 url(image/Blue_Crystal.gif);
 display:block;
}
html>body #globalnews li a {
 width: auto;
}
-->
</style>
</head>
<body>
<div id="globalnews"><ul>
<li class="menucaption">Index-HTML</li>
<li><a href="Menu-001" title="Home">Home</a></li>
<li><a href="Menu-002" title="Tools">Tools</a></li>
<li><a href="Menu-003" title="Contact">Contact</a></li>
<li><a href="Menu-004" title="AboutUS">AboutUS</a></li>
<li class="menucaption">Submenu</li>
<li><a href="Menu-001" title="DeviantArt">DeviantArt</a></li>
<li><a href="Menu-002" title="Downloads">Downloads</a></li>
<li><a href="Menu-003" title="Wordpress">Wordpress</a></li>
<li><a href="Menu-004" title="Screenshots">Screenshots</a></li>
<li><a href="Menu-005" title="Examples">Examples</a></li>
</ul></div></body>

—End Source Code—
Copyright 2001-2009 Lair360


7.] Done!

Copyrighted By Lair360




HTML – Transparent iframe




Tagged Under : , , , ,

Version: 43.1
Revision: 13.2 Build 13

HTML – Transparent iframe

Introduction:
this article was written to assist users who support “iframes” for their website.
But, this time, I will show you how to create frames that are transparent…

1.] Download notepad++ from the original author or from a mirror and install the software.
——————————-

http://sourceforge.net/projects/notepad-plus/

http://filehippo.com/download_notepad/

——————————-

2.] Add this iframe into your webpage or modify your existing “iframe”.
—Copy Source Code—

<iframe width="70%" height="500px" name="example" src="example.html" frameborder=0 ALLOWTRANSPARENCY="true" /></iframe>

—End Source Code—
Copyright 2001-2009 Lair360


Notes: change your frame’s width and height to suit your websites’ layout.
But, don’t forget to change the default – page (example.html) and replace it with your own.

3.] Now create a “CSS StyleSheet” and link it to your webpage.
—Copy Source Code—

iframe {
background-color: transparent;
}

—End Source Code—
Copyright 2001-2009 Lair360


Notes: if you want to add your “CSS + Javascript files” as an external file, you’ll need to use these codes instead.

a.] Copy these codes and insert it into the “head” tags. But, don’t forget to replace “name.js” and “style.css” with your own external – files.
—Copy Source Code—

<script type="text/javascript" language="Javascript" SRC="name.js"></script>

<link rel="stylesheet" type="text/css" href="styles.css">

—End Source Code—
Copyright 2001-2009 Lair360


b.] Save your work and continue…

4.] Now, check your “iframe” tags, then add a “class” attribute.
After that, please save your progress…
—Copy Source Code—

<iframe  class="attribute01" width="70%" height="500px" name="example" src="example.html" frameborder=0 ALLOWTRANSPARENCY="true" /></iframe>

—End Source Code—
Copyright 2001-2009 Lair360


Notes: you’ll need to replace class: “attribute01″ with your own tags.

5.] When you’re done with your “iframe”, you’ll need to modify your “CSS files”.
—Copy Source Code—

iframe.attribute01 {
background-color: transparent;
}

—End Source Code—
Copyright 2001-2009 Lair360


6.] Save your progress and exit…

7.] Done!

Tips: if you want to add these codes in a single file, you’ll need to use this method.

—Copy Source Code—

<head>
<style type="text/css">
<!--
iframe.attribute01 {
background-color: transparent;
}
-->
</style>
</head>
<body>
<iframe class="attribute01" width="500px" height="99px" name="about" src="blank.htm" frameborder=0 ALLOWTRANSPARENCY="true" /></iframe>
</body>

—End Source Code—
Copyright 2001-2009 Lair360




Stylesheet and JavaScript importing rules




Tagged Under : , , ,

Version: 32.2
Revision: 43 Build 14

Stylesheet and JavaScript importing rules

Introduction:
this tutorial will show you how to import “css” and “JavaScript” files without making a mistake. It will also help you to keep your “web-pages” clean from a bunch of codes and allows you to keep your pages simple!

Notes: the “@import” rule allows you to include ‘external style sheets’ in your documents or html files. It is a way of creating a style sheet within your document, and then importing additional rules into the document. However, some older or new browser doesn’t support this rules. So, you might have to use two methods to let the browser choose, decide and revert – back if needed.

1.] Download notepad++ from the original author or from a mirror and install the software.
——————————-

http://sourceforge.net/projects/notepad-plus/

http://filehippo.com/download_notepad/

——————————-

2.] Copy the source code and paste it into your notepad.

Notes*1: to use this feature, you’ll need to place the codes at the “head” of the page and place it after the “meta tags” only! However, don’t place this code after the “JavaScript codes”, or else, your web-page might trigger some unpleasant surprise…

Notes*2: to use these source code, please replace “filename.css, subfolder, one.css and two.css” files or subdirectories with your own…

—Copy Source Code—

<style type="text/css">
<!--
  @import url("filename.css");
  @import url("filename.css");
-->
</style>

—End Source Code—

Tips: if you have a “css file” in a subdirectory, you can include specific “filename.css” from the subfolders. You can also add the files without the quotes (inside the brackets)…

—Copy Source Code—

<style type="text/css">
<!--
  @import url(subfolder/filename.css);
  @import url(subfolder/filename.css);
-->
</style>

—End Source Code—

Function to support browser that doesn’t support “@import” rules.

Notes: some browser will ignore your “@import” syntax and it will try to look for a “link” and “href”. So, to work around this problem, you’ll need to add some extra codes before the “@import” rules. This can be sorted by looking at the source below…

—Copy Source Code—

<link rel="stylesheet" type="text/css" href="one.css" />
<link rel="stylesheet" type="text/css" href="two.css" />

<style type="text/css">
<!--
  @import url(subfolder/filename.css);
  @import url(subfolder/filename.css);
-->
</style>

—End Source Code—

Now, once everything is in place I’ll explain this properly so that you can understand!
——————————-
If you have the old importing method before the new “@import” method, your browser will try to look for the old method before using the new (style-sheet) import method. So, in my point of view, the browser will use the “@import” if the browser supports that function / syntax ~if not, the browser use this method which is provided below…

—Copy Source Code—

<link rel="stylesheet" type="text/css" href="style.css" />

—End Source Code—

To understand the orders of “css files”, just look at the html – coding and see where the “@import” and the old method are embedded…
——————————-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="shortcut icon" href="Globe.ico">
<title>Globalnews</title>
<meta name="verify-v1" content="NW73w4LhNaoTZeP5NJIBg88Wi5qAe1O2RVIFUZmLZ+4=" />
<META name="TITLE" content="globalnews" />
<META name="DESCRIPTION" content="This is a tutorial about CSS and JavaScript" />
<META name="KEYWORDS" content="tutorials,articles,vbscript,help,dictionary" />
<META name="OWNER" content="emailaddress@provider.com" />
<META name="AUTHOR" content="Lair360" />
<META HTTP-EQUIV="CHARSET" content="ISO-8859-1" />
<META HTTP-EQUIV="CONTENT-LANGUAGE" content="English" />
<META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1252" />
<META HTTP-EQUIV="VW96.OBJECT-TYPE" content="Database" />
<META name="COPYRIGHT" content="2008 by Lair360" />
<META name="RATING" content="General" />
<META name="ROBOTS" content="index,follow" />
<link rel="stylesheet" type="text/css" href="Fonts/fonts_style.css" />
<link rel='stylesheet' type='text/css' href="css_file/table_cssv1.css" />
<style type="text/css">
<!--
  @import url(Fonts/fonts_style.css);
  @import url(css_file/table_cssv1.css);
  @import url(css_file/Sidebar_RedChrome.css);
-->
</style>
</head>

——————————-

If you spot the rules, you’re doing great!

Part 2: importing JavaScript

Introduction: this little tutorial will help you to import “JavaScript” files that are long and fustratingly complicated! It will also help you to reduce your “bandwidth usage” if you have a bunch of web-pages that relies on that particular script!

—Copy Source Code—

<script type='text/javascript' src='source-code.js'></script>
<script type="text/javascript" language="javascript" src="myJsFile.js"></ script>

—End Source Code—

Notes: the biggest advantage to having an external “Javascript file” is that ~once the file has been loaded, the script will hang around the “browser’s cache” which means if the Javascript is loaded on a single page then it’s almost a sure thing that the next page on the site, the user visits will be able to load the files from the browser’s cache instead of having to reload it over the Internet!

To import multiple javascript, you can use this “php source” code.
However, this techniques will only work in a “server-side” environment…

1.] Create a “PHP file” in your text editor (Notepad++) and add the following codes to your web-page.

—Copy Source Code—

<?php include("filename1.php"); ?>
<?php include("filename2.php"); ?>

—End Source Code—

2.] Now, save your web-page and upload it to your host – provider.

3.] Done!

Copyright ~2008 Lair360