Opacity funkt nicht ?

nordi0

Ich habe untereinander mehrere Texte mit SPAN für Einblendung von Texten, wenn mit der Maus darübergefahren wird oder darauf geklickt wird.

<a href='#' class='info'>M04-E06Mitte April - Ende Juni</a>
Solche Felder werden mit ähnlichen Feldern untereinander dargestellt. Da die eingeblendete Info gut leserlich sein soll, dürfen die darunterliegenden Informationen nicht durchscheinen. Darunter gibt es noch eine Legende:
Erklärung:...

Habe folgende CSS-Definitionen:

Zitat

a.info { color:#4E6363; text-decoration-style: dotted; text-decoration-line: underline; font-weight: normal; }
a span {display: none; position: absolute; color:#ccffff; background:#008800; padding: 5px; opacity:1.0 !important;} !important
a {position: relative; color:ivory4; }
a:hover span {display: block; text-align: center; font-family:Arial,sans-serif; opacity:1.0 !important; } !important

Trotz des außerhalb der '}' befindlichen 2. !important , was scheinbar fehlerhaft ist, funktioniert alles bestens, sowohl in Firefox als auch im Edge.

Wenn dieses !important außerhalb der Definition jeweils weggenommen wird, wird beim Darüberfahren die Einblendung halb transparent dargestellt, wenn sich
darunter solche gleichen Elemente befinden. Im Gegensatz dazu scheint die Legende, definiert durch

Zitat

.legende { max-width: 1200px; font-size: 90%; font-family:Arial,sans-serif; font-style:italic; text-align: left; }

nicht transparent hindurch!?

Vordergrund und Hintergrundfarbe des eingeblendeten Textes wird immer richtig dargestellt.

Arne Drews

Hi,

Zunächst mal: Das !important gehört in die jeweilige Definition und nicht außerhalb des Blocks!
Weiterhin ist !important fast immer nur das Resultat eines Logik-Fehlers in der Wertigkeit von Styles.

Beispiel:

Code

<div id="bar" class="foo">foobar</div>




DIV { background:#c00; }
DIV.foo { background:#0c0; }
DIV#bar { background:#00c; }

Der DIV würde hier am Ende einen blauen Hintergrund haben, weil jede Reger die vorige durch ihre Wertigkeit überschreibt.

Drehst Du das mal um:

Code

<div id="bar" class="foo">foobar</div>




DIV { background:#c00; }
DIV#bar { background:#00c; }
DIV.foo { background:#0c0; }

, bleibt der DIV blau, denn eine ID hat eine höhere Wertigkeit, wie eine CLASS.
Hier könnte man jetzt bei der CLASS-Rule !important verwenden, um die Wertigkeit der ID zu "überschreiben", aber die sinnvollere Variante ist, sein CSS und dessen Regeln sauber zu ordnen.

Gruß Arne

Gastl

Und zum Titel:
[h=2]Opacity funkt nicht ?[/h]
Ist ja auch kein Sender

Sassar

zu deinem Bsp.:

CSS

HTML:


<a href='#' class='info'>M04-E06<span>Mitte April - Ende Juni</span></a>


CSS: 
a.info   { color:#4E6363; text-decoration-style: dotted; text-decoration-line: underline; font-weight: normal; }
a span {display: none; position: absolute; color:#ccffff; background:#008800; padding: 5px; opacity:1.0 !important;} !important
a {position: relative; color:ivory4; }
a:hover span {display: block; text-align: center; font-family:Arial,sans-serif; opacity:1.0 !important; } !important

Alles anzeigen

Hier wurden gleich mehrere Fehler gemacht welche man ausbessern muss damit es klappt, bzw es sauber ist ohne das du auf anderen Seiten oder später Probleme bekommst.

Die erste Frage die sich mit stellt ist, warum muss es ein LinkTag sein wenn wer mit # markiert ist? Oder ist es derzeit nur ein DummyTag? Das !important ist wie es der Arne Drews bereits beschreibt nur nötig sofern man das CSS unsauber geschrieben hat, oder man über gewisse CSS definitionen die sich alle Gegenseitig beinflussen dafür zu sorgen das diese dennoch gesetzt werden wie zb.:

CSS

<div class="button absolute"></div> 


div.button{ position: relative; }
.absolute{ absolute !important; }

in diesem Beispiel stelle ich somit sicher das ein Element dem ich die Klasse absolute gebe immer Absolute positioniert ist und kann somit diesem Button eine andere Positionierung geben als den Standardbuttons.

Desweiteren setzt du deinen SPAN-Tag auf text-align = center. Ein SPAN-Tag ist jedoch ein fließendes Element welches so breit wie seine Inhalt ist (display = inline). Damit ist die CENTER definition in diesem kontekst nicht richtig. Auch eine reine WIDTH Angabe in dem SPAN-Tag würde nicht direkt den gewünschten erfolg bringen. Erst wenn das Fließverhalten des SPAN-Tags ändert kann man hier auch die Breite des Elements verändern. Hier empfehle ich dem SPAN-Tag zu einer Mischform aus Blockelement und Fließelement zu machen. Quasi ein inline-block (display: inline-block;) Damit kann man nun dem SPAN auch einen Breite geben.

Desweiteren hat das !important nach der schließen Klammer der Cascadendefinition nix zu suchen. Denn das macht dein CSS invalid und die nachfolgende Zeile wird nicht ausgewährtet.

Aber hier ein Beispiel wie es klappt ohne eine Breitenangabe.

Code

HTML:


<a href="#" class="relative info">M04-E06<span class="hidden center">Mitte April - Ende Juni</span></a>




CSS:


body{ 
  font-family:Arial,sans-serif;
}


.relative { position: relative; }
.hidden  { display: none; }


a.info{
  color: #4E6363;
  text-decoration: underline dotted;
  font-weight: normal;
}


a.info > span { 
  padding: 5px;
}


a.info:hover > span {
  display: block;
}

Alles anzeigen

Bitte

nordi0

Danke für die ausführliche Antwort. Ein paar Kommentare zunächst:

- Das Beispiel mit dem LinkTag habe ich so auf einer Webseite gefunden.
- Das mit dem !important außerhalb der Klammer beschreibe ich ja, dass das ein Fehler ist. Nur mit dem Fehler funktioniert es sowohl in Firefox als auch im Edge wie ich mir das auch wünsche. Das ist ja das komische. Nachdem ich herangegangen bin Fehler im CSS auszubessern, welches mir ein Tool anzeigt, ist der Fehler in der Anzeige aufgetaucht.
- Ich habe nirgends woanders opacity oder transparent definiert, ist also völlig überflüssig. Dies zeigt auch in Firefox Entwickler-Werkzeug / Element untersuchen an.

Glaube, da gibts noch ein Mißverständnis. Ich möchte den Span-Text nicht als Zeile, sondern als Block ausgeben, dieser soll den Text herum überdecken, solange man mit der Maus darauf ist. Bei deinem Beispiel wird der Folgetext verschoben, was nicht sein soll. Um den eingeblendeten Text besser lesen zu können, hat er auch eine Hintergrundfarbe... Schau dir mal den Link https://garteln.info/events.php?pflanze=Gurken&monat=da funktioniert es auch. Allerdings mit dem blöden CSS-Fehler !important außerhalb der Klammer. Wenn ich den weglasse, wird die Schrift des eingeblendeten Blocks transparent, allerdings nur, wenn sich andere solche Elemente im Hintergrund befinden. Befindet sich im Hintergrund ein Text z. B. mit , besteht das Problem nicht.

Hoffe, ich habe das Problem jetzt besser umrissen.

modem-kind

http://www.w3schools.com/howto/tryit.as…how_css_tooltip

sämtliche opacity: Angaben darin braucht man gar nicht
Sie sind hier nur fürs weiche einblenden in Verbindung mit
transition: opacity 1s;
(was ja auch schön ist)

Gruß modem-kind

nordi0

Danke, das Beispiel hat mir geholfen. Habe jetzt folgende CSS-Definitionen:

Zitat

a.info { color:#4E6363; text-decoration-style: dotted; text-decoration-line: underline; font-weight: normal; }
a span {display: hidden; position: absolute; color:#ccffff; background:#008800; padding: 5px; z-Index: 1; }
a {position: relative; color:ivory4; }
a:hover span {display: block; text-align: center; font-family:Arial,sans-serif; visibility: visible; }

Bei 'a span' kam 'z-Index: 1' hinzu, bei 'a:hover span' visibility: visible'

Sassar

- - - Aktualisiert - - -

Okay ich habe mir mal deine HTML Strucktur angeschaut. Folgendes Fällt mir hier sofort ins Auge was mir ein Augenbluten verursacht XD

Und zwar baust du eine tabellarische Strucktur auf. Was ich generell erstmal gut finde ist das du keine Table verwendest :), aber man sollte sein HTML semantisch dennoch tabellarisch zusammen stellen.

dazu kommen einige CSS Fehler, wie zb das du SPAN-Elemente linksbündig floatest. Das ist unnötig das SPAN-Elemente standardmäßige Fließelemente sind. Somit reihen diese Sich sowieso nebeneinander an.

Aber um noch schnell deine Frage zu beantworten warum das mit den "!important" nach der klammer funktioniert liegt daran das du mit dem !important das CSS invalid machst. Somit wird die nachfolgende Zeite

CSS

a span {display: none; position: absolute; color:#ccffff; background:#008800; padding: 5px; opacity:1.0 !important;} [COLOR=#ff0000]!important[/COLOR]
[COLOR=#ff0000][U]a {position: relative; color: ivory4; } [/U][/COLOR]

Somit wird diese Zeile nicht interpretiert: a {position: relative; color: ivory4; }
Wenn du nun das !important nach der Klammer entfernst wird diese Zeile wieder gelesen und eine color: ivory4 gibt es nicht. Somit kann es sein das dein Text aufeinmal nicht mehr sichbar ist.

Code

<span class='t-Art'>Art&nbsp;</span>
<span class='t-Var'>Variante&nbsp;</span>
<span class='t-Zeit'>Zeitraum&nbsp;</span>


<span class='t-Zeit'>Zeitraum2&nbsp;</span>
<span class='t-Aus'>Auslöser&nbsp;</span>
<span class='t-Taetig'>Tätigkeit&nbsp;</span>
<span class='t-Beschr'>Beschreibung&nbsp;<br></span>
<div class='newLine'></div>
<br><h3><a hreflang='de' href='/stammdaten.php?pflanze=Gurken' itemprop='mainEntityofPage'><div itemprop='name' style='display:inline'>Gurken</div></a>&nbsp;</h3>
<span class='t-Art'><a href='#' class='info'>A<span itemprop='potentialAction'>Aussaat Gurken</span></a>&nbsp;</span>
<span class='t-Var'><a href='#' class='info'>V1<span itemprop='description'>Anbauvarianten Gurken mit zusammengeh&ouml;rigen Terminen</span></a>&nbsp;</span>
<span class='t-Zeit'><a href='#' class='info'>M04<span itemprop='description'>Mitte April</span></a>&nbsp;</span>
<span class='t-Zeit'><a href='#' class='info'><span itemprop='description'></span></a>&nbsp;</span>
<span class='t-Aus' itemprop='description'>&nbsp;</span>
<span class='t-Taetig' itemprop='description'>Vorzucht (warm)&nbsp;</span>
<span class='t-Beschr' itemprop='description'>hell&nbsp;</span>
<div class='newLine'></div>

Alles anzeigen

Ich würde dir eine eine folgende HTML Strucktur empfehlen:

HTML

<html style="margin: 0; padding: 0;">
    <meta charset="utf-8">
    <title>

    </title>
    <style>
body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}


.pageWrapper {
    margin: 50px auto 0;
    max-width: 1000px;
    width: 100%;
}




.lineWrapper > div {
    box-sizing: border-box;
    display: inline-block;
    padding: 6px 10px 8px;
    vertical-align: top;
    width: 100px;
    position: relative;
    background-color: #ebf4f1;
    min-height: 34px;
    text-align: center;
}
.lineWrapper.headline > div{ text-align: left; }


.lineWrapper > div:nth-child(2n) {
    background-color: #cfe4dd;
}


.lineWrapper > div.variance{ width: 150px; }
.lineWrapper > div.kind,
.lineWrapper > div.sTime,
.lineWrapper > div.eTime{ width: 85px; }
.lineWrapper > div.description{ 
  width: 365px;
  margin-left: 20px; 
  background-color: #fffbcb;
  text-align: left;
}


.lineWrapper {
    margin-bottom: 10px;
}


.lineWrapper .hoverElement .hoverDescription {
    background-color: #008800;
    color: #fff;
    left: 0;
    padding: 6px 10px 8px;
    position: absolute;
    text-align: left;
    top: 36px;
    width: 200px;
    z-index: 10;
}


.lineWrapper .hoverElement{
  cursor: pointer;
}


.lineWrapper .hoverDescription {
  display: none;
}


.lineWrapper .hoverTarget{
  text-decoration: underline dotted;
}
.lineWrapper .hoverElement:hover .hoverDescription{
  display: block;
}
    </style>
    <body>
        <div class="pageWrapper">
            <div itemscope="" itemtype="http://schema.org/Product">

                <h1 itemprop="name">Termine Pflanzen</h1>
                <h2>Pflanze: Gurken - Art:  - Monat: ganzjährig&nbsp;</h2>

                <div class="lineWrapper headline"><!--
                 --><div class="kind">Art</div><!--
                 --><div class="variance">Variante</div><!--
                 --><div class="sTime">Zeitraum</div><!--
                 --><div class="eTime">Zeitraum2</div><!--
                 --><div class="trigger">Auslöser</div><!--
                 --><div class="activity">Tätigkeit</div><!--
                 --><div class="description">Beschreibung</div><!--
             --></div>
                <div class="lineWrapper">
                    <h3><a hreflang="de" href="/stammdaten.php?pflanze=Gurken" itemprop="mainEntityofPage"><div itemprop="name" style="display:inline">Gurken</div></a>&nbsp;</h3>
                </div>
                <div class="lineWrapper"><!--
                 --><div class="kind hoverElement"><span class="hoverTarget">A</span><span itemprop="potentialAction" class="hoverDescription">Aussaat Gurken</span></div><!--
                 --><div class="variance hoverElement"><span class="hoverTarget">V1</span><span itemprop="description" class="hoverDescription">Anbauvarianten Gurken mit zusammengehörigen Terminen</span></div><!--
                 --><div class="sTime hoverElement"><span class="hoverTarget">M04</span><span itemprop="description" class="hoverDescription">Mitte April</span></div><!--
                 --><div class="eTime"></div><!--
                 --><div class="trigger"></div><!--
                 --><div class="activity">Vorzucht (warm)</div><!--
                 --><div class="description">hell</div><!--
             --></div>
                <div class="lineWrapper"><!--
                 --><div class="kind hoverElement"><span class="hoverTarget">A</span><span itemprop="potentialAction" class="hoverDescription">Aussaat Gurken</span></div><!--
                 --><div class="variance hoverElement"><span class="hoverTarget">V1</span><span itemprop="description" class="hoverDescription">Anbauvarianten Gurken mit zusammengehörigen Terminen</span></div><!--
                 --><div class="sTime hoverElement"><span class="hoverTarget">M05</span><span itemprop="description" class="hoverDescription">nach Eisheilige</span></div><!--
                 --><div class="eTime"></div><!--
                 --><div class="trigger"></div><!--
                 --><div class="activity">Auspflanzung</div><!--
                 --><div class="description">Grunddüngung: Pferdemist unter Krume lagern, Aufrankungshilfe vorsehen. Vlies abdecken.</div><!--
             --></div>



            </div>
        </div>


    </body>
</html>

Alles anzeigen

Diese ist a leserlicher und leichter zu erweitern um neue Zeilen. Desweiteren kann man diese Strucktur auch besser in ein extra Template auslagern und Inhalte Serverseitig schneller durch eine Schleife generieren. Auf die unnötigen Links würde ich an deiner Stelle verzichten. Da diese nur unnötige Verwirrung stiften und keine relevants haben. Desweitern würdest du SEO (Search Engine Optimising) eine auf den Deckel bekommen. Da hier viele Links generiert sind die alle keine relevants haben. Jedoch aber Links von einer Surchmaschine also relevanter Inhalt ausgelesen werden. Desweitern sind H3,H4 .. Tags obsolet und sollten auch nicht mehr verwendet werden. Hx-Tags sind Auszeichnungselemente und eine Seite sollte nur noch mit einer H1 Überschirft und ansonsten mit H2 Überschriften für relevante Unterpunkt ausgezeichnet werden. Desweitern ist zu berücksichtigen das im H1-Tag der Text sich mit der Headline gleicht (Sofern man kein Breadcrump in den <title> einbaut.

Desweitern empfehle ich dir bei dein CSS das du Elemente die gleiche Eigenschaften Teilen diese auch zusammen fassen solltest. So sparst du dir, ofte Wiederholungen und falls du mal ein Element in der Farbe ändern willst musst du das nicht an x stellen machen, sondern nur an einer. Darüberhinaus ist das CSS schlanker und damit schneller geladen, was die bei Suchmaschinen auch wieder ein Pluspunkt bringt

So das wars erstmal von mir wieder. Ich hoffe ich konnte etwas licht ins Dunkle HTML Wesen bringen

Lg

adam8matek

Mach' doch in den Container noch ein Element, das nur die Hintergrundfarbe und deren Opacity definiert.

Tags

Benutzer online in diesem Thema