Grafiken platzieren, (und zwei weitere Fragen)

Computer: Software & Programmierung HTML & CSS
#1

Mahlzeit und Hallo miteinander!

Bevor ich zu meinem großen Problem komme, bitte ich, sich jetzt nicht hinzustellen und zu sagen, dass man das nicht macht, weil das keiner macht und ich auch so machen soll wie die anderen.
Nun aber zu meinem Problem.

Ich möchte meine Navigation mittels Grafiklinks erstellen. Dabei hat zum Beispiel die Startseite 20 Grafiklinks, die ich aufteilen will in 5 Reihen a 4 Bilder.
Tabellen sind für mich tabu (zwar habe ich einen Bereich mit Tabelle, aber in dem sind tabellarische Daten). Muss ich jetzt für jede Grafik einen divbereich erstellen oder reicht es aus, wenn ich für jede Grafik das Boxmodell anwende, wobei ich dann bei margin-left einen Wert angebe, um das Bild links vom nächsten Bild zu positionieren bzw. margin-top und einen Wert, um das untere vom oberen „zu scheiden“

Wann darf/sollte/müsste ich den CSS-Selektor „Position“ verwenden ?

Und - eher aus Neugier - die Frage: So viele Menschen haben mir auf die Finger geklopft und erklärt, dass XHTML und CSS Auszeichnungssprachen seien und nicht programmiert werden.
Nur warum steht dann HTML&CSS im Bereich „Programmierung“ ?

Lieben Gruß und dankeschön im voraus

Michael Vogl

#2

Naja ich bin zwar alles andere als ein Profi in dem Gebiet aber würde es nicht reichen nach den ersten 4 Bildern einfach die Zeile zu wechseln?

#3

Und - eher aus Neugier - die Frage: So viele Menschen haben
mir auf die Finger geklopft und erklärt, dass XHTML und CSS
Auszeichnungssprachen seien und nicht programmiert werden.
Nur warum steht dann HTML&CSS im Bereich „Programmierung“ ?

Auf die Anordnung hier im Forum habe ich keine Antwort, aber wenn Du HTML tatsächlich als Programmiersprache auffassen willst, dann poste doch einmal schnell wie Du in HTML ne FOR Schleife oder nen IF, THEN, ELSE Anweisung schreiben willst.

#4

Programmierung
Ein Programm ist ein (Datenverabeitungs)-Prozess,
und besteht aus Eingabe, Verarbeitung und Ausgabe.
Und mit HTML und CSS lieferst du eben Eigabewerte (Parameter).

#5

Bei so vielen ähnlichen Objekten würde ich der Übersichtlichkeit und Änderungsfreundlichkeit weitgehend mit Javascript operieren.
Ein Array anlegen mit PositionX,Y,Grafik,Link,Text,usw
und das für jedes Objekt.
Mit Margin und son Kram brauchst du dich nicht zu belasten.
Im CSS-Teil steht dann position:absolute;left:0;top:0; und die Werte werden dynamisch aus dem Array gesetzt.
Hier im Forum habe ich gelernt, dass man für Suchmaschinen und Vorlesebrowsing die entsprechenden Objekte nicht mit Javascript machen soll, dass dürfte bei deinen Links aber nicht zutreffen.

#6

Hallo,

Ich möchte meine Navigation mittels Grafiklinks erstellen.
Dabei hat zum Beispiel die Startseite 20 Grafiklinks, die ich
aufteilen will in 5 Reihen a 4 Bilder.

Etwa so wie hier http://www.walderdorff.org/photos/ ? Den Quelltext kannst du lesen (ist allerdings mit php erstellt) und das Sylesheet ist hier http://www.walderdorff.org/photos/stylephotos.css . Javascript braucht man da nicht.

Cheers, Felix

#7

Ja, genau so!
Vielen lieben Dank :smile: (selbstverständlich auch an die anderen User)

Lieben Gruß

Michael Vogl

#8

Ein Programm ist ein (Datenverabeitungs)-Prozess,
und besteht aus Eingabe, Verarbeitung und Ausgabe.
Und mit HTML und CSS lieferst du eben Eigabewerte (Parameter).

Das Programm ist in dem fall aber der Browser, der in einer höheren Programmiersprache geschrieben ist, den Inhalt der HTML Seite parst, und daraus eine Anzeige erstellt. Der HTML Code kann keine Programmablaufsfunktionen enthalten, weil es diese in HTML nicht gibt. Daher ist HTML eine Beschreibugssprache und keine Programmiersprache, egal wie sehr Du Dich dagegen wehrst.

#9

Moin,

