Member Avatar for ryanwhite17

A friend sent me his website coding he did in iweb on his mac and wanted me to upload it to my hosting. The navigation links don't work and I have no idea what the problem is as his coding is completely all over the place and horrible and any time I try to change the coding the website doesn't show up correctly. As it is the website is horrible; however, if you can check it out and see if you know what the problem is in the menu links I'd greatly appreciate it! Let me know if you can figure it out...

The website is (bouncearoundjumperrentals.com)

Thanks!

  • 3 Contributors
  • 4 Replies
  • 280 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by mattster

Dani AI

Generated

Short diagnosis and context: iWeb exports generate an HTML page plus a companion assets folder and a tiny JS “glue” layer to manage rollovers and absolute-positioned slices. When navigation breaks it’s usually one of three things — missing/misplaced asset files, filename case mismatches on a Unix host, or a JavaScript error from a missing iWeb script — and editing the generated markup in Dreamweaver often exposes those fragilities. Both and are on the right track: favor real anchor links and simple CSS hover behavior instead of relying on fragile inline JS or onclick handlers.

Quick troubleshooting checklist:

  1. Verify the entire export was uploaded unchanged — HTML files plus the sibling assets folder (the folder that ends with _files).
  2. Confirm filenames exactly match the href/src values (case matters on most web hosts).
  3. Open browser DevTools → Network and Console: look for 404s or “function not defined” errors (missing scripts or images are a common culprit).
  4. Temporarily disable JavaScript or inspect an anchor’s href by opening it in a new tab — if the link works without JS, the problem is the iWeb script layer.
  5. Check stacking and positioning: absolute overlays with a high z-index can hide the page body; toggle the overlay off in DevTools to see if content reappears.
  6. Accessibility note: onclick on a div is brittle — use semantic <a href="..."> so links work without JS and remain keyboard/tab friendly.

Simple, robust fallback example (replace image-slice nav while debugging):

<nav>
  <ul class="main-nav">
    <li><a href="index.html">Welcome</a></li>
    <li><a href="Products.html">Products</a></li>
    <li><a href="Faqs.html">FAQs</a></li>
  </ul>
</nav>

<style>
.main-nav{list-style:none;margin:0;padding:0}
.main-nav li{display:inline-block;margin-right:8px}
.main-nav a{display:inline-block;padding:6px 8px;text-decoration:none}
.main-nav a:hover{background:#eee}
</style>

If edits break layout, restore a backup and re-export from iWeb, upload the complete export, then replace just the navigation with semantic anchors as a controlled test. That isolates whether the problem is missing files, case issues, positioning, or the iWeb JavaScript layer.

Recommended Answers

All 4 Replies

Member Avatar for Member #949455

The navigation links don't work and I have no idea what the problem is as his coding is completely all over the place and horrible and any time I try to change the coding the website doesn't show up correctly.

This looks wrong to me. If you already slice the buttons from using either photoshop or illustrator. I'm not sure why you have javascript involved when you only need to used a link instead.

Regardless on how you used a button, you still need to create a Nav CSS. Which I don't see here:

<div style="background: transparent url(Welcome_files/navbar_0_normal.png) no-repeat scroll center; height: 33px; left: 727px; position: absolute; top: -2px; width: 90px; z-index: 1; " id="navbar_0_normal"></div>
<a style="display: block; height: 26px; left: 730px; position: absolute; top: 2px; width: 85px; z-index: 2; " onmouseover="NBmouseover('0');" onmouseout="NBmouseout('0');" href="Products.html"></a>
<a style="display: block; height: 26px; left: 825px; position: absolute; top: 2px; width: 49px; z-index: 2; " onmouseover="NBmouseover('1');" onmouseout="NBmouseout('1');" href="Faqs.html"></a>

Here is a link to a CSS which will be easier for you to follow and insert the png files on to the Nav CSS

Read amd follow the instruction:

http://csswizardry.com/2011/01/create-a-centred-horizontal-navigation/

Edited by Member #949455 because: grammer
Member Avatar for ryanwhite17

My friend did all the image files as well as the coding. I would have never done the coding like this. I tried replacing the coding in Dreamweaver by placing a rollover image for each nav link (I.e. welcome, products, faqs) but when I do that the body of the website completely disappears for some reason. It appears that he is trying to have simple rollover image links for each nav button but the links aren't working.

Member Avatar for Member #949455

I tried replacing the coding in Dreamweaver by placing a rollover image for each nav link (I.e. welcome, products, faqs) but when I do that the body of the website completely disappears for some reason. It appears that he is trying to have simple rollover image links for each nav button but the links aren't working.

It's actually make more sense now of what you are trying to do before I didn't know what you are doing. If you want to used a rollover by using an image then try this example:

I mean the CSS kinda more organized.

So I did few lines you can can get a sense on how it should look like:

<div align="center">
<div class="welcome">
    <a href="#">Welcome</a>
</div>
<div class="products">
    <a href="#">Products</a>
</div>
<div class="faqs">
    <a href="#">FAQS</a>
</div>
</div>

For the CSS, it pretty basic.

<style type="text/css">
.welcome{}
.products{}
.faqs{}
</style>
Member Avatar for mattster

LastMitch is correct on both the css hover and the links.
The reason they are not working as there is no <a href=""> link, but as you are using a div, I would reccomend trying <div style="" onclick="window.location='mypage.html'"> - otherwise you might have a nightmere with inserting an <a>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.