Want some one to build a template

puter hater · 19-Apr-2006, 12:43 PM #1

I would like a template built similar to the one I have posted here. I really like what they have but I don't have the fund s to hire a company to build on for me. Any one out there point me to the right direction to fine reasonable help? it has to be compatible with FP because that is what I use.
I really love the colors and the easy out lay of this template.

puter hater

sehodge · 19-Apr-2006, 07:21 PM #2

I don't do graphics so this is as close as I could get. You will need to save the two attached jpg's because they are your backgrounds.

<?xml version="1.0" encoding="UTF-8"?>
<!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">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
html, body{height: 100%; width: 100%; margin: 0; padding: 0; border: 0;}

.thetable{
position: relative;
display: table;
width: 100%;
margin: 0;
padding: 0;
border: 0;
clear: both;
border-spacing: 0; /* required by Opera 6 */
}

/* hide this from opera6 */
head:first-child+body div.thetable {height: 100%;}

.tablerow{display: table-row;}

.tablecell{
display: table-cell;
border: 0;
padding: 0;
margin: 0;
padding-top: 100px;
padding-bottom: 50px;
vertical-align: top;
min-height: 100%;

}

.left{
width: 180px;
background-image: url(left.jpg);
position: relative;
color: #fff;
z-index: 5;
}
.left a{
color: #fff;
}
.middle{
width: auto;
background: white;
position: relative;
}
.right{
width: 200px;
background-color: F1F1F1;
position: relative;
}

#header1 {
color: white;
position: absolute;
top: 0; left: 0;
height: 10px;
background-color: #5A2E52;
FONT-SIZE: xx-small;
width: 100%;
text-align: right;
z-index: 10;
}
#header1 a {
color: white;
}

#header2 {
top: 0; left: 0;
height: 100px;
background-image: url(top2.jpg);
color: white;
width: 100%;
z-index: 10;
}

#footer{
clear: both;
position: relative;
height: 40px;
background: #c1c1c1;
color: #000000;
margin-top: -40px;
margin-bottom: 40px;
z-index: 15;
}

/* hide this from opera6 */
head:first-child+body div#footer {margin-bottom: 0;}

p{padding: 0.5em 1em 0 1em; margin: 0;}

/* removing margins from headings corrects an Opera 6 display error */
h1, h2{font-family: georgia; padding: 0.5em 2em; margin: 0;}
h1{font-size: 1.2em;}
h2 {font-size: 1.1em;}

</style>



</head>
<body>
<span>
<div id="header1">
<a href="http://yoursite.com/index.html#nogo">Home</a>  
<a href="http://yoursite.com/index.html#nogo">Contact</a>  
<a href="http://yoursite.com/index.html#nogo">About Us</a>  
</div> </span>
<div id="header2"><h1>header content</h1></div>
<div class="thetable">
<div class="tablerow">
<div class="tablecell left">
<p><a href="http://yoursite.com/index.html#nogo">Home</a>  <br>
<a href="http://yoursite.com/index.html#nogo">Contact</a>  <br>
<a href="http://yoursite.com/index.html#nogo">About Us</a>  <br>
<a href="http://yoursite.com/index.html#nogo">Lnik</a>  <br>
<a href="http://yoursite.com/index.html#nogo">Lnik</a>  <br>
</div>
<div class="tablecell middle">
<h2>Middle Column</h2>
<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 exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro 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. <br><br>
<h2>Middle Column</h2>
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit‡ de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.
</div>

<div class="tablecell right">
<h3 align="center">Right Column</h3>
<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 exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro 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. <br><br>

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit‡ de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. </p>
</div>
</div>
</div>
<div id="footer">footer text here</div></a>
</body>
</html>

deepdiver01 · 08:05 PM

Yep, that will start things off. Also, This will also.

Your index.html file

Code:

<!doctype html public "-//W3C//DTD HTML 4.01//EN">

<html>

<head>
<title>puter haters trial</title>
<meta http-equiv="generator" content="PHP Designer 2005" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" type="text/css" href="layout1.css">
</head>

