nicht angemeldet
Matthias Apsel
Der Martin
Der Martin
Der Martin
MudGuard
Gunnar Bittersmann
Hi(gh)!
Nachdem man mir schon 2006 erklärt hatte, dass Javascript für Mouseover-Effekte ein ganz großes No-No ist und es mit CSS doch viel einfacher geht, versuche ich jetzt endlich, meine Webseiten auf CSS-Navigation umzustellen.
Die Navigationsschaltflächen sind <div>-Elemente, die ihrerseits innerhalb eines <div> notiert sind. Folglich müsste die entsprechende Pseudoklasse so definiert sein:
div div:hover
{
background-color:#f163a3;
border-style:solid;
border-width:2px;
border-top-color:#ffe7e7;
border-right-color:#ffe7e7;
border-left-color:#c0597f;
border-bottom-color:#co587f;
}
Leider passiert beim Überfahren mit der Maus rein gar nichts... wieso?
Bis bald im Khyberspace!
Yadgar
Om nah hoo pez nyeetz, Yadgar!
Die Navigationsschaltflächen sind <div>-Elemente, die ihrerseits innerhalb eines <div> notiert sind.
Navigationsschaltflächen führen zu anderen Stellen (d)eines Webauftritts und sollten deshalb Link-Elemente sein, die ihrerseits in einer Liste notiert sind, letztere eventuell in einem "div class='nav'" oder in einem nav-Element (html5)
div div:hover
{
background-color:#f163a3;
border-style:solid;
border-width:2px;
border-top-color:#ffe7e7;
border-right-color:#ffe7e7;
border-left-color:#c0597f;
border-bottom-color:#co587f;
}
>
> Leider passiert beim Überfahren mit der Maus rein gar nichts... wieso?
CSS allein ist ohne das HTML, auf das es Auswirkungen haben soll, ohne Aussage.
Matthias
--
1/z ist kein Blatt Papier.
Om nah hoo pez nyeetz, Yadgar!
Muss ich das verstehen?
CSS allein ist ohne das HTML, auf das es Auswirkungen haben soll, ohne Aussage.
Wieso, der Bezug ist doch durch den Selektor "div div" hergestellt! Laut SELFHTML muss ich im Tag nicht noch zusätzlich eine ID angeben...
Bis bald im Khyberspace!
Yadgar
Om nah hoo pez nyeetz, Yadgar!
CSS allein ist ohne das HTML, auf das es Auswirkungen haben soll, ohne Aussage.
Wieso, der Bezug ist doch durch den Selektor "div div" hergestellt! Laut SELFHTML muss ich im Tag nicht noch zusätzlich eine ID angeben...
Das ist damit nicht gemeint.
Beispiel: CSS div {color: red;} und in deinem HTML gibt es gar kein div-Element.
Matthias
Hallo,
Die Navigationsschaltflächen sind <div>-Elemente, die ihrerseits innerhalb eines <div> notiert sind.
semantisch sinnvoller wären wohl a-Elemente, die ihrerseits in li-Elementen untergebracht und in einem gemeinsamen ul-Element gruppiert sind.
Folglich müsste die entsprechende Pseudoklasse so definiert sein:
div div:hover
{
background-color:#f163a3;
border-style:solid;
border-width:2px;
border-top-color:#ffe7e7;
border-right-color:#ffe7e7;
border-left-color:#c0597f;
border-bottom-color:#co587f;
}
>
> Leider passiert beim Überfahren mit der Maus rein gar nichts... wieso?
In welchem Browser? Ich rate mal: Internet Explorer. Und ich rate weiter: Du schickst ihn in den Quirks Mode, in dem er sich ungefähr wie ein IE6 verhält und :hover plötzlich nur noch für Links kennt.
Ciao,
Martin
--
Man ist so alt, wie man sich fühlt.
Aber niemals so wichtig.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
In welchem Browser? Ich rate mal: Internet Explorer. Und ich rate weiter: Du schickst ihn in den Quirks Mode, in dem er sich ungefähr wie ein IE6 verhält und :hover plötzlich nur noch für Links kennt.
Nein, Firefox... leider unter Windows, vielleicht ist das der Grund?
Bis bald im Khyberspace!
Yadgar
Hallo,
In welchem Browser? Ich rate mal: Internet Explorer. Und ich rate weiter: Du schickst ihn in den Quirks Mode, in dem er sich ungefähr wie ein IE6 verhält und :hover plötzlich nur noch für Links kennt.
Nein, Firefox... leider unter Windows, vielleicht ist das der Grund?
nein, eher nicht. Soweit ich bisher weiß, verhält sich Firefox unter Windows und Linux weitgehend gleich. Aber das wäre vielleicht der Moment, wo du das Problemkind mal online zeigen solltest, so dass man sich selbst ein Bild machen und die möglichen Probleme erkunden kann.
Ciao,
Martin
Hi(gh)!
nein, eher nicht. Soweit ich bisher weiß, verhält sich Firefox unter Windows und Linux weitgehend gleich. Aber das wäre vielleicht der Moment, wo du das Problemkind mal online zeigen solltest, so dass man sich selbst ein Bild machen und die möglichen Probleme erkunden kann.
Here you are!
Bis bald im Khyberspace!
Yadgar
Hallo,
Here you are!
ich würde auf den ersten Blick mal sagen, das Problem liegt an diesen zwei Stellen:
div a div:hover
{
....
}
<a href="yadgar-d.html"><div style="top:10px">Yadgar kompakt</div></a>
Ein a-Element darf nur inline-Elemente oder reinen Text enthalten, aber keine Blockelemente. Vermutlich korrigiert der Firefox das intern automatisch, so dass das a-Element mit dem öffnenden div-Tag automatisch geschlossen wird und somit keinen Inhalt hat. Und dann gibt es natürlich auch kein Element mehr, auf das der CSS-Selektor passen würde.
Die entscheidende Frage ist: Was hat das div-Element innerhalb von a für einen Sinn? Sinnvoller wäre es doch, das a-Element mit display:block selbst zum Blockelement zu machen und entsprechend zu formatieren.
So long,
Martin
Hi,
Here you are!
ich würde auf den ersten Blick mal sagen, das Problem liegt an diesen zwei Stellen:
div a div:hover
{
....
}
>
> `<a href="yadgar-d.html"><div style="top:10px">Yadgar kompakt</div></a>`{:.language-html}
>
> Ein a-Element darf nur inline-Elemente oder reinen Text enthalten, aber keine Blockelemente.
hatte ich auch erst vermutet.
Aber: wenn man über dem Yadgar mal per Rechtsklick und Inspect Element nachguckt, sieht man, daß man da erst mal ein p-Element erwischt. Und nicht den darunterliegenden Link.
> Vermutlich korrigiert der Firefox das intern automatisch, so dass das a-Element mit dem öffnenden div-Tag automatisch geschlossen wird und somit keinen Inhalt hat.
erstaunlicherweise nicht, wie ein Selektieren und View Selection Source zeigt.
cu,
Andreas
--
[Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)
[O o ostern ...](http://ostereier.andreas-waechter.de/)
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
Hi(gh)!
Aber: wenn man über dem Yadgar mal per Rechtsklick und Inspect Element nachguckt, sieht man, daß man da erst mal ein p-Element erwischt. Und nicht den darunterliegenden Link.
Ich habe gar kein <p> notiert!
Bis bald im Khyberspace!
Yadgar
Hi(gh)!
Die entscheidende Frage ist: Was hat das div-Element innerhalb von a für einen Sinn? Sinnvoller wäre es doch, das a-Element mit display:block selbst zum Blockelement zu machen und entsprechend zu formatieren.
Das habe ich jetzt gerade versucht, also das innere <div> durch ein blockformatiertes <a> ersetzt und die CSS-Definitionen entsprechend angepasst - es funktioniert trotzdem nicht, keine Reaktion beim Überfahren mit der Maus!
Ich habe es noch mal hochgeladen...
Was ist das alles frustrierend kompliziert... warum kann so etwas nicht so einfach wie Fahrradfahren sein?
Bis bald im Khyberspace!
Yadgar
Hallo,
Das habe ich jetzt gerade versucht, also das innere <div> durch ein blockformatiertes <a> ersetzt und die CSS-Definitionen entsprechend angepasst - es funktioniert trotzdem nicht, keine Reaktion beim Überfahren mit der Maus!
Ich habe es noch mal hochgeladen...
ich kann nur bestätigen, was Andreas schon festgestellt hat: Das Element wird von einem p-Element überlagert. Und zwar dem p-Element des Inhalts-Bereichs mit dem "bla bla bla". Warum das so einen merkwürdigen Offset hat, kann ich aber im Moment auch nicht sagen - da werde ich aus der Anzeige von Firebug selbst nicht schlau.
Was ist das alles frustrierend kompliziert... warum kann so etwas nicht so einfach wie Fahrradfahren sein?
Du meinst, so einfach wie C programmieren? ;-)
Ciao,
Martin
High!
ich kann nur bestätigen, was Andreas schon festgestellt hat: Das Element wird von einem p-Element überlagert. Und zwar dem p-Element des Inhalts-Bereichs mit dem "bla bla bla". Warum das so einen merkwürdigen Offset hat, kann ich aber im Moment auch nicht sagen - da werde ich aus der Anzeige von Firebug selbst nicht schlau.
Ich habe die "bla bla bla"-<p>-Absätze jetzt mal lokal auskommentiert - jetzt funktioniert der Mouseover-Effekt! Ich verstehe aber auch nicht, wieso das <p> die Navigationselemente überlagert - ich habe für <p> ein padding-right:122px festgelegt, die sollten sich also nicht ins Gehege kommen!
Oder bleibt mir nichts anderes übrig, als den mittleren Bereich (für den Fließtext) explizit für 1024x768 Pixel zu formatieren und ihm eine feste rechte Grenze zu verpassen?
Bis bald im Khyberspace!
Yadgar
<Ingrid>
Hi(gh)!
Es sieht so aus, als hätte ich eine Lösung gefunden: wenn ich auf
p { padding-right: 120px }
verzichte und stattdessen das mittlere <div> mit margin-right: 120px formatiere, wird nichts mehr überlagert und der Mouseover-Effekt funktioniert!
Oder muss ich jetzt wieder mit irgendwelchen unerwarteten Seiteneffekten rechnen?
Bis bald im Khyberspace!
Yadgar
</Ingrid>
@@Der Martin:
nuqneH
Ein a-Element darf nur inline-Elemente oder reinen Text enthalten, aber keine Blockelemente.
Du solltest deine HTML-Kenntnisse auf den neuesten Stand bringen.
Qapla'
Hi,
Ein a-Element darf nur inline-Elemente oder reinen Text enthalten, aber keine Blockelemente.
Du solltest deine HTML-Kenntnisse auf den neuesten Stand bringen.
auf HTML 5? Nein danke. Ich bleibe lieber bei HTML 4.01 oder XHTML 1.0 und propagiere das auch so.
Ciao,
Martin
Om nah hoo pez nyeetz, Der Martin!
auf HTML 5? Nein danke. Ich bleibe lieber bei HTML 4.01
+1
und propagiere das auch so.
zumindest solange, wie IE6-8 noch berücksichtigt werden sollen
Matthias