Title: 3 Column page setup (liquid)
Version:
Author: Steve C.
Demo:
Download:
Website:
Short description:
*************************************/
LinkMan is a great little script I'm using the free version at the moment
I've not gone live yet still tweaking
but would like to put something back into the community so
I've knocked up a 3 Column page setup (liquid) for the linkman
if anyone wants it help yourself its been checked and validated at W3C.
The main purpose for me placing these files here is to encourage people
to play with code, which in this case HTML (not php).
any feed back would be welcome I'm busy on other projects but will
try and help out as much as I can.
There are 3 files:
1 = Masterpagefile.htm
This file you can mess with in you editors that you use,
lots of notes inside to help you in each section.
have fun !
2 = header.txt
3 = footer.txt
files 2 and 3 can be placed in the linkMan folder and will give you the
same as below.
but you must change all links etc with your own to get it going.
Best bet it to play with Masterpagefile.htm and the copy any paste your code after, all will be clear when you see the code (I hope)
SAVE Code as: Masterpagefile.htm
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- This code has been validated @ http://validator.w3.org/ -->
<head>
<!-- Your Title -->
<title></title>
<!-- Meta Tags -->
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<meta content="en-gb" http-equiv="Content-Language" />
<meta content="General" name="rating" />
<meta name="distribution" content="global" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="linkmenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Page background -->
<div style="background-color: #87CEFA">
<!-- Logo Heading -->
<div style="background-color: #0099CC; width: 100%; min-height: 120px; padding-top: 10px">
<h1> Your Site Name Here</h1>
<h3> Your Logo Here</h3>
</div>
<!-- Top Menu Links -->
<div class="linkmenu">
<ul style="border: medium solid #000000;background-color: #E0FFFF">
<li><a href="http://www.topMenulink1.com/link1.html" title="topMenulink1" >TopMenulink1</a></li>
<li><a href="http://www.topMenulink2.com/link2.html" title="topMenulink2" >TopMenulink2</a></li>
<li><a href="http://www.topMenulink3.com/link3.html" title="topMenulink3" >TopMenulink3</a></li>
<li><a href="http://www.topMenulink4.com/link4.html" title="topMenulink4" >TopMenulink4</a></li>
<li><a href="http://www.topMenulink5.com/link5.html" title="topMenulink5" >TopMenulink5</a></li>
<li><a href="http://www.topMenulink6.com/link6.html" title="topMenulink6" >TopMenulink6</a></li></ul>
</div>
<!-- Info bar (yellow) -->
<p style="color: #000000; display: block; background: #FFFF00; padding: 8px; text-align: center">
<b style="font-size: 18px">Link Exchange Program</b><br />
If you would like to swap links with our Website<br />
please follow the instruction:
<a href="#addlink">Submit your website</a></p>
<!-- Start of Table (splitting page into 3 columns) -->
<table>
<tr>
<!-- Start of Left hand side menu Column 1-->
<td valign="top" style="width: 160px; height: 522px; padding-right: 12px">
<p>You can place a menu or<br />
some ads here,</p><br /><br />
<p style="background-color: #FFCC99">width set at 160px<br />
but can easily be adjusted<br />
within the td tag above<br />
(view in code editor)</p>
<p>Simple menu </p>
<ul >
<li><a href="http://www.yourlink.com/link1.html" title="link1">link1</a></li>
<li><a href="http://www.yourlink.com/link2.html" title="link2">link2</a></li>
<li><a href="http://www.yourlink.com/link3.html" title="link3">link3</a></li></ul>
<br />
<p style="border: thin #000000 solid; width: 156px; text-align: center; color: #000000; background-color: #99CCFF;">
<br /><br /><br /><b>Ads Here</b><br /><br /><br />
</p>
</td>
<!-- END of Left hand side menu Column 1 -->
<!-- Start of center Column 2 (linkman /links.php)-->
<td width="100%" valign="top" style="padding-left: 8px; padding-right: 8px">
<!-- ******** Copy and Paste the code ABOVE into header.txt file-->
<!-- ******** This is the center column 2 where linkman (links.php) is displayed *******-->
<!-- ******** Copy and Paste The code BELOW into footer.txt file-->
</td>
<!-- END of center Column 2 -->
<!-- Start of Right hand side menu Column 3-->
<td valign="top" bgcolor="#999999" >
<div style="width: 160px; background-color: #CCFF99; height: 500px">Left hand Column<br /><br />
<p style="background-color: #FFCC99">width set at 160px<br />
but can easily be adjusted<br />
within the td tag above<br />
(view in code editor)</p></div>
</td>
<!-- END of Right hand side menu Column 3-->
</tr>
</table>
<!-- END of Table -->
</div>
<!-- This is end of Page Background <div> (line 20)-->
</body>
</html>
SAVE Code as: header.txt
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- This code has been validated @ http://validator.w3.org/ -->
<head>
<!-- Your Title -->
<title></title>
<!-- Meta Tags -->
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<meta content="en-gb" http-equiv="Content-Language" />
<meta content="General" name="rating" />
<meta name="distribution" content="global" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="linkmenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Page background -->
<div style="background-color: #87CEFA">
<!-- Logo Heading -->
<div style="background-color: #0099CC; width: 100%; min-height: 120px; padding-top: 10px">
<h1> Your Site Name Here</h1>
<h3> Your Logo Here</h3>
</div>
<!-- Top Menu Links -->
<div class="linkmenu">
<ul style="border: medium solid #000000;background-color: #E0FFFF">
<li><a href="http://www.topMenulink1.com/link1.html" title="topMenulink1" >TopMenulink1</a></li>
<li><a href="http://www.topMenulink2.com/link2.html" title="topMenulink2" >TopMenulink2</a></li>
<li><a href="http://www.topMenulink3.com/link3.html" title="topMenulink3" >TopMenulink3</a></li>
<li><a href="http://www.topMenulink4.com/link4.html" title="topMenulink4" >TopMenulink4</a></li>
<li><a href="http://www.topMenulink5.com/link5.html" title="topMenulink5" >TopMenulink5</a></li>
<li><a href="http://www.topMenulink6.com/link6.html" title="topMenulink6" >TopMenulink6</a></li></ul>
</div>
<!-- Info bar (yellow) -->
<p style="color: #000000; display: block; background: #FFFF00; padding: 8px; text-align: center">
<b style="font-size: 18px">Link Exchange Program</b><br />
If you would like to swap links with our Website<br />
please follow the instruction:
<a href="#addlink">Submit your website</a></p>
<!-- Start of Table (splitting page into 3 columns) -->
<table>
<tr>
<!-- Start of Left hand side menu Column 1-->
<td valign="top" style="width: 160px; height: 522px; padding-right: 12px">
<p>You can place a menu or<br />
some ads here,</p><br /><br />
<p style="background-color: #FFCC99">width set at 160px<br />
but can easily be adjusted<br />
within the td tag above<br />
(view in code editor)</p>
<p>Simple menu </p>
<ul >
<li><a href="http://www.yourlink.com/link1.html" title="link1">link1</a></li>
<li><a href="http://www.yourlink.com/link2.html" title="link2">link2</a></li>
<li><a href="http://www.yourlink.com/link3.html" title="link3">link3</a></li></ul>
<br />
<p style="border: thin #000000 solid; width: 156px; text-align: center; color: #000000; background-color: #99CCFF;">
<br /><br /><br /><b>Ads Here</b><br /><br /><br />
</p>
</td>
<!-- END of Left hand side menu Column 1 -->
<!-- Start of center Column 2 (linkman /links.php)-->
<td width="100%" valign="top" style="padding-left: 8px; padding-right: 8px">
<!-- ******** Copy and Paste the code ABOVE into header.txt file-->
SAVE Code as: footer.txt
Code: Select all
<!-- ******** This is the center column 2 where linkman (links.php) is displayed *******-->
<!-- ******** Copy and Paste The code BELOW into footer.txt file-->
</td>
<!-- END of center Column 2 -->
<!-- Start of Right hand side menu Column 3-->
<td valign="top" bgcolor="#999999" >
<div style="width: 160px; background-color: #CCFF99; height: 500px">Left hand Column<br /><br />
<p style="background-color: #FFCC99">width set at 160px<br />
but can easily be adjusted<br />
within the td tag above<br />
(view in code editor)</p></div>
</td>
<!-- END of Right hand side menu Column 3-->
</tr>
</table>
<!-- END of Table -->
</div>
<!-- This is end of Page Background <div> (line 20)-->
</body>
</html>