<body>

<div id="outer">
  <div id="header">
    <p>Header - Centre column longest - footer at bottom of document.</p>
  </div>
  <div id="left">
    <p>Left Content goes here :</p>
    <p>Can be a menu bar if needed</p>
  </div>
  <div id="right">
    <p>Right content goes here :</p>
  </div>
  <div id="centrecontent">
    <table class="table1" border="1">
      <tr>
        <td>Centre Content Goes Here.
          <p>Keep writing</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>And more</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>And still more</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>Testing scroll.</p>
        </td>
      </tr>
    </table>
  </div>
  <div id="clearfooter">
  </div>
  <!-- to clear footer -->
</div>
<!-- end outer div -->
<div id="footer">
  -Footer -
</div>

</body>

</html>

Your stylesheet.css file

Code:

.table1 {
  background-color: #ffffff;
  width: 100%;
}

Your layout.css file

Code:

html, body {height:100%}
body {
padding:0;
margin:0;
background-image: url(images/background1.gif);

/* Can fix background image if needed */
background-attachment: fixed;

}
#outer{
height:100%;
min-height:100%;
margin-left:130px;
margin-right:130px;
background:transparent;
border-left:1px solid #000;
border-right:1px solid #000;
margin-bottom:-52px;
color: #000000;
}
html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/

#header{
background-color: transparent;
border-top:1px solid #000;
border-bottom:1px solid #000;
color: #000;
text-align:center;
position:relative;
margin:0 -131px;
padding-top:56px;
}
/* mac hide \*/
* html #header{height:56px;he\ight:10px}/* height needed for ie to force layout*/
/* end hide*/

#left {
position:relative;/*ie needs this to show float */
width:130px;/* same as the left margin on #outer*/
float:left;
margin-left:-129px;/*must be 1px less than width otherwise won't push footer down */
padding-top:72px;/*needed to make room for header*/
left:-2px;/* push column into position*/
}
#left p {padding-left:2px;padding-right:2px}
#right p {padding-left:2px;padding-right:2px}

#right {
position:relative;/*ie needs this to show float */
width:130px;/* same as right margin on #outer*/
float:right;
margin-right:-129px;/*must be 1px less than width otherwise won't push footer down */
padding-top:72px;/*needed to make room for header*/
left:2px;/* push column into position*/
background: #ffffff;
}

#footer {
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color: #FF8080;
color: #000000;
text-align:center;
position:relative;
}
* html #footer {/*only ie gets this style*/
\height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
}

#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
div,p {margin-top:0}/*clear top margin for mozilla*/
* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */

Make a new folder, and copy and paste the different codes here with notepad saving them in the folder and naming them as suggested. Open an images folder inside the filder holding your files. Put the attached .gif image in the images folder and off you go.

You can open the index.html file in frontpage. It will look funny in the 'normal window but you will still be able to edit it there. When you look at it in preview or in your browser, it will look ok.

If you are going to do a lot of pages on your site, I would suggest that you look into php scripting. that way, you can easily include and modify such things as menu bars and other repetitive items easily.

If you need an idea of how to go about this, there are plenty of people here that can guide you through this or you can always pm me.

Have fun.

Oops: Attachment too big. You can get it here.

http://www.udi.com.au/bgimage/background1.gif

puter hater · 20-Apr-2006, 03:59 AM #4

Thanks guys...really appreciate the help. This is the frist time I have delt directly with code so it may take me a bit it work it out. But Im sure I can work it out.
puter hater

Search
Search in:
Show Threads Show Posts
Advanced Search

Tag Cloud
acer black screen blue screen boot bsod computer connection crash css dell display driver drivers email error excel explorer firefox firefox 3 game hard drive internet internet explorer itunes laptop lcd linux malware network networking nvidia outlook outlook 2003 outlook express partition printer problem ram router slow sound sprtcmd.exe trojan usb video virus vista windows windows xp wireless

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)