seeking help with css template...

**DestinysEnd** · 07-01-2012, 05:09 AM

XD
So I was going to ask a questions about what I was doing wrong but I figured it out, how ever I do still need some help with another issue :P
I'm trying to make it so when I do to edit the links on my webpage, all I have to do is change it in one file and be done with it, it gets a little frustrating having to do the same thing over and over 50+ times...

this is what I have on my code so far

this is my index.html

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>Big Business 2.0 by FCT</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="logo">
  <a href="home.html"><img src="img.png" border="0"></a>
</div>
<div id="banner">
  <img src="http://i44.photobucket.com/albums/f11/master-of-time/Cox/newbanner.jpg">
</div>
<div id="clock">
  <iframe src="http://free.timeanddate.com/clock/i35x3s8s/n127/fn6/fs16/fc9ff/tct/pct/tt0/th2/tb1" frameborder="0" width="357" height="24" allowTransparency="true"></iframe>
</div>
<div id="digi">
  <a href="sub/google.html"><img src="digi.png" border="0"></a>
</div>
<div id="home">
  <a href="home.html"><font size="5" >Home</font></a>
</div>
  
<div id="links">  
  <ul>
    <li>Codes
      <ul>
        <li><a href=".html">left link1</a></li>
        <li><a href=".html">left link2</a></li>
        <li><a href=".html">left link3</a></li>
        <li><a href=".html">left link4</a></li>
        <li><a href=".html">left link5</a></li>
        <li><a href=".html">left link6</a></li>
      </ul>
    </li>
    <li>Installs
      <ul>
        <li><a href=".html">left link7</a></li>
        <li><a href=".html">left link8</a></li>
        <li><a href=".html">left link9</a></li>
      </ul>
    </li>
  <br />
    <li>Trouble Shooting
      <ul>
        <li><a href=".html">left link10</a></li>
        <li><a href=".html">left link11</a></li>
        <li><a href=".html">left link12</a></li>
      </ul>
    </li>
  </ul>
</div>
<div id="links2">  
  <ul>
    <li>Other Information
      <ul>
        <li><a href=".html">right link1</a></li>
        <li><a href=".html">right link2</a></li>
        <li><a href=".html">right link3</a></li>
        <li><a href=".html">right link4</a></li>
        <li><a href=".html">right link5</a></li>
      </ul>
    </li>
  </ul>
</div>
    
<div id="egg">
  <a href="easteregg.html"><img src="http://i44.photobucket.com/albums/f11/master-of-time/Cox/egg.jpg" border="0"></a>
</div>
  
</body>
</html>

and this is my style.css

Code:

body {
      background-color:101010;
      background-image: url("http://i44.photobucket.com/albums/f11/master-of-time/Cox/background.jpg");
      background-repeat: repeat-y; 
      background-position:0px 0px;
      scrollbar-arrow-color:ffffff;
      scrollbar-track-color:lightblue;
      scrollbar-shadow-color:blue;
      scrollbar-face-color:gray;
      scrollbar-highlight-color:white;
      scrollbar-darkshadow-color:blue;
      scrollbar-3dlight-color:000000;
}  
#banner{
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: 0;
}
#clock{
      position: absolute;
      left: 860px;
      top: 95px;
      z-index: 5;
}
#logo{
      position: absolute;
      left: 0%; 
      margin-left:5px; 
      top: 8; 
      z-index: 2;
}
#logo2{
      position: absolute;
      left: 0%;
      margin-left: 0px;
      top: 8px;
}
#links{
      position: absolute; 
      left: 0px; 
      top: 145px; 
      width:200;
      height:500;
      overflow:auto;
}
#links2{
      position: absolute; 
      left: 1040px; 
      top: 145px; 
      overflow:hidden;
}
#home{
      position: absolute; 
      left: 60px;
      top: 95px; 
}
#digi{
      position: absolute; 
      left: 40px; 
      top: 520px; 
}  
#egg{
      position: absolute; 
      left: 0px; 
      top: 132px; 
}

