Beiträge von MrMurphy

Hallo

Zitat

Würde mich sehr freuen, wenn ich paar nütliche Infos bekommen könnte

Deine Angaben sind leider sehr mager.

Grundsätzlich sehe ich drei praktikable Möglichkeiten.

1. Das Spielfeld wird als Hintergrundgrafik eingebunden und die Namen darüber gesetzt. Die Namen können dann mit Abständen (margin, padding) auf dem Spielfeld verteilt werden.

2. Das Spielfeld wird im Quelltext als Grafik eingefügt und die Namen mittels position darüber angeordnet.

3. Das Spielfeld und die Namen werden als SVG-Datei eingefügt.

Gruss

MrMurphy

Hallo

Deine Infografik kann leider eher als Vorbild dienen, wie Infografiken nicht erstellt werden sollten.

Das einzig positive ist, dass die Teile direkt beschriftet sind.

Optisch sind die Beschreibungen leider teilweise von ihrer Darstellung zu weit entfernt (Schlitztiefenverstellung, Trennscheiben).

Die hellgrüne Schrift ist weder auf dem weißen und schon gar nicht auf dem grünen Hintergrund gut lesbar. Vor lauter Flimmern wird mir zudem ganz schummrig.

Bei sachlichen Texten sollte auf eine Kinder-Farbwahl verzichtet werden. Schwarze oder dunkelgraue Schrift auf weißem Hintergrund - fertig.

Die Schriftart ist für technische Informationen schlecht gewählt und für sich schon schwer lesbar. Beim H von Haltegriff musste ich zweimal hinschauen um es nicht als M zu lesen.

Um unter Hobbyhandwerkern ein eher seltenes Werkzeug vorzustellen gibst du viel zu wenig Informationen, andere teilweise an unsinniger Stelle (Haltegriff, Motor).

Waagerechte Striche sind schlechtes Layout und sollten vermieden werden. Ganz fürchterlich wird es wenn Worte (Schlitztiefenverstellung, Lasserschnittstellenanzeige) auch noch durchstrichen werden. Waagerechten Linien (dazu zählen auch Unterstreichungen) sollten ausschließlich zur Trennung von Informationen verwendet werden - wenn überhaupt.

Der Text sollte dem Zielpublikum angepasst werden, Fachbegriffe in Umgangssprachliche umgewandelt werden.

Gruss

MrMurphy

Hallo

include ist ein PHP-Befehl. PHP ist eine Programmiersprache und kein HTML.

Um PHP-Befehle ausführen zu können muss im Hintergrund ein PHP-Server laufen.

Gruss

MrMurphy

Hallo

Zitat

Ich denke mal, so in etwa ist es das was du erfahren möchtest?

Wohl eher nicht, siehe

Zitat

derzeit verwenden wir nur HTML

Gruss

MrMurphy

Hallo

Ich verstehe dich leider nur teilweise. Mir ist nicht immer klar wann du von Verzeichnissen oder Dateinamen oder der Navigation schreibst.

Insgesamt solltest du aber wie schon geschrieben auf unnötige Unterverzeichnisse verzichten.

Gruss

MrMurphy

Hallo

So ganz verstehe ich dein Problem nicht.

Erstellt ihr die Seiten nur mit HTML und CSS? Oder verwendet ihr auch Programmiersprachen wie PHP oder JavaScript? Und welche HTML-Version?

Muss die Navigation bestimmte Anforderungen erfüllen? Zum Beispiel aus Listen bestehen? Oder Aufklappbar sein?

Die Verzeichnisstruktur dürft ihr offensichtlich frei wählen.

Wie viele und welche HTML-Seiten sollt ihr oder willst du erstellen?

Du solltest die Verzeichnisstruktur möglichst einfach halten. Bei kleineren Webauftritten nur mit HTML und CSS sowie bis zu 100, 200 HTML-Dateien reichen drei Verzeichnisse vollkommen aus:

• bilder
• css
• seiten

