Hover Effekt bei Bildern: Problem

[rockbike_felix]

ich möchte, dass wenn man über links fährt, diese ihr bild verändern. das habe ich auch geschafft, aber es wird nach dem upload beim hoster nichts angezeigt...
hier die codes:

das steht im head:

<link rel="stylesheet" type="text/css" href="foto1.css">

<link rel="stylesheet" type="text/css" href="foto-link1.css">

<link rel="stylesheet" type="text/css" href="foto-linkhover1.css">

foto1.css:

.foto1
{
background: url(hhome.jpg) no-repeat;
}

foto-link1.css:

.foto-link1
{
width: 84px;
height: 35px;
float: left; 
}

foto-linkhover1:

.foto-link1:hover
{
background-position: 0 -35px;
}

in html eingebunden:

<div class="navtop">
   <a href="index.php" class="foto-link1 foto1"></a>
</div>

wenn ich die datei mit firefox öffne, funktioniert alles, aber auf dem server hängt es irgendowie...

http://rockbike4cross.team.cx/index.php

 

[vitus37]

Deine Dateibeziehungen stimmen nicht. Die in den CSS-Dateien als background definierten Bilder verweisen auf nicht vorhandene Bilder. Überprüfe das mal.

Übrigens:
Da eine Navigation bzw. ein Menü aus einer Liste von Links besteht, solltest du es/sie auch als eine auszeichnen:

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

Gruß

 

[rockbike_felix]

Deine Dateibeziehungen stimmen nicht. Die in den CSS-Dateien als background definierten Bilder verweisen auf nicht vorhandene Bilder. Überprüfe das mal.

das ist doch alles nur 1 einziges bild, was nicht immer voll angezeigt wird

Übrigens:
Da eine Navigation bzw. ein Menü aus einer Liste von Links besteht, solltest du es/sie auch als eine auszeichnen:

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

Gruß

und damit verschieb ich die links wieder. sie sollen aber in einer ebene liegen

 

[vitus37]

das ist doch alles nur 1 einziges bild, was nicht immer voll angezeigt wird

Rufe doch selbst mal die Datei
http://rockbike4cross.team.cx/hhome.jpg
auf, du wirst merken, das Bild existiert nicht, auch wenn es das einzigste ist.

und damit verschieb ich die links wieder. sie sollen aber in einer ebene liegen

Was auch völlig richtig ist, denn mit HTML layoutet oder designd man nicht. Das ist die alleinige Aufgabe von CSS.

ul{
    list-style: none;
}
ul li{
    float: left;
}

 

[rockbike_felix]

ohhh moment! die groß und kleinschreibung in den namen der bilder wurde nicht beachtet! tut mir leid, ich dache sowas ist irrevelant

    li{
    float: left;
}

gibts da auch zentriert?

 

[threadi]

Was willst Du zentrieren? Den Textinhalt des <li>? Dann wäre text-align die CSS-Eigenschaft die Du suchst. Wenn Du das ganze Objekt zentrieren willst, müsstest Du es zum Blockelement machen, auf das floaten verzichten und mit "margin: auto;" versehen.