body,table, td, li, p, div{
font-family: century gothic, arial, verdana, sans-serif;
font-size: 12px;
color: C1C1BF; 
font-weight:none; 
border:0px; 
text-transform: none; 
line-height:15px;
}
textarea{
background-color: C1C1BF; 
width: 150px; 
height: 50px; 
color: A2B8E3; 
font:7px small fonts; 
text-transform:uppercase; 
border: solid 1px 000;
}
a.navigate:link,a.navigate:active,a.navigate:visited{
padding:1px;
color:C1C1BF;
font-size:12px;
display:block;
margin-top:1px;
cursor:default;
line-height:11px;
border:0px solid;
text-align:left;
font-weight:normal;
letter-spacing:0px;
font-family:verdana;
border-color:000000;
text-decoration:none;
text-transform:none;
background:url() top left repeat-x;
}
a.navigate:hover{
padding:1px;
color:C1C1BF;
font-size:12px;
display:block;
margin-top:1px;
cursor:default;
line-height:11px;
border:0px solid;
text-align:left;
font-weight:normal;
letter-spacing:0px;
font-family:verdana;
border-color:000000;
text-decoration:none;
text-transform:none;
background:url() top left repeat-x;
}
a{
font:normal 9px Verdana; 
color:C1C1BF; 
font-weight:none; 
border:0px; 
text-transform: none; 
}
a:link, a:visited {
text-decoration: none;
color: C1C1BF;a:link, a:visited {
text-decoration: none;
color: C1C1BF; }
a:active{
font:normal 9px Verdana; 
color:C1C1BF; 
font-weight:none; 
border:0px; 
text-transform: none; 
}
a:visited{
font:normal 9px Verdana; 
color:C1C1BF; 
font-weight:none; 
border:0px; 
text-transform: none; 
}
a:hover{
font:normal 9px Verdana; 
color:C1C1BF;
text-transform: none;
}
a:link, a.man{
font:normal 9px Verdana; 
color:C1C1BF; 
border:0px; 
text-transform: none; 
}
.standard b, p b, B, strong {
font-family:verdana; 
font-size:9px; 
color:C1C1BF; 
font-weight:none;
border:0px; 
text-transform: none; 
}
h1 {
margin: 0px; 
color: C1C1BF;
text-align:right;
border-bottom: 2px solid;
border-color:;
font-family:tahoma, verdana, arial, sans-serif;
font-size: 20px; 
font-weight: normal;
background-color: transparent; 
letter-spacing: 1px; 
line-height: 8pt;
margin-bottom: 1px;
margin-top: 1px;
padding:2px;
padding-left:3px;
}

is there any way to do what im looking to do,
I dont mind doing the coding myself if im pointed in the direction of how to find out how to do it

**bernie1227** · 07-01-2012, 05:17 AM

I don't really understand what you mean. Could you please give me an example?

**ApacheTech** · 07-01-2012, 05:30 AM

I understand what you mean.

You have a menu, which is at the top of every page, or wherever it resides. Whenever you want to edit that menu, you have to edit every single page.

There are a few ways around this.

Iframes. You can have the menu as a single file, then use iframes in each page to display it where you want it.
Server Side Includes. This is a rather complicated method whereby you include a separate html file within each page. Kind of like the iframes, but all on one page and it's rendered at the server.
A serverside language like PHP or ASP.NET that can create a template or Master Page that's used for each page.
HTML Frames. I'm only adding this for completeness, this is not a valid option. It is possible to split the page into frames and have different pages displayed concurrently in each frame.
Dreamweaver Templates. Again, I would highly discourage this method, but you can use Dreamweaver to create master pages to place content on.

The most preferable option is number 3, using a serverside language; but this will require knowing the basics of a programming language; mainly either PHP or ASP.NET (which uses either Visual Basic or C#).

**ApacheTech** · 07-01-2012, 05:47 AM

I'll give an example in PHP:

links.html.php:

HTML Code:

<div id="links">  
  <ul>
    <li>Codes
      <ul>
        <li><a href=".html">left link1</a></li>
        <li><a href=".html">left link2</a></li>
        <li><a href=".html">left link3</a></li>
        <li><a href=".html">left link4</a></li>
        <li><a href=".html">left link5</a></li>
        <li><a href=".html">left link6</a></li>
      </ul>
    </li>
    <li>Installs
      <ul>
        <li><a href=".html">left link7</a></li>
        <li><a href=".html">left link8</a></li>
        <li><a href=".html">left link9</a></li>
      </ul>
    </li>
  <br />
    <li>Trouble Shooting
      <ul>
        <li><a href=".html">left link10</a></li>
        <li><a href=".html">left link11</a></li>
        <li><a href=".html">left link12</a></li>
      </ul>
    </li>
  </ul>
</div>

links2.html.php:

HTML Code:

<div id="links2">  
  <ul>
    <li>Other Information
      <ul>
        <li><a href=".html">right link1</a></li>
        <li><a href=".html">right link2</a></li>
        <li><a href=".html">right link3</a></li>
        <li><a href=".html">right link4</a></li>
        <li><a href=".html">right link5</a></li>
      </ul>
    </li>
  </ul>
</div>

Then, to add them into the main page you add the following lines:

PHP Code:


<?php include 'links.html.php'; ?>
<?php include 'links2.html.php'; ?>

So, your full page would be:

HTML Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Big Business 2.0 by FCT</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="logo">
        <a href="home.html">
            <img src="img.png" alt="Home" /></a>
    </div>
    <div id="banner">
        <img src="http://i44.photobucket.com/albums/f11/master-of-time/Cox/newbanner.jpg"
            alt="Page Banner" />
    </div>
    <div id="clock">
        <iframe src="http://free.timeanddate.com/clock/i35x3s8s/n127/fn6/fs16/fc9ff/tct/pct/tt0/th2/tb1"
            frameborder="0" width="357" height="24" allowtransparency="true"></iframe>
    </div>
    <div id="digi">
        <a href="sub/google.html">
            <img src="digi.png" alt="Digi" /></a>
    </div>
    <div id="home">
        <a href="home.html">Home</a>
    </div>
    <?php include 'links.html.php'; ?>
    <?php include 'links2.html.php'; ?>
    <div id="egg">
        <a href="easteregg.html">
            <img src="http://i44.photobucket.com/albums/f11/master-of-time/Cox/egg.jpg" alt="Easter Egg" /></a>
    </div>
</body>
</html>

I've taken the liberty to clean up your code slightly, add a doctype and switch around the meta tags.

**DestinysEnd** · 07-04-2012, 06:59 AM

ok so I tried using IFRAMEs and it works for what im looking for, err my only question with that is, how do I output the results from a link used in an iframe in the middle of the page?

this is the code I have for it

main page

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head> 
    <style type="text/css">
body {
      background-color:101010;
      background-image: url("");
      background-repeat: repeat-none; 
      background-position:0px 0px;
} 
div#top{
      position: absolute; 
      left: 0px; 
      top: 0px; 
      overflow:hidden;
      z-index: 1;
}   
div#left{
      position: absolute; 
      left: 0px; 
      top: 134px; 
      overflow:hidden;
      z-index: 2;
}
div#right{
      position: absolute; 
      left: 1022px; 
      top: 134px; 
      overflow:hidden;
      z-index: 2;
}
body,table, td, li, p, div{
font-family: century gothic, arial, verdana, sans-serif;
font-size: 12px;
color: C1C1BF; 
font-weight:none; 
border:0px; 
text-transform: none; 
line-height:15px;
}
textarea{
background-color: C1C1BF; 
width: 150px; 
height: 50px; 
color: A2B8E3; 
font:7px small fonts; 
text-transform:uppercase; 
border: solid 1px 000;
}
a.navigate:link,a.navigate:active,a.navigate:visited{
padding:1px;
color:C1C1BF;
font-size:12px;
display:block;
margin-top:1px;
cursor:default;
line-height:11px;
border:0px solid;
text-align:left;
font-weight:normal;
letter-spacing:0px;
font-family:verdana;
border-color:000000;
text-decoration:none;
text-transform:none;
background:url() top left repeat-x;
}
a.navigate:hover{
padding:1px;
color:C1C1BF;
font-size:12px;
display:block;
margin-top:1px;
cursor:default;
line-height:11px;
border:0px solid;
text-align:left;
font-weight:normal;
letter-spacing:0px;
font-family:verdana;
border-color:000000;
text-decoration:none;
text-transform:none;
background:url() top left repeat-x;
}
a{
font:normal 9px Verdana; 
color:C1C1BF; 
font-weight:none; 
border:0px; 
text-transform: none; 
}
a:link, a:visited {
text-decoration: none;
color: C1C1BF;a:link, a:visited {
text-decoration: none;
color: C1C1BF; }
a:active{
font:normal 9px Verdana; 
color:C1C1BF; 
font-weight:none; 
border:0px; 
text-transform: none; 
}
a:visited{
font:normal 9px Verdana; 
color:C1C1BF; 
font-weight:none; 
border:0px; 
text-transform: none; 
}
a:hover{
font:normal 9px Verdana; 
color:C1C1BF;
text-transform: none;
}
a:link, a.man{
font:normal 9px Verdana; 
color:C1C1BF; 
border:0px; 
text-transform: none; 
}
.standard b, p b, B, strong {
font-family:verdana; 
font-size:9px; 
color:C1C1BF; 
font-weight:none;
border:0px; 
text-transform: none; 
}
h1 {
margin: 0px; 
color: C1C1BF;
text-align:right;
border-bottom: 2px solid;
border-color:;
font-family:tahoma, verdana, arial, sans-serif;
font-size: 20px; 
font-weight: normal;
background-color: transparent; 
letter-spacing: 1px; 
line-height: 8pt;
margin-bottom: 1px;
margin-top: 1px;
padding:2px;
padding-left:3px;
}
</style>

  </head>
  <body>
    <div id="top">
      <iframe src="banner.html" width="1300" height="137" frameborder="0"></iframe>
    </div>
    <div id="left">
      <iframe src="leftsidebar.html" width="200" height="750" frameborder="0"></iframe>
    </div>
    <div id="right">
      <iframe src="rightsidebar.html" width="200" height="750" frameborder="0"></iframe>
    </div>
  </body>
</html>

banner

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
body {
      background-color:101010;
      background-image: url("");
      background-repeat: repeat-none; 
      background-position:0px 0px;
}  
div#banner{
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: 0;
}
div#clock{
      position: absolute;
      left: 860px;
      top: 95px;
      z-index: 5;
}
div#logo{
      position: absolute;
      left: 0%; 
      margin-left:5px; 
      top: 8; 
      z-index: 2;
}
div#home{
      position: absolute; 
      left: 60px;
      top: 95px; 
}

