View Full Version : Button over an image in CSS/dreamweaverCS5

02-01-2011, 03:32 PM
Hi, I have an image at the top of my website but I want to place in a Login and Register button over this image. How do you go about doing this. Do you create a css style and just insert your rollover images and if so, what is the CSS code to float over an image please? Or is there a way to place a table over an image and put your rollovers in that way.

02-01-2011, 04:17 PM
Let me get this straight..
You have one image. On top of this image you'd like to put two links (that look like buttons).

The word 'float' has a specific technical meaning in CSS, and that is to align things next to another things.

02-01-2011, 07:01 PM
Create a div (with height and width equal to image size) and use the image as a background for the div. Then insert your links into the div.


Add position: relative to the CSS for the div. Then you can place the image in the div and then place the links in the div and align them absolutely in relation to the div.

Better yet, learn CSS positioning because none of what I just said will make sense until you do.

02-02-2011, 09:35 AM
Hi, thanks for your reply Dw. I positioned my css div and placement etc and then inserted the image and link but I can't see it, it still goes behind the image. I can see the blue surround of the div tag but no image and when I click away from this div, it disappears altoghether?

02-02-2011, 10:21 AM
Hi, I have an image at the top of my website
How did you insert this image... as a background-image in your CSS or did you just insert it as a img tag in the container div in your HTML?

02-02-2011, 10:27 AM
Hi, I applied the Div tag and then I inserted the rollover images to create a button. I also tried it by using the Css styles and put it as a background-image. Wherever I place my cursor it just won't stay visible. Even the image I have which I am placing my buttons over, I put the z-index of that to -1 but it disappears when I click away and it is very messy. Is it possible to have a rollover button using the image rollover method in a div tag?

02-02-2011, 10:37 AM
I asked that image at the top, but anyways it's quite difficult without seeing any code what you're doing.

02-02-2011, 10:40 AM
That's the problem, I don't even know what I am doing!! Thanks anyway.

02-02-2011, 10:51 AM
That's the problem, I don't even know what I am doing!!
Then I suggest to take a few steps back and do some reading about CSS positioning.

02-05-2011, 04:35 AM
Hi Abbica,
Post your code & CSS relevant to this problem so we can see it. If you properly used the background method Jc ascribed above, it should have worked...