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
Last edited by Runescapetown on Mon Jan 22, 2007 11:51 am; edited 2 times in total 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 
. 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?? 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.
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 Make sure target="_blank" is not used in the code which shows the URL.
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.
| 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).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.
| 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 
| 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 |
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");
?> |
| 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 |
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.YAY its working!!
but....
When i click a link how is it meant to go to the middle?
Please help | Runescapetown wrote: |
YAY its working!!
but....
When i click a link how is it meant to go to the middle?
Please help |
Erm ... I have no idea about what your talking about. Care to show an example of what you mean?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"> </td>
<td colspan="10">
<img src="images/Template_02.gif" alt=""></td>
<td width="29" rowspan="9"> </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"> </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"> </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"> </td>
</tr>
<tr>
<td width="14" background="images/Template_15.gif"> </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"> </td>
<td width="11" background="images/Template_18.gif"> </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"> </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> |
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. | 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.comI am really new to this whole webpage layout stuff. But wouldnt you normally use stylesheets for the bars and things such as that?
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.
OK, quickly done this. Want something similiar? http://mezmorizing.net/runescapetown
Yep, thats what i want 
Did you put all that div stuff in the CSS or something? | Runescapetown wrote: |
Yep, thats what i want
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? | wumingsden wrote: |
| Runescapetown wrote: |
Yep, thats what i want
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 , then this post can be closed
