Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 04.04.2013, 16:29
mLa mLa ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2013
Beiträge: 10
mLa befindet sich auf einem aufstrebenden Ast
Standard 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; ?>
Mit Zitat antworten
Sponsored Links