Bei so vielen ähnlichen Objekten würde ich der
Übersichtlichkeit und Änderungsfreundlichkeit weitgehend mit
Javascript operieren.

Das ist dann aber keine Optimierung, sondern eine Einschränkung der Nutzbarkeit. Man muss immer davon ausgehen, dass JS abgeschaltet ist, und dann soll die Site auch noch funktionierne.

Mit Margin und son Kram brauchst du dich nicht zu belasten.

Natürlich nicht, das sind schließlich die besten Methoden für das korrekte Positionieren von Elementen, gleich nach float und noch vor position:absolute.

Im CSS-Teil steht dann position:absolute;left:0;top:0; und die
Werte werden dynamisch aus dem Array gesetzt.

position:absolute hat zwei Nachteile: 1. Das Element wird aus dem Fluss genommen, 2. das Element wird absolut positioniert in einem Viewport, dessen Größe überall anders ist.

Hier im Forum habe ich gelernt, dass man für Suchmaschinen und
Vorlesebrowsing die entsprechenden Objekte nicht mit
Javascript machen soll, dass dürfte bei deinen Links aber
nicht zutreffen.

Es gibt wohl keinen Grund, für sowas wie ein Menü JavaScript zu verwenden.

Liebe Grüße,
-Efchen

1 Like
#10

Moin,

Ich möchte meine Navigation mittels Grafiklinks erstellen.

Wenn Du die alt-Attribute richtig füllst, dann ist dagegen nichts einzuwenden. Außer vielleicht, dass Leuten, die einen grafischen Browser nutzen, die Schrift aber größer eingestellt haben, weil sie sonst nichts lesen können, Deine Grafiken natürlich gar nichts bringen, weil die Schrift nicht vergrößerbar ist. Es bietet sich immer an, lieber eine Hintergrundgrafik zu definieren und den Text (natürlich immer vorausgesetzt, Deine Buttons haben Text) als eben das - nämlich Text - einzubauen.

Dabei hat zum Beispiel die Startseite 20 Grafiklinks, die ich
aufteilen will in 5 Reihen a 4 Bilder.

Liste, weil es ein Menü ist, und der eine feste Breite geben - fertig.

Tabellen sind für mich tabu (zwar habe ich einen Bereich mit
Tabelle, aber in dem sind tabellarische Daten).

Dann und darum sind Tabellen ja auch nicht tabu. Nur zu Layoutzwecken sind sie das. Aber auch und alle anderen HTML-Tags sind für das Layout tabu, weil man ja bekanntlich Layout mit CSS und nicht mit HTML macht.

Muss ich jetzt
für jede Grafik einen divbereich erstellen

Das wäre genauso unlogisch, wie die Grafiken mit Tabellen auszuzeichnen. Es ist nicht die Bedeutung von , damit ein Element einzupacken.

Wann darf/sollte/müsste ich den CSS-Selektor „Position“
verwenden ?

Bei komplexen Positionierungsaufgaben - sehr selten eigentlich.

Und - eher aus Neugier - die Frage: So viele Menschen haben
mir auf die Finger geklopft und erklärt, dass XHTML und CSS
Auszeichnungssprachen seien und nicht programmiert werden.
Nur warum steht dann HTML&CSS im Bereich „Programmierung“ ?

Das musst Du den Betreiber des Forums fragen.
So gesehen ist das natürlich falsch.

Liebe Grüße,
-Efchen

#11

Na Efchen, Wochenendruhe beendet?
Du behauptest nun

Es gibt wohl keinen Grund, für sowas wie ein Menü JavaScript
zu verwenden.

Die gibt es schon, ob sie die Nachteile überwiegen, ist eine andere Frage.
Für die Entnahme der Daten aus einem Array kann man natürlich auch PHP verwenden.
Nachdem das nun fast alle Provider bieten und auch auf lokalen Systemen mit XAMPP ein einfaches System zur Verfügung steht, wird PHP weiter an Verbreitung gewinnen, auch für solche Zwecke, wo Webseiten aus wiederkehrenden und sich ändernde Objekten bestehen.
Warum ich PHP nicht so gern nehme, ist die schlechte Lesbarkeit des Codes durch die Dollarzeichen vor den Variablen und die größere Datei, die vom Server erzeugt wird und übers Netz geschickt wird.

#12

Moin,

Es gibt wohl keinen Grund, für sowas wie ein Menü JavaScript
zu verwenden.

Die gibt es schon, ob sie die Nachteile überwiegen, ist eine
andere Frage.

So gesehen kann man vieles machen. Man kann auch den Quellcode mit einem GRafkprogramm malen, ihn dann ausdrucken, einscannen, von einer Texterkennung als Textdatei schreiben lassen und das dann als Website hernehmen.

