Log in

View Full Version : 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


<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



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:

<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:

<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 include 'links.html.php'; ?>
<?php include 'links2.html.php'; ?>


So, your full page would be:

<!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


<!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


<!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


<!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


<!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.