Avatar billede patrickbeck Nybegynder
08. april 2010 - 14:24 Der er 1 løsning

CSS rollover menu hopper med billeder

jeg har fået lavet en menu der hentes ud med css men når musen føres over et billedet bliver rollover billedet ustabilt.

er der nogen der ved hvad jeg har lavet galt?

Her er link til min side:

http://playasmile.comze.com/eng/index.html



Her er CSS:

body {
    font:16px "palatino linotype"
}

div.scroll {
    height:445px;
    width:650px;
    overflow-x:hidden;
    overflow-y:auto;
    overflow:-moz-scrollbars-vertical
}

.trampoline {
    background:url(images/z1.gif) no-repeat
}

.trampoline,.slide,.castle,.softplay,.pool,.offer,.eng,.thai,.home,.about,.safety,.contact,.sitemap,.event,.news,.sun,.logo,.blank,.blank1,.blank2,.blank3,.blank4,.blank5,.blank6,.blank7,.blank8,.blank9,.blank10,.blank11,.blank12 {
    position:relative
}

.trampoline,.trampoline a,.slide,.slide a,.castle,.castle a,.blank10 {
    width:173px
}

.trampoline,.trampoline a {
    height:93px
}

.trampoline img,.slide img,.castle img,.softplay img,.pool img,.offer img,.eng img,.thai img,.home img,.about img,.safety img,.contact img,.sitemap img,.event img,.news img {
    width:100%;
    height:100%;
    border:0
}

* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover {
    visibility:visible
}

.trampoline a:hover img,.slide a:hover img,.castle a:hover img,.softplay a:hover img,.pool a:hover img,.offer a:hover img,.eng a:hover img,.thai a:hover img,.home a:hover img,.about a:hover img,.safety a:hover img,.contact a:hover img,.sitemap a:hover img,.event a:hover img,.news a:hover img {
    visibility:hidden
}

.trampoline span,.slide span,.castle span,.softplay span,.pool span,.offer span,.eng span,.thai span,.home span,.about span,.safety span,.contact span,.sitemap span,.event span,.news span {
    position:absolute;
    left:0;
    top:0;
    margin:0;
    cursor:pointer
}

.slide {
    background:url(images/z3.gif) no-repeat
}

.slide,.slide a {
    height:65px
}

.castle {
    background:url(images/z5.gif) no-repeat
}

.castle,.castle a {
    height:98px
}

.softplay {
    background:url(images/z2.gif) no-repeat
}

.softplay,.softplay a,.pool,.pool a,.blank,.blank1 {
    width:174px
}

.softplay,.softplay a {
    height:72px
}

.pool {
    background:url(images/z4.gif) no-repeat
}

.pool,.pool a {
    height:73px
}

.offer {
    background:url(images/z6.gif) no-repeat
}

.offer,.offer a,.blank5 {
    width:116px
}

.offer,.offer a {
    height:77px
}

.eng {
    background:url(images/z7.gif) no-repeat
}

.eng,.eng a {
    width:43px
}

.eng,.eng a,.thai,.thai a {
    height:46px
}

.thai {
    background:url(images/z8.gif) no-repeat
}

.thai,.thai a {
    width:41px
}

.home {
    background:url(images/z9.gif) no-repeat
}

.home,.home a {
    width:68px
}

.home,.home a,.about,.about a,.blank8 {
    height:35px
}

.about {
    background:url(images/z10.gif) no-repeat
}

.about,.about a {
    width:119px
}

.safety {
    background:url(images/z11.gif) no-repeat
}

.safety,.safety a {
    width:137px
}

.safety,.safety a,.contact,.contact a {
    height:51px
}

.contact {
    background:url(images/z12.gif) no-repeat
}

.contact,.contact a {
    width:126px
}

.sitemap {
    background:url(images/z13.gif) no-repeat
}

.sitemap,.sitemap a {
    width:99px
}

.sitemap,.sitemap a,.blank9 {
    height:50px
}

.event {
    background:url(images/z14.gif) no-repeat
}

.event,.event a {
    width:86px;
    height:56px
}

.news {
    background:url(images/z15.gif) no-repeat
}

.news,.news a {
    width:87px;
    height:55px
}

.sun {
    background:url(images/index_01.gif) no-repeat;
    width:347px;
    height:185px
}

.logo {
    background:url(images/index_02.gif) no-repeat;
    width:653px;
    height:122px
}

.blank {
    background:url(images/index_05.gif) no-repeat;
    height:48px
}

.blank1 {
    background:url(images/index_10.gif) no-repeat;
    height:63px
}

.blank2 {
    background:url(images/index_11.gif) no-repeat;
    width:29px;
    height:259px
}

.blank3 {
    background:url(images/index_12.gif) no-repeat;
    width:84px;
    height:213px
}

.blank4 {
    background:url(images/index_14.gif) no-repeat;
    width:118px;
    height:141px
}

.blank5 {
    background:url(images/index_15.gif) no-repeat;
    height:64px
}

.blank6 {
    background:url(images/index_16.gif) no-repeat;
    width:887px
}

.blank6,.blank10 {
    height:31px
}

.blank7 {
    background:url(images/index_21.gif) no-repeat;
    width:89px;
    height:86px
}

.blank8 {
    background:url(images/index_24.gif) no-repeat;
    width:394px
}

.blank9 {
    background:url(images/index_30.gif) no-repeat;
    width:219px
}

.blank10 {
    background:url(images/index_33.gif) no-repeat
}

.blank11 {
    background:url(images/index_20.gif) no-repeat;
    width:44px;
    height:87px
}

.blank12 {
    background:url(images/index_28.gif) no-repeat;
    width:318px;
    height:1px
}



Her er udtræk til menu´en:

<div class="home"><a href="#"><img src="images/a9.gif" alt=""></a></div>
Avatar billede patrickbeck Nybegynder
08. april 2010 - 22:20 #1
easy... stupid me... mangler bare en

a { display: block;
}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester