Beiträge von VeryPrivat

VeryPrivat · 25. April 2020

Die Funktionalität, die in Zelle in Tabelle hervorheben "gezeigt" wurde- also die Zeile hervorheben, wenn man drüber fährt finde ich toll. Leider habe ich vor einiger Zeit meine Tabellen in Grid umgewandelt, da der Onlinevalidator gemeckert hat. Ich wollte daher fragen, ob es in einem Grid auch möglich ist die Zeile über die man gerade fährt hervorzuheben.

Hier ein kleiner Auszug des Codes zur Veranschaulichung.

HTML

<link rel="stylesheet" href="html5.css">  <!--MUSS AN ERSTER STELLE STEHEN (ESP spezifisch!)-->
<!DOCTYPE html>
<html lang="de">
<meta charset="utf-8">
<style>
.grid-funk {
    display:grid; /*Tabellendarstellung*/
    grid-gap:5px; /*Breite der TabellenInnenlinien)*/
    background-color:#2AF; /*Farbe der Tabelle: Blau*/
    padding:5px; /*Rahmenbreite Tabelle außen*/
}
.grid-funk {
    grid-template-columns:auto 23% 23%; /*Spaltenbreite: Rest, 1/4, 1/4*/
    grid-template-rows:auto; /*Spaltenhöhe (auto=Standard)*/
}
</style>

<title>GridHoverTest</title>
<body>
<div class="grid-funk">
    <div>Internet</div>
    <div class="CellBtn"><a class="btnLnkOn" href="cmd?type=funk&file=funk.cfg&ID=InetAn">AN</a></div>
    <div class="CellBtn"><a class="btnLnkOff" href="cmd?type=funk&file=funk.cfg&ID=InetAus">AUS</a></div>
    <div>Verst&auml;rker</div>
    <div class="CellBtn"><a class="btnLnkOn" href="cmd?type=funk&file=funk.cfg&ID=AnlAn">AN</a></div>
    <div class="CellBtn"><a class="btnLnkOff" href="cmd?type=funk&file=funk.cfg&ID=AnlAus">AUS</a></div>
</div>
</body>
</html>

Alles anzeigen

Das Problem ist, dass ich keine Möglichkeit weiß, wie ich dem Grid sage was eine Reihe ist - sobald ich ein <span> oder <div> drüber ziehe wird die Zeile in eine Zelle geschrieben.

Ich konnte auch im Internet nichts entsprechendes finde.

VeryPrivat · 25. April 2020

Tolles Feature - kannte ich bisher auch nicht. Interessehalber habe ich auch ein wenig probiert und recherchiert und bin leider auch zu keinem Ergebnis gekommen. Bin gespannt, ob es da tatsächlich eine Lösung gibt - ich gehe vorerst davon aus, dass es nicht funktioniert.

VeryPrivat · 22. April 2020

Zitat von Sempervivum

Ich würde anders herum vorgehen: Es bei dem a-href-Tag belassen, das button-Tag weglassen und das a-href-Tag mit CSS so gestalten, dass es wie ein Button aussieht. Wird ebenfalls so empfohlen, z. B. bei Stackoverflow.

Danke für den Tipp - für meine Zwecke sehr brauchbar. Nach langem probieren bin ich jetzt auf folgende Einstellungen gekommen (falls jemand ein ähnliches Problem lösen möchte). Es handelt sich um einen Auszug meines Codes:

CSS: html5.css

<style>
.btnLnkOn{
    font-size: 1em; /*Button Schriftgröße: Relativ grid-funk!*/
    width:8em; /*Buttonbreite*/
    border-radius:10px; /*Abgerundete Ecken*/
    padding:5px 10px; /*Rahmenabstand zu Text (Button wird größer)*/ 
    border: outset;    /*Rahmendarstellung: Unbetätigt*/
    border-color: #24D; /*Rahmenfarbe: Bläulich*/
    background: linear-gradient(#fff,#aaa); /*Verlauf hellgrau > dunkelgrau*/
    color:#000; /*Schriftfarbe: Schwarz*/
    text-decoration:none; /*Kein Textformat (Standard bei Link: Unterstrichen)*/
    transition:.5s; /*Animationsdauer*/
    text-align:center;  /*Button Text zentriert*/
    margin: auto;        /*Abstand des Buttons*/
    display: block; /*Ermöglicht zentrieren des Textes und width*/
}
</style>

Alles anzeigen

HTML: LinkAsButton.html

<!DOCTYPE html>
<html lang="de">
<meta charset="utf-8">
<link rel="stylesheet" href="html5.css">
<title>GRID-TEST!</title>
<div><a class="btnLnkOn" href="cmd?type=funk&file=funk.cfg&ID=InetAn">AN</a></div>
</html>

Vielen Dank für die rasche und kompetente Hilfe (an alle!)!

VeryPrivat · 21. April 2020

Oh, den Vorschlag von Sempervivum habe ich ganz überlesen, sorry! Das klingt auch interessant - ich werde mich mal daran versuchen. Ich hoffe ich kriege das (auch) hin. Im .css File habe ich schon so viel verdreht - da kommt es darauf wohl auch nicht mehr an

Sobald es klappt oder ich nicht weiter komme, werde ich es hier posten!

VeryPrivat · 21. April 2020

Vielen Dank für die Hilfe! Da hätte ich vermutlich ewig gebraucht. Der Befehl wird dadurch schon ganz schön aufwändig:

aus <a href="cmd?type=funk&file=funk.cfg&ID=InetAn"><button class="button buttonOn">AN</button></a>

wird jetzt z.B.:

HTML

<form action="cmd" method="get">
  <input class="btn" type="hidden" name="type" value="funk">
  <input class="btn" type="hidden" name="file" value="funk.cfg">
  <input class="btn" type="hidden" name="ID" value="InetAn">
  <button class="buttonOn">AN</button></div>
</form>

HTML kann schon ganz schön aufwändig werden...
Nachtrag: Über Tipps, wie ich das (z.B. mit .css oder übergreifender Definition) noch vereinfachen kann, würde ich mich freuen. Immerhin habe ich 12 Buttons und speicher auf einem ESP8266 ist ein beschränktes Gut.

VeryPrivat · 21. April 2020

Ich programmiere für meinen ESP8266 html Seiten und stoße dabei immer wieder an meine Grenzen. Bisher habe ich unter anderem folgenden Button verwendet: <a href="cmd?type=funk&file=funk.cfg&ID=InetAn"><button class="button buttonOn">AN</button></a>

Das hat auch so funktioniert - der ESP hat das Kommando bekommen, ausgewertet und das gemacht was er soll. Da der HTML online Validator aber darüber gemeckert hat: "The element “button” must not appear as a descendant of the “a” element.", habe ich die Buttons auf Formen umgeschrieben (laut Hinweise im Internet):

<form class="btn" action="cmd?type=funk&file=funk.cfg&ID=InetAus"><button class="buttonOff">AUS</button></form>

Leider wird jetzt der Link nicht mehr beim über den Button fahren angezeigt (nicht so schlimm) und offensichtlich der Link nur mehr bis cmd? geschickt. Ich verstehe nicht warum und wie ich das lösen kann. Wie ersetzt man jetzt den Button im ersten Befehl "richtig".

Beiträge von VeryPrivat

Zeile hervorheben bei Grid?

Zelle in Tabelle hervorheben

Input statt Button: Keine Argumente

Input statt Button: Keine Argumente

Input statt Button: Keine Argumente

Input statt Button: Keine Argumente