FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Need help coding template.





Runescapetown
Ok this is what i want to do:

I made a table layout and all of it is done expet the links and stuff.

When you click the link i want to make it go to the Content part just like this web:
http://r2stown.bravehost.com/Template.html

Instead of making a Iframe or creating tonnes of pages with the coding of all the pictures and things what can i do?

If you could help please Reply

Thanks

I EDITED THIS POST SO ITS DIFFRENT
Diablosblizz
Guess what, Habbaroo isn't made by PHP. Most of the site is hTML.

What you need to do, is cut out each image and use:

Code:
<img src="imagename">


This can all be done by HTML, and creating the site (template) is easy. But, if your making a brand new site, and you want forums and stuff, then yes your going to need PHP. Try doing this by yourself Smile.
Runescapetown
Nah mate thats not a good way, ive noticed on this web you do this:

Code:
<!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>MASSIVE layout coding tutorial</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" type="text/css" href="style.css" /></head><body></body></html>

Now we will have to make our basic CSS page, save it as STYLE.CSS

html, body{    background: #FFFFFF; /* background color */    text-align: center; /* center our layout */    font-family: Arial, Verdana, Helvetica, sans-serif; /* font */    font-size: small;    color: #666666;}a /* links */{    color: #333333;    text-decoration: none;}a:hover /* links hover */{    color: #666666;    text-decoration: underline;}a img{    margin: 0px; /* no whitespace    padding: 0px; /* idem */    border: 0px; /* no border around image links */}h1 /* heading 1 */{    font-size: large;    color: #2b4676;}h2 /* heading 2 */{    font-size: medium;    color: #2b4676;}

Now we have our basic HTML page and basic CSS stylesheet. We are now going to use a technique to center our entire layout. Add this to your CSS:

#container{    margin: auto;    width: 780px; /* size of our layout */}

And this to your HTML (between body tags):

<div id="container"><!-- layout comes here --></div>

Finally, we can start coding our real layout, I'm going to start with the top, banner and navigation bar.

#top{    height: 30px; /* top bar height */}#banner{    height: 60px; /* banner height */}#nav{    height: 34px; /* nav bar height */    float: left;     font-weight: bold; /* bold */}#nav_1 /* button */{    width: 288px;    background: url(images/nav_1.png);    height: 34px;    float: left;}#nav_2 /* button */{    width: 70px;    background: url(images/nav_2.png);    height: 34px;    float: left;}#nav_3 /* button */{    width: 99px;    background: url(images/nav_3.png);    height: 34px;    float: left;}#nav_4 /* button */{    width: 103px;    background: url(images/nav_4.png);    height: 34px;    float: left;}#nav_5  /* button */{    width: 119px;    background: url(images/nav_5.png);    height: 34px;    float: left;}#nav_6 /* button */{    width: 87px;    background: url(images/nav_6.png);    height: 34px;    float: left;}#nav_7 /* button */ {    width: 14px;    background: url(images/nav_7.png);    height: 34px;    float: left;}

HTML (replace # with your links):

<div id="top"> <!-- our top bar --><img src="images/top_1.png" /><!-- the left
#left /* column */{    float: left;    width: 220px;}#middle /* column */{    float: left;    width: 350px;    text-align: left;}#right /* column */{    float: left;    width: 209px;}#header_left{    background: url(images/left_header.png); /* left header */    width: 220px;    height: 53px;}#header_right{    background: url(images/right_gradient.png) no-repeat; /* right header */    width: 209px;    height: 53px;}#box{    background: url(images/right_box.png); /* blue box */    width: 209px;    height: 156px;    color: #FFFFFF;    text-align: left;}#header{    background: url(images/right_header.png) no-repeat; /* list header */    width: 164px;    height: 24px;    padding-top: 1px; /* whitespace */}.list ul li /* list with arrows */{    list-style-image: url(images/arrow.png); /* arrow */}

HTML:
<div id="top"> <!-- our top bar --><img src="images/top_1.png" /><!-- the left image --><a href="#"><img src="images/top_2.png" /></a><!-- clickable image --><a href="#"><img src="images/top_3.png" /></a><!-- clickable image --><a href="#"><img src="images/top_4.png" /></a><!-- clickable image --><a href="#"><img src="images/top_5.png" /></a><!-- clickable image --></div><div id="banner"><a href="#"><img src="images/banner.png" /></a></div><div id="nav"><img src="images/nav_1.png" /><span id="nav_1"><p><a href="#">LINK</a></p></span><span id="nav_1"><p><a href="#">LINK</a></p></span><span id="nav_1"><p><a href="#">LINK</a></p></span><span id="nav_1"><p><a href="#">LINK</a></p></span><span id="nav_1"><p><a href="#">LINK</a></p></span>


I found this on this web is this what is used??
Diablosblizz
Exactly what I said. It uses the img tag to code. At the beginning, the code starts off with CSS, then moves into HTML slowly. But, if you use <tables> then you can make a wicked template. Just search around on the forums (maybe ask in the tutorial section), and use google!

Also, I relooked at your template you wanted. Well, its not that hard. First, you will probbally need to slice all the images out, and use them seperatly. Again, the radio and other stuff can all be done with php/html.
Runescapetown
Ye, That isnt my template, It was a tutorial i found on the net. I was wondering how do you make a link not open a new tab or page when you click a link, (when it is in a Table/Image layout)

How do you do that, i only can make it when you click a link it opens a new page instead of going into the middle ( i dont want an Iframe.)

Heres the web, What is used for this tutoroial



http://r2stown.bravehost.com/Template.html

This was a downloaded layout from the a website: http://ethereal-design.info/

But when you click a link on the r2stown it opens a new Tab or Window

How to prevent this from happening.

Thanks
wumingsden
Make sure target="_blank" is not used in the code which shows the URL.
Runescapetown
Nah not like that, i mean like its a table layout so how would i make that i dont have to keep adding the same coding to each page for the layout?

Becuase if i would want to change something i would have to go to every page and change it or add something that would be annoying how would i just add something to connect to all of it and when you click the link to go to the middle without a Iframe.
wumingsden
Runescapetown wrote:
Nah not like that, i mean like its a table layout so how would i make that i dont have to keep adding the same coding to each page for the layout?

Becuase if i would want to change something i would have to go to every page and change it or add something that would be annoying how would i just add something to connect to all of it and when you click the link to go to the middle without a Iframe.


Oh, sorry. Completely missed what you were asking.

You could place the table in a file and then use an include to put the file where you want. Something like...

Code:

<?PHP
include("table.php");
?>


(place your file in table.php and place the above code in the file('s) that you want it to appear).
Diablosblizz
It would probably work best with a Iframe, I don't even know if you can just change the page without naming something. I don't think its possible, try to do it with a iframe and see what happens.
Runescapetown
wumingsden wrote:
Runescapetown wrote:
Nah not like that, i mean like its a table layout so how would i make that i dont have to keep adding the same coding to each page for the layout?

Becuase if i would want to change something i would have to go to every page and change it or add something that would be annoying how would i just add something to connect to all of it and when you click the link to go to the middle without a Iframe.


Oh, sorry. Completely missed what you were asking.

You could place the table in a file and then use an include to put the file where you want. Something like...

Code:

<?PHP
include("table.php");
?>


(place your file in table.php and place the above code in the file('s) that you want it to appear).



-------------------------------------

I tried that didnt work Sad
wumingsden
Runescapetown wrote:
wumingsden wrote:
Runescapetown wrote:
Nah not like that, i mean like its a table layout so how would i make that i dont have to keep adding the same coding to each page for the layout?

Becuase if i would want to change something i would have to go to every page and change it or add something that would be annoying how would i just add something to connect to all of it and when you click the link to go to the middle without a Iframe.


Oh, sorry. Completely missed what you were asking.

You could place the table in a file and then use an include to put the file where you want. Something like...

Code:

<?PHP
include("table.php");
?>


(place your file in table.php and place the above code in the file('s) that you want it to appear).



-------------------------------------

I tried that didnt work Sad


Try again, there is nothing wrong with this code ...

Make sure the code for the table is in the table.php file
Make sure the extension for the file that you want the table to be in is .php
Change ...

Code:

<?PHP
include("table.php");
?>


to ....

Code:

<?PHP
include("http://www.yoursite.com/the_url_of_the_table_file.php");
?>
Runescapetown
wumingsden wrote:
Runescapetown wrote:
wumingsden wrote:
Runescapetown wrote:
Nah not like that, i mean like its a table layout so how would i make that i dont have to keep adding the same coding to each page for the layout?

Becuase if i would want to change something i would have to go to every page and change it or add something that would be annoying how would i just add something to connect to all of it and when you click the link to go to the middle without a Iframe.


Oh, sorry. Completely missed what you were asking.

You could place the table in a file and then use an include to put the file where you want. Something like...

Code:

<?PHP
include("table.php");
?>


(place your file in table.php and place the above code in the file('s) that you want it to appear).



-------------------------------------

I tried that didnt work Sad


Try again, there is nothing wrong with this code ...

Make sure the code for the table is in the table.php file
Make sure the extension for the file that you want the table to be in is .php
Change ...

Code:

<?PHP
include("table.php");
?>


to ....

Code:

<?PHP
include("http://www.yoursite.com/the_url_of_the_table_file.php");
?>



Still isnt working.
Have a look at my Page source and see if anything is wrong
http://www.rs2helpguide.frih.net/

the <?PHP
include("table.php");
?> is just under the links part.
Runescapetown
YAY its working!!

but....

When i click a link how is it meant to go to the middle?

Please help Smile
wumingsden
Runescapetown wrote:
YAY its working!!

but....

When i click a link how is it meant to go to the middle?

Please help Smile


Erm ... I have no idea about what your talking about. Care to show an example of what you mean?
Runescapetown
You know how you told told me that PHP code. Well ye i want it When i click a link i want it to go to the middle. Not just you add that Table.php page and thats the only thing that shows up.

Bellow in "main Content" is where i want the writing of the link you click to appear there.




Code:
<center>
<html>
<head>
<title>Table Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
   background-color: #3E5678;
   background-image: url(images/Template_01.gif);
   background-repeat:  repeat-x;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #333333;
}
table {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #333333;
}
a {
 color: #84AF4A;
 text-decoration:none;
 font-weight:bold;
}
a:hover {
 color: #3E5678;
 text-decoration:none;
 font-weight:bold;
}
.header {
   border-bottom-width: 1px;
   border-bottom-style: dotted;
   border-bottom-color: #3E5678;
   color: #3E5678;
   font-weight: bold;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (all.psd) -->
<table id="Table_01" width="780" height="100%" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td width="29" rowspan="9">&nbsp;         </td>
      <td colspan="10">

         <img src="images/Template_02.gif" alt=""></td>
      <td width="29" rowspan="9">&nbsp;         </td>
   </tr>
   <tr>
      <td rowspan="2">
         <img src="images/Template_04.gif" alt=""></td>
      <td colspan="7">
         <img src="images/Template_05.gif" alt=""></td>

      <td colspan="2" rowspan="2">
         <img src="images/Template_06.gif" alt=""></td>
   </tr>
   <tr>
      <td colspan="7">
         <img src="images/Template_07.gif" alt=""></td>
   </tr>
   <tr>
      <td height="22" colspan="10" align="center" valign="middle" background="images/Template_08.gif">
      || <a href="#">Home</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">
      Link</a> | <a href="#">Link</a> ||</td>

   </tr>
   <tr>
      <td colspan="10">
         <img src="images/Template_09.gif" alt=""></td>
   </tr>
   <tr>
      <td width="9" rowspan="2" background="images/Template_10.gif">&nbsp;         </td>
      <td height="27" colspan="3" align="center" valign="middle" background="images/Template_11.gif"><strong>
      Navigation</strong></td>

      <td width="16" rowspan="2" background="images/Template_12.gif">&nbsp;         </td>
      <td height="27" colspan="4" align="center" valign="middle" background="images/Template_13.gif"><strong>
      Content</strong></td>
      <td width="12" rowspan="2" background="images/Template_14.gif">&nbsp;         </td>
   </tr>
   <tr>
      <td width="14" background="images/Template_15.gif">&nbsp;         </td>
      <td width="111" height="266" valign="top" background="images/Template_16.gif">
<!--===========================Navagation=====================================-->
<a href="maincontent.php"src="table.php" name="table.php">Main Conent</a><br>
<a href="maincontent.php"name=table" target="table.php" src="table.php">Click Here</a><br>
<a href=>Link</a><br>
<a href="maincontent.htm."
target="table.php">News</a><br />

!!!!!!!!!!!!!!!! I WAS TRYING TO CONNECT THIS TO GO TO THE TABLE.PHP SECTION BUT IT DIDNT WORK!!!!!!!!!!!!!!!!!!!!!!

<a href=>Link</a><br>
<a href=>Link</a><br>
<a href=>Link</a><br>
<a href=>Link</a><br>
<a href=>Link</a><br>
<a href=>Link</a><br>
<a href=>Link</a><br>
<a href=>Link</a><br>
<a href=>Link</a><br>
<!--===========================End of Navagation=====================================-->
       
      <td width="12" height="266" background="images/Template_17.gif">&nbsp;         </td>

      <td width="11" background="images/Template_18.gif">&nbsp;         </td>
      <td width="524" height="266" valign="top" background="images/Template_19.gif"><p align="center">
<!--===========================Main Content=====================================-->

<?PHP
include("table.php");
?>

!!!!!!!!!!!!!!!!!!!!!!!!!! HERE IS THAT CODING YOU GAVE ME!!!!!!!!!!!!!!!!!!!
I want it when you click a link the writing from that page appears here.





<!--===========================End of Main Content=====================================-->
</div>
      <td colspan="2" background="images/Template_20.gif">&nbsp;         </td>

   </tr>
   <tr>
      <td>
         <img src="images/Template_21.gif" width="9" height="12" alt=""></td>
      <td>
         <img src="images/Template_22.gif" width="14" height="12" alt=""></td>
      <td>
         <img src="images/Template_23.gif" width="111" height="12" alt=""></td>
      <td colspan="3">

         <img src="images/Template_24.gif" width="39" height="12" alt=""></td>
      <td>
         <img src="images/Template_25.gif" width="524" height="12" alt=""></td>
      <td colspan="2">
         <img src="images/Template_26.gif" width="13" height="12" alt=""></td>
      <td>
         <img src="images/Template_27.gif" width="12" height="12" alt=""></td>
   </tr>
   <tr>

      <td height="37" colspan="10" align="center" valign="bottom" background="images/Template_28.gif">
      Copyrigted Rs2helpguide - Layout by <a href="www.Runescape.com" target="_blank">
      Runescape </a></td>
   </tr>
   <tr>
      <td>
         <img src="images/spacer.gif" width="29" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="9" height="1" alt=""></td>
      <td>

         <img src="images/spacer.gif" width="14" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="111" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="12" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="16" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="11" height="1" alt=""></td>

      <td>
         <img src="images/spacer.gif" width="524" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="11" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="2" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="12" height="1" alt=""></td>
      <td>

         <img src="images/spacer.gif" width="29" height="1" alt=""></td>
   </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
wumingsden
OK, I think I understand now. What you want to do cannot be accomplished by the code I gave you (or at least not how I told you to use it). To be able to use the include function correctly the navigation will have to be in an include. Also, content which is repeated over and over again will also have to be in includes. This can get a little tricky.

Check out http://www.mezmorizing.net/admin

Username: demo
Passowrd: demo

Looking for something like this? It's much more simple, and includes can still be used for the main content if needed.
Runescapetown
wumingsden wrote:
OK, I think I understand now. What you want to do cannot be accomplished by the code I gave you (or at least not how I told you to use it). To be able to use the include function correctly the navigation will have to be in an include. Also, content which is repeated over and over again will also have to be in includes. This can get a little tricky.

Check out http://www.mezmorizing.net/admin

Username: demo
Passowrd: demo

Looking for something like this? It's much more simple, and includes can still be used for the main content if needed.


Thats an Iframe right?

Well i used to use Iframes but now i dont like em

im looking for something like this web.
http://habbodelux.com
Requell
I am really new to this whole webpage layout stuff. But wouldnt you normally use stylesheets for the bars and things such as that?
Runescapetown
I dont think is style sheets i thinks its <div id"top" they use for pictures and stuff. But i dont exacly know to use that.
wumingsden
OK, quickly done this. Want something similiar? http://mezmorizing.net/runescapetown
Runescapetown
wumingsden wrote:
OK, quickly done this. Want something similiar? http://mezmorizing.net/runescapetown


Yep, thats what i want Very Happy

Did you put all that div stuff in the CSS or something?
wumingsden
Runescapetown wrote:
wumingsden wrote:
OK, quickly done this. Want something similiar? http://mezmorizing.net/runescapetown


Yep, thats what i want Very Happy

Did you put all that div stuff in the CSS or something?


Yes. Do want the code to all the files? Or do you want the code on how it works (without the format/css stuff?
Runescapetown
wumingsden wrote:
Runescapetown wrote:
wumingsden wrote:
OK, quickly done this. Want something similiar? http://mezmorizing.net/runescapetown


Yep, thats what i want Very Happy

Did you put all that div stuff in the CSS or something?


Yes. Do want the code to all the files? Or do you want the code on how it works (without the format/css stuff?

yes ill have the code to everything, could you PM me all the stuff thnx Very Happy, then this post can be closed
Related topics
I need this template - please help
best flash template website..?????!?
Any One good at webdesign
The new Account page and Request Mod
Ads after last post
Started to use my own coding!!! HELP please!
[Request]Could a admin/mod help me with a template[request]
Help me customize the joomla template
Phpbb2 Template Installation~Help Needed
Help coding myspace layouts for my site?
Tips/Help on my site (Free Online Games)
help editing on template
Any one can help 4 PHP object coding self learning site?
Help coding a php back end for an xml website! Radio646.com
Reply to topic    Frihost Forum Index -> Scripting -> Php and MySQL

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.