XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Horizontale Navigation CSS (http://xhtmlforum.de/showthread.php?t=69201)

mLa 04.04.2013 16:29

Horizontale Navigation CSS
 
Liebe Community,

erstmal möchte ich hallo sagen, da ich neu bin.
Der Grund wieso ich hierher gefunden habe liegt klar auf der Hand, ich habe ein Problem mit CSS und hoffe das mir hier jemand helfen kann.

Das Problem ist, das ich eine Navi habe, welche eine Liste mit Bildern ist.
HTML:
HTML-Code:

<ul class="nav">
          <li class="home"><a href='#'></a></li>
          <li class="3st"><a href='#'></a></li>
          <li class="com"><a href='#'></a></li>
          <li class="media"><a href='#'></a></li>
          <li class="mitglied"><a href='#'></a></li>
          <li class="kontakt"><a href='#'></a></li>
          <li class="help"><a href='#'></a></li>
</ul>

CSS:
Code:

/* NAVIGATION */
.nav {
        list-style-type:none;
          margin:0;
          padding:0;
        width: 1112px;
        height: 60px;
        display: block;
}
.nav li a {
        display: block;
        background:#000 url(Bilder/navbar.png) 0 0;
}
/* */
.home a {
        width: 128px;
        height: 60px;
        background-position: 0 0;
}
.home a:hover {
        width: 128px;
        height: 60px;
        background-position: 0 -60px;
}
.3st a {
        width: 217px;
        height: 60px;
        background-position: 128px 0;
}
.3st a:hover {
        width: 217px;
        height: 60px;
        background-position: 128px -60px;
}
.com a {
        width: 184px;
        height: 60px;
        background-position: 217px -60px;
}
.com a:hover {
        width: 184px;
        height: 60px;
        background-position: 0 0;
}
.media a {
        width: 119px;
        height: 60px;
        background-position: 0 0;
}
.media a:hover {
        width: 119px;
        height: 60px;
        background-position: 0 0;
}
.mitglied a {
        width: 248px;
        height: 60px;
        background-position: 0 0;
}
.mitglied a:hover {
        width: 248px;
        height: 60px;
        background-position: 0 0;
}
.kontakt a {
        width: 140px;
        height: 60px;
        background-position: 0 0;
}
.kontakt a:hover {
        width: 140px;
        height: 60px;
        background-position: 0 0;
}
.help a {
        width: 76px;
        height: 60px;
        background-position: 0 0;
}
.help a:hover {
        width: 76px;
        height: 60px;
        background-position: 0 0;
}

So das sind erstmal die Codes. Genauer: ich möchte das die Navigation horizontal ist, die Bilder beim hovern eine andere Background-Position besitzen und ein Dropdown menü erscheint. Das mit dem Dropdown menü bekomme ich noch selber hin, ich finde aber den Fehler nicht beim Hovern des Menüs. Background positionen stehen im Moment auf 0, sie standen vorher eigl. in richtiger Position. Dennoch das Bild war dann verschoben.

Ich bitte um Hilfe.

MfG
mLa

P.S.: Link zum anschauen: <? echo PAGETITLE; ?>

explanator 04.04.2013 17:08

Hallo Deine Seite zeigt im Validator jede Menge Fehler:

http://validator.w3.org/check?uri=ht...Inline&group=0

Ausserdem verwendest du Tabellen für dein Design, das macht man nicht.
Fang am Besten noch mal neu an. Verwende die HTML-Elemente richtig. Style mit CSS und Javascript lässt du erst mal aussen vor, das kommt ganz zum Schluss.

Deine Seite sollte folgenden Aufbau haben:
Oben
Mitte
Unten

mLa 04.04.2013 17:54

Ich will es ja nicht validieren, ich will nur das es läuft. Das Problem ist wirklich nur, dass er beim Hovern die Background Position nicht richtig erwischt. Obwohl es gehen müsste.

Manfred62 04.04.2013 18:05

Zitat:

Zitat von mLa (Beitrag 528147)
Ich will es ja nicht validieren, ich will nur das es läuft. Das Problem ist wirklich nur, dass er beim Hovern die Background Position nicht richtig erwischt. Obwohl es gehen müsste.

du willst keinen Führerschein machen bzw. fahren lernen... du willst einfach nur Auto fahren :?

Du hast nicht nur ein Problem, du hast wie o.g. sehr viele!

mLa 04.04.2013 18:14

Ein hilfreicher Tipp , außer 'guck noch mal von vorn & fang anders an', würde mich echt freuen. Sorry, ich bin neu in der Sache und bin froh das erstmal was klappt. Im Endeffekt werd' ich es eh noch ein paar mal umwerfen, aber derzeit will ich nur die Navigation lösen.

explanator 04.04.2013 18:14

Zitat:

Zitat von mLa (Beitrag 528147)
Ich will es ja nicht validieren, ich will nur das es läuft. Das Problem ist wirklich nur, dass er beim Hovern die Background Position nicht richtig erwischt. Obwohl es gehen müsste.

Valide ist Latein und bedeutet Gültig oder Gültigkeit, das heisst wenn dein Code nicht gültig ist dann gilt er nicht, er ist falsch.
Die Browser stimmen da überein und machen was sie wollen wenn sie falschen, also invaliden Code erhalten und daraus resultieren dann viele Darstellungsfehler.

Willst du die Darstellungsfehler wech haben, muss der Code valide sein und der Validator vom W3C zeigt dir hübsch die Fehler an.
Wenn du die Fehler nicht verstehst kannst du immer noch hier fragen oder du bemühst Google translate, den Übersetzungsservice von Google.

Was Manfred62 geschrieben hat trifft es übrigens haargenau.


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:30 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019