AJAX

Help with my Navigation bar

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jan 2007

Posts: 4

Reputation: motox16 is an unknown quantity at this point

Solved Threads: 0

motox16

Offline

Newbie Poster

Help with my Navigation bar

Jan 28th, 2007

Hi, I really hope someone can help me, you guys seem nice and all and I really like ur website :cheesy:.

Here is what I want to do:

Basically I want no spaces in between that navigation bar and the banner so the chain appears to be attatched to it.

I am not even sure I am making that navigation bar right either lol (newbie here) and I am just folowing a few tutrorials that I googled.

Any help would be greatly appreciated or even some good tut sites even. I understand that you guys are probably swamped with stuff so I'll be patient. I'll also attatch my code if that helps any:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
 <%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
    background-image: url(../background.gif);
}
.style1 {color: #FFFFFF}
.style2 {color: #000000; }
-->
</style></head>
 
<body>
<p align="center"><img src="../toppartpsd copy.png" width="800" height="214" /></p>
<table width="593" border="1" align="center" cellpadding="5" cellspacing="1">
  <tr>
    <th width="96" bordercolor="0" background="../homebutton.gif" scope="col">&nbsp;</th>
    <th width="95" background="../rosterbutton.gif" scope="col">&nbsp;</th>
    <th width="208" scope="col">&nbsp;</th>
    <th width="139" scope="col">&nbsp;</th>
  </tr>
</table>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<table width="308" height="565" border="1" cellpadding="5" cellspacing="1">
  <tr>
    <td width="321" height="561" align="center" valign="top" background="../main-box.png" scope="col"><!-- TemplateBeginEditable name="Main Content" -->
      <p class="style1">Main Content </p>
      <p class="style1">&nbsp;</p>
      <p class="style2">This is where the main content of the</p>
      <p class="style2">website goes. This has room for</p>
      <p class="style2">improvement as the title does not look</p>
      <p class="style2">right. </p>
      <p class="style2">&nbsp;</p>
      <p class="style2">&nbsp;</p>
      <p class="style2">&nbsp;</p>
      <p class="style2">&nbsp;</p>
      <p class="style2">&nbsp;</p>
      <p class="style2">&nbsp;</p>
      <p class="style2">&nbsp;</p>
      <p class="style2">&nbsp;</p>
    <!-- TemplateEndEditable --></td>
  </tr>
</table>
</body>
</html>
 <%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
    background-image: url(../background.gif);
}
.style1 {color: #FFFFFF}
.style2 {color: #000000; }
-->
</style></head>

<body>
<p align="center"><img src="../toppartpsd copy.png" width="800" height="214" /></p>
<table width="593" border="1" align="center" cellpadding="5" cellspacing="1">
  <tr>
    <th width="96" bordercolor="0" background="../homebutton.gif" scope="col">&nbsp;</th>
    <th width="95" background="../rosterbutton.gif" scope="col">&nbsp;</th>
    <th width="208" scope="col">&nbsp;</th>
    <th width="139" scope="col">&nbsp;</th>
  </tr>
</table>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<table width="308" height="565" border="1" cellpadding="5" cellspacing="1">
  <tr>
    <td width="321" height="561" align="center" valign="top" background="../main-box.png" scope="col"><!-- TemplateBeginEditable name="Main Content" -->
      <p class="style1">Main Content </p>
      <p class="style1">&nbsp;</p>
      <p class="style2">This is where the main content of the</p>
      <p class="style2">website goes. This has room for</p>
      <p class="style2">improvement as the title does not look</p>
      <p class="style2">right. </p>
      <p class="style2">&nbsp;</p>
      <p class="style2">&nbsp;</p>
      <p class="style2">&nbsp;</p>
      <p class="style2">&nbsp;</p>
      <p class="style2">&nbsp;</p>
      <p class="style2">&nbsp;</p>
      <p class="style2">&nbsp;</p>
      <p class="style2">&nbsp;</p>
    <!-- TemplateEndEditable --></td>
  </tr>
</table>
</body>
</html>

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: Help with my Navigation bar

Jan 29th, 2007

Is the chain a part of the bottom of the image with src=../toppartpsd copy.png?

If so, I think perhaps the problem is where you've used a 'P' tag around the image...

Try replacing:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<p align="center"><img src="../toppartpsd copy.png" width="800" height="214" /></p>
<p align="center"><img src="../toppartpsd copy.png" width="800" height="214" /></p>

with

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<div style="text-align:center;">
<img src="../toppartpsd copy.png" width="800" height="214" />
</div>
<div style="text-align:center;">
<img src="../toppartpsd copy.png" width="800" height="214" />
</div>

if you're finding that the image is becoming aligned to the left with that code, try:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<div>
<img style="margin-left:auto;margin-right:auto;"  src="../toppartpsd copy.png" width="800" height="214" />
</div>
<div>
<img style="margin-left:auto;margin-right:auto;"  src="../toppartpsd copy.png" width="800" height="214" />
</div>

Plato forgot the nullahedron..

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: Help with my Navigation bar

Jan 29th, 2007

If you want the bottom of the chain to 'overlap' the top of the buttonbar by some amount, it will be different, you'll have to position the image manually, or slice up your images strangly.

do you have an online version of the page? it would help to be able to look at it with all pictures in place and with a browser.

looks like a nice design, by the way.

Plato forgot the nullahedron..

•

Join Date: Jan 2007

Posts: 4

Reputation: motox16 is an unknown quantity at this point

Solved Threads: 0

motox16

Offline

Newbie Poster

Re: Help with my Navigation bar

Jan 29th, 2007

Well It moved it up a little lol but not quite there yet.

Here is the folder I have set up for the server: http://files.filefront.com/Team_UFHr.../fileinfo.html

You can preview it in browser with that i believe.
I'm going to google slicing because basically all I'm doing right now is I basically took the individual images from the template which I made on photoshop and put them on there. I am not even sure if I'm putting the buttons on right.

ty for the help so far.