How do I change so it dont move when I resize the window?

[cheater1]

Hello I want to add a menu that don't move with the side of the browser when I re-size it. I want it to stay in that one position relative to my text. What css do I use? Thanks in advance.

[ralph.m]

In a sense, it should do that without CSS at all. It sounds like you are using position: absolute or something like that, which is generally not a good way to go.

We really need to see a live link, or the code you are suing, to be much help.

[cheater1]

Ok. Thank for the reply. Well please look at

My Website

The "Team Member One..." moves with the left side of the browser when I increase the horizontal width of the browser.

Thanks in advance

[TechnoBear]

Sorry - I'm not sure what you're asking. Are you saying you'd like the menu with the team members to be centred horizontally, rather than left-aligned as at present?

[cheater1]

Sorry for not being clear. I want the team member to stay put when I resize the window. Thanks

[ralph.m]

The first thing you shoud do is remove the huge width here:

#smallInforBar {
  display: inline-block;
  width: 7000px;
}

That's not helping your cause at all. If you remove it, the member boxes stay still in relation to the text.

[cheater1]

I've made the changes and it dosn't seem to be working.

http://serverflare.com/main%20website/home.html

Also I've notice another problem when I click on the top Navigation Menu, it does not highlight the selected. For example when I select Home. The Service Tab is highlighted. When I click anything else the Service tab is selected.

The first thing you shoud do is remove the huge width here:

#smallInforBar {
  display: inline-block;
  width: 7000px;
}

That's not helping your cause at all. If you remove it, the member boxes stay still in relation to the text.

[TechnoBear]

Also I've notice another problem when I click on the top Navigation Menu, it does not highlight the selected. For example when I select Home. The Service Tab is highlighted. When I click anything else the Service tab is selected.

That's because you have the class "active" applied to the Services <li> on each page.

<li class="active">
<a href="home.html">Services</a>
</li>

You need to remove it from the Services <li> and apply it to the current page <li> on each page.

I hope that makes sense - it sounds a little garbled to me.

[cheater1]

Awww thanks, that helped. I'm going to change it now =)

One issue down one more to go =) Hehehe this is the most productive/helpful forum on the internet, from experience.

That's because you have the class "active" applied to the Services <li> on each page.

<li class="active">
<a href="home.html">Services</a>
</li>

You need to remove it from the Services <li> and apply it to the current page <li> on each page.

I hope that makes sense - it sounds a little garbled to me.

[ralph.m]

I've made the changes and it dosn't seem to be working.

I meant just to delete the width, not thw whole rule. So put this back in:

#smallInforBar {
  display: inline-block;
}

[cheater1]

Bingo!!! Thank you so much guys. Really helped me a lot.

I meant just to delete the width, not thw whole rule. So put this back in:

#smallInforBar {
  display: inline-block;
}

[ralph.m]

Just be careful of older browsers, like IE7 and under. They may need display: inline instead, if you care about them (I don't).

[cheater1]

Just be careful of older browsers, like IE7 and under. They may need display: inline instead, if you care about them (I don't).

I don't care for people with IE7 either they should just upgrade.