div issues html,css

Question

I have the following code in my html file, where I display two clickable areas one on top of the other, however it only lets me click one. I can see both but I can only click the one that is defined last.

<div style="visibility:hidden; position:absolute; padding-left:360px; padding-top:80px; float:left" id="colors">

<h2 style = "cursor:pointer" onclick="changecolor()">button1</h2>

</div>

<div style="visibility:hidden; position:absolute; padding-left:360px; padding-top:410px; float:left" id="stylescroll">

<h2 style="cursor:pointer" onclick="changedesign()">button2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>

</div>



function showt(){

        removeall();





        var hide = document.getElementById("center");
        hide.style.backgroundImage = "url(tshirts.jpg)";


        var shirt = document.getElementById("shirt");
        shirt.style.visibility = "visible";

        var move = document.getElementById("shirtmove");
        move.style.visibility = "visible";



        var logo = document.getElementById("advisory");
        logo.style.visibility = "visible";

        var button1 = document.getElementById("stylescroll");
        button1.style.visibility = "visible";

    var button = document.getElementById("colors");
        button.style.visibility = "visible";






    }

function showt is the function that makes both objects visible. So when that function is called I can see both button1 and button2 text, but I can't interact with button1, button2 works fine.

Any ideas?

Do you have jsFiddle example?

Filip Krstic
– Filip Krstic

2011-05-12 21:54:24 +00:00
Commented May 12, 2011 at 21:54 — Filip Krstic
– Filip Krstic, Commented May 12, 2011 at 21:54

kei · Accepted Answer · 2011-05-12 22:02:08Z

3

Instead of using 'padding-top' (and 'padding-left'), just use 'top' (and 'left').

The second div's padding is overlapping the first div that's why you can't click it.

answered May 12, 2011 at 22:02

kei

20.5k2 gold badges38 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

webdad3 Over a year ago

This answer is correct. jsfiddle.net/6FTt9 - @kei good job. Is top and left just like padding-top and padding-left? What is the difference?

Kevin Peno Over a year ago

@Jeff. top and left are css properties used for positioning. When you set something to position: {somethingotherthanstatic}, top and left will physically move the element. padding-{direction} is used to apply space between the content box and the border box.

kei Over a year ago

When you add top or left, you're actually moving the div. With padding, you're just adding extra space inside the div, thus making it "fatter". I hope that makes sense.

Zsipgun · Accepted Answer · 2011-05-12 22:08:33Z

0

Your second div element overlaps your first div element, so you can't click it. Try setting a background-color to the second div. You won't see the first one anymore.

You shouldn't use position:absolute, unless you really need it, and there are other, much cleaner ways to get this layout, but a quick fix for your problem is, if you change your padding styles to margins, that way the spacing is not inside your div, so there is no overlapping, and you are able to click your element.

answered May 12, 2011 at 22:08

Zsipgun

296 bronze badges

1 Comment

Kevin Peno Over a year ago

If the element in question is position: absolute, which it is, you should use top and left properties rather than margin. It will work to use margin-top and margin-left, but only the element will actually make use of the margin (since it is out of normal flow).

Collectives™ on Stack Overflow

div issues html,css

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related