Ob das sinnvoll ist, ist eine andere Frage. Und JavaScript bei einem Menü nicht sinnvoll, bzw das was man glaubt, als Vorteil nutzen zu können, ist geringer als die Nachteile, insbesondere den Mehraufwand, den man hat, das Menü doch wieder barrierefrei zu gestalten. Denn ein Menü, das nicht nutzbar ist, ist das Todesurteil für eine Website.

Nachdem das nun fast alle Provider bieten

Du redest, als sei PHP was völlig neues, was noch nicht verbreitet wäre. PHP existiert auch schon ewig und immer; aber welche Sprache man nimmt, ist eigentlich egal, hauptsache serverseitig, weil das nicht abhängig von der Konfiguration der Besucher ist. Du kannst auch gerne Perl oder Python, oder wenn Du darfst, C/C++ nehmen, wenn DIr der PHP-Code nicht gefällt.
Die Übersichtlichkeit von Programmcode bestimmt sich aber hauptsächlich durch den Programmierer selbst.

wird PHP weiter an Verbreitung gewinnen

PHP hat bereits eine sehr hohe Verbreitung, weil die Sprache genau an die Bedürfnisse des WWW angepasst ist. Das ist nicht erst seit kurzem so, sondern schon bestimmt 10 Jahre (weiter vermag ich nicht zurückschauen, da ich zu der Zeit so weit selber noch nicht war).

Warum ich PHP nicht so gern nehme, ist die schlechte
Lesbarkeit des Codes durch die Dollarzeichen vor den Variablen

Das ist natürlich ein entscheidender Grund, warum man lieber eine Technik nehmen sollte, die beim Besucher u.U. nicht verfügbar ist und somit die Nutzbarkeit der Website auf 0 setzt. Super!

und die größere Datei, die vom Server erzeugt wird und übers
Netz geschickt wird.

Bei der Verwendung von JavaScript muss mehr übertragen werden! Der PHP-Code bleibt ja auf dem Server und wird nicht an den Browser übertragen, wohl aber der JavaScript-Code. Hier verwechselst Du was.

Grüße,
-Efchen

#13

Warum ich PHP nicht so gern nehme, ist die schlechte
Lesbarkeit des Codes durch die Dollarzeichen vor den Variablen
und die größere Datei, die vom Server erzeugt wird und übers
Netz geschickt wird.

Warum Du es nimmst oder nicht, steht nicht zur Debatte. Es geht darum, wozu client- oder serverseitige Skripte im Einzellfall besser geeignet sind. Du willst Dich nicht damit beschäftigen, ist mein Eindruck.
Keiner Hinweiß übrigens: Von dem PHP Code sieht der Browser gar nichts, weil es auf Serverseite ausgeführt wird, eine HTML Seite generiert und diese dann beim Client ankommt. Gerade bei Clientseitigem Skript muß der Quellcode zunächst übertragen werden. Vielleicht solltest Du Dir zunächstmal über deratige Vorgänge Klarheit verschaffen, bevor Du mit Deinen schlecht lesbaren Dollerzeichen argumentierst.

#14

Bei der Verwendung von JavaScript muss mehr übertragen werden!
Der PHP-Code bleibt ja auf dem Server und wird nicht an den
Browser übertragen, wohl aber der JavaScript-Code. Hier
verwechselst Du was.

Wohl kaum, denn eine Fahrplantabelle hatte 57 kB, nach Umstellung auf Javascript sind es 25 kB.

#15

Wohl kaum, denn eine Fahrplantabelle hatte 57 kB, nach
Umstellung auf Javascript sind es 25 kB.

AAhh…Java Skript kann also auch noch zaubern und den Overhead (nämlich den Inhalt des Skrites) neben der Benutzerrelevanten Information auf magische Weise übertragen…Jetzt ist mir natürlich alles klar.

#16

Moin,

Du solltest aufhören, aus speziellen Fällen Aussagen zu konstruieren, die Du dann darstellst, als wären es die Regel und als wäre die Lösung dann das Nonplusultra.

Klar, wenn Du eine Menge Daten hast, und nur die Daten an den Client überträgst, ist das natürlich wesentlich weniger als wenn Du die Daten serverseitig in eine Tabelle (Fahrplandaten sind tabellarische Daten) packst, noch dazu, weil ja der HTML-Code für Tabellen ziemlich groß ist.

Aber Du stellst Deine Lösungen hier im Forum gerne als unfehlbar hin, und in diesem Beispiel zu sagen, weil man statt 57K nur 25K überträgt, ist es allen zu empfehlen, das auch mit JavaScript zu machen. Dabei verschweigst Du aber, dass JavaScript eine optionale Technik ist, auf die man nicht aufbauen darf. JavaScript kann ergänzend eine tolle Hilfe sein, darf aber niemals zwingend erforderlich sein, um die Inhalte einer Website zu generieren.

Wenn Du solche „Tipps“ gibst, die eigentlich keine sind, dann solltest Du bitte auch die ganze Wahrheit sagen und den Anfängern hier alle Fakten offen legen, damit sie selber wissen, in was für eine Falle sie tappen!

Denn ansonsten (wenn Du nur die halbe Wahrheit erzählst) sind Deine Beiträge hier nicht wirklich hilfreich!

Bitte achte da doch in Zukunft drauf!

Viele Grüße,
-Efchen

#17

Moin,

jott053 erzählt zwar oft nur die halbe Wahrheit, aber hier hat er doch recht!? Klar wird die Datenmenge deutlich kleiner, wenn Du nur die Daten und ein kurzes Script überträgst, als wenn Du eine HTML-Tabelle serverseitig aufbaust und die gesamte Tabelle überträgst. Denn der HTML-Code einer Tabelle ist schon enorm groß.

Aber nochmal an alle Mitlesenden, was jott053 leider verschweigt: JavaScript zum Aufbau relevanter Daten einer Website zu benutzen kann die Website natürlich vollständig unbenutzbar machen, weil JS abschaltbar ist. Das ist also keine Lösung. Die 32K mehr zu übertragen ist hier zu 100% sinnvoller, als die kleine Datenmenge zu sparen.

Liebe Grüße,
-Efchen

#18

Datenmenge ist im Zeitalter der Breitbandverbindungen nicht alles (besonders nicht ob 32k mehr oder weniger sind). Nimm doch mal die Zeit, welche benötigt wird um ein umfangreiches JS clientseitig auszuführen. FF, Safari und Chrome-Benutzer (um einfach eine Auswahl zu treffen) sind davon nicht wirklich betroffen, aber denk doch mal an die Millionen von IE-User, diese warten mit ihren „Hochleistungs“-Javascript-Engines ewig! Denen währe es lieber es würden 32k mehr übertragen.

Gruss
Tschügge

#19

Danke für die Belehrungen
Aber Vor 10 Jahren war ich total begeistert von JavaScript.
Ich hatte da zwar schon in Basic, Pascal und Assembler programmiert,
aber auch heute bin ich noch der Meinung, dass HTML mit Javascript
für Anfänger der einfachste Einstieg in die Programmierung ist.
Nach euren Hinweisen werde ich nun meine Fahrplantabelle auf PHP umstellen, seid ihr dann zufrieden?

#20

Aber Vor 10 Jahren war ich total begeistert von JavaScript.

Ja, ging mir genauso. Man kann damit halt sofort anfangen und muss keinen Server installieren.

Ich hatte da zwar schon in Basic, Pascal und Assembler
programmiert,

Ging mir auch genauso, nur war bei mir noch C dabei :wink:

aber auch heute bin ich noch der Meinung, dass HTML mit
Javascript für Anfänger der einfachste Einstieg in die
Programmierung ist.

Wenn jemand ohnehin schon Websites erstellt hat oder erstellen will, dann ist das so eine Aussage, die ich nicht unbedingt als falsch bezeichnen würde.
Ich würde halt aufgrund der Nutzbarkeitseinschränkungen vielleicht trotzdem gleich zu PHP oder einer anderen serverseitigen Sprache tendieren, weil jemand, der Websites erstellt, ohnehin eher früher als später einen Server installieren muss.
Und außerhalb des Web-Umfelds ist JavaScript ja nicht einsetzbar. Also würde ich jemandem, der Programmieren lernen will, nicht zu JavaScript raten, vor allem wenn er nichts mit Websites am Hut hat.

Aber hier gehts ja auch nicht darum, jemanden in die Programmierung einzuführen, sondern um Websites und die Nutzbarkeit, die durch JavaScript eingeschränkt werden kann.

Nach euren Hinweisen werde ich nun meine Fahrplantabelle auf
PHP umstellen, seid ihr dann zufrieden?

Es geht nicht darum, mich oder Lorgarn zufrieden zu stellen, sondern Deine Nutzer. Und darum, dass Du verstehst, warum wir Deine JavaScript-Lösung für nicht einsetzbar halten.
Wenn Du das nur umstellst, damit Du von uns keine Kommentare mehr erntest, dann hat unser Einwand nicht den gewünschten Effekt gebracht und Du hast auch nichts dabei gelernt.

Grüße,
-Efchen