Graphik zum Fenster skalieren

Hallo liebe Experten

ich versuche mal schnell und präzise zu erklären was ich will
1.) ein Bild rechtsbündig platzieren
2.) die Höhe des Bildes soll auf 70% der Fensterhöhe skaliert werden
3.) unter dem Bild werden 4 Navigationsbuttons zentriert positioniert
4.) Um das Bild und die Navigationsbuttons soll der Text linksbündig fließen

Meine Lösung: Eine HTML- Tabelle für Bild+ Navigationsbuttons um die der Text linksbündig fließt.
Mein Problem: Unter HTML funktioniert der Befehl nur außerhalb von Tabellen korrekt

Gibt es eine elegante CSS- Lösung dafür, die auch eine relative Skalierung der Graphik beinhaltet. Ich möchte eben %-genau und nicht Pixelgenau arbeiten. Wenn ja könnt Ihr mich auf ein Beispiel verlinken?

Danke
Gruß Gerold

Moin,

1.) ein Bild rechtsbündig platzieren

CSS: float:right

2.) die Höhe des Bildes soll auf 70% der Fensterhöhe skaliert
werden

Würde ich nicht tun, weil die Skalierung im Browser hässlich ist.
CSS: height:70%
(Skaliert aber natürlich nicht in Abhängigkeit von der Fenstergröße, sondern der Größe des Elternelements bis hin zum Viewport; das ist ja normal so.)

3.) unter dem Bild werden 4 Navigationsbuttons zentriert
positioniert

Unordered List für das Menü, da die Liste ein Block-Element ist, mittels „margin:auto“ horizontal zentrieren.

4.) Um das Bild und die Navigationsbuttons soll der Text
linksbündig fließen

Das Bild und das Menü mit dem allgemeinen Block-Element gruppieren und diesem Element dann float:right verpassen (dann das beim Bild natürlich wieder rausnehmen).

Meine Lösung: Eine HTML- Tabelle für Bild+ Navigationsbuttons

Das hat nichts mit Tabellen zu tun. Du hast ja keine tabellarischen Daten - völlig falsch.

um die der Text linksbündig fließt.

Layout und Design wird außerdem sowieso nicht mit HTML gemacht, denn HTML ist für die logische Inhaltsauszeichnugn da, also für die Semantik. Nicht für das Aussehen - damit hat HTML nichts am Hut.

Mein Problem: Unter HTML funktioniert der Befehl

HTML kennt keine Befehle - nur Programmiersprachen kennen sowas. HTML & CSS sind beides keine Programmiersprachen.

nur außerhalb von Tabellen
korrekt

Falsch. Du denkst, dass das nur außerhalb korrekt ist, gehst aber von falschen Tatsachen aus. 70% bedeutet, 70% vom Elternelement, also der Größe der Tabellenzelle. Das Verhalten ist schon richtig.

Gibt es eine elegante CSS- Lösung dafür

Es gibt nur CSS-Lösungen dafür, wenn man ordentlich arbeiten will.

die auch eine
relative Skalierung der Graphik beinhaltet.

Abgesehen davon, dass man Grafiken nicht skaliert, könnte ich mir jetz tauf die Schnelle vorstellen, dass Du das Eleemnt dann aus dem Textfluss nehmen musst, um die relative Größe auf den Viewport zu beziehen (position).

Ich möchte eben
%-genau und nicht Pixelgenau arbeiten.

Lobenswert - beim Layout, nicht aber bei Bildern. Es sei denn, Du hast SVG.

Liebe Grüße,
-Efchen

Danke mal so weit,

nun denn wenn ich die Seite auf 1024 Px Breite begrenze könnte ich natürlich mir die Skalierung sparen. Den Text möchte ich aber frei Skalieren lassen, es gibt nichts übleres als einen CSS- definierten text mit Zwangsgröße.
Nur noch eine Frage: wie sieht der Zeilenumbruch zwischen Graphik und Buttons aus?

Gäbe es fertige Beispiele im Internet und wenn ja wo?

