[SOLVED] image positioning

[Lambneck]

 

Hello,

I have an image that keeps moving out of place when the browser size is altered. How can I make it so it stays in one spot no matter what the browser size?

[dropfaith]

absolute posistions

[haku]

Absolute positioning has nothing to do with it.

 

OP - this happens as a result of using percentage based sizes. They tell something to position itself as a percentage of the browser size. So when the browser size changes, the number of pixels represented by that percentage changes. If you change the percentage size to either pixels or ems, your elements won't change position.

[Lambneck]

Ah, my image has a height of 90px but must remain the same width of the browser size (width 100%). Is this possible to do while still maintaining proper positioning?

[haku]

If it already has a width of 100%, then it shouldn't be moving, as it is already filling the entire width of the browser. Or in other words, I don't get what you are saying. Got a link?

[Lambneck]

What is happening is that when the width of the browser gets narrower than the width of all the list items in the menubar, the last list items get dropped down to the line below. Anyone got know how to I can keep this from happening?

 

(Haku I tried the tut u sent me but it had the same result.)

[dropfaith]

if i read this right your window is 100 percent and your menu items are fixed  width

 

and making the window smaller then the fixed width messes it up

 

i normally use percentage on all items in a flexible page.. that way if window is 800 px the menu shrinks with the window

 

window {width:100%}

nav links {width:;}Percentage would then be based on how many linlks you have

[Lambneck]

Here is the code:

 

#navbar{
margin:0; 
padding:0;
line-height:43px;
background-image: url(../pix/perpetualGradient.jpg);
background-repeat: repeat-x;
}

#navbar li {
padding-top: 14px;
margin-left: 83px;
border-left: none;
display:inline;
font-size:14px;

}

#navbar li a {padding: 1em 0.2em;}


<ul id="navbar">
  <li id="postResume"><a href="postResume.php">Post Resume</a></li>
  <li id="viewJobs"><a href="viewJobs.php">View Jobs</a></li>
  <li id="viewResumes"><a href="chatRoom.php">View Resumes</a></li>
  <li id="chat"><a href="chat.html">Chat Room</a></li>
  <li id="forum"><a href="forums.php">Forum</a></li>
  <li id="help"><a href="help.php">Help</a></li>
</ul>