Diese Verzeichnisse enthalten keine weiteren Unterverzeichnisse. Für die drei Verzeichnisse kannst du natürlich auch andere Namen wählen.

In das root-Verzeichnis kommt eine einzige Datei (index.html) die nichts anderes tut als ohne Zeitverzögerung in das Verzeichnis Seiten zu wechseln und dort die Startseite (auch index.html oder willkommen.html oder start.html oder ...) aufzurufen.

Mit dieser einfachen aber sinnvollen und zweckmäßigen Verzeichnisstruktur ersparst du dir viel Arbeit und Ärger mit den Pfadnamen. Ein weiterer Vorteil ist, das du dich zur Wartung nicht durch elend verschachtelte Verzeichnisse klicken musst.

Wenn die einzelnen HTML-Dateien eine Struktur benötigen kannst du ihnen ein entsprechenden Prefix (Vorsatz) verpassen. Die könnte zum Beispiel so aussehen:

• index.html
• unternehmen.html
• unt_chef.html
• unt_mitarbeiter.html
• leistungen.html
• leist_planungdesign.html
• impressum.html

Die Unterseiten mit den Prefixen erhalten dann im HTML-Quelltext einfach eine zusätzliche Navigation. Da du mit Listen arbeitest also eine zweite Liste. Wobei du auf die Listen verzichten solltest, wenn sie im Lehrplan nicht direkt vorgeschrieben sind.

Damit sollte auch dein Problem mit dem Rücksprung erledigt sein, da sich alle HTML-Dateien in einem Verzeichnis befinden. In den Links müssen nur noch die Dateinamen angegeben werden.

Gruss

MrMurphy

Hallo

Hast du denn mal eine Beispielseite (keine für Webseitendesigner / -entwickler) für deine Vorgehensweise? Bei denen die Besucher das title-Element auch nutzen?

Und wie hast du das Problem mit den Touchscreens gelöst, die bereits über 70% aller Geräte im Internet ausmachen?

Gruss

MrMurphy

Hallo

Tut mir leid, aber Seiten, die nicht nur Fehler enthalten sondern wahrscheinlich sogar Schadprogramme, rufe ich nicht erneut auf.

Gruss

MrMurphy

Hallo

Zitat

wenn man die seite so aufruft ist alles genau da wo es hingehört

Ja, zufälligerweise. Die Browser versuchen auch trotz gravierenster Fehler die Seite sinnvoll anzuzeigen. Das kann, muss aber nicht funktionieren.

Das hat zwar den Vorteil, dass im Gegensatz zur Programmierung nicht jeder Fehler die Seite zerstört.

Das ganz große Problem ist aber, dass viele Webseitenersteller glauben, jeder Fehler werde von den Browsern ausgebügelt. Das ist aber falsch.

Offensichtlich hast du auch versäumt deine Seite mal in verschiedenen Browsern aufzurufen. Jeder hat nämlich seine eigene Fehlerkorrektur und zeigt fehlerhafte Seiten entsprechend unterschiedlich an.

Der Firefox lädt deine Seite nicht komplett.

Im Internet Explorer 11 erscheint ein rotes Hintergrundfenster mit dem Hinweis, dass die Seite unsicher sei und nicht aufgerufen werden solle.

Im Chrome wird mir dringend empfohlen meine Windows Treiber zu aktualisieren.

Im Opera wird vor Spy- und Adware-Aktionen gewarnt und ich solle eine bestimmte Telefonnummer anrufen um die zu beheben. Ich konnte die Seite nicht mal schließen, da immer wieder ein Hinweisfenster erschien.

Wenn du die Fehler auf deiner Webseite trotzdem für unbeachtlich hälst ist dir leider nicht zu helfen.

Gruss

MrMurphy

Hallo

Der Quellcode enthält viele (123) Fehler bei 60 Zeilen Quellext. Auch extreme, wie unzulässige Verschachtelungen. Die müssen zunächst beseitigt werden. Siehe

https://validator.w3.org/check?verbose=…ams.esy.es%2F01

