CSS - Expand image beyond nav div

I have a quick question.

My draft site:  http://www.sendright.com/draft/joe

The image on the right hand of the nav menu it is #nav li.right

I would like to enlarge that image beyond the borders of the nav wrapper.  Is there a way of doing that without having to rewrite the frame of the nav?

Thanks!
gwarcherAsked:
Who is Participating?
 
Jen0910Commented:
As you have it now, the button also moves as a viewer changes their window size which means it will not be in the same place on every machine. You;ll need to reference something positioned, not your overall content. My thought would be something similar to this (be sure to give your red button an ID of "redButton" or wrap it in a div with that ID):

#nav li.right {
      float: right;
      font-size: 13px;
      //padding: 13px 22px 12px 20px;
      //margin-right: 100px;
      position: relative;
}

#nav li.right #redButton {
      position: absolute;
      left: 225px;
}
0
 
LZ1Commented:
Do you mean so it sticks out and around the nav?
0
 
gwarcherAuthor Commented:
yes.  If I try to enlargen it now, the nav image begins to stack a second line under it.
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LZ1Commented:
Your best bet would be to position it absolutely within the nav.
You may have some z-index issues once that happens, but we can take care of those once you change your code.
0
 
gwarcherAuthor Commented:
ok, I positioned it to absolute.  I am a little concerned with the button moving when zooming in or out.  Let me know what would be the next best course of action as I don't use absolute positioning very often. (ok never).
0
 
Jen0910Commented:
It will not move as long as you position it within another div that is already relatively positioned (if that makes sense). That way it will be absolutely positioned to it's relative parent and only reference that, not your overall size. I use that trick a lot and it seems to work well.
0
 
LZ1Commented:
Do you anticipate your users zooming? Is that where you want it positioned?
0
 
gwarcherAuthor Commented:
I would like it under the headshot.  I don't anticipate it, but the userbase of this site could trend older so it may happen.

The wrapper on this site was not framed for 960 so the nav div just keeps going to the end of the page.  Can I place another div inside the nav that I can expand the size without affecting the size of the nav div?

Probably a newbie question, thanks for the help though. :)
0
 
LZ1Commented:
Just make your #nav position:relative;, then as Jen said, it won't move. I thought you had this set before. My fault for not double checking.  :)

0
 
gwarcherAuthor Commented:
I made the alterations, but now the button is disappearing to the right of the nav menu.  I believe I put it in right, let me know if I did not.

Thanks!
0
 
gwarcherAuthor Commented:
Image is still contained within the nav boundaries.
0
 
gwarcherAuthor Commented:
hehe...got it, pesky overflow reference.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.