zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden navigation, wer findet den fehler?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.05.2015, 15:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.07.2014
Beiträge: 16
simbaiskilla befindet sich auf einem aufstrebenden Ast
Standard navigation, wer findet den fehler?

Hallo habe folgende Navigation gebastelt, allerdings springt diese immer mit hoch und runter, wenn ich über die Links fahre. Eigentlich sollte sie ganz oben in der Mitte fixiert sein und nur die einzelnen Balken ausfahren. Mir ist wichtig, dass es mit text-align center gelöst wird und nicht mit fixed breite und margin:0 auto ... weil es so flexibler und anpassungsfähiger ist.
MFG

hier der html-code:
<!doctype html>
<html>
<head>
<link href="nav.css" type="text/css" rel="stylesheet" />
<meta charset="utf-8">
</head>
<body>
<nav>
<ul>
<a id="nav1" href="index.html"><li><span>Nav1</span></li></a>
<a id="nav2" href="index.html"><li><span>Nav2</span></li></a>
<a id="nav3" href="index.html"><li><span>Nav3</span></li></a>
<a id="nav4" href="index.html"><li><span>Nav4</span></li></a>
<a id="nav5" href="index.html"><li><span>Nav5</span></li></a>
<a id="nav6" href="index.html"><li><span>Nav6</span></li></a>
<a id="nav7" href="index.html"><li><span>Nav7</span></li></a>
</ul>
</nav>

</body>
</html>

hier CSS:

body {
margin-top: 0px;
margin-bottom: 0px;

}

nav{
margin-top:20px;
background-color: white;
position: fixed;


width: 100%;



}

nav ul {

margin-top: 0px;
margin-bottom: 0px;

text-align: center;

}

nav ul li {
border-top: 5px solid grey;
font-family: helvetica;
float: left;
list-style-type: none;
text-decoration: none;
padding: 0px 30px;
height: 0px;


}

a {
color: grey;
padding-top: 0px;
display:inline-block;



}

a li{
margin-left: 15px;
-webkit-transition:all .2s ease-out;
-moz-transition:all .2s ease-out;
-ms-transition:all .2s ease-out;
-o-transition:all .2s ease-out;
transition:all .2s ease-out;


}

a:hover li{
-webkit-transform:translate(0px,10px);
-moz-transform:translate(0px,10px);
-ms-transform:translate(0px,10px);
-o-transform:translate(0px,10px);
transform:translate(0px,10px);



}

#nav1:hover li{
border-top: 20px solid #48008A;
color: #48008A;
}

#nav2:hover li{
border-top: 20px solid #009AFF;
color: #009AFF;
}

#nav3:hover li{
border-top: 20px solid #00FF00;
color: #00FF00;
}

#nav4:hover li{
border-top: 20px solid #FFFF00;
color: #FFFF00;
}

#nav5:hover li{
border-top: 20px solid #FF6600;
color: #FF6600;
}

#nav6:hover li{
border-top: 20px solid #DE0000;
color: #DE0000;
}

#nav7:hover li{
border-top: 20px solid #7FFF00;
color: #7FFF00;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.05.2015, 15:56
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

dein HTML ist fehlerhaft!

BTW: bitte Code im Forum in die Tags packen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.05.2015, 10:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.07.2014
Beiträge: 16
simbaiskilla befindet sich auf einem aufstrebenden Ast
Standard

Was soll denn bitte an dem html falsch sein?? Die Spans nicht notwendig .. aber schaden ja grad auch nicht, bzw.. sind nicht das problem ... Was meinst du mit in die Tags packen?

Geändert von simbaiskilla (27.05.2015 um 10:18 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 27.05.2015, 10:15
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.214
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Es gibt die Möglichkeit, Code in [ CODE ] Tags zu packen [ /CODE ] (ohne Leerzeichen) Das schaut dann so aus:
Code:
<ul> <li> Ich bin ein Listenelement </li> </ul>
Reicht dir der Code um deinen Fehler zu finden? Falls nicht, lass deinen Code validieren (nach html validator suchen)
Mit Zitat antworten
  #5 (permalink)  
Alt 27.05.2015, 10:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.103
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Reicht dir der Code um deinen Fehler zu finden?
Oder kurz: Direkte Nachfahren von ul-Elementen dürfen nur li-Elemente (und damit keine a-Elemente) sein.

Gruss

MrMurphy
Mit Zitat antworten
  #6 (permalink)  
Alt 27.05.2015, 10:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.07.2014
Beiträge: 16
simbaiskilla befindet sich auf einem aufstrebenden Ast
Standard

hmm wollte aber dass die balken oben, die ich über li border-top erzeugt habe auch anklickbar sind, wie ist das sonst zu schaffen? mfg
Mit Zitat antworten
  #7 (permalink)  
Alt 27.05.2015, 10:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.214
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Indem du dem li kein padding oder margin gibst und den Link als blockelement definierst. Dann ist der Link exakt so groß wie das Listenelement. Gib dem border also einfach dem Linkelement
Mit Zitat antworten
  #8 (permalink)  
Alt 27.05.2015, 10:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.07.2014
Beiträge: 16
simbaiskilla befindet sich auf einem aufstrebenden Ast
Standard

Nein sorry funktioniert alles bestens tausend Dank !!!!

Geändert von simbaiskilla (27.05.2015 um 11:05 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 27.05.2015, 12:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.07.2014
Beiträge: 16
simbaiskilla befindet sich auf einem aufstrebenden Ast
Standard schade zu früh gefreut ...

hmm also in firefox wirds immernoch anders als in den anderen browsern angezeigt ...

positiv in firefox:
Kein Abstand von der Navigation zum oberen Rand ... verstehe nicht wie der in den anderen Browsern entsteht ...

negativ:
die Navigation "schwappt" hoch und runter beim fahren über die Links.

PS: Habe alle bisher erhaltenen Tipps umgesetzt.

Wie bekomme ich die Navigation in allen Browsern nach ganz oben und schaffe, dass auch in Firefox nur der Link "ausfährt", über den ich mit der Maus fahre.

MFG
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 27.05.2015, 12:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.214
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Ohne Code können wir dazu nicht wirklich was sagen.
Mit Zitat antworten
Sponsored Links
Antwort

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
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 12:25
IE: Fehler bei border in Navigation pospiech CSS 1 26.01.2008 15:28
Problem mit Line-Height auf dem IE lte 6 actionjackson CSS 2 20.11.2007 10:17
Ul mit Sub-Ul Navigation macht Darstellungsprobleme im Opera eRoZion CSS 17 16.09.2005 09:30
Problem mit MacIE / Opera - Schrift viel zu klein, Formulare Boris CSS 32 30.08.2005 12:37


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:08 Uhr.