CSS div and :hover positions

On my site : Dev.stevehamber.com

I am trying to get the image "New Page" (currently behind the slider) to be positioned outside it's current DIV, overlapping the top right hand corner, but so that it also moves with the Auto margin of the main content. Can't seem to figure out how, with out it being either behind something or not following the auto margin of the container.

I have also had problems with the :hover attribute. Experimenting with fixed position Divs I have noticed the image/background doesn't change on the bottom right hand corner of the fixed "F", is this something to do with positioning too? :/

I tried Googling this but couldn't explain myself in 1 sentence, so I hope this makes sense. Ha!

Thanks.

Answers


In your CSS, add z-index, like this:

img.newpage {
    position: absolute;
    right: 1px;
    z-index: 2;
}

Give the F a high z-index to make it be on top


Put the newpage.png in a div that's on top of the slider div. Put both of those div's inside another div; assign the css auto-margin attributes to this parent div.

So something like

<div id="slider">
  <div id="slidercontent"><!-- in here, put the slider -->
  </div>
  <div id="newpage"><!-- make newpage.png the background image of this-->
  </div>
</div>

As for the hover; please explain a bit more thoroughly, it seems to work fine with me. You mean the facebook button right? (its positioned top-left in my FF btw)


Need Your Help

Template issue with django

python django templates django-templates

I'm trying create a template with django but when I execute this sentences in the Python Shell

Terminate program after X seconds Linux C

c linux timer timeout

How can I shut down a linux program in C. I'm editing a script to have a timer thing where the script only runs for 10 seconds then shuts down.