Kleine Aufgabe für CSS-Profis

Dieses Thema im Forum "Web Page Design" wurde erstellt von lari, 29.11.2005.

  1. lari

    lari Thread Starter MacUser Mitglied

    Beiträge:
    224
    Zustimmungen:
    6
    MacUser seit:
    01.10.2003
    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>
     
  2. sikomat

    sikomat Banned

    Beiträge:
    3.496
    Zustimmungen:
    0
    MacUser seit:
    21.11.2005
    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.
     
  3. lari

    lari Thread Starter MacUser Mitglied

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

    sikomat Banned

    Beiträge:
    3.496
    Zustimmungen:
    0
    MacUser seit:
    21.11.2005
    mit "width: " möglicherweise?
     
  5. lari

    lari Thread Starter MacUser Mitglied

    Beiträge:
    224
    Zustimmungen:
    6
    MacUser seit:
    01.10.2003
    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.
     
  6. sikomat

    sikomat Banned

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

    dl#menu {
    width: 15em;
    }

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

    lari Thread Starter MacUser Mitglied

    Beiträge:
    224
    Zustimmungen:
    6
    MacUser seit:
    01.10.2003
    hab's versucht, geht leider immer noch nicht
     
Die Seite wird geladen...

Diese Seite empfehlen