Vorher ist es leider sinnlos sich mit der Positionierung und dem Verhalten von Elementen zu beschäftigen.

Gruss

MrMurphy

Hallo

Zitat

Sicher lässt es sich auch gut für SEO verwenden.

Das ist eine Legende, die entsprechend nicht stimmt.

Zitat

Was habt Ihr sonst noch für Verwendungen dafür?

Gar keine, das title-Attribut ist überflüssig.

Es baut Barrieren auf, indem es den Lesefluß behindert und dem Besucher sogar Informationen vorenthält. Wer seine Seite für seine Besucher erstellt und sie entsprechend benutzerfreundlich gestalten möchte, sollte auf das title-Attribut komplett verzichten.

Zunächst erkennen viele Besucher überhaupt nicht, das sich hinter bestimmten Wörtern oder Zeichen zusätzliche Informationen verbergen. Es gehört zu den Elementen, die für Webseitenersteller so geläufig sind, dass sie sich leider überhaupt nicht vorstellen können, dass ihre Besucher teilweise damit überhaupt nichts anfangen können.

Selbst bei denen, die die Informationen finden, stört es den Lesefluß enorm. Wenn sie die Informationen nicht aufrufen meinen sie etwas verpassen zu können. Die Informationen abzurufen erfordert aber unnötige Zeit, da das entsprechende Element erst mal mit dem Mauszeiger anviesiert und das Popup aufgerufen werden muss.

Auf Touchscreens, die heutzutage bereits über 70% aller Geräte ausmachen, mit denen gesurft wird, ist die Bedienung noch schwieriger. Die kennen keine hover-Effekt und oft verbergen sich die Informationen hinter der Hand, deren Finger die Informationen abruft.

Frustrierend wird es auch, wenn SEO-süchtige Webseitenersteller jede Menge title-Attribute verwenden, hinter denen sich dann aber keine entscheidenden Informationen verbergen.

Für Besucher sind title-Attribute einfach abschreckend. Keiner will sie haben, viele Webseitenersteller bestrafen sie trotzdem dennoch rücksichtslos damit.

Alle Informationen sollten direkt les- und abrufbar sein.

Es bieten sich unter anderem zwei benutzerfreundliche Alternativen an:

1. Solche Zusatzinformationen werden in einem oder mehreren aside-Elementen bereitgestellt. Das ist schließlich genau für solche Informationen "erfunden" worden.

2. Die Informationen werden als Fußnoten bereitgestellt und verlinkt.

In beiden Fällen können die Besucher die dort hinterlegten Informationen problemlos finden und lesen. Zudem können sie entscheiden, ob sie die dort hinterlegten Informationen beziehungsweise Erklärungen zusammenhängend lesen wollen oder sie überhaupt nicht benötigen oder sie bei Bedarf wieder aufrufen wollen.

Zitat

Ich habe manchmal Bilder damit versehen

Dafür sind Bildunsterschriften besser geeignet. Die lassen sich problemlos von jedem Besucher erkennen und verursachen keine Zeitverluste beim Lesen.

Gruss

MrMurphy

Hallo

Mit deinen, zumal unvollständigen, Quellcodeschnipseln können wir nichts anfangen. Zeig uns lieber einen Link zu der Seite.

Und die Angabe

Zitat

immer wenn ich jetzt im unteren bereich

ist leider absolut nichtssagend. Ich weiß jendenfalls nicht wo "im unteren bereich" ist.

Gruss

MrMurphy

Hallo

Zitat

Ist der Code vom Aufbau so Okey?

Das lässt sich bei unfertigen Seiten schwierig beurteilen. Im Moment noch nicht.

Das HTML ist nicht aktuell. Zu aktuellem HTML5 gehört zum Beispiel, das auch die entsprechenden Container wie header, main, footer, nav, article, section, aside, figure verwendet werden. div dürfen nur verwendet werden, wenn es keine geeigneteren neuen Container gibt. Seiten mit reinen div-Suppen werden deshalb als veraltet herabgestuft.

