...

View Full Version : Trying to add a simple css overlay, having issues



BlackReef
08-10-2012, 01:24 AM
Hello,

I am trying to build a simple "Back" button with a nice, compact div box in the top-left corner.

However you can see the trouble I am having if you check it out here:


http://tinyurl.com/9x2fpxu (http://tinyurl.com/9x2fpxu)

If you notice, there is a div in the css named "#bannerscollection_kenburns_generous #back {"

Any help wuold be greatly appreciated!

I would like the "back" button to look like this (quick mockup):

http://dev.electrabike.com/electra/mock.jpg

AndrewGSW
08-10-2012, 02:02 AM
I think you should explain what the problem is exactly. How are you expecting it to behave?

BTW data-* attributes are not valid unless you use the HTML5 DOCTYPE declaration:


<!DOCTYPE html>

Old Pedant
08-10-2012, 02:35 AM
Ummm...yes I see it in the CSS. But it has no content.


#bannerscollection_kenburns_generous #back {
}


At a *GUESS* I would say you could do this:


<div id="back" onclick="location.href='index.html';">&nbsp;&nbsp;&lt;&lt; BACK</div>

and then this


#bannerscollection_kenburns_generous #back
{
position: absolute;
top: 0px; left: 0px;
background-color: black;
font-family: arial;
font-size: xx-large;
font-weight: bold;
color: white;
padding: 5px;
}


** BUT **

But an even easier way to do it would be to use that button IMAGE that you seem to have used there (cut it out of the larger image, if needed) and save it as, say "backButton.jpg".

And then simply do:


<img id="back" onclick="location.href='index.html';" src="backButton.jpg" alt="back button" />

And then


#bannerscollection_kenburns_generous #back
{
position: absolute;
top: 0px; left: 0px;
}

Why work harder than that?

Arbitrator
08-10-2012, 02:23 PM
And then simply do:


<img id="back" onclick="location.href='index.html';" src="backButton.jpg" alt="back button" />
There's no reason to use script when a simple link will suffice:


<a href="./"><img id="back" alt="Back" src="backButton.jpg"/></a>

BlackReef
08-10-2012, 06:29 PM
Ok, take a look at it now:

http://tinyurl.com/9x2fpxu

Notice how the 'back' image is actually pushing the whole slideshow down?

I would like the image to lay on top of the slideshow

Thanks for your help,
-Joe


EDIT:

I added this CSS, but the image was not appearing anywhere at all:


#bannerscollection_kenburns_generous #back {
position: absolute;
top: 0px; left: 0px;
}

So I put it back

Arbitrator
08-11-2012, 06:01 AM
I would like the image to lay on top of the slideshow

[...]

I added this CSS, but the image was not appearing anywhere at all:


#bannerscollection_kenburns_generous #back {
position: absolute;
top: 0px; left: 0px;
}Your code is close; add remove the #bannerscollection_kenburns_generous portion of the selector and addz-index: 1 to complete it.

In case you want to know why:

#bannerscollection_kenburns_generous #back doesn't select anything because #back is not a child of #bannerscollection_kenburns_generous.
When sibling elements (at the same source code hierarchy level) have the same z-index, they're painted in source code order with the items coming later in the source code being painted last and therefore on top of preceding content and vice versa. Since your #back element precedes the #bannerscollection_kenburns_generous element (with all the content) and both of those elements have the same z-index (by default), the #back element is painted first and therefore behind the content. Adding z-index: 1 overrides that behavior.

This, of course, means that you could alternatively move the #back element to a position after the div element and get the same result without touching the z-index property.

BlackReef
08-13-2012, 07:25 PM
Your code is close; add remove the #bannerscollection_kenburns_generous portion of the selector and addz-index: 1 to complete it.

In case you want to know why:

#bannerscollection_kenburns_generous #back doesn't select anything because #back is not a child of #bannerscollection_kenburns_generous.
When sibling elements (at the same source code hierarchy level) have the same z-index, they're painted in source code order with the items coming later in the source code being painted last and therefore on top of preceding content and vice versa. Since your #back element precedes the #bannerscollection_kenburns_generous element (with all the content) and both of those elements have the same z-index (by default), the #back element is painted first and therefore behind the content. Adding z-index: 1 overrides that behavior.

This, of course, means that you could alternatively move the #back element to a position after the div element and get the same result without touching the z-index property.


wow thanks. I added the z-index:1 to it, and that fixed it! Thank you very much for your help and the detailed explanation



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum