rejetto forum

Need help with my template

0 Members and 1 Guest are viewing this topic.

Offline scubasteve

  • Occasional poster
  • *
    • Posts: 9
    • View Profile
im trying to make a template for my hfs but i seem to be having some trouble. i have some knowledge of css but im having a tough time.

here is what i have got so far (as u can see its not much)



here is the code. the rest of the code is pretty much the same as the standard template,

Code: [Select]
<html>
  <head>
    <title>My Website</title>
  <script type="text/javascript">
<!-- hide from non javascript browsers

Image1= new Image(140,29)
Image1.src = "images/button_apps_mouseover.png"

Image2 = new Image(140,29)
Image2.src = "images/button_games_mouseover.png"

Image3 = new Image(140,29)
Image3.src = "images/button_movies_mouseover.png"

Image3 = new Image(140,29)
Image3.src = "images/button_music_mouseover.png"

Image3 = new Image(140,29)
Image3.src = "images/button_upload_mouseover.png"

// end hiding -->
  </script>
<style>\n%style%\n</style>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body bgcolor="#3E3D3D">
    <table bordercolor="000000" border="0" cellspacing="0" cellpadding="0" align="center" height="161" width="700">
      <tr>
        <td colspan="5">
  <img src="images\logo.png" height="132" width="700" align="center">
        </td>
 </tr>
 <tr>
   <td height="29" width="140">
 <a href="http://mysite.com/apps/"><img src="images\button_apps_disabled.png" name="pic_1" width="140" height="29" border="0" onMouseover="document.pic_1.src='images/button_apps_mouseover.png'" onMouseout="document.pic_1.src='images/button_apps_disabled.png'" title="Apps"></a>
   </td>
<td height="29" width="140">
 <a href="http://mysite.com/games/"><img src="images\button_games_disabled.png" name="pic_2" width="140" height="29" border="0" onMouseover="document.pic_2.src='images/button_games_mouseover.png'" onMouseout="document.pic_2.src='images/button_games_disabled.png'" title="Games"></a>
</td>
<td height="29" width="140">
 <a href="http://mysite.com/movies/"><img src="images\button_movies_disabled.png" name="pic_3" width="140" height="29" border="0" onMouseover="document.pic_3.src='images/button_movies_mouseover.png'" onMouseout="document.pic_3.src='images/button_movies_disabled.png'" title="Movies"></a>
</td>
<td height="29" width="140">
 <a href="http://mysite.com/music/"><img src="images\button_music_disabled.png" name="pic_4" width="140" height="29" border="0" onMouseover="document.pic_4.src='images/button_music_mouseover.png'" onMouseout="document.pic_4.src='images/button_music_disabled.png'" title="Music"></a>
</td>
<td height="29" width="140">
 <a href="http://mysite.com/upload/~upload"><img src="images\button_upload_disabled.png" name="pic_5" width="140" height="29" border="0" onMouseover="document.pic_5.src='images/button_upload_mouseover.png'" onMouseout="document.pic_5.src='images/button_upload_disabled.png'" title="Upload"></a>
</td>
  </tr>
</table>
 <div class=body>
%folder-comment%
%up%
%files%
 </div>
   <div class=little>
 <br>
   <font color=#FFFFFF>Servertime: %timestamp%
 <br>
   Uptime: %uptime%
 <br>
   Build-time: %build-time%
   </font>
</div>
</body>
</html>

