Kleine Aufgabe für CSS-Profis

  1. lari

    lari Thread StarterMacUser Mitglied

    Mitglied seit:
    01.10.2003
    Beiträge:
    225
    Zustimmungen:
    6
    Hallo, ich möchte das bei diesem CSS-Menü der Hoover-Effekt bis an den Rand der einzelnen Kästen geht. Aber ich krieg es net hin. Falls jemand ein wenig Muße hat:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>CSS-Menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <script type="text/javascript">
    <!--
    window.onload=montre;
    function montre(id) {
    var d = document.getElementById(id);
    for (var i = 1; i<=10; i++) {
    if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    }
    if (d) {d.style.display='block';}
    }
    //-->
    </script>


    <style type="text/css">
    <!--
    /* CSS issu des tutoriels www.alsacreations.com/articles */
    body {
    margin: 0;
    padding: 0;
    background: white;
    font: 80% verdana, arial, sans-serif;
    }
    dl, dt, dd, ul, li {
    margin: 0;
    padding: 0 10px;
    list-style-type: none;
    }
    #menu {
    position: absolute;
    top: 0;
    left: 0;
    }
    dl#menu {
    width: 15em;
    }
    dl#menu dt {
    cursor: pointer;
    margin: 2px 0;;
    height: 20px;
    line-height: 20px;
    text-align: left;
    font-weight: bold;
    border: 1px solid gray;
    background: #ccc;
    }
    dl#menu dd {
    border: 1px solid gray;
    }
    dl#menu li {
    text-align:left;
    background: #fff;
    }
    dl#menu li a, dl#menu dt a {
    color: #000;
    text-decoration: none;
    display: block;
    border: 0 none;
    height: 100%;
    }

    dl#menu li a:hover, dl#menu dt a:hover {
    background: #eee;
    }

    #mentions {
    font-family: verdana, arial, sans-serif;
    position: absolute;
    bottom : 200px;
    left : 10px;
    color: #000;
    background-color: #ddd;
    }
    #mentions a {text-decoration: none;
    color: #222;
    }
    #mentions a:hover{text-decoration: underline;
    }

    -->
    </style>
    </head>

    <body>

    <dl id="menu">

    <dt onclick="javascript:montre();"><a href="#">Home</a></dt>

    <dt onclick="javascript:montre('smenu2');">Sport</dt>
    <dd id="smenu2">
    <ul>
    <li><a href="#">Fussball</a></li>
    <li><a href="#">Handvall</a></li>

    <li><a href="#">Basketball</a></li>
    </ul>
    </dd>

    </dl>



    </body>
    </html>
     
    lari, 29.11.2005
  2. sikomat

    sikomatMacUser Mitglied

    Mitglied seit:
    21.11.2005
    Beiträge:
    3.482
    Zustimmungen:
    0
    probier mal "display: block;" und entsprechende breite bei den hoover-tags. ;)

    und nicht vergessen bei angabe einer hintergrundfarbe auch eine vordergrundfarbe
    anzugeben. nicht direkt ein fehler, erzeugt aber eine warnung im validator.
     
    sikomat, 29.11.2005
  3. lari

    lari Thread StarterMacUser Mitglied

    Mitglied seit:
    01.10.2003
    Beiträge:
    225
    Zustimmungen:
    6
    ja display:block steht ja schon da, und die hover-größe gebe ich dann wie an?
     
    lari, 29.11.2005
  4. sikomat

    sikomatMacUser Mitglied

    Mitglied seit:
    21.11.2005
    Beiträge:
    3.482
    Zustimmungen:
    0
    mit "width: " möglicherweise?
     
    sikomat, 29.11.2005
  5. lari

    lari Thread StarterMacUser Mitglied

    Mitglied seit:
    01.10.2003
    Beiträge:
    225
    Zustimmungen:
    6
    tja, width, aber welche Breite denn. Ich habe den Code ja nicht selbst geschrieben, sondern aus dem Netz gezogen und ein wenig verändert, weißt du,
    habe da also nicht so die ganz große Ahnung. Es wäre cool wenn mal jemand den Code einfach ausprobiert und die einzwei Parameter, die man ändern muss durchgibt. Ich habe schon alles ausprobiert und komm leider nicht selbst drauf.
     
    lari, 29.11.2005
  6. sikomat

    sikomatMacUser Mitglied

    Mitglied seit:
    21.11.2005
    Beiträge:
    3.482
    Zustimmungen:
    0
    die breite vom menü scheint das hier zu sein:

    dl#menu {
    width: 15em;
    }

    also kannst du für die hoover 100% nehmen.
     
    sikomat, 29.11.2005
  7. lari

    lari Thread StarterMacUser Mitglied

    Mitglied seit:
    01.10.2003
    Beiträge:
    225
    Zustimmungen:
    6
    hab's versucht, geht leider immer noch nicht
     
    lari, 30.11.2005
Die Seite wird geladen...