</style>
  </head>
  
  
  
  <body>
    <div id="banner">
      <img src="http://i44.photobucket.com/albums/f11/master-of-time/Cox/newbanner.jpg">
    </div>

    <div id="clock">
      <iframe src="http://free.timeanddate.com/clock/i35x3s8s/n127/fn6/fs16/fc9ff/tct/pct/tt0/th2/tb1" frameborder="0" width="357" height="24" allowTransparency="true"></iframe>
    </div>

    <div id="logo">
      <a href="home.html"><img src="ions.png" border="0"></a>
    </div>
    <div id="home">
      <a href="home.html"><font size="5" >Home</font></a>
    </div>
  </body>
</html>

left links

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
body {
      background-color:101010;
      background-image: url("http://i44.photobucket.com/albums/f11/master-of-time/Cox/linkbar1.jpg");
      background-repeat: repeat-y; 
      background-position:0px 0px;
}
div#links{
      position: absolute; 
      left: 0px; 
      top: 10px; 
      width:200;
      height:500;
      overflow:auto;
}
div#digi{
      position: absolute; 
      left: 40px; 
      top: 410px; 
}  
div#egg{
      position: absolute; 
      left: 0px; 
      top: 22px; 
}     

</style>
  </head>
  
  
  
  <body>
    <div id="digi">
      <a href="sub/google.html"><img src="digi.png" border="0"></a>
    </div>
    <div id="links">  
      <ul>
        <li>Codes
          <ul>
            <li><a href="sub/01.html">link</a></li>
            <li><a href="sub/01.html">link</a></li>
            <li><a href="sub/01.html">link</a></li>
            <li><a href="sub/01.html">link</a></li>
            <li><a href="sub/01.html">link</a></li>
            <li><a href="sub/01.html">link</a></li>
          </ul>
        </li>
        <li>Installs
          <ul>
            <li>soon to be links</li>
            <li>soon to be links</li>
            <li>soon to be links</li>
          </ul>
        </li><br />
        <li>Trouble Shooting
          <ul>
            <li><a href="sub/01.html">link</a></li>
            <li><a href="sub/01.html">link</a></li>
            <li><a href="sub/01.html">link</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div id="egg">
      <a href="egg.html"><img src="http://i44.photobucket.com/albums/f11/master-of-time/Cox/egg.jpg" border="0"></a>
    </div>

  </body>
