PDA

View Full Version : Navigation bar repositions; odd image behavior


johnMoss
01-25-2011, 03:42 PM
Is the issue of the nav buttons repositioning on hover solved by adding an additional "-hover" class to the nav div? I've used DW's navigation button tool and have used all four settings for each button.
Also the first two buttons behave oddly. Checked & reverified, all images beyond the original "up" images are exactly the same size in every detail. Yet when hovered they shrink as opposed to expand...

Effect desired is nav buttons stay attached to upper border, but enlarge in size in all other uses... font size remains same, but text position slightly lowered...

http://www.lacruzconcierge.com/dreamWeaverTestFile/home.html


@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #fff;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.menuBarLine{
margin-left:20px;
margin-right:20px;
}

.menu{
height:52px;
margin-left:20px;
margin-right:20px;
padding-left:25px;
margin-top:-13px;

}


.oneColFixCtrHdr #container {
width: 940px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
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. */
}
.oneColFixCtrHdr #header {
background: #7cceed;
height:120px;
padding-left: 30px;
padding-right:30px;
margin-left:50px;
margin-right:50px;
/* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.oneColFixCtrHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColFixCtrHdr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #FFFFFF;
}
.oneColFixCtrHdr #footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#DDDDDD;
}
.oneColFixCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

domedia
01-25-2011, 04:10 PM
The nav image height is 51px, but you've specified it as 29px in your HTML.

johnMoss
01-25-2011, 04:23 PM
I don't know how those values got in there; seriously; on the others there is as you see no entry; my first thought is some nuance of tagging by photoshop, but all were saved in precisely the same manner... perplexing...
Ok I went in and deleted those values, I've reloaded the page to the hyperlink above; so now question remains about getting the hover values to stay bonded to the upper border...
Thanx!

domedia
01-25-2011, 04:55 PM
Just looking at the home button, they're different sizes:
http://www.lacruzconcierge.com/dreamWeaverTestFile/images/NB_homeUp.gif
http://www.lacruzconcierge.com/dreamWeaverTestFile/images/NB_homeOver.gif

I didn't check the other ones, but it might be the same issue.

johnMoss
01-25-2011, 05:25 PM
They're different sizes on purpose. The up buttons are 29 px height, and the other 3 types are 51. Take a look at the following:

www.orangejuiceforads.com (http://www.orangejuiceforads.com)

trying to get the buttons to act like those in terms of movement..

www.lacruzconcierge.com/dreamWeaverTestFile/home.html (http://www.lacruzconcierge.com/dreamWeaverTestFile/home.html)

thanx again!

johnMoss
01-25-2011, 05:29 PM
I'm starting to understand I have to have identical image sizes across the board; seems apparent to have an equivalent image size & just let the whitespace serve as filler on the short images would stop the bounce... That escaped me, as I'm in the habit of saving GIF's as transparencies... Would you agree that's the solution?

domedia
01-25-2011, 05:39 PM
Yes, if you want to swap one image for another, and they need to be in the same spot and not jump, they need to be the exact same size.

I didn't quite understand what you meant by whitespace, but hopefully getting those images the same size would solve it 8)

johnMoss
01-25-2011, 05:40 PM
got it, thanxMuch...

domedia
01-25-2011, 05:42 PM
oh just saw the link to the other site.
If you want that exact thing, you might want to look into using the same techniques, which is a more web standards approach and using a CSS Sprite for the image mouseover.

It might be a learning curve, so if this project is on a deadline, you should probably work with what you have and add some whitespace into the images to make them the same size.

johnMoss
01-25-2011, 05:42 PM
I was referring to the empty extra space intentionally left when one saves an image, under normal circumstances I crop the empty space...

johnMoss
01-25-2011, 05:44 PM
I'll check that out; would rather do it right the first time...thanx for the lead...