Menü hüpft vertikal
dsmabell
- browser
Hallo,
ich teste gerade ein Menü, das aus Tabs besteht. Verwende ein Dropdown-Menü von Dynamic Drive, das ich ein bisschen angepasst habe.
Hier ist diese Seite:
http://purriahs-schatztruhe.de/Dropdown-Tabs/index.htm
Im IE 7 sieht alles super aus, in Firefox, Opera und Netscape springt das Menü und der gesamte darunter stehende Seiteninhalt ein Stück nach unten, wenn die aufgerufene Seite länger als ein Bildschirm ist. Das Problem der Bildlaufleiste links hab ich schon gelöst, die wird jetzt immer angezeigt. Aber die vertikale Verschiebung ist immer noch da. Wie kann ich das verhindern?
Und ich hab noch ein zweites Problem. Wenn ich mit Opera teste und den Tab "GameGuideWiki" wähle, wird der Inhalt eingerückt dargestellt.
Ich verwende für das Menü die tabs.css, sieht so aus:
.tabs{
border-bottom: 1px solid gray;
}
.tabs ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.tabs li{
display: inline;
margin: 0;
}
.tabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: #d3b08a url(media/shade.gif) top left repeat-x; /*THEME CHANGE HERE*/
}
.tabs li a:visited{
color: #2d2b2b;
}
.tabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}
.tabs li.selected{
}
.tabs li.selected a{ /*selected main tab style */
background-image: url(media/shadeactive.gif); /*THEME CHANGE HERE*/
border-bottom-color: #d3b08a;
}
.tabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv_b{
position:absolute;
top: 0;
border: 1px solid #2d2b2b; /*THEME CHANGE HERE*/
border-width: 0 1px;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: #d3b08a;
width: 200px;
visibility: hidden;
}
.dropmenudiv_b a{
width: auto;
display: block;
text-indent: 5px;
border: 0 solid #2d2b2b; /*THEME CHANGE HERE*/
border-bottom-width: 1px;
padding: 2px 0;
text-decoration: none;
color: black;
}
* html .dropmenudiv_b a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv_b a:hover{ /*THEME CHANGE HERE*/
background-color: #dec4a8;
}
Kann mir bitte jemand helfen?
Hallo dsmabell,
nur auf den ersten Blick: einige Deiner css-Klassenbezeichnungen enthalten
Unterstriche '(_)'. Das ist, soweit ich weiß, nicht erlaubt.
Best wishes, imho_tep
Danke für den Hinweis, imho_tep. Hab die Underlines entfernt. Aber das Problem besteht leider weiterhin.
Hi,
»
nur auf den ersten Blick: einige Deiner css-Klassenbezeichnungen enthalten
Unterstriche '(_)'. Das ist, soweit ich weiß, nicht erlaubt.
Unterstriche sind erlaubt in Klassennamen.
Und der Netscape Uralt 4.7 spielt inzwischen keine Rolle mehr - den konnte man damit zum Absturz bringen.
cu,
Andreas
Unterstriche sind erlaubt in Klassennamen.
Und der Netscape Uralt 4.7 spielt inzwischen keine Rolle mehr - den konnte man damit zum Absturz bringen.
Hallo MudGuard,
da habe ich "_sollte_ nicht verwendet werden" als "_darf_ nicht..." in
Erinnerung gehabt.
Best wishes, imho_tep
... springt das Menü und der gesamte darunter stehende Seiteninhalt ein Stück nach unten ...
Hallo dsmabell,
hier kommt mein 2. Versuch:
Deine doctype-Deklaration ist bei den Folgeseiten (news.html usw.) verkürzt
und schickt den Browser in den Quirks-Modus. Nimm denselben doctype wie bei
index.html, dann müsste der Spuk vorüber sein.
Best wishes, imho_tep
Bingo! Das war mein Fehler. Vielen Dank, imho_tep. Das Hüpfproblem wäre geklärt. Wenn jetzt noch das Anzeigeproblem bei Opera gelöst werden könnte, wäre ich glücklich.
Grüße,
dsmabell