Doch, natürlich ist das umsetzbar. Dazu würde ich empfehlen, die Suchfelder in die Tabelle zu integrieren, so wie in dem Beispiel bei Datatables. Dann den Index der Spalte ermittlen, so wie z. B. hier beschrieben:
https://stackoverflow.com/questions/7882…umber-in-jquery
Wenn Du die Suchfelder lieber unabhängig lassen willst, empfehle ich, den Spaltenindex als data-Attribut zu definieren. Dann kannst Du zunächst über die Zeilen iterieren und dann mit eq(idx) das richtige td-Element adressieren.
Dafür gibt es ein sehr gutes Plugin namens datatables:
Suchen ist sowohl global auch auch spaltenweise möglich:
https://datatables.net/examples/api/multi_filter.html
Searching on individual columns can be performed using the
columns().search()andcolumn().search()methods.
Auf dieser Seite finde ich den fraglichen Code nicht?
Bei mir funktioniert es einwandfrei. Ich benutze jQuery 1.10.2. Das von Google sollte kein Problem sein. Kannst Du es online stellen und die URL posten?
Irgendwo ist da das Overlay verloren gegangen. Wenn ich es hinzu füge, klappt es mit dem Verdunkeln.
nur ein kleine Problem ist da noch card_overlay wird nicht geladen oder es greift so nicht mehr die background-color.
Hast Du auch die letzte Version von meinem Skript? Ich hatte zwei Mal editiert, weil ich das mit dem Overlay vergessen hatte.
Wenn es nicht funktioniert, dann poste noch einmal deinen neuen Code.
Na gut, dann lasse ich mal alle Verbesserungsvorschläge außen vor:
<table>
<tbody>
<tr>
<td>
<a data-toshow="card1" href="javascript:void(0)">
<img src="http://file2.npage.de/014720/85/bilder/grabwaechters_vasall.png" title="Grabwächters Vasall" />
</a>
<a data-toshow="card2" href="javascript:void(0)">
<img src="http://file2.npage.de/014720/85/bilder/des_kaenguru.png" title="Grabwächters Vasall" />
</a>
</td>
</tr>
</tbody>
</table>
<div class="card_content" id="card1">
<table id="card_icons">
<tbody>
<tr>
<td align="left" width="80">
<img height="17" src="http://file2.npage.de/014720/85/bilder/stapel.png" width="24" /><font color="white"> 1/20</font>
</td>
<td align="left" width="60">
<img height="17" src="http://file2.npage.de/014720/85/bilder/ex.png" width="14" /><font color="white"> 0/ 2</font>
</td>
<td align="right">
<img src="http://file2.npage.de/014720/85/bilder/ur.png" />
</td>
</tr>
</tbody>
</table>
<table class="card_case">
<tbody>
<tr>
<td align="center" valign="middle">
<img src="http://file2.npage.de/014720/85/bilder/big_grabwaechters_vasall.png" />
</td>
</tr>
</tbody>
</table>
<div class="switch_card">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left">
<a data-toshow="card2" href="javascript:void(0)" unselectable="off">
<img src="http://file2.npage.de/014720/85/bilder/links2a.gif" />
</a>
</td>
<td>
</td>
<td align="right">
<a data-toshow="card2" href="javascript:void(0)" >
<img src="http://file2.npage.de/014720/85/bilder/rechts2a.gif" />
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id="back_to">
<a class="back" href="javascript:void(0)" unselectable="off"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></a>
</div>
</div>
<script>
$("a[data-toshow]").on("click", function () {
$(".card_content").hide();
var idtoshow = $(this).data("toshow");
$("#" + idtoshow).show();
$(".card_overlay").show();
});
$("a.back").on("click", function () {
$(".card_content").hide();
$(".card_overlay").hide();
});
</scriptDas Javascript kannst Du dann in eine externe Datei auslagern. Ich habe jQuery benutzt, Du musst es einbinden, damit das Skript funktioniert.
Den Links, die eine Großansicht aufschalten, habe ich ein data-Attribut gegeben, das festlegt, welche Karte angezeigt werden soll.
Bei dem back-Buttton war das nicht nötig, weil damit ja das Overlay und die Kartenansicht unsichtbar gemacht werden sollen.
Ich bin der Meinung, dass Du es unnötig kompliziert gemacht hast: #card1 und #card2 unterscheiden sich nur in dem großen Bild und die Belegung der Pfeiltasten in der Mitte. Es würde ausreichen, diese Struktur nur einmal anzulegen, nur das Bild auszutauschen und das Schalten durch die Pfeiltasten allgemein gültig zu programmieren.
Am besten postest Du die URL deiner HP, damit man es sich im Zusammenhang ansehen kann.
Nein, aber Du kannst ihr ein Label zuordnen mit Text darin. Das Label kannst Du dann gestalten, wie Du möchtest.
Witzig, wenn man den Link klickt, bewirkt das auch, dass die Details wieder geschlossen werden und der Link nicht zum Tragen kommt. Abhilfe, indem man den Clickhandler nur für die Summaray registriert:
Wenn Du "this" an die Funktion übergibst, hast Du Zugriff auf das Element:
<button id="10" value="20" onclick="myFunction(this)">Click</button>
<script>
function myFunction(ele) {
console.log(ele.id);
console.log(ele.value);
//document.getElementById("details").open = true;
}
</script>Ich glaube, in deinem ersten Posting meintest Du Zeile statt Spalte.
Ist dies, was Du dir vorgestellt hast?
https://jsfiddle.net/Sempervivum/mdus2t8m/2/
Das geht sehr einfach, wenn Du Checkboxes verwendest. Gestalten kannst Du sie, indem Du den Checkbox-Hack verwendest.
Auf der Startseite stehen die Farbkleckse untereinander
Man kann das aber sehr einfach beheben:
<h2>Herzlich Willkommen.<br>Erfahren Sie mehr über mich als:</h2>
<section id="ckleckse">
<aside class="klecks-Start">
<a href="http://www.elke-meiners.de/erziehungsberatung.html"><img src="./Elke Meiners - Start_files/rot-e.jpg" alt="Erziehungsberatung" width="95%" height="95%"></a>
</aside>
<aside class="klecks-Start">
<a href="http://www.elke-meiners.de/verfahrensbeistand.html"><img src="./Elke Meiners - Start_files/lila-v.jpg" alt="Verfahrensbeistand" width="95%" height="95%"></a>
</aside>
<aside class="klecks-Start">
<a href="http://www.elke-meiners.de/berufsvormund.html"><img src="./Elke Meiners - Start_files/gelb-b.jpg" alt="Berufsvormund" width="95%" height="95%"></a>
</aside>
<aside class="klecks-Start">
<a href="http://www.elke-meiners.de/umgangspflege.html"><img src="./Elke Meiners - Start_files/blau-u.jpg" alt="Umgangspflege" width="95%" height="95%"></a>
</aside>
</section>
<div id="filler"></div>
<footer>
<img src="./Elke Meiners - Start_files/verlauf.jpg" alt="Trenner" width="98%" height="98%">
<a href="http://www.elke-meiners.de/ueber-mich.html" target="_self">Über mich</a> | <a href="http://www.elke-meiners.de/kontakt.html" target="_self">Kontakt</a> | <a href="http://www.elke-meiners.de/impressum.html" target="_self">Impressum</a>
</footer>/* Kopfzeile, für Banner */
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
}
header {
display: block;
margin: 0px auto;
}
/* Navigation, mittig, */
nav {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
margin-top: 5px;
font-size: 1.2em;
color: #7B4487;
}
/* Fußzeile, zentriert */
footer {
font-family: Arial, Helvetica, sans-serif;
color: #7B4487;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 8px;
width: 99%;
text-align: center;
}
/* Links die Kleckse */
#kleckse {
align-self: flex-start;
margin: 0;
margin-top: 10px;
padding: 1% 2%;
height: auto;
flex-basis: 170px;
flex-grow: 0;
flex-shrink: 0;
}
/* Paragraphenzeichen */
#paragraf {
margin: 0;
margin-top: 10px;
padding: 1% 2%;
border: 0;
width: 10%;
height: auto;
}
/* Inhalt zentriert */
#imp {
overflow-y: scroll;
font-family: Arial, Helvetica, sans-serif;
color: #7B4487;
text-align: justify;
margin-right: 1%;
margin-left: 21%;
padding: 2% 2%;
border: 0;
margin-top: 10px;
margin-bottom: 10px;
}
/* Inhalt zentriert */
main {
overflow-y: auto;
font-family: Arial, Helvetica, sans-serif;
color: #7B4487;
text-align: center;
padding: 2% 2%;
border: 0;
margin-top: 10px;
margin-bottom: 10px;
}
/* Zitatenbox */
#zitate {
font-family: "Times New Roman", Times, serif;
font-size: medium;
font-style: italic;
color: #7B4487;
text-align: center;
margin: 0;
padding: 1%;
border-color: #7B4487;
border-style: dotted;
margin-top: 30px;
overflow-y: auto;
max-height: calc(100% - 30px);
}
#wrapper {
margin: 0;
padding: 0;
border: 0;
display: flex;
}
#filler {
flex-basis: 0px;
flex-grow: 1;
}
/* Überschriften */
h2 {
font-size: x-large;
color: #7B4487;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
margin-bottom: 10px;
}
/* Inhaltstext */
h3 {
font-family: Arial, Helvetica, sans-serif;
color: #7B4487;
text-align: left;
font-size: medium;
}
/* Impressumschrift */
h4 {
font-family: Arial, Helvetica, sans-serif;
color: #7B4487;
text-align: left;
font-size: small;
}
/* Kleckse für Index.html */
#ckleckse {
display: flex;
flex-direction: row;
}
/* Elkes Foto auf "Über mich" */
#foto {
margin: 0;
margin-top: 10px;
padding: 1% 2%;
border: 0;
width: 30%;
height: auto;
}
/* Inhalt von "Über mich" */
#ich {
font-family: Arial, Helvetica, sans-serif;
color: #7B4487;
text-align: center;
margin-right: 47%;
margin-left: 15%;
padding: 2% 2%;
border: 0;
margin-top: 10px;
margin-bottom: 10px;
width: 43%;
height: auto;
}Auf der Startseite stehen die Farbkleckse untereinander
Ah so, ich hatte leider nur die Seite für Erziehungsberatung umgestellt und die anderen und die Startseite nicht berücksichtigt 
nach und nach einbauen und anpassen
Warum nicht gleich das ganze CSS übernehmen? Ich habe es getestet und es funktioniert. Die Seite sieht genau so aus wie vorher, nur ohne die negativen Begleiterscheinungen, Überläufe etc.
da es der ausdrückliche Wunsch meiner Bekannten ist
Kenne ich aus meiner Berufstätigkeit: Der Kunde/Auftraggeber hat immer Recht.
Meinst du, ich kann die ursprüngliche Frage (Text bleibt nicht in eigener Box) durch studieren eurer html-Seminare lösen oder hast du abschließend einen Tipp dazu?
Ich nehme an, Du meinst die rechte Box mit dem punktierten Rand? Das habe ich nur hin bekommen, indem ich alles floating, die meisten Maßangaben etc. heraus geworfen und auf Flexlayout umgestellt habe:
/* Kopfzeile, für Banner */
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
}
header {
display: block;
margin:0px auto;
}
/* Navigation, mittig, */
nav {
font-family:Arial, Helvetica, sans-serif;
text-align:center;
margin-top:5px;
font-size:1.2em;
color:#7B4487;
}
/* Fußzeile, zentriert */
footer {
font-family:Arial, Helvetica, sans-serif;
color:#7B4487;
margin-top:10px;
margin-bottom: 10px;
padding-top:8px;
width: 99%;
text-align:center;
}
/* Links die Kleckse */
#kleckse {
align-self: flex-start;
margin:0;
margin-top:10px;
padding: 1% 2%;
height:auto;
flex-basis: 170px;
flex-grow: 0;
flex-shrink: 0;
}
/* Paragraphenzeichen */
#paragraf {
margin:0;
margin-top:10px;
padding: 1% 2%;
border:0;
width:10%;
height:auto;
}
/* Inhalt zentriert */
#imp {
overflow-y:scroll;
font-family:Arial, Helvetica, sans-serif;
color:#7B4487;
text-align:justify;
margin-right:1%;
margin-left:21%;
padding: 2% 2%;
border:0;
margin-top:10px;
margin-bottom:10px;
}
/* Inhalt zentriert */
main {
overflow-y:auto;
font-family:Arial, Helvetica, sans-serif;
color:#7B4487;
text-align:center;
padding: 2% 2%;
border:0;
margin-top:10px;
margin-bottom:10px;
}
/* Zitatenbox */
#zitate {
font-family:"Times New Roman", Times, serif;
font-size:medium;
font-style:italic;
color:#7B4487;
text-align:center;
margin:0;
padding:1%;
border-color:#7B4487;
border-style:dotted;
margin-top: 30px;
overflow-y: auto;
max-height: calc(100% - 30px);
}
#wrapper {
margin:0;
padding:0;
border:0;
display: flex;
}
/* Überschriften */
h2 {
font-size:x-large;
color:#7B4487;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
margin-bottom:10px;
}
/* Inhaltstext */
h3 {
font-family:Arial, Helvetica, sans-serif;
color:#7B4487;
text-align:left;
font-size:medium;
}
/* Impressumschrift */
h4 {
font-family:Arial, Helvetica, sans-serif;
color:#7B4487;
text-align:left;
font-size:small;
}
/* Kleckse für Index.html */
#klecks-l {
margin-top:0px;
padding: 0 1%;
border:0;
width:23%;
height:auto;
}
#klecks-r {
margin-top:0px;
padding: 0 1%;
border:0;
width:23%;
height:auto;
}
/* Elkes Foto auf "Über mich" */
#foto {
margin:0;
margin-top:10px;
padding: 1% 2%;
border:0;
width:30%;
height:auto;
}
/* Inhalt von "Über mich" */
#ich {
font-family:Arial, Helvetica, sans-serif;
color:#7B4487;
text-align:center;
margin-right:47%;
margin-left:15%;
padding: 2% 2%;
border:0;
margin-top:10px;
margin-bottom:10px;
width:43%;
height:auto;
}Und ganz unten im HTML:
<aside><div id="zitate"></div></aside>
</div>
<footer>
<img src="./Elke Meiners - Erziehungsberaterin_files/verlauf.jpg" alt="Trenner" width="98%" height="98%">
<a href="http://www.elke-meiners.de/ueber-mich.html" target="_self">Über mich</a> | <a href="http://www.elke-meiners.de/kontakt.html" target="_self">Kontakt</a> | <a href="http://www.elke-meiners.de/impressum.html" target="_self">Impressum</a>
</footer>
<script>
var jetzt=new Date();
var z=(jetzt.getSeconds())%28;
zitate.innerHTML = quotes[z];
</script>
</body></html>??? Der TO hat die URL seiner Seite gepostet, dort kann man alles einsehen.
Ich kann es nicht nachvollziehen warum genau das nicht funktioniert
Wenn ich das richtig verstehe, möchtest Du die Teams und den Spielstand zentriert in ihrem Container. Du hast jedoch für alle drei einen div-Container definiert und die Breite so festgelegt, dass die den übergeordneten Container ganz ausfüllen. Innerhalb der untergeordneten Container hast Du keine Ausrichtung definiert, so dass der Default "left" greift.
Wenn Du einfach die Breitenangaben entfernst, sind die Elemente zentriert. Damit sie dann nicht so aneinander geklatscht aussehen, kannst Du ja mit paddings arbeiten. Oder justify-content:space-evenly für den übergeordneten Container verwenden.
Sicher möchtest Du auch die Teamnamen und die Bilder zentriert. Auch das ist problemlos möglich, entweder mit text-align oder den Möglichkeiten vom Flexlayout.
Ebenso frag ich mich, wie man die Bilder unter dem Teamnamen darstellt.
Das kann ich nicht nachvollziehen, denn da Du für die Teamnamen h-Elemente verwendest, nehmen diese eine eigene Zeile ein und die Logos sind darunter. Für die Teamnamen mit den Logos würde es sich u. U. anbieten, figure-Elemente zu verwenden.
Mir ist noch aufgefallen, dass die Logos stark verzerrt werden. Ich würde lieber height:auto verwenden.