FF zeigt onmouseover und links nicht wie IE

[Felix Riesterer]

Lieber heiko.hems,

http://www.s-line.de/homepages/hems/

ich mag Deine DIV-Suppe nicht besonders... Bevorzugst Du nicht lieber semantisches Markup (zugegeben, die verlinkte Seite ist etwas schräg...)?

Die Probleme:

1. im FF: nur das erste Bild (ganz links) reagiert richtig auf die onmouseover-Programmierung (aus selfhtml übernommen), die weiteren Bilder werden nicht mal als Links erkannt !? (im IE funktioniert es ??)

Wozu Javascript? Das könntest Du sehr gut mit CSS machen. Das kann dann sogar der IE!

Übrigens _musst_ Du bei numerischen Werten in CSS eine Einheit dazu notieren, sonst bekommst Du in aktuellen Browsern Probleme! Das könnte auch der Grund für Dein Posting hier sein (Ausschnitt aus Deiner "knopp.css"):

#zentriert {  
       position:absolute;  
       top:50%;  
       left:50%;  
       width:800;  
       height:600;  
       margin-left:-400;  
       margin-top:-300;  
       }

Wir reden doch hier von der zentralen Navigation der Seite, oder? Navigationen sind in der Regel Link-Listen. Also verwenden wir das <ul>-Element!

<div id="navigation">  
    <h2>Navigation</h2>  
    <ul>  
        <li><a href="index.html" id="home-link">Home</a></li>  
        <li><a href="buero/buero.html">Wir über uns</a></li>  
        <li><a href="neub/neub.html">Neubau</a></li>  
...  
    </ul>  
</div>

Nun kannst Du mit CSS die Navigation formatieren. Der Überschrift könntest Du gleich ein "display: none" verpassen, denn die willst Du ja nicht anzeigen lassen. Die Listenelemente kannst Du links floaten lassen, eine feste Höhe und Breite zuordnen und jedem Link innerhalb dieses "Kastens" dann ein passendes Hintergrundbild verpassen. Mit :hover kannst Du dann dieses Hintergrundbild verändern.

In einem _externen_ Stylesheet könnte dann das hier stehen:

#navigation {  
    width: 800px;  
    margin: 0 auto;  
    padding: 0px;  
}  
  
#navigation h2 {  
    display: none;  
}  
  
#navigation ul {  
    width: 100%;  
    list-style: none;  
}  
  
#navigation li {  
    float: left;  
    width: 100px;  
    height: 120px;  
    background-color: #blue;  
}  
  
#navigation li a {  
    line-height: 120px;  
    font-size: 10px;  
    font-weight: bold;  
    background-repeat: no-repeat;  
    background-position: center top;  
...  
}  
  
#navigation li a:hover {  
    background-color: yellow;  
}  
  
#home {  
    background-image: url(...);  
}  
  
#home:hover {  
    background-image url(...);  
}

Das Listenelement "#home" entspricht jetzt Deinem "#bild_0"... Ungefähr klar geworden, was ich meine?

Liebe Grüße aus Ellwangen,

Felix Riesterer.