- - - 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
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.
<span class='t-Art'>Art </span>
<span class='t-Var'>Variante </span>
<span class='t-Zeit'>Zeitraum </span>
<span class='t-Zeit'>Zeitraum2 </span>
<span class='t-Aus'>Auslöser </span>
<span class='t-Taetig'>Tätigkeit </span>
<span class='t-Beschr'>Beschreibung <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> </h3>
<span class='t-Art'><a href='#' class='info'>A<span itemprop='potentialAction'>Aussaat Gurken</span></a> </span>
<span class='t-Var'><a href='#' class='info'>V1<span itemprop='description'>Anbauvarianten Gurken mit zusammengehörigen Terminen</span></a> </span>
<span class='t-Zeit'><a href='#' class='info'>M04<span itemprop='description'>Mitte April</span></a> </span>
<span class='t-Zeit'><a href='#' class='info'><span itemprop='description'></span></a> </span>
<span class='t-Aus' itemprop='description'> </span>
<span class='t-Taetig' itemprop='description'>Vorzucht (warm) </span>
<span class='t-Beschr' itemprop='description'>hell </span>
<div class='newLine'></div>
Ich würde dir eine eine folgende HTML Strucktur empfehlen:
<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 </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> </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>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
