Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Background-image in hover (IE en FF) werkt niet

dalertje
3 antwoorden
  • Hoi,

    Tijdens een hover over een link in het navigatiemenu wil ik een background-image laten tonen. Zowel in IE als in FF werkt het niet. Ik kan er niet achterkomen wat de oorzaak is. Tips van reeds bekende topics mochten ook niet baten. Voor de duidelijkheid geef ik de CSS
    [code:1:8981e0584c]
    /* CSS Document */

    a:link {color:#479DD6;}
    a:visited {color:#CC0000;}
    a:hover {color: #479DD6;}


    html, body
    {
    height: 100%;
    background: #FFFFFF;
    color: #000000;
    behavior:url("csshover.htc");
    }

    body
    {
    margin: 0;
    padding: 0;
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 500;
    }

    #wrap
    {
    position: relative;
    height: 200%;
    width: 100%;
    }

    #header
    {
    position: absolute;
    top: 0;
    left: 0;
    height: 10em;
    width: 100%;
    overflow: hidden;
    background: #FFFFFF;
    z-index: 3;
    }

    #search span
    {
    font-size: 14px;
    }

    #nav
    {
    margin: 0;
    padding: 0;
    position: relative;
    display:block;
    float: right;
    width: 200px;
    background-color: #479DD6;
    z-index: 8;
    height: 300%;
    }

    #nav a
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #DEEFF7;
    text-decoration: none;
    padding: .4em .1em;
    }

    #nav a:hover
    {
    color: #333333;
    background-image: url(../Knoppen ed/triangle.gif);
    background-repeat: no-repeat;
    background-position: right;
    }

    #subnav a
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 200;
    display: block;
    width: 10em;
    padding: .2em .1em;
    }

    #nav ul
    {
    text-align: left;
    list-style-type: none;
    padding-top: 2px;
    margin-top: 2px;
    padding-left: 15px;
    margin-left: 15px;
    }

    #nav ul ul
    {
    position: absolute; left: -123%; top: 0.5%;
    }

    #nav li
    {
    position: relative;
    padding: .3em;
    }

    div#nav ul ul
    {
    display: none;
    z-index: 10;
    background-color: #479DD6;
    border-style: groove;
    border-width: thin;
    }

    div#nav ul li:hover ul
    {
    display: block;
    background-image: url(../Knoppen ed/triangle.gif);
    background-repeat: no-repeat;
    background-position: right;
    }

    /* content styles */

    .big
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight:bold;
    color: #479DD6;
    }

    .xbig
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #479DD6;
    }

    .style3
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    }

    #content, #nav
    {
    padding-top: 10em;
    padding-bottom: 10em;
    }

    #content
    {
    position: relative;
    float: left;
    width: 750px;
    margin-left: 2px;
    margin-right: 2px;
    }

    /* Kop van de content */

    .testclass
    {
    color: #0033FF;
    font: 28px arial,helvetica;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    z-index: 1000;
    }

    #test
    {
    position: absolute;
    top: 105px;
    left: 461px;
    width: 270px;
    text-align: left;
    }

    /* style voor dankwoord startpagina en contact */

    .footer
    {
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    color: #479DD6;
    }

    #voet
    {
    clear: both;
    position: relative;
    width: 100%;
    height: 5em;
    }

    [/code:1:8981e0584c]

    Ik gebruik XHTML 1.0 Transitional.

    Heeft iemand de oplossing zodat de background-image wel getoond word?

    M.vr.gr., Dalertje
  • Eerst even dit: klopt het pad naar het achtergrondplaatje?
    Als ik deze code:
    [code:1:e86ceb3ab2]
    #nav
    {
    margin: 0;
    padding: 0;
    position: relative;
    display:block;
    float: right;
    width: 200px;
    background-color: #479DD6;
    z-index: 8;
    height: 300%;
    }

    #nav a
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #DEEFF7;
    text-decoration: none;
    padding: .4em .1em;
    }

    #nav a:hover
    {
    color: #333333;
    background-image: url(../Knoppen ed/triangle.gif);
    background-repeat: no-repeat;
    background-position: right;
    }
    [/code:1:e86ceb3ab2]
    in een testbestandje plaats, en alleen een ander plaatje neerzet (zonder spaties btw, misschien is dat het probleem?), dan werkt het prima.
  • Tips om verkeerde verwijzingen naar bestanden te voorkomen:
    - gebruik geen uppercase urls ('Knoppen'), alleen lowercase ('knoppen');
    - gebruik geen spaties ('knoppen ed');
    - gebruik geen bijzondere symbolen, gebruik alleen 0 t/m 9, a t/m z, _ (underscore) en - (dash). (En de slash en de punt natuurlijk.)

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.