Ohne deinen Code angesehen zu haben: Es liegt mit ziemlicher Sicherheit daran, dass der Defaultwert für die vertikale Ausrichtung baseline ist, dadurch kommt die Lücke zu Stande. Lässt sich leicht beheben, indem man dem Bild ein vertical-align: top; gibt, siehe hier:
https://jsfiddle.net/Sempervivum/ogscxL7e/5/
Häufiges Problem übrigens.
Ich empfehle, kein a-Tag zu nehmen, sondern einen Button ohne Link.
Also müsste man ALLE über 200 Seiten manuell so umstellen, dass auf jede DIV rechts Text direkt die zugehörige DIV links blau mit zugehörigen Inhalten folgt.
das sind leicht 300 stunden arbeit und damit massig kosten
In solch einem Fall habe ich häufig die Seiten automatisch editiert, früher mit AWK, aber es geht auch mit PHP.
Edit: Dies
die Bilder in der rechten Spalte passend zu den Inhalten in der Textspalte positioniert.
Verstehe ich vom Text her, aber auf der Beispielseite kann ich eine solche Zuordnung nicht erkennen?
Im Fall von Grünberg ist der Link immer noch innerhalb des a-Tags a.litebox. Bei Traunstein dagegen ist er draußen. Versuche, es bei Grünberg genau so zu machen.
Lies auch mein Posting #4, davor, und setze es um.
PS: Bei dem zweiten Beispiel scheint mir das a-Tag nicht geschlossen zu sein:
<div class="gallery-photo wnd-orientation-portrait">
<a class="litebox" data-litebox-group="gallery" data-litebox-text="" href="bilder/tr-berge/2-traunstein.jpg" width="1200" height="900">
<div class="gallery-image cf"><img src="bilder/tr-berge/2-traunstein-s.jpg" alt="Traunstein Berg am Traunsee, Wächter des Salzkammergutes"></div>
<div class="gallery-title"><span></span></div>
<p><a href="https://de.wikipedia.org/wiki/Traunstein_(Berg)">Traunstein</a></p>
<!-- hier erwarte ich das schliessende </a> -->
<!-- BEISPIEL ENDE -->
</div>Versuche, das HTML so zu ändern:
<div class="gallery-photo wnd-orientation-portrait">
<a class="litebox" data-litebox-group="gallery" data-litebox-text="" href="bilder/tr-berge/1-gruenberg.jpg" width="1200" height="900">
<div class="gallery-image cf"><img src="bilder/tr-berge/1-gruenberg-s.jpg" alt="Grünberg in Gmunden im Salzkammergut mit Seilbahn"></div>
<div class="gallery-title"><span></span></div>
</a>
<p><a href="https://gruenberg.info/de/">Grünberg</a></p>
</div>d. h. den Link aus dem a-Tag für die Litebox heraus nehmen. (ungetestet, nur ein Versuch).
Dass die Schrift im Absatz fett ist, liegt wahrscheinlich daran, dass anderswo für das p-Element die Fett-Formatierung eingestellt ist. Am besten postest Du mal einen Link zu der Seite, dann kann man es mit dem HTML-Inspektor leicht heraus finden.
Davon abgesehen ist dein Code leicht veraltet. Informiere dich am besten über CSS:
https://wiki.selfhtml.org/wiki/CSS/Tutor…heets_einbinden
Und für ein Bild mit einer Beschriftung gibt es heute das figure-Tag:
https://wiki.selfhtml.org/wiki/HTML/Text…urierung/figure
Zentrierung und andere Gestaltung lassen sich am besten und einfachsten mit Flex machen:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox
Damit könnte dein Bild mit der Beschriftung dann so aussehen:
<figure>
<img src="images/dia1.jpg" height="42" width="42">
<figcaption>
Products are tested and approved by Susan
</figcaption>
</figure>
<style>
figure {
display: flex;
justify-content: flex-start;
align-items: center;
}
figure>img {
width: 42px;
height: 42px;
}
figure>figcaption {
margin-left: 47px;
/* hier kannst Du dann auch die Schrift gestalten */
}
</style>Jetzt verstehe ich nicht genau, was Du haben willst: Nur ein Thumbnail und wenn man drauf klickt, sollen alle sichtbar werden? Und wenn man dann auf eines klickt, soll sich die Lightbox öffnen? Oder so wie in deinem ersten Post: Unten im Lightbox-Fenster eine Reihe von Thumbnails, die man mit Pfeiltasten durchblättern kann und wenn man eines klickt, wird es in dem Fenster darüber groß angezeigt?
Wie sehen denn diese Variablen im Text aus? Üblich ist, sie in einfache oder doppelte geschweifte Klammern einzuschließen. Informiere dich über die Javascript-Funktion replace, damit kannst Du die Namen dann ersetzen.
Und um die Namen auf der Seite eingeben zu können, benötigst Du Eingabefeldern.
Selfhtml ist i. allg. eine gute Quelle:
https://wiki.selfhtml.org/wiki/JavaScrip…/String/replace
https://wiki.selfhtml.org/wiki/HTML/Form…_.3D_.22text.22
Versuch mal, wie weit Du mit den Erläuterungen und den Beispielen kommst und wenn es hakt, melde dich wieder.
Das habe ich schon vermutet. Was Du suchst, nennt sich "Lightbox". Davon gibt es viele und IMO die beste ist die aktuelle Version von Fancybox:
Du schreibst zwar, dass XAMPP läuft, aber dieses: 'file:///DATEIPFAD' zeigt, dass Du deine Seite am Server vorbei geöffnet hast, vermutlich durch Doppelklick oder "Datei - Öffnen". Die Lösung steht in der Fehlermeldung: "Cross origin requests are only supported for protocol schemes: http". Die URL muss dann so aussehen:
http://localhost:8080/dateiname.html
wobei 8080 der Port ist. Wie dieser bei XAMPP lautet, weiß ich nicht. Und die HTML-Datei muss im Verzeichnis htdocs des Servers liegen.
Selfhtml ist immer eine gute Quelle:
https://wiki.selfhtml.org/wiki/CSS
Was dein Beispiel mit den Radiobuttons betrifft, so empfiehlt es sich, das Label-Tag zu verwenden.
Der Grund, warum das nicht funktioniert ist folgender: Die Funktion addEventListener tut das, was der Name wortwörtlich sagt: Sie fügt den Listener hinzu und ersetzt ihn nicht etwa. Daher wird bei dir mit jedem Klick ein weiterer Listener registriert und die anderen bleiben erhalten. Wenn das, was Du vor hast, funktionieren will, musst Du jedes Mal den alten Listener entfernen, bevor Du den neuen hinzu fügst:
https://wiki.selfhtml.org/wiki/JavaScrip…veEventListener
Ich stimme aber Basti zu: Ich sehe keinen Vorteil bei diesem Verfahren, wird nur unnötig kompliziert.
Mit CSS-Animation kann man auch Hintergrundbilder wechseln und sogar schön überblenden:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Animation
Ich hatte da vor ein paar Tagen für eine andere Frage ein Demo gemacht:
#bgchanger {
height: 200px;
width: 300px;
background-size: cover;
background-position: center;
animation: ani 3s linear infinite;
}
@keyframes ani {
0% {
background-image: url(images/dia0.jpg);
}
15% {
background-image: url(images/dia0.jpg);
}
33.5% {
background-image: url(images/dia1.jpg);
}
66.5% {
background-image: url(images/dia1.jpg);
}
67% {
background-image: url(images/dia2.jpg);
}
100% {
background-image: url(images/dia2.jpg);
}
}Welche Informationen ist unter dem Link beschrieben. Ich gebe zu, dass die Infos dort ein wenig verwirrend sind, weil es so viel ist. Ein wichtiges ist target, das gibt das Element an, das das Event auslöst, in deinem Fall den Button auf den geklickt wurde. Lass dir das Event mal mit console.log ausgeben und sieh dir an, was drin steht:
closegarantie.addEventListener("click", function (e) {
console.log(e);
closegarantiebody.classList.toggle("d-none");
});Das toggle ist schon richtig und zwar dort, wo Du den Text immer abwechselnd auf- und zumachen willst. Aber bei "Alle ausblenden" willst Du ja, dass sie unabhängig vom aktuellen Zustand unsichtbar werden, daher ist dort das add angebracht.
Der Parameter e in deiner anonymen Funktion steht für event , das ist grob gesagt ein Objekt, das Informationen über das auslösende Ereignis enthält, in deinem Fall den Klick auf den Button. Ist hier im einzelnen beschrieben:
https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event
Weglassen kannst Du es immer dann, wenn Du keine der Informationen darin benötigst.
Alle die Variablen, die Du eingangs mit getElementById ermittelst, ändern sich im weiteren Verlauf nicht mehr und sollten als const definiert werden.
Das Verfahren mit classList.toggle ist schon Mal gut.
Besser nicht für jeden Unterpunkt eine eigene ID und Funktion definieren, sondern allen die selbe Klasse zuweisen, eine Nodelist mit querySelectorAll ermitteln, diese in einer Schleife abarbeiten und jeweils den Eventhandler zuweisen. Dazu musst Du im DOM navigieren und brauchst Nachbarselektoren:
https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator
Auf die Weise brauchst Du nur noch das HTML zu ändern, wenn eine weitere Frage hinzu kommt.
wie fixe ich es wenn ich einzelne Elemente ausblende, dann aber auf den button alle ausblenden gehe dann blendet er nur die aus die eingeblendet sind
Das kommt durch das classList.toggle zu Stande, verwende statt dessen classList.add.
kann mir jemand noch erklären wie ich den Button von ausblenden zu einblenden ändern kann dieser sich aber wieder ändert wenn wieder drauf geklickt wird
Lösung a): Im HTML zwei Buttons anlegen und den, der gerade nicht sichtbar ist, mit display:none; unsichtbar machen. Auch dazu kannst Du die Klasse "d-none" verwenden.
Lösung b): Die Buttons nicht im HTML anlegen, sondern in einem Pseudoelement ::after. Auch das hat den Vorteil, dass Du nicht jedes Mal den Button berücksichtigen musst, wenn Du einen neue Frage hinzu fügst.
So ist der Titel zwar aussagekräftig aber er trifft nicht wirklich das Problem des TO: Er hat ein Video mit zwei Tonspuren und will diese umschalten.
Das wird hier diskutiert und auf video.js verwiesen: