zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Horizontale Navigation CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.04.2013, 17: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
  #2 (permalink)  
Alt 04.04.2013, 18:08
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.04.2013, 18:54
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

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 04.04.2013, 19:05
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zitat:
Zitat von mLa Beitrag anzeigen
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!
Mit Zitat antworten
  #5 (permalink)  
Alt 04.04.2013, 19:14
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

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 04.04.2013, 19:14
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von mLa Beitrag anzeigen
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.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Antwort

Stichwörter
bilder, css, horizontal, menü, navigation

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit Navigation safari CSS 12 20.04.2011 12:11
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Hilfe bei CSS Navigation trimalchio CSS 7 10.01.2011 14:13
CSS Navigation - Problem mit IE6 pcklinik CSS 4 18.09.2007 13:04
css Navigation nur mit Bildern van-delle CSS 3 14.07.2007 17:08


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:19 Uhr.