Avatar billede htx98i17 Professor
27. december 2010 - 21:01 Der er 4 kommentarer og
1 løsning

html og css onmouseover skift className

Følgende som kan der kan oprettes en html fil fra og man kan se problemet. Man skal blot føre musen over layeret ude til venstre og scrolle ned. Så skal man forsøge at føre musen over linkesene og så kan man se at layeret automatisk scroller op til toppen.

Det er det som er problemet. Hvorfor gør den det? (se bort fra php-koden)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
    <head>
        <title>Webitel</title>
        <LINK rel="stylesheet" href="stylesheet.css" >
        <style>
            .senestelayerhidden {
                position        :    fixed;
                top                :    102px;
                left            :    -260px;
                z-index            :    0;
               
                width            :    270px;
                height            :    100px;
               
                border-color    :    #ececec;
                border            :    1px SOLID;
               
                background-color:    #8EA0BE;
                font-family        :     arial;
           
               
            }
           
            .senestelayer {
                position        :    fixed;
                top                :    102px;
                left            :    0px;
                z-index            :    0;
               
                width            :    250px;
                height            :    400px;
               
                border-color    :    #000000;
                border            :    1px SOLID;
               
                background-color:    #8EA0BE;
               
                font-family        :     arial;
                font-size        :    10pt;
                color            :    #000000;
                   
                padding            :    0px;
               
                overflow        :    auto;
            }
           
            .layeroverskrift {
                position        :    relative;
                top                :    0px;;
                left            :    0px;
                z-index            :    0;
               
                width            :    98%;
                height            :    20px;
               
                border            :    0px SOLID;
                border-color    :    #000000;
               
                background-color:    #ececec;
               
                font-family        :     arial;
                font-size        :    10pt;
                color            :    #000000;
                font-weight        :    bold;
                text-align        :    center;
                vertical-align    :    middle;
               
                padding            :    2px;
                overflow        :    auto;
            }
           
            .layerbroed {
                position        :    relative;
                top                :    0px;;
                left            :    0px;
                z-index            :    1;
               
                width            :    97%;
                height            :    100%;
                border            :    0px solid;
                font-family        :     arial;
                font-size        :    8pt;
                color            :    #000000;
                text-align        :    left;
                vertical-align    :    middle;
               
                padding            :    0px;
                overflow        :    no;
            }
        </style>
    </head>
<body>

<div id="layer1" class="senestelayerhidden" onmouseover="document.getElementById('layer1').className='senestelayer';" onmouseout="document.getElementById('layer1').className='senestelayerhidden';"  >
    <div class="layeroverskrift" >Produktvisning</div>
    <div class="layerbroed" >
   
        <a href="varedatabase.php?nr=2" >Vis produkter uden gruppe</a>
        <br><a href="varedatabase.php?nr=1" >Vis alle produkter</a>

        <br><br>Vis produkter fra:<br>
            <ul>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
                <li><a href="varedatabase.php?nr=3&nrposition=<? echo$lgruppe['position']; ?>" ><? echo$lgruppe['label']; ?> (<? echo$lgruppe['antal']; ?>)</a></li>
           
        </ul>
    </div>
   
</div>
</body>
</html>
Avatar billede webweaver Praktikant
27. december 2010 - 23:38 #1
Jeg har rettet lidt i din style, og så ser det ud til at virke :)
http://www.lasse-jensen.dk/eksperten/top.php

<style>
            .senestelayerhidden {
                position        :    fixed;
                top                :    102px;
                left            :    -260px;
                z-index            :    1;
               
                width            :    270px;
                height            :    100px;
               
                border-color    :    #ececec;
                border            :    1px SOLID;
               
                background-color:    #8EA0BE;
                font-family        :    arial;
           
            }
           
            .senestelayer {
                position        :    fixed;
                top                :    102px;
                left            :    0px;
                z-index            :    0;
               
                width            :    250px;
                height            :    400px;
               
                border-color    :    #000000;
                border            :    1px SOLID;
               
                background-color:    #8EA0BE;
               
                font-family        :    arial;
                font-size        :    10pt;
                color            :    #000000;
                   
                padding            :    0px;
               
            }
           
            .layeroverskrift {
             
                width            :    97%;
                height            :    20px;
               
                border            :    0px SOLID;
                border-color    :    #000000;
               
                background-color:    #ececec;
               
                font-family        :    arial;
                font-size        :    10pt;
                color            :    #000000;
                font-weight        :    bold;
                text-align        :    center;
                vertical-align    :    middle;
               
                padding            :    2px;
         
            }
           
            .layerbroed {
             
                width            :    246px;
                height            :    375px;
                border            :    0px solid;
                font-family        :    arial;
                font-size        :    8pt;
                color            :    #000000;
                text-align        :    left;
                vertical-align    :    middle;
               
                padding            :    0px;
                overflow        :    auto;
               
            }
        </style>
Avatar billede htx98i17 Professor
28. december 2010 - 08:19 #2
Perfekt!
Men jeg kan se der er kommet et mellemrum mellem efter scrollbaren. Det ser ikke så godt ud. :(
Avatar billede webweaver Praktikant
28. december 2010 - 13:41 #3
Tænker du ude i højre side?

Det kan du selv fjerne, ved at ændre på width :)

width i .layeroverskrift sættes til 98,5% og width i .layerbroed sættes til 250px.

http://www.lasse-jensen.dk/eksperten/top.php
Avatar billede htx98i17 Professor
28. december 2010 - 14:49 #4
takker
Avatar billede webweaver Praktikant
28. december 2010 - 15:08 #5
No problemo.

Godt nytår :)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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