How to keep text from going behind an image

I am trying to keep my top-bar navigation from going behind my logo image on the header of my page. See below an example of the page when it is maximized in my screen:

Maximized View

Here is what it looks like when the browser window is made smaller:

Smalller Screen Example

I am trying to fix this page so that the top nav-bar that currently runs behind the image when the window is made smaller, will instead move and extend to the right.

Any ideas? The site is



Your problem is that the menu (<ul id="display">) has the CSS property float:right, so it will always be positioned relative to the right side of the screen. When the screen is made smaller, the right side moves closer to the left, so the menu moves leftwards too (and overlaps the logo).

If what you want is for the menu to always start from the right side of the logo (and not to overlap it), then you could give it the property float:left and add a margin to its left side (like margin-left:370px). There are other ways of positioning it (like using absolute positioning) but this will get the job done.

Use Z-index on the navigation. In the CSS, set the z-index of the hands image lower than that of your navigation and you will see the navigation on top instead of behind.

Here's some information on Z-Index in case you need it:

Nice design.

First of all you need to fix the minimum width of the top menu HEADER in your CSS. Fix the header min-width according to the resolution you need:

min-width: 1237px;

or directly into the HTML

<div id="Header" style="min-width: 1237px">

Need Your Help

How do I connect to an MS Access database using Perl?

database perl ms-access odbc dbi

I have a .accdb file on my local machine and I am trying to connect to it and read some data from 3 tables within the DB. How do I establish the connection using Perl?

Creating the ListView in WPF?

c# wpf xaml listview

Hi guys and happy new year(2010).