1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Problem bei CSS

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Stalefish, 06.01.07.

  1. Stalefish

    Stalefish Damasonrenette

    Dabei seit:
    18.10.06
    Beiträge:
    490
    Hallo. Ich bin gerade dabei Css zu lernen und hab eine Frage. Ich habe ul, li so formatiert:
    ul {
    list-style: none;
    margin: 1;
    padding-top: 25px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10 px;
    color: #000000;
    }

    li {
    text-align:center;
    background:url("images/li-bg.png") repeat-x;
    padding-top:5px;
    padding-bottom:7px;
    padding-left:7px;
    padding-right:7px;
    }


    Zwischen den li-tags stehen die Links. Nun möchte ich das, wenn man über den Link fährt, sich background:url("images/li-bg.png") repeat-x; in background:url("images/li-bg-active.png") repeat-x; ändert. Geht das? Wenn ja, wie?
     
  2. flummox

    flummox Jamba

    Dabei seit:
    06.12.04
    Beiträge:
    58
    Hallo,

    du koenntest fuer das Hover-Event von Links eine eigene CSS-Klasse erstellen.

    z.B.

    a.list:hover {
    background:url....
    }

    und dann so einbinden: <li><a href="..." class="list">link</a></li>

    mfg Stefan
     
  3. Stalefish

    Stalefish Damasonrenette

    Dabei seit:
    18.10.06
    Beiträge:
    490

    Anhänge:

  4. TobMan

    TobMan Boskop

    Dabei seit:
    29.03.06
    Beiträge:
    207
    Hi!

    Ich würde es wie folgt machen:
    Dein ul bekommt die id="menu", damit alles wirklich nur auf die li teile angewendet wird und nicht auf andere.
    Dein Source sieht dann wie folgt aus:

    ul#menu {
    list-style: none;
    margin: 1;
    padding-top: 25px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10 px;
    color: #000000;
    }

    ul#menu li {
    text-align:center;
    background:url("images/li-bg.png") repeat-x;
    padding-top:5px;
    padding-bottom:7px;
    padding-left:7px;
    padding-right:7px;
    }

    ul#menu li a:hover
    {
    background: url('deinhoverbild.jpg') repeat-x;
    }

    ich würde noch ein current id setzten:

    ul#menu li#current
    {
    background: url('deinhoverbild.jpg') repeat-x;
    }

    der angeklickte links bekommt dann die id="current" und der user sieht
    immer wo er sich gerade befindet, da die pseudo klasse active nie so recht
    funkioniert, wie ich das will...

    viel glück!
     
  5. Stalefish

    Stalefish Damasonrenette

    Dabei seit:
    18.10.06
    Beiträge:
    490
    Funktioniert leider auch nicht so wie gedacht. Ich habe schon etwas anderes gefunden, sieht auch gut aus, trotzdem danke.
     
  6. Hilarious

    Hilarious Gelbe Schleswiger Reinette

    Dabei seit:
    10.08.05
    Beiträge:
    1.759
    Der Trick ist, mit »display:block« zu selektieren:

    Code:
    li a {
       background:url("images/li-bg.png") repeat-x;
       display: block; }
    
    Allerdings braucht's jetzt noch ein paar weitere Dinge, damit's auch mit dem MSIE fehlerfrei klappt, aber das wäre schon einmal ein Anfang.
     

Diese Seite empfehlen