|
|||
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; } |
Sponsored Links |
|
|||
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 11:18 Uhr) |
|
|||
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> |
|
|||
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
|
|
|||
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 |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 13:25 |
IE: Fehler bei border in Navigation | pospiech | CSS | 1 | 26.01.2008 16:28 |
Problem mit Line-Height auf dem IE lte 6 | actionjackson | CSS | 2 | 20.11.2007 11:17 |
Ul mit Sub-Ul Navigation macht Darstellungsprobleme im Opera | eRoZion | CSS | 17 | 16.09.2005 10:30 |
Problem mit MacIE / Opera - Schrift viel zu klein, Formulare | Boris | CSS | 32 | 30.08.2005 13:37 |