nicht angemeldet
Probleme mit Hover
0 0 0 0 0 0 0 
MudGuard
0
Probleme mit Hover
Hallo,
ich habe einige Probleme mit einem Hover Befehl bzw. mit meinem CSS. Ich möchte eine horizontale Navigation mit Dwop down Menü mittels CSS erstellen. Das Grundgerüst habe ich schon gebastelt, dank einiger Hilfe auch hier aus dem Forum.
Nun habe ich aber das Problem, wenn das drop down menü aufklappt, das ich einen ungewollten Rand bei hover in den menü einträgen erhalte. Wie kann ich dem kompletten Menü einen Rand von 1px geben, sowie zwischen den einzelnen Eintragen ebenfalls eine Linie als Trennung mit 1px. Wenn ich dem <li> den Wert border:1px solid black z. B. gebe, erhalten ich zwar einen Rahmen aber zwischen den Einträgen erscheint dieser doppelt, d. h. 2px stark.
Wer kann mir helfen?
Hier der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynamisch Navigationsleisten einblenden</title>
<style type="text/css">
html,body {
width:100%;
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
body {
background-color:#666666;
}
#box {
width:760px;
height:100%;
background-color:#cccccc;
float:left;
border:1px solid black;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
font: 10px/20px "Lucida Grande", verdana, sans-serif;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin-left:0px;
padding: 0;
background-color:#1E517C;
text-align: center;
width:120px;
height:22px;
}
* html ul#Navigation li { /* Korrektur fuer den IE */
margin-bottom: 0px;
}
ul#Navigation ul li {
background-color:#800000;
width:121px;
}
ul#Navigation li ul {
margin: 0; padding: 0;
margin-left:0px;
position: absolute;
top: 23px; left: 0px;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 120px; /* Breite den in li enthaltenen Elementen zuweisen */
text-decoration: none; font-weight: normal;
color: #ffffff;
padding:0px;
}
ul#Navigation ul li a, ul#Navigation ul li span {
display: block;
width: 120px; /* Breite den in li enthaltenen Elementen zuweisen */
text-decoration: none; font-weight: normal;
background-image:none;
text-align: center;
color: #000000;
}
ul#Navigation ul li a:hover {
background-color:#ffffff;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 70px; /* Breite nach altem MS-Boxmodell für IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
color:#FFA525;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: #ffffff;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
border-color: none;
}
</style>
<!--[if IE]><script type="text/javascript">
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if(LI.firstChild) { // A (SPAN)
if(LI.firstChild.nextSibling) { // #text
if(LI.firstChild.nextSibling.nextSibling) { // UL ?
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
}
}
LI = LI.nextSibling;
}
while(LI);
}
function einblenden() {
this.firstChild.nextSibling.nextSibling.style.display = "block";
this.firstChild.nextSibling.nextSibling.style.backgroundColor = "none";
}
function ausblenden() {
this.firstChild.nextSibling.nextSibling.style.display = "none";
}
window.onload=hoverIE;
</script><![endif]-->
</head>
<body>
<div id="box">
<ul id="Navigation">
<li><a href="#Beispiel">Hauptnavigation</a>
<ul>
<li><a href="#Beispiel">Unternavigation 1</a></li>
<li><a href="#Beispiel">Unternavigation 2</a></li>
</ul>
</li>
<li><a href="#Beispiel">Hauptnavigation</a>
<ul>
<li><a href="#Beispiel">Unternavigation 1</a></li>
<li><a href="#Beispiel">Unternavigation 2</a></li>
</ul>
</li>
</ul>
<div>
</body>
</html>
Gruss und Danke
Thomas
-
puts "Hallo " + gets.chomp + "."
?> Thomas
=> Hallo Thomas.ich habe einige Probleme mit einem Hover Befehl bzw. mit meinem CSS.
Ein Hover-„Befehl“?
Wenn ich dem <li> den Wert border:1px solid black z. B. gebe, erhalten ich zwar einen Rahmen aber zwischen den Einträgen erscheint dieser doppelt, d. h. 2px stark.
Dann nimm eben
border-left:1px solid #000;bzw.border-right:1px solid #000;Ganz geschickt wäre es natürlich, dem first-child eine border-right zuzuweisen und allen anderen
border-rightwieder auf none aber im Gegenzugborder-leftzu definieren.Dann entsteht dieser schöne Effekt:
Eintrag 1 | Eintrag 2 | Eintrag 3 | Eintrag 4
BTW: Bitte kürze den Code beim nächsten Mal auf die relevanten Stellen herunter, nutze hier auch die [code]-Blöcke oder stelle gleich ein Beispiel online.
Einen schönen Donnerstag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
30 Days to becoming an Opera8 Lover -- Day 20: search.ini
Meine Browser: Opera 8.01 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software] -
Hi,
Das Grundgerüst habe ich schon gebastelt, dank einiger Hilfe auch hier aus dem Forum.
und aufbauend auf http://de.selfhtml.org/css/layouts/anzeige/nav_javascript.htm - warum gibst Du nicht einfach diesen Link und Deine Änderungen an?
Nun habe ich aber das Problem
und noch einige mehr, die Dir noch nicht bewußt sind. Denn Du hast offensichtlich das Beispiel noch gar nicht ganz verstanden und nach Try&Error dran rumgebastelt:
body {
background-color:#666666;
}hier fehlt eine Angabe zu font-size, da nachfolgend noch em-Werte notiert sind.
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin-left:0px;
padding: 0;
background-color:#1E517C;
text-align: center;
width:120px;
height:22px;
}Hier überläßt Du den Browser-Voreinstellungen margin-top, margin-right und margin-bottom.
Außerdem gibst Du eine - zudem unpassende - Breite vor.* html ul#Navigation li { /* Korrektur fuer den IE */
margin-bottom: 0px;
}Hier setzt Du für exklusiv den IE margion-bottom auf 0.
ul#Navigation ul li {
background-color:#800000;
width:121px;
}Hier gibst Du wieder - völlig unnötig - eine unpassende Breite vor.
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;}
Hier gibst Du dem IE eine unpassende Positionsangabe
ul#Navigation ul li a, ul#Navigation ul li span {
display: block;
width: 120px; /* Breite den in li enthaltenen Elementen zuweisen */
text-decoration: none; font-weight: normal;
background-image:none;
text-align: center;
color: #000000;
}Bis auf die color-Angabe überflüssig.
* html ul#Navigation a, * html ul#Navigation span {
width: 70px; /* Breite nach altem MS-Boxmodell für IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}Hier vergibst Du abermals unpassene Werte an die IEs.
function einblenden() {
this.firstChild.nextSibling.nextSibling.style.display = "block";
this.firstChild.nextSibling.nextSibling.style.backgroundColor = "none";
}"none" ist keine gültige Angabe für background-color!
freundliche Grüße
Ingo-
Hallo,
wieso muss ich überhaupt für breite oder sonstige Werte em verwenden. Bisher hab ich immer alles mit px erstellt. Das mit em ist mir neu.Wo (in welcher Zeile) steht denn die zentrale Information im Quelltext dass em verwendet wird.
Gruss
Thomas-
hi,
wieso muss ich überhaupt für breite oder sonstige Werte em verwenden. Bisher hab ich immer alles mit px erstellt. Das mit em ist mir neu.
du musst nicht, aber du solltest.
wenn du fixe angaben in px o.ä. benutzt, ist die gefahr groß, dass es in deinem layout zu verschiebungen/überlagerungen kommt, wenn der user die schrift vergrößert.
gibst du elementmaße jedoch relativ in bezug auf die schriftgröße an, können die elemente mit der schrift "mitwachsen".Wo (in welcher Zeile) steht denn die zentrale Information im Quelltext dass em verwendet wird.
was meinst du?
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo wahsaga,
kann ich in meinen css überall für px em anwenden ohne dass ich z. B. in den Metag Tag oder in der ersten Zeile wo ich den Standard angebe etwas beachten muss.
gibt es eine Übersicht wo z. B. steht das 12px 1.2em entsprechen?Gruss
Thomas-
hi,
kann ich in meinen css überall für px em anwenden ohne dass ich z. B. in den Metag Tag oder in der ersten Zeile wo ich den Standard angebe etwas beachten muss.
grundsätzlich ja.
um einen lästigen bug des IE zu vermeiden, empfiehlt sich die angabe für html oder body als 100.01% zu machen (siehe u.a. http://www.1ngo.de/web/em.html).gibt es eine Übersicht wo z. B. steht das 12px 1.2em entsprechen?
möglich, aber - wozu?
gestalte mit sinnvollen em-angaben - die dürften für normalen fließtext um 1em, für überschriften um 1.5 bis 2em, und für eventuelle kleinere, unwichtigere texte um 0.8 bis 1em liegen.
alles weitere hängt dann von der defaultschriftgröße ab, die der betrachter der seite bei sich im browser eingestellt hat - genau so, wie's gedacht ist.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hi,
gibt es eine Übersicht wo z. B. steht das 12px 1.2em entsprechen?
möglich, aber - wozu?Nö, nicht möglich, da das ja gar nicht gehen kann. Um von em in px umrechnen zu können, müßte ja der Umrechnungsfaktor (a/k/a font-size (in Pixeln)) bekannt sein.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
hi,
Nö, nicht möglich, da das ja gar nicht gehen kann. Um von em in px umrechnen zu können, müßte ja der Umrechnungsfaktor (a/k/a font-size (in Pixeln)) bekannt sein.
natürlich.
an solchen übersichten versuchen sich aber trotzdem manche im www - die sich dann beispielsweise auf die defaultschriftgröße eines IE auf einem frisch installierten windows mit defaulteinstellungen beziehen.wirklich "möglich" ist es aber natürlich nicht.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-
-
-
Hi,
Wo (in welcher Zeile) steht denn die zentrale Information im Quelltext dass em verwendet wird.
nirgends. Nur ist es eben grundverkehrt, px- und em-Angaben zu vermischen, so wie Du es gemacht hast.
Und da im Beispiel ja bereits em verwendet wird und dies - wie Du jetzt auch lesen konntest - Vorteile hat, solltest Du einfach dabei bleiben.freundliche Grüße
Ingo
-
-