0

i've got very strange problem..

've got two objects:

<div id="menu">
        <a href="#"><img src="images/nagrody.png"></a>
        <a href="#"><img src="images/zwyciezcy.png"></a>
        <a href="#"><img src="images/zasady.png"></a>
</div>

With style:

#menu {
float:right;
margin:20px 10px;
width: 160px;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
}

#menu img{
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;

    -webkit-transform:scale(0.95,0.95);
    -moz-transform:scale(0.95,0.95);
    -o-transform:scale(0.95,0.95);

    overflow:hidden;
}

#menu img:hover{

    -webkit-transform:scale(1,1);
    -moz-transform:scale(1,1);
    -o-transform:scale(1,1);
}

And second object:

<div id="znajomi">
        <a href="#"><img src="images/zapros.png"></a>
        <p>BRAKUJE CI JESZCZE <span id="fr">3 ZNAJOMYCH</span></p>
</div>

With style:

#znajomi {
    padding:420px 20px;
    -webkit-transform:rotate(-4deg);
    -moz-transform:rotate(-4deg);
    -o-transform:rotate(-4deg);
}

#znajomi p {
    font-family:DIN, Arial, Helvetica, sans-serif;
    font-size:13px;
    color:#fff;
    position:relative;
    top:-20px;
    left:20px;
}

#fr {
    font-family: Arista, Arial, Helvetica, sans-serif;
    font-size:21px;
    color:#c2dc2f;
    text-shadow:rgba(113,0,0,0.75) 2px 2px;
}

And my problem is that: if i delete from #znajomi

-webkit-transform:rotate(-4deg);
-moz-transform:rotate(-4deg);
-o-transform:rotate(-4deg);

Hover from menu work, but if this code is plaste - it doesn't work.

Any suggestions?

4

1 回答 1

0

The #znajomi-element overlays the #menu. you have to use a z-index or other positioning. without the full site-layout i cannot give you an example for the best change.

it helps, if you remove the float:right from the menu. you might add an margin-left to get the same result as before.

于 2012-06-04T14:46:50.010 回答