[style]
body, .button, .row, .big, .little, th, comment { font-family:tahoma, verdana, arial, helvetica, sans; font-weight:normal; font-size:9pt; }
body { margin:0; background-color:#3E3D3D; padding:0px; }
p { margin:0 }
.big { font-size:14pt; font-weight:bold;  }
.little { font-size: 8pt; }
div.body { width:700px; align:middle;
  border-bottom: 0px solid #BBBBFF;
     border-top: 0px solid #BBBBFF;
    border-left: 0px dotted #BBBBFF;
   border-right: 0px dotted #BBBBFF;
  background:#F3F3FF;
  padding:15px;
  margin:15px;
}

i want to get the pink part directly underneath the buttons so theres no space between the pink and buttons and the same width. but i dont seem to know which bits to change todo this.

if anyone could help it would be greatly appreciated.


Anonymous

  • Guest
Code: [Select]
<html>
  <head>
    <title>My Website</title>
  <script type="text/javascript">
<!-- hide from non javascript browsers

Image1= new Image(140,29)
Image1.src = "images/button_apps_mouseover.png"

Image2 = new Image(140,29)
Image2.src = "images/button_games_mouseover.png"

Image3 = new Image(140,29)
Image3.src = "images/button_movies_mouseover.png"

Image3 = new Image(140,29)
Image3.src = "images/button_music_mouseover.png"

Image3 = new Image(140,29)
Image3.src = "images/button_upload_mouseover.png"

// end hiding -->
  </script>
<style>\n%style%\n</style>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body bgcolor="#3E3D3D">
<div align="center">
    <table bordercolor="000000" border="0" cellspacing="0" cellpadding="0" height="161" width="700">
      <tr>
        <td colspan="5">
         <img src="images\logo.png" height="132" width="700" align="center">
        </td>
     </tr>
     <tr>
       <td height="29" width="140">
        <a href="http://mysite.com/apps/"><img src="images\button_apps_disabled.png" name="pic_1" width="140" height="29" border="0" onMouseover="document.pic_1.src='images/button_apps_mouseover.png'" onMouseout="document.pic_1.src='images/button_apps_disabled.png'" title="Apps"></a>
       </td>
      <td height="29" width="140">
        <a href="http://mysite.com/games/"><img src="images\button_games_disabled.png" name="pic_2" width="140" height="29" border="0" onMouseover="document.pic_2.src='images/button_games_mouseover.png'" onMouseout="document.pic_2.src='images/button_games_disabled.png'" title="Games"></a>
      </td>
      <td height="29" width="140">
        <a href="http://mysite.com/movies/"><img src="images\button_movies_disabled.png" name="pic_3" width="140" height="29" border="0" onMouseover="document.pic_3.src='images/button_movies_mouseover.png'" onMouseout="document.pic_3.src='images/button_movies_disabled.png'" title="Movies"></a>
      </td>
      <td height="29" width="140">
        <a href="http://mysite.com/music/"><img src="images\button_music_disabled.png" name="pic_4" width="140" height="29" border="0" onMouseover="document.pic_4.src='images/button_music_mouseover.png'" onMouseout="document.pic_4.src='images/button_music_disabled.png'" title="Music"></a>
      </td>
      <td height="29" width="140">
        <a href="http://mysite.com/upload/~upload"><img src="images\button_upload_disabled.png" name="pic_5" width="140" height="29" border="0" onMouseover="document.pic_5.src='images/button_upload_mouseover.png'" onMouseout="document.pic_5.src='images/button_upload_disabled.png'" title="Upload"></a>
      </td>
</tr>
</table>
<div class=body>
      %folder-comment%
      %up%
      %folder%
      %files%
     </div>
       <div class=little>
        <br>
          <font color=#FFFFFF>Servertime: %timestamp%
        <br>
          Uptime: %uptime%
        <br>
          Build-time: %build-time%
          </font>
      </div>
</div>
</body>
</html>

[style]
body, .button, .row, .big, .little, th, comment { font-family:tahoma, verdana, arial, helvetica, sans; font-weight:normal; font-size:9pt; }
body { margin:15px; background-color:#3E3D3D; padding:0px; }
p { margin:0px }
.big { font-size:14pt; font-weight:bold;  }
.little { font-size: 8pt; text-align:left; width:700px}
div.body { width:700px; align:middle;
  border-bottom: 0px solid #BBBBFF;
     border-top: 0px solid #BBBBFF;
    border-left: 0px dotted #BBBBFF;
   border-right: 0px dotted #BBBBFF;
  background:#F3F3FF;
  padding:15px;
  margin:0px;
}