</html>

right links

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
body {
      background-color:101010;
      background-image: url("http://i44.photobucket.com/albums/f11/master-of-time/Cox/linkbar2.jpg");
      background-repeat: repeat-y; 
      background-position:0px 0px;
}  
div#links2{
      position: absolute; 
      left: 0px; 
      top: 60px; 
      overflow:hidden;
}
div#btn{
      position: absolute;
      left: 25px;
      top: 10;
}

    </style> 
      <script type="text/javascript">
function open_win()
{
window.open("http://www.online-stopwatch.com/countdown/","_blank","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=yes, width=500, height=300");
}
      </script>
  </head>
  
  
  
  <body>
    <div id="links2">  
      <ul>
        <li>Other Information
          <ul>
            <li><a href="sub/01.html">link</a></li>
            <li><a href="sub/01.html">link</a></li>
            <li><a href="sub/01.html">link</a></li>
            <li><a href="sub/01.html">link</a></li>
            <li><a href="sub/01.html">link</a></li>
            <li><a href="sub/01.html">link</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div id="btn">
      <input type="button" value="Countdown Timer" onclick="open_win()" />
    </div>
  </body>
</html>

what im trying to do is output it to the middle of the main page, if it is at all possible

and I tried the code with php but im not too familiar with it
and my end result was a page with no links

**steve1981** · 07-17-2012, 10:49 PM

Are you using a text editor to build the page? If you web site is html based you can set up an environment with Dreamweaver and update the links very easily each time.

I wil try to find a few tutorials and paste the links here to help you.

Thread: seeking help with css template...

Thread Tools

Search Thread

seeking help with css template...

The Following User Says Thank You to ApacheTech For This Useful Post:

Are you building everything with a text editor?

Bookmarks

Bookmarks

Posting Permissions