nun denn wenn ich die Seite auf 1024 Px Breite begrenze

Egal ob nach oben oder nach unten, das ist ein Ohantasiewert und wer würde sowas tun?

Den Text möchte ich
aber frei Skalieren lassen, es gibt nichts übleres als einen
CSS- definierten text mit Zwangsgröße.

Die wenigsten Browser verbieten die Skalierung. Nur der IE bei Verwendung der Einheit „px“. Verwendest Du „em“ oder „ex“ geht das Skalieren von Text immer einwandfrei.

Nur noch eine Frage: wie sieht der Zeilenumbruch zwischen
Graphik und Buttons aus?

Aussehen? Du meinst, wie Du den realisierst? Da die Liste (
) ein Block-Element ist, gibt es automatiscvh einen Zeilenumbruch.

…schade
ich hätte mir ein bischen mehr Hilfe erwartet.
Wollte nicht über Spitzfindigkeiten diskutuieren sonder eine HTML- Seite erstellen.

Gruß Gerold

Wie kommts, dass Du, der Du beurteilen kannst, was Spitzfindigkeiten sind, mich um Rat fragen musst?

Aber, rhetorische Frage mal vergessen, was ist denn nun Dein Problem, Du hast doch eine Antwort bekommen? Da kannst Du doch nun drauf aufsetzen. Und wenn irgendwas nicht klar ist, dann frag halt einfach konkret nach, anstatt die beleidigte Leberwurst zu spielen.

Du hast offensichtlich noch keine große Ahnung von der Materie. Also solltest Du Dir helfen lassen und nicht rumpöbeln.

Ich hab jetzt nochmal nachgelesen, und ich finde nichts, was Du als „Spitzfindigkeit“ betiteln könntest. Ich weiß, dass ich manchmal Dinge schreibe, die von ahnungslosen Anfängern als sowas aufgefasst werden, aber diese Kommentare haben auch immer einen Grund, meist einen, den ein Anfänger in seinem aktuellen Wissensstand noch nicht erfassen kann.

Also, wie kommt Du darauf, dass ich Dir noch keine sinnvolle ANtwort gegeben habe, was siehst Du als „Spitzfindigkeit“ und wo ist jetzt Dein Problem beim Umsetzen der Tipps?

Wenn Dus nochmal anständig versuchst, kriegst Du auch ne anständige Antwort.

Und wenn Du Probleme bei der Umsetzung meiner Tipps hast, dann poste bitte einen Link zur Seite, dann kann man das besser kommentieren, wo Dein Problem liegt.

Grüße,
-Efchen

1 Like

Tschuldigung

wolle Dich nicht kränken.

Es ist z.B. nicht hilfreich, Fragen mit Gegenfragen zu beantworten, oder dem Fragesteller Dinge zu erklären, die bei der Problemfindung nicht weiterhelfen sondern nur zusätzlich verwirren.

Auch sollten Lösungsvorschläge mit dem Wissensstand des Fragesuchenden nachvollziehbar sein.

Beispiel: Hilfe unter Linux läuft meine Graphikkarte nicht. Unbrauchbare antwort: Dann kompiliere halt einen neuen Kernel.

Gruß Gerold

Moin,

wolle Dich nicht kränken.

Hast Du nicht. Keine Angst :smile:

Es ist z.B. nicht hilfreich, […] dem Fragesteller Dinge
zu erklären, die bei
der Problemfindung nicht weiterhelfen sondern nur zusätzlich
verwirren.

Doch. Gerade, wenn der Fragesteller noch blutiger Anfänger ist, ist die Wahrscheinlichkeit, den Fragesteller zu verwirren natürlich verdammt hoch. Denn er kann das ganze Thema ja noch gar nicht überblicken und muss zwangsläufig mit Informationen überhäuft werden, die er noch nicht begreifen kann.
Damit muss ihm aber auch klar werden, dass er noch viel zu lernen hat, bevor er das, was er umsetzen will, verstehen und umsetzen kann.

