How do I float a control over the top of an image (using the background of image)

Question

Hi,

I have a logo image across the entire top of my wesit page. The logo itself only takes up about one third of the left hand side. The right two thirds of this bar is plain and dark blue in color. I have several links and the user name displayed on the right side and would like to float those over the image.

Originally, I had the image taking up the left two thirds of the bar (div) and a seperate div with my links on the right. The problem is that that method leaves a noticeable boundary line between the two divs even though they are the same color.

Is transparency going to help? How do I set this up?

Thank you, James

_________________________________________________________________
|  LOGO HERE                              User: David Troy      |
|  LOGO HERE                          Home | FAQ | Contact Us   |
|_______________________________________________________________|

Answer 1

try :

div.left, div.right {
  margin : 0px;
  padding : 0px;
}

Assuming your left div has a class="left" and the right one has a class="right"

That will remove the spacing between the divs.

Answer 2

I'm somewhat confused as to what you're trying to accomplish.

If you're using float, then make sure that you're specifying a width to each div.

If you just want the text to be on top of the image, two simple div blocks should work.

<div>
Your links here
</div>
<div>
<img src="yourimg.gif" />
</div>

If you want them to be side by side, this should work:

<div style="float: left; width: 400px">
<img src="yourimg.gif" />
</div>
<div style="float: left; width: 400px">
Link 1
Username
</div>

Answer 3

Concerning the "hairline space": if you are using Internet Explorer, you will have to omit spaces between the divs as follows:

<div class="left">Logo</div><div class="right">Links</div>

This is due to Quirks mode, I believe; it displays as expected in XHTML Strict mode.

Then, the CSS looks like this:

div.left {
  float : left;
}
div.left, div.right {
  margin : 0px;
  padding : 0px;
}