Kleine Aufgabe für CSS-Profis

Diskutiere mit über: Kleine Aufgabe für CSS-Profis im Web Page Design Forum

  1. lari

    lari Thread Starter MacUser Mitglied

    Beiträge:
    224
    Zustimmungen:
    6
    Registriert 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.617
    Zustimmungen:
    0
    Registriert 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
    Registriert 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.617
    Zustimmungen:
    0
    Registriert seit:
    21.11.2005
    mit "width: " möglicherweise?
     
  5. lari

    lari Thread Starter MacUser Mitglied

    Beiträge:
    224
    Zustimmungen:
    6
    Registriert 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.617
    Zustimmungen:
    0
    Registriert 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
    Registriert seit:
    01.10.2003
    hab's versucht, geht leider immer noch nicht
     
Die Seite wird geladen...
Ähnliche Themen - Kleine Aufgabe CSS Forum Datum
CSS Selektor - Leerzeichen Web Page Design 12.09.2015
lokale css-Anweisung für macuser.de? Web Page Design 21.07.2015
Auslagerung von Klassen in CSS-File Web Page Design 02.04.2015
CSS Problem mit Breiten von ul/li Web Page Design 07.10.2014
CSS: Styling von Abonnieren-Feld Web Page Design 20.08.2014

Diese Seite empfehlen

Benutzerdefinierte Suche