Beispiel:
Frage: Wie mache ich mit HTML etwas fett?
Antwort: Das macht man nicht mit HTML, weil HTML dafür nicht da ist, das macht man mit CSS.
Fazit: Es ist eine hilfreiche Antwort, weil der Fragesteller nun weiß, dass er CSS braucht, obwohl er noch gar nicht weiß, was CSS ist. Er lernt aber dadurch, dass er für so eine für ihn scheinbar banale Sache wie Fettschrift, erst CSS lernen muss.
Es ist nicht die Antwort, die er sich erhofft hat, aber es bringt ja nichts, wenn man ihn anlügt und ihm eine vermeintliche Lösung gibt, die nicht sinnvoll oder schlichtweg falsch ist.

Verstehst Du?

Auch sollten Lösungsvorschläge mit dem Wissensstand des
Fragesuchenden nachvollziehbar sein.

Das ist aber nicht immer möglich. Wenn der Fragesteller keine Ahnung hat, was CSS ist, dann gibt es keine Möglichkeit, eine Antwort zu einer Frage nach Design oder Layout so zu formulieren, dass der Fragesteller das mit seinem Wissensstand nachvollziehen kann.

Wenn ein Kindergartenkind wissen will, wie man „Psychologie“ schreibt, dann hilft es ihm nicht, wenn ich das Wort buchstabieren, wenn er die Buchstaben nicht kennt.

Beispiel: Hilfe unter Linux läuft meine Graphikkarte nicht.
Unbrauchbare antwort: Dann kompiliere halt einen neuen Kernel.

Das ist nur dann eine unbrauchbare Antwort, wenn man durch Compilieren eines neuen Kernels die Grafikkarte auch nicht zum Laufen bringt. Die Antwort hilft dem Fragenden vielleicht nicht, aber wenn das die einzige Lösung ist, was soll man ihm dann antworten? Wenn er keinen Kernel compilieren kann, dann muss er sein Vorhaben entweder aufgeben, oder aber er liest sich ein oder er gibt die Aufgabe an jemand anders weiter, der sich damit auskennt.
So ist das auch bei Webseiten.

Und, was ganz wichtig ist: Wenn jemand etwas nicht versteht, dann möge er bitte NACHFRAGEN. Fragt jemand etwas und kriegt dann eine umfassende, kompetente Antwort, setzt sich aber schmollend in die Ecke, weil er es nicht versteht, dann hat der Antwortende jedes Recht, beleidigt zu sein, weil es so ja nun auch nicht geht!

Um etwas für jemanden verständlich zu formulieren, muss man exakt wissen, was der andere in der Lage ist, zu verstehen.

Es ist z.B. nicht hilfreich, Fragen mit Gegenfragen zu beantworten

Auch das ist hilfreich. Gerade Anfänger versuchen Dinge oft auf sinnlose Weise zu lösen, einfach weil sie es nicht besser wissen. Da MUSS man sehr oft Gegenfragen stellen, um den Anfänger wieder auf die richtige Bahn zu bringen. Der Antwortende muss wissen, was der Fragende vorhat.

In Deinem Beispiel wirfst Du was mit 1024px in den Raum und mir ist nicht klar, wie Du auf diesen Phantasiewert kommst. Denn das WWW ist flexibel, die Auflösung spielt bei Webseiten keine Rolle, man kann Fenster verkleinern und muss sie nicht maximiert haben, daher sind die Viewports der Nutzer quasi alle unterschiedlich groß, es gibt ja auch noch Tool- oder Sidebars. Irgendetwas im WWW zu begrenzen, ist nicht sinnvoll. Das klappt vielleicht beim Print-Design, wo man die Größe des Layouts vorgeben kann. Im WWW macht man das nicht.

Also: Um Dein Problem zu lösen, bringt es Dir nichts, wenn Du in den Raum wirfst, ich wäre nicht hilfsbereit oder hätte keine Ahnung, ich habe Dir eine umfassende Antwort gegeben, viele Tipps und Fragen gestellt, um mein Verständnis zu sichern, jetzt bist *DU* an der Reihe, diese Informationen zu verwerten. Wenn Du also was nicht verstehst, musst Du nachfragen - ich kann das nicht wissen, was Du verstehst und was nicht, aber im Moment machst Du eher den Eindruck, als wärest Du blutiger Anfänger - aber ein Tutorial der HTML/CSS/WWW-Grundlagen kann ich Dir nicht geben.