Andere Lösungen wie Zeilenumbrüche mit dem br-Element interessieren Suchmaschinen zwar nicht, haben aber auch mit aktuellem HTML5 / CSS3 nichts zu tun. Wobei das CSS die Suchmachinen nicht interessiert, aber zu HTML5 einfach CSS3 gehört.

Da gibt es also noch einiges zu tun.

Gruss

MrMurphy

Hallo

Wie soll eine Seite gefunden werden die noch gar nicht dauerhaft online ist? Wie schon geschrieben sollte mit drei, vier Monaten Vorlauf gerechnet werden.

Außerdem verheimlichst du bislang welche Suchbegriffe du benutzt. Allgemeine wie Schlachter, Wurst, Selbstvermarktung, Salami kannst du gleich vergessen.

Und die Seiten haben (für Suchmaschinen) keinen Inhalt. Blindtext wie "Lorem ipsum" und ähnliche landen bei Suchmaschinen ganz hinten. Auch Bilder sind für Suchmaschinen kein Inhalt.

Von den drei Hauptvoraussetzungen für gutes SEO ist also keine erfüllt.

Gruss

MrMurphy

Hallo

Zitat

Könnte es auch an dem Hoster liegen?

Das wird zwar manchmal behauptet, stimmt aber nicht. Genau so, wie die meisten SEO-Tricks und Geheimrezepte.

Gruss

MrMurphy

Hallo

Ohne die Seite und den Quelltext zu kennen ist eine konkrete Hilfe nicht möglich. Außerdem muss bekannt sein, welche Suchbegriffe verwendet werden.

Und die Angabe

Zitat

wir sind auf Google nicht findbar!

sagt so ziemlich gar nichs aus.

Entscheidend für das Google-Ranking sind drei Ansätze:

1. Die Seite sollte mit aktuellem HTML / CSS erstellt werden und überhaupt Inhalt haben. Damit sind bereits über 90% aller möglichen SEO getan.

2. Die Suchbegriffe sollten nicht zu allgemein sein. Speziell wenn sie von vielen Gewerbetreibenden verwendet werden.

3. Zeit: Innerhalb von ein, zwei Monaten ist kein gutes Suchmaschinen-Ranking erwartbar. Außer, die Suchbegriffe sind sehr exotisch, also selten.

Gruss

MrMurphy

Hallo

neilwave hat das Forum das letzte Mal am 21.09.2015 besucht. Es ist unwahrscheinlich das er wieder auftaucht, ohne dass er ein neues Problem hat.

Gruss

MrMurphy

Hallo

Zitat

Welchen Code muss ich dafür benutzen, wenn "&#x2713" falsch ist?

Das Semikolon am Ende fehlt, also "✓". Die meisten Browser zeigen den Haken ohne Semikolon zwar auf Grund der eingebauten Fehlerkorrektur trotzdem an - müssen sie aber nicht.

Zitat

Und noch eine letzte Frage, was müsste ich im style ändern, damit die div Container von der rechten Seite ganz nach unten rutschen, wenn mann die Seite z.B. auf dem Netbook oder Handy anschaut?

Wenn du bei float bleiben willst:

a) Im Quelltext den Text für den rechten Container unter den Quelltext für den linken Container verschieben.

b) Eine sogenannte "Media Query" einbauen und in der Media Query den beiden Containern eine Breite von 100% geben.

Dazu könntest du direkt vor dem schließenden style-Tag im head-Bereich, also nach

.service-unten {
float: right;
width: 100%;
background-color: white;
margin-top: 0px;
margin-right: 10px;
border: 2px solid #858d93;
border-radius: 0px 0px 10px 10px;
}

folgendes eintragen:

@media only screen and (max-width: 800px) {
      #service,
      #inhalt {
         width: 100%;
         padding: 0;
         border: 0;
         margin: 0;
      }
   }

