Beiträge von Sempervivum

So würde es gehen:
https://jsfiddle.net/Sempervivum/k06avc4p/4/

Mal gespannt, ob jemand eine einfachere Lösung einfällt.

Ich verstehe dich so, dass das Seitenverhältnis des Rechtecks gleich bleibt, egal wie man das Fenster ändert. Soweit ich weiß, geht das nur mit Javascript, weil man mit CSS nur sehr eingeschränkt Berechnungen durchführen kann.

Ja, das ist kein Problem: Informiere dich über PHP-Include, damit kannst du dein Problem lösen.

Es gibt einige Bibliotheken für solche Grafiken für Statistiken, z. B. das Opensource chart.js. Pie- und Donut-Charts sind damit möglich:
http://www.chartjs.org/docs/#doughnut-pie-chart

Ohne den Code zu sehen, wird man den Fehler nicht finden können. Poste doch mal die URL der Seite.

Du kannst doch x und y angeben. Funktioniert dies nicht?:

transform: translate(0, 50px);

https://www.html-seminar.de/css3-transform-translate.htm

<a>Home</a>

Nein, so funktioniert es nicht. Lies hier:

https://wiki.selfhtml.org/wiki/HTML/Textauszeichnung/a

Ich verwende dieses CSS:

img {max-width: 95%}

Das Bild wird mit 95% der Breite des umgebenden Elementes dargestellt, aber nur wenn dieses Maß kleiner als die natürliche Größe ist.

Ich würde auf keinen Fall auf PHP verzichten, auch wenn Du es im Moment nicht einsetzt. Erfahrungsgemäß entwickelt sich eine Homepage und es ergeben sich immer neue Anforderungen, die in der Zukunft PHP erfordern können. Und man muss dabei die lange Laufzeit von günstigen Verträgen berücksichtigen.

Meinst Du, dass beim Hover der Text unterstrichen ist? Dann ändere dieses in common.css:

a:hover {	color:#000000;	text-decoration:underline;}

BTW: Im Ahntal habe ich vor langer Zeit auch ein paar Mal Urlaub gemacht. Sind das deine eigenen Orchideen?

Dies sollte funktionieren:
https://pastebin.com/8rTnR4VR

Die Adressen der Bilder musst Du von deinem eigenen HTML übernehmen, sie sind beim Herunterladen geändert worden.

PS: Wenn Du vom Handy sprichst, empfehle ich, zu prüfen, ob ein Slider angebracht ist, der Touch-Bedienung durch Wischen links/rechts unterstützt, denn jeder, der ein Handy hat, ist das so gewohnt. Swiper z. B. kann das.

Da hast Du wieder einen Slider gefunden, der es ein bisschen schwer macht, mehrere Instanzen einzurichten. Baue doch mal auf der Seite eine zweite Slideshow ein, HTML ist ausreichend und poste die URL. Dann werde ich es zum Laufen bringen. Wenn Du die Seite nicht öffentlich machen möchtest, weil sie nicht richtig funtioniert, dann lege eine temporäre Kopie an.

Sehr gut, das funktioniert! Kannst Du kurz die Lösung verbal erklären?

Ich habe mal mein Glück versucht und bin leider nicht zum Ziel gekommen:
https://jsfiddle.net/zayuh36a
(Nur Angebot und Preise mit #angebot)
Der Knackpunkt ist dieses:

<p><a href="#angebot"><label for="sn_menu01_close" class="close">Angebot und Preise</label></a></p>

Ich habe einen weiteren Radiobutton eingeführt, der das Schließen veranlasst. Diese Zeile müsste jetzt sowohl diesen Radiobutton auf checked setzen als auch das Linkziel anspringen. Leider bekomme ich es nicht hin, dass beides gleichzeitig funktioniert. Offenbar ist es problematisch, interaktive Inhalte so zu kombinieren.

Crossposting:
http://forum.chip.de/html-css-javas…em-1874055.html

Wie möchtest Du es denn haben:
Wenn eine neue Seite geöffnet wird, soll das Menü wie auf der alten Seite offen sein
oder
Wenn ein Anker angesprochen wird, soll das Menü zugehen, wie beim Wechsel auf eine andere Seite?

Hallo Lexxa,
diese Diashow ist mit CSS realisiert. Dazu ist folgendes zu sagen: Man kann vieles mit CSS machen, aber man muss jeweils fragen, ob es auch empfehlenswert ist: Eine CSS-Lösung ist in diesem Fall nur umständlich zu ändern, weil die Werte der Keyframes jedes Mal geändert werden müssen, wenn sich die Anzahl der Bilder ändert. Bei einer Lösung mit Javascript/jQuery kann das automatisch durch das Plugin erfolgen, so dass man nur den HTML-Text erstellen/ändern muss.
Ich habe trotzdem mal, so gut ich es konnte, diese Slideshow zum Laufen gebracht.
http://pastebin.com/9KbFw6zX

BTW: Die Kätzchen sind ja sehr süß!

Dies hier:

maxheight - maxheight * values / 100

liefert einen negativen Wert, wenn values[ i ] größer als 100 ist so dass der Balken die obere Grenze des Canvas überschreitet.
So funktioniert es:

ctx.fillRect(barwidth * i + distance * i, maxheight - values[i] , barwidth, values[i]);

Natürlich kannst Du auch beide Achsen beschriften. Es gibt jedoch gute Bibliothen, um solche Diagramme zu zeichnen, z. B. chart.js
http://www.chartjs.org/

Das kannst Du auch ohne Flex-Layout sehr einfach erreichen, indem Du zunächst die Elemente mit text-align:center horizontal zentrierst. Damit ersparst Du dir schon Mal die Berechnung der x-Positionen.
Die vertikalen Abstände kannst Du leicht mit margin-top einstellen.
Und um für die Tabelle einen freien Raum zu schaffen (ich nehme an, sie wird dynamisch angelegt) würde ich sie in einen Wrapper mit min-height verpacken. Wenn Du min-height verwendest, reserviert dieser Wrapper eine Mindesthöhe, erweitert sich aber, wenn die Tabelle größer wird.
Ein weiterer Vorteil, wenn Du nicht absolut positionierst ist, dass alles automatisch hoch oder runter rutscht, wenn Du bei einem Element die Höhe änderst. Bei absoluter Positionierung musst Du dagegen alles neu berechnen.