Also: Fragen? Fragen! Trau Dich, ich fress Dich nicht und reiß Dir nicht den Kopf ab. Aber es hilft niemandem, wenn Du Dich in die Ecke setzt und schmollst :smile:

Du musst nur begreifen, dass richtige Antworten nicht immer die sind, die Du Dir vorstellst.

Also wenn Du noch Interesse hast, was zu lernen, dann frag nach!

Liebe Grüße,
-Efchen

1 Like

Ich nehm Deine Ursprungsfrage nochmal auseinander:

1.) ein Bild rechtsbündig platzieren

Hab ich beantwortet.
Meine Antwort versteht man nicht, wenn man CSS nicht kennt. Für die Lösung ist aber CSS zwingend vonnöten. Lösung: CSS lernen.

2.) die Höhe des Bildes soll auf 70% der Fensterhöhe skaliert
werden

Habe ich geantwortet, warum das nicht sinnvoll ist. Ich habe aber auch beantwortet, wie man das mit CSS macht. Vorraussetzung, wie bei allem, was mit dem Aussehen von Websites zu tun hat, ist CSS.
Ich habe zusätzlich darauf hingewiesen, dass Größen der Einheit „%“ sich immer nur auf die Größe des Elternelements beziehen, niemals auf die Fenstergröße. Das ist Basiswissen in CSS, das man braucht, um einer Webseite ein passendes Aussehen zu geben.

3.) unter dem Bild werden 4 Navigationsbuttons zentriert
positioniert

Es wurde alles gesagt. Voraussetzung: CSS.

4.) Um das Bild und die Navigationsbuttons soll der Text
linksbündig fließen

Es wurde alles gesagt. Voraussetzung: CSS.

Meine Lösung: Eine HTML- Tabelle für Bild+ Navigationsbuttons
um die der Text linksbündig fließt.

Ich habe Dich darauf hingewiesen, dass Tabellen hier völlig fehl am Platze sind. Ich habe tatsächlich nicht darauf hingewiesen, dass Tabellen ja nur zur Auszeichnung tabellarischer Daten sind. Aber das ist Basiswissen HTML, dass man mit HTML nur die logische Inhaltsauszeichnung macht und nichts, was mit dem Aussehen zu tun hat.
Oh doch - habe ich später erwähnt.
Wenn einem das nichts sagt: HTML lernen. Viele kennen HTML nur von den Arbeitsweisen der 1990er Jahre. Die sind aber seit 10 Jahren - seit es CSS gibt - überholt, im Sinne von HTML oft falsch und auch oft nicht barrierefrei, also insgesamt nicht zu empfehlen.

Und weiter mag ich das jetzt gar nicht auseinander nehmen. Ich habe Dir weiterhin Zusatzwissen vermittelt. Deine Aufgabe ist es, das Wissen anzuwenden und - falls Du damit nichts anfangen kannst - danach zu googlen und das alles mit Inhalt zu füllen. Weiß man nicht, was „float“ macht, kann man mit „CSS float“ ganz schnell herausfinden, was das macht. Die Arbeit nimmt Dir normalerweise kein Antwortender ab. Schließlich willst Du ja auch was lernen.

Also. Auf welchem Stand stehen wir nun? Wie ist Dein Wissensstand? Kannst Du HTML? Weißt Du, was man unter „Semantik“ versteht? Bist Du CSS mächtig? Das sind die Grundlagen, die man zur Erstellung einer Website IMMER braucht. Ohne wird es einfach schwierig.

Also mach Dich schlau oder frag nach!

Und bevor mir irgendwas vorgeworfen wird, ich helfe GERNE. Sonst würde ich nicht diese Romane schreiben.

Schönen Abend noch,
-Efchen