Falls du seitliches padding, border oder margin benötigst musst du die dann von der width abziehen. Wenn du über 100% kommst müssen die Besucher ansonsten seitlich scrollen.

Die 800px bestimmten die Fensterbreite, bei denen die MediaQueries aktiv werden. Die kannst du also entsprechend deinen Wünschen anpassen. Wenn du dort 1000px einträgst erfolgt der Umbruch in eine Spalte bereits früher, halt bei 1000px Fensterbreite.

Gruss

MrMurphy

Hallo

Zitat

und auch die prozentuale Größe angegeben.

Nein. Zur Größe gehören auch die Außenabstände (margin). Und die hast du in em angegeben.

Zitat

Trotzdem rutschen die Container untereinander, wenn ich den Bildschirm verkleinere z.B auf dem Netbook.

In dem Quelltext floaten 2 Container nebeneinander: div#service und div#inhalt

div#service hat eine Breite von 25% + 2em

div#inhalt hat eine Breite von 70% + 2em

Für 4em stehen also 5% der Breite zur Verfügung. Folge: Wenn die 4em breiter als 5% werden passen die beiden Container nicht mehr nebeneinander und rutschen untereinander.

Kurze Berechnung:

Wenn 5% = 4em dann 95% = 76em

4em + 76em = 80em

Sobald der Platz für die beiden Container auf unter 80em (=etwa 1280px) sinkt passen sie nicht mehr nebeneinander.

Mögliche Abhilfen:

a) Du gibst wirklich alle Breiten in % an, also auch margin (und je nach Boxmodell auch padding und border)

b) Du verwendest die Berechnungsmöglichkeit calc

c) In Hinblick auf die Zukunft am sinnvollsten: Du verwendest statt float das Flexbox-Modell

Zitat

Auch das Logo ganz oben wird rechts abgeschnitten.

Das ist das normale Verhalten von Hintergrundbildern. Sie skalieren nicht mit.

Abhilfe schafft die CSS-Anweisung: background-size, in deinem Fall wohl mit dem Wert "contain".

Siehe zum Beispiel

https://wiki.selfhtml.org/wiki/CSS/Eigen…background-size

Falls noch mehr Probleme auftauchen solltest du zunächst die Fehler im Quellcode beseitigen. So fehlen einige wichtige Angaben wie die charset-Angabe oder id sind unzulässigerweise mehrfach vergeben.

Gruss

MrMurphy

Hallo

Ich habe noch nicht durchschaut was du eigentlich erreichen möchtest.

Sinnvollerweise werden border, die nicht angezeigt werden sollen, gar nicht erst eingefügt.

Ich gehe mal von folgendem Darstellungswunsch aus:

- border-left und border right sollen nur in der waagerechten Navigation angezeigt werden
- beim ersten (linken) li-Element soll links kein border-left angezeigt werden
- beim letzten (rechten) li-Element soll rechts kein border-right angezeigt werden
- alle senkrechten li-Elemente sollen links und rechts keinen Rahmen erhalten

Das wird folgendermaßen erreicht:

Zunächst werden die folgenden CSS-Anweisungen gelöscht oder auskommentiert:

nav li:last-child {
      border-right: none;
   }
   nav li:first-child {
      border-left: none;
   }
...
   nav ul li {
      float: left;
      border-left: 1px solid #474747;
      border-right: 1px solid #000000;
   }

Dann werden folgende CSS-Anweisungen hinzugefügt:

nav ul li {
      float: left;
   }
   nav>ul>li:nth-child(1n+2) {
      border-left: 1px solid #474747;
      /*border-left: 5px solid orange;*/
   }
   nav>ul>li:nth-last-child(1n+2) {
      border-right: 1px solid #000000;
      /*border-right: 5px solid red;*/
   }

Die beiden auskommentierten Anweisungen kannst du aktivieren wenn die seitlichen border deutlicher angezeigt werden sollen. Unsichtbare oder fast unsichtbare Elemente sind zum Testen ungeeignet.

Gruss

MrMurphy