PDA

View Full Version : Nav bar and other issue



JSly
Dec 18th, 2008, 03:56 PM
Hi:

Need some advice. Created nav bar in Fireworks. Uploaded it to my site under development in dreamweaver and having a couple of issues:

Under applications - communications the cell has a weird border that I can't seem to correct.

Serious lag time when moving the mouse from Network to contact

This is my first attempt at building a site (I'm a sales guy!), and decided to try and tackle adobe apps myself...I've solved many issues by reading the manual, but these two are challenging.

I'd also liked some advice on some content to fill the left and right columns. This site is meant to be a marketing front-end that will link to a 3rd party storefront and transaction site.

One last thing, I've struggled trying to figure out how to make all three columns liquid for the various text lengths, yet snug up tight with the footer.

The site is http://www.greenappx.com

Many thanks in advance,

Jim

Rowsdower!
Dec 18th, 2008, 04:25 PM
Welcome JSly.

First thing is that you don't have a lag between "Network" and "Contact." You actually have a lag to the menu as a whole (at least on my machine). When you access any menu item with a drop down the drop down stays put for about 2 seconds even if you just move you mouse off of the menu and down to the contents of the page. That's just a feature built into your menu script.

I see the funky background issue on your "communications" cell, but I don't have any advice for you on this just now. I'd have to look more closely at your code and I haven't bother to yet:D.

Dissect the liquid 3-column layout here to learn how to use this method:
http://matthewjamestaylor.com/blog/perfect-3-column.htm

PS: Is there any reason you have chosen to use java for the menu as opposed to a pure CSS menu? You wouldn't be sacrificing any functionality that I have seen so far from your current menu.

abduraooft
Dec 18th, 2008, 04:31 PM
You have some errors in your markup, see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.greenappx.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Fix them first.

Don't use a javascript based dropdown. They might cause some accessibility issues, if there is no javascript support in user's browser. Use a CSS based dropdown instead. See http://htmldog.com/articles/suckerfish/dropdowns/

PS: welcome to CF!

Excavator
Dec 18th, 2008, 06:34 PM
Hello JSly,
Ab is right, you should not use a js menu- though, on my machine it works perfectly. The pause gives the user a little lag time to be sloppy in getting the mouse to the dropped links.

I did not look for the cause of the odd colors on the communications button.

For your columns issue, try using this http://mtaonline.net/~stewarta/jslybg.jpg as the background of #container. Like this -
.thrColFixHdr #container {
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF url(http://mtaonline.net/~stewarta/jslybg.jpg); margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}

That is the faux column method. (http://www.communitymx.com/content/article.cfm?cid=AFC58)

Excavator
Dec 18th, 2008, 06:50 PM
For your button, there was a misnamed(?) class... maybe it was intended but just not styled the same as the other...

Anyway, try making it read like this -
<div style="visibility: inherit;" id="MMMenuContainer1121134923_0">
<div style="visibility: hidden;" id="MMMenu1121134923_0" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();"> <a href="comm.html" id="MMMenu1121134923_0_Item_0" class="MMMIVStyleMMMenu1121134923_0" onmouseover="MM_menuOverMenuItem('MMMenu1121134923_0');"> Communications </a>

Original with the mistake/difference highlighted in red
<a href="comm.html" id="MMMenu1121134923_0_Item_0" class="MMMIFVStyleMMMenu1121134923_0" onmouseover="MM_menuOverMenuItem('MMMenu1121134923_0');"> Communications </a>

/edit:

This is my first attempt at building a site (I'm a sales guy!), and decided to try and tackle adobe apps myself...I've solved many issues by reading the manual, but these two are challenging.
Good job! It looks great but it looks incredible for a first go!! Shows what someone can do when they read the book.
There are a few errors that any new coder would make, the validator finds several but they are easily fixed. See the links about validation in my sig below.

//edit: That .clearfloat is not my favorite method of clearing. Read about a better (almost always) method here. (http://www.quirksmode.org/css/clearing.html)

JSly
Dec 19th, 2008, 12:55 AM
Excavator:

Thanks for the great info! That cleared up the button issue...works great now. Off to follow your other suggestions as well. I'll try not to abuse this site, but can't stress how beneficial your advice was on this....kept me tied up for two days. Also, thanks for the compliment, it encourages me to keep learning.

Jim



For your button, there was a misnamed(?) class... maybe it was intended but just not styled the same as the other...

Anyway, try making it read like this -
<div style="visibility: inherit;" id="MMMenuContainer1121134923_0">
<div style="visibility: hidden;" id="MMMenu1121134923_0" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();"> <a href="comm.html" id="MMMenu1121134923_0_Item_0" class="MMMIVStyleMMMenu1121134923_0" onmouseover="MM_menuOverMenuItem('MMMenu1121134923_0');"> Communications </a>

Original with the mistake/difference highlighted in red
<a href="comm.html" id="MMMenu1121134923_0_Item_0" class="MMMIFVStyleMMMenu1121134923_0" onmouseover="MM_menuOverMenuItem('MMMenu1121134923_0');"> Communications </a>

/edit:

Good job! It looks great but it looks incredible for a first go!! Shows what someone can do when they read the book.
There are a few errors that any new coder would make, the validator finds several but they are easily fixed. See the links about validation in my sig below.

//edit: That .clearfloat is not my favorite method of clearing. Read about a better (almost always) method here. (http://www.quirksmode.org/css/clearing.html)