12 berichten aan het bekijken - 1 tot 12 (van in totaal 12)
  • Q:
    Bijdrager
    iPod Jimmy

    Div van achtergrond laten veranderen

    Ik ben een beetje aan het kloten. Nu maak ik een div en daar wil ik als je daar overheen gaat de achtergrond kleur laten veranderen zonder dat er op geklikt kan worden. Ik heb gezocht en geprobeert. Maar kom er niet meer uit:

    CSS: [code:1:709364ed1d]html, body {
    margin: 0px;
    height: 100%;
    }
    #container {
    height: auto;
    width: 500px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #CCCCCC;
    border-left-color: #CCCCCC;
    margin-bottom: 20px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CCCCCC;
    padding: 0px;
    margin-top: 0px;
    }
    #item {
    background-color: #FFFFFF;
    margin: 5px;
    height: 200px;
    width: 488px;
    border: 1px solid #CCCCCC;
    }
    #item a {
    background-color: #FFFFFF;
    display: block;
    }
    #item a:hover {
    background-color:#F2F2F2;
    display: block;
    }
    [/code:1:709364ed1d]

    HTML [code:1:709364ed1d]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Titel</title>
    <link href="style/css.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div align="center">
    <div id="container">
    <a href"#"><div id="item">

    </div></a>
    </div>
    </div>
    </body>
    </html>
    [/code:1:709364ed1d]

    Bijdrager
    WebJ

    Probeer dit eens, verander dit:
    <a href”#”><div id=”item”>

    </div></a>

    in dit:
    <div id=”item”><a href”#”>

    </a></div>

    Je definieert die link in je CSS namelijk als iets dat binnen de div met id item ligt.

    Bijdrager
    iPod Jimmy

    Hee het lukt… Danku! Moest nog de hoogte en de breedte invoeren in de a en a:hover. Maar weet iemand misschien hoe ik die container 100% kan krijgen. Zoeken lukt me echt niet vandaag… Één goede link is genoeg.

    Groet!

    Bijdrager
    martijnG

    een beetje laat, maar nu zonder <a href>
    [code:1:e47787ab70]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Titel</title>

    <script type="text/javascript" language="javascript">
    /* <![CDATA[ */
    function over() {
    var divClass = document.getElementById("item");
    divClass.onmouseover = function() {
    divClass.style.background="#F2F2F2";
    }
    divClass.onmouseout = function() {
    divClass.style.background="#FFF";
    }
    }
    /* ]]> */
    </script>

    <style type="text/css" media="screen">
    /* <![CDATA[ */
    html, body
    {
    margin: 0;
    height: 100%;
    }

    #container
    {
    width: 500px;
    border: 1px solid #CCC;
    border-top: 0;
    margin: 0 0 20px 0;
    padding: 0;
    }

    #item
    {
    margin: 5px;
    height: 200px;
    width: 488px;
    border: 1px solid #CCC;
    }

    /* ]]> */
    </style>
    </head>

    <body onload="over(); return false;">
    <div align="center">
    <div id="container">
    <div id="item">lala</div>
    </div>
    </div>
    </body>
    </html>
    [/code:1:e47787ab70]

    Bijdrager
    tennapel

    @MartijnG:
    Ik ben weinig gelukkig met je oplossing. je kan beter de :hover pseudoclass gebruiken, en voor IE alleen de whatever:hover oplossing van Peter Nederlof:
    http://www.xs4all.nl/~peterned/csshover.html

    Javascript kan nogal wat overhead hebben (processortijd en geheugen).

    Bijdrager
    martijnG

    Dank voor de link, mocht ik zoiets in de toekomst ook willen zal ik hier zeker na gaan kijken.
    Ook ik was niet erg gelukkig met de oplossing gootste nadeel die ik zag was dat de opmaak geregeld werd vanuit de javascript en niet vanuit de css.

    p.s. kent iemand goede tutorials voor “controlling the DOM using javascript” ?

    Bijdrager
    iBert
    ”martijnG”

    p.s. kent iemand goede tutorials voor “controlling the DOM using javascript” ?

    Het boek “Dom Scripting: Web Design with JavaScript and the Document Object Model” van Jeremy Keith is ronduit schitterend. To the point en bestaat enkel uit real world voorbeelden, waarbij gaandeweg de syntax en best practices worden verduidelijkt. Gaat van beginner tot zeer gevorderd. Een echte aanrader.

    Bijdrager
    tennapel

    Thnx iBert; dat lijkt me het soort boek dat ik al een tijdje zoek!

    Bijdrager
    martijnG

    @iBert
    tnx, die beste man heeft zelfs kant en klare notes voor op je iPod wat betref JS.
    Net zo als tennapel heb ik ook zulke lectuur nodig.

    Bijdrager
    danielpunt

    werkt dit niet:

    [code:1:e8e1178a10]
    #box {
    background-color: #9b9b9b }

    #box:hover {
    background-color: #ffcc00;}[/code:1:e8e1178a10]

    en dan in je document gewon die DIV plaatsen.

    -edit-
    het werkt hier wel. in Safari tenminste.

    Bijdrager
    tennapel
    ”muffin.”

    werkt dit niet:

    [code:1:c55a2b3ff7]
    #box {
    background-color: #9b9b9b }

    #box:hover {
    background-color: #ffcc00;}[/code:1:c55a2b3ff7]

    zie http://forum.macosx.nl/viewtopic.php?p=965047#965047

    Bijdrager
    danielpunt

    oh, daar heb ik overheen gelezen :oops:

12 berichten aan het bekijken - 1 tot 12 (van in totaal 12)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.