HILFE bei der Anpassung der bei der Gilde

[DownBoY]

Hallo liebe Profiis...

Ich benötige Hilfestellung mal wieder..

Wie bekomme ich die html boxen richtig aufgeteilt ? und das diese sich nicht mehr verschieben?

Erfahre mehr unter: http://www.gilde-invictus.de/g3p5-Ucxyxccyxcxynbenannt.html

[tk]

Moin,

Wie bekomme ich die html boxen richtig aufgeteilt ? und das diese sich nicht mehr verschieben?

Was du mit aufgeteilt genau meinst, weiß ich nicht – dass sich Boxen verschieben ist allerdings durchaus gewünscht: so können die Boxen bei Bedarf (z.B. wenn die Seite auf einem Gerät mit sehr schmalem Display aufgerufen wird) untereinander dargestellt werden. Löse dich von der Vorstellung dass eine Internetseite auf jedem Gerät gleich aussieht, das hat ohnehin noch nie wirklich funktioniert.

Erfahre mehr unter: http://www.gilde-invictus.de/g3p5-Ucxyxccyxcxynbenannt.html

Ich glaube nicht dass du die quasi unlesbare Fehlermeldung (schwarz auf dunktelgrau) samt Loginformular meinst – du musst schon eine Seite verlinken die wir auch anschauen können. Besser wäre es noch wenn du hier noch etwas genauer beschreibst wo das Problem genau liegt.

Gruß
Tobias

[DownBoY]

Uppps 😀 Tut mir leid dann versuche ich es nochmal xDDD

Also mit aufteilung meine ich, dass diese Boxen synchron sein sollen, weil ich das irgendwie besser finde ? weil erst kommt eine BoX alleine die ist ja auch von A zu B Groß... und dann folgen 2 kleinere.. und da müsste es dann doch eigentlich mit A zu B zu C sein damit es Runder aussieht oder nicht ?? Das die homepage breite 50% die linke Box ein nimmt und 50% die Rechte BoX ?...

Dann mein nächstes problem xxD ich wollte ein Kontaktformular Erstellen.. aber irgendwie funktioniert es nicht.. Also Optisch ist es eigentlich ganz okay.. aber könnte auch besser sein..

<form>
  <div class="form-group">
    <label>Charakter Ingame Name *</label> <input type="text" class="form-control" name="text_name" placeholder="Dein MainChakrater Namen" required="required">
  </div>

  <div class="form-group">
    <label>Alle Details zu deinem Charakter *</label> 
    <textarea class="form-control" name="textarea_name" placeholder="Klasse | Beruf | Level | Spezialisierung uvm..." required="required">
</textarea>
  </div>

  <div class="form-group">
    <label>Vorname *</label> <input type="text" class="form-control" name="vorname" placeholder="Vorname" required="required">
  </div>

  <div class="form-group">
    <label>Nachname *</label> <input type="text" class="form-control" name="nachname" placeholder="Nachname" required="required">
  </div>

  <div class="form-group">
    <label>E-Mail *</label> <input type="email" class="form-control" name="email_name" placeholder="[e-mail]">
  </div>

  <div class="form-group">
    <label>Betreff *</label> <input type="text" class="form-control" name="betreff" placeholder="Betreff" required="required">
  </div>

  <div class="form-group">
    <label>Nachricht *</label> 
    <textarea class="form-control" name="mitteilung" placeholder="Schreibe hier deine Nachricht an uns..." required="required">
</textarea>
  </div>

  <div class="form-group">
    <input type="submit" class="btn btn-primary" name="abschicken" value="Abschicken">
  </div><small>Felder markiert mit * sind Pflichtfelder.</small>

</form>

[Der Martin]

Hallo,

Also mit aufteilung meine ich, dass diese Boxen synchron sein sollen, weil ich das irgendwie besser finde ? weil erst kommt eine BoX alleine die ist ja auch von A zu B Groß... und dann folgen 2 kleinere.. und da müsste es dann doch eigentlich mit A zu B zu C sein damit es Runder aussieht oder nicht ?? Das die homepage breite 50% die linke Box ein nimmt und 50% die Rechte BoX ?...

wirklich verstanden habe ich nicht, was du in diesem Absatz wirklich sagen willst. Ob's an den vielen Fehlern liegt? Oder an den unvollständigen Sätzen? Am konfusen Satzbau?

Dann mein nächstes problem xxD ich wollte ein Kontaktformular Erstellen.. aber irgendwie funktioniert es nicht.. Also Optisch ist es eigentlich ganz okay.. aber könnte auch besser sein..

Es könnte tatsächlich besser sein. Vor allem fehlt natürlich ein action-Attribut im einleitenden form-Tag, damit das Formular überhaupt etwas bewirken kann.

<form>
  <div class="form-group">
    <label>Charakter Ingame Name *</label> <input type="text" class="form-control" name="text_name" placeholder="Dein MainChakrater Namen" required="required">
  </div>

  <div class="form-group">
    <label>Alle Details zu deinem Charakter *</label> 
    <textarea class="form-control" name="textarea_name" placeholder="Klasse | Beruf | Level | Spezialisierung uvm..." required="required">
</textarea>
  </div>

  <div class="form-group">
    <label>Vorname *</label> <input type="text" class="form-control" name="vorname" placeholder="Vorname" required="required">
  </div>

  <div class="form-group">
    <label>Nachname *</label> <input type="text" class="form-control" name="nachname" placeholder="Nachname" required="required">
  </div>

  <div class="form-group">
    <label>E-Mail *</label> <input type="email" class="form-control" name="email_name" placeholder="[e-mail]">
  </div>

  <div class="form-group">
    <label>Betreff *</label> <input type="text" class="form-control" name="betreff" placeholder="Betreff" required="required">
  </div>

  <div class="form-group">
    <label>Nachricht *</label> 
    <textarea class="form-control" name="mitteilung" placeholder="Schreibe hier deine Nachricht an uns..." required="required">
</textarea>
  </div>

  <div class="form-group">
    <input type="submit" class="btn btn-primary" name="abschicken" value="Abschicken">
  </div><small>Felder markiert mit * sind Pflichtfelder.</small>

</form>

Die vielen div.form-group möchten in Wirklichkeit fieldsets sein. Und den labels fehlt die Zuordnung zu ihren form controls. Im einfachsten Fall sollte das jeweilige form control ein Kindelement des label sein.

Ansonsten solltest du etwas konkreter, spezifischer werden.

Immer eine Handbreit Wasser unterm Kiel
 Martin

[tk]

Moin,

Es könnte tatsächlich besser sein. Vor allem fehlt natürlich ein action-Attribut im einleitenden form-Tag, damit das Formular überhaupt etwas bewirken kann.

Das action-Attribut darf fehlen (dann gilt die aktuelle URL als Standardwert) – was allerdings fehlt ist ein method="post" damit die Daten nicht per get-Request übertragen werden und damit in der URL stehen.

Ansonsten wäre natürlich noch die Definition von „funktioniert nicht“ interessant …

Gruß
Tobias

[Der Martin]

Hallo Tobias,

Vor allem fehlt natürlich ein action-Attribut im einleitenden form-Tag, damit das Formular überhaupt etwas bewirken kann.

Das action-Attribut darf fehlen (dann gilt die aktuelle URL als Standardwert)

das ist mir wohl bekannt, aber dass der OP ein solches Hybrid-Script baut, habe ich nicht erwartet.

was allerdings fehlt ist ein method="post" damit die Daten nicht per get-Request übertragen werden und damit in der URL stehen.

Das sehe ich, je nachdem, wie vertraulich die Daten sind, und je nachdem, was das Formular bewirken soll, nicht unbedingt als Problem.

Ansonsten wäre natürlich noch die Definition von „funktioniert nicht“ interessant …

Ja, auf jeden Fall.

Immer eine Handbreit Wasser unterm Kiel
 Martin

[MudGuard]

Hi,

Vor allem fehlt natürlich ein action-Attribut im einleitenden form-Tag, damit das Formular überhaupt etwas bewirken kann.

Das action-Attribut darf fehlen (dann gilt die aktuelle URL als Standardwert)

Das war m.E. in HTML bis 4.01 der Fall.

Bei HTML 5 darf's, wenn ich mich richtig erinnere, nicht mehr fehlen (darf aber leer sein).

Ist m.W. einer der wenigen Punkte, in denen HTML 5 nicht ganz abwärtskompatibel ist.

cu,
Andreas a/k/a MudGuard

[tk]

Moin,

Das action-Attribut darf fehlen (dann gilt die aktuelle URL als Standardwert)

Das war m.E. in HTML bis 4.01 der Fall.

Bei HTML 5 darf's, wenn ich mich richtig erinnere, nicht mehr fehlen (darf aber leer sein).

Genau andersrum: in HTML 4.01 ist das action-Attribut Pflicht, bei HTML 5 darf es fehlen und wenn es existiert darf es nicht leer sein.

Gruß
Tobias

[MudGuard]

Hi,

Genau andersrum: in HTML 4.01 ist das action-Attribut Pflicht, bei HTML 5 darf es fehlen und wenn es existiert darf es nicht leer sein.

Ich wußte doch, daß es da eine Inkompatibilität gibt. Das Wie ist mir entfallen (ich werd nicht jünger ...).

Wer früher action="" geschrieben hat, muß das bei Umstellung auf HTML5 weglöschen. Warum man die relative Url "" nicht mehr zugelassen hat, verstehe ich nicht wirklich … Daß man als alternative Schreibweise zu action="" auch das Weglassen des Attributs erlaubt, wäre ja ok gewesen, aber action="" zu verbieten ist m.E. Unsinn.

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@Der Martin

Die vielen div.form-group möchten in Wirklichkeit fieldsets sein. Und den labels fehlt die Zuordnung zu ihren form controls. Im einfachsten Fall sollte das jeweilige form control ein Kindelement des label sein.

Schön wär’s. Aber Dragon …

😷 LLAP

[Gunnar Bittersmann]

@@Der Martin

Die vielen div.form-group möchten in Wirklichkeit fieldsets sein.

Nein, das möchten sie auf gar keinen Fall.

Es macht überhaupt keinen Sinn, jeweils ein einzelnes Eingabelement in einem fieldset zu „gruppieren“.

Zum Gruppieren von label und input könnte man p verwenden – oder halt div.

Und den labels fehlt die Zuordnung zu ihren form controls.

Und so geht’s: input-Element bekommt ein id-Attribut (kann derselbe Wert wie beim name sein – außer natürlich bei Radiobuttons); label-Element bekommt ein for-Attribut mit demselben Wert. Beispiel:

  <div class="form-group">
    <label for="text_name">Charakter Ingame Name *</label>
    <input type="text" class="form-control" name="text_name" id="text_name" required="required">
  </div>

Das placeholder-Attribut hab ich bei der Gelgenheit gleich entsorgt. Das Ding ist in nahezu 100% aller Fälle Unsinn.

😷 LLAP

[Rolf B]

Hallo DownBoY,

ich vermute, dass Du Dir für die Startseite einen Seitenaufbau vorstellst, in dem - von oben nach unten - das Logo-Bild mit dem "Einloggen" Button kommt, dann das Menü, dann der Infobereich mit Übersicht, WoW Geschichte und Mitglied werden, darunter über die ganze Breite der "Willkommen" Blick, dann nebeneinander die beiden Blöcke "Gilde Invictus" und "SimpleTextBox". Danach das Registrierungsformular und darunter der Footer mit Impressum, FAQ, Mitgliederliste und "Wer ist Online".

Dazu zunächst einmal folgende Hinweise:

• Dein Logobild ist monströs. Es dauert über 3s, bis es geladen ist und es ist 8MB groß. Bei 1500x340 Pixel, d.h. ca 500000 Pixel, ist das unerklärlich viel. Bei mir belegt das Bild, als JPG mit höchster Qualität gespeichert, nur 300K. Bei reduzierter Qualität geht es auch auf 43K herunter, und ich erkenne kaum einen Unterschied.
• Dein Menü ist nicht bedienbar. Man kommt an die Untermenüpunkte nur per Maus heran, weil die Menüs nur per :hover aufklappen. Der Hauptmenüpunkt ist selbst ein Link, d.h. wenn man auf "Über uns" klickt, um die Untermenüs zu sehen, kommt man auf die "Über uns" seite. Das kann man machen, aber dann müssen sich auf dieser Seite Links auf "Invictus auf warcraftlogs", "Mitgliederliste" und "Gilderegeln" finden, so dass diejenigen, die kein Hover verwenden (können), an die Seiten herankommen. Schau Dir mal an, was Jürgen im Wiki unter "Zugängliche Drop-Down Navigation" geschrieben hat. Die ist Multilevel, aber so kompliziert brauchst Du es ja gar nicht 😀

Später mehr, muss jetzt vom PC weg.

Rolf

[Der Martin]

Hallo Rolf,

• Dein Logobild ist monströs. Es dauert über 3s, bis es geladen ist und es ist 8MB groß. Bei 1500x340 Pixel, d.h. ca 500000 Pixel, ist das unerklärlich viel.

du liebe Güte, ja. Ein Bild dieser Größe, also etwa 500k Pixel, wäre sogar unkomprimiert, also zum Beispiel als Windows-Bitmap (BMP), nur 1.5MB groß. Wie man da beim Speichern als JPEG die fünffache Datenmenge erzeugen kann, ist mir ein Rätsel. Das ist auch mit der großen Menge an EXIF- und XMP-Daten nicht zu erklären, und auch nicht mit dem Thumbnail, das Photoshop noch mit eingebaut hat.

Bei mir belegt das Bild, als JPG mit höchster Qualität gespeichert, nur 300K. Bei reduzierter Qualität geht es auch auf 43K herunter, und ich erkenne kaum einen Unterschied.

Das würde ich auch schätzen, zumal das Bild kontrastarm ist und das Histogramm erkennen lässt, dass die Zahl der tatsächlich verwendeten Farbnuancen relativ gering ist.

• Dein Menü ist nicht bedienbar. Man kommt an die Untermenüpunkte nur per Maus heran, weil die Menüs nur per :hover aufklappen.

FAIL. Gut beobachtet.

Später mehr, muss jetzt vom PC weg.

Es beruhigt mich irgendwie, dass du auch mal Phasen hast, wo du nicht 180% deiner Zeit auf Computer und Internet konzentrierst. Ich frage mich auch, wie du es regelmäßig schaffst, in kürzester Zeit sehr umfangreiche Beiträge zu schreiben. Für deine Verhältnisse wr dieser Beitrag ja schon echt kurz angebunden. 😉

Immer eine Handbreit Wasser unterm Kiel
 Martin

[Raketenwilli]

Ich habe mir das mal mit identify --verbose aus dem ImageMagick angesehen:

Original-Datei (7,9MB):

  Profiles:
    Profile-8bim: 5268 bytes
    Profile-app1: 7966946 bytes
    Profile-exif: 2884 bytes
    Profile-icc: 3144 bytes
    Profile-xmp: 2457 bytes

Dann habe ich das Zeug mit Gimp neu gespeichert (~300KB) und ebenso angesehen:

  Profiles:
    Profile-exif: 4270 bytes
    Profile-icc: 672 bytes

Laut https://iptc.org/download/events/pmdc2015/61_PeterSchelken_JPEG-Standards.pdf sind das Exif-Daten. Weiß der Teufel wozu die angeblich zur Erstellung dienende „Software Adobe Photoshop CS6 (Windows)“ hier die Exif-Header missbraucht.

Ich hoffe, der Rechner hat kein Virus.

[Der Martin]

Hallo,

  Profiles:
    Profile-8bim: 5268 bytes
    Profile-app1: 7966946 bytes
    Profile-exif: 2884 bytes
    Profile-icc: 3144 bytes
    Profile-xmp: 2457 bytes

so viel Info hat mein Grafik-Universaltool XnView leider nicht hergegeben. XnView hat "nur" die Blöcke angezeigt, die hier als Profile-exif, Profile-icc und Profile-xmp ausgewiesen sind.

Dann habe ich das Zeug mit Gimp neu gespeichert (~300KB)

Also etwa dieselbe Größenordnung, die Rolf auch erreicht hat.

Laut https://iptc.org/download/events/pmdc2015/61_PeterSchelken_JPEG-Standards.pdf sind das Exif-Daten. Weiß der Teufel wozu die angeblich zur Erstellung dienende „Software Adobe Photoshop CS6 (Windows)“ hier die Exif-Header missbraucht.

Der Fall ist so extrem, dass mich das sogar irgendwie interessieren würde.

Immer eine Handbreit Wasser unterm Kiel
 Martin

[Rolf B]

Hallo,

ich habe mal den hier probiert: https://cyber.meme.tips/jpdump

Da ist ein Haufen app0 Blöcke drin, alle 64K groß, die zusammen ein riesiges xmlmeta XML Dokument bilden. Es sieht so aus, als bestünde das Ding aus einer Masse von rdf:li Einträgen, die jeweils ein relatives kurzes Hex-Häppchen bilden.

Also eher kein Virus, sondern eher Arbeitsdaten. Ich würde annehmen, dass man diesen Teil beim Speichern des JPG ausblenden kann.

Rolf

[Rolf B]

Hallo DownBoY,

ich mach mal weiter.

Deine Cookie-Politik ist fragwürdig. Du nagelst mich mit Youtube Keksen zu und nennst das berechtigtes Interesse. Ich bezweifle sehr stark, dass "meine Seite sieht gut aus und kann ein kleines Video über die Geschichte von WoW anzeigen" ein berechtigtes Interesse ist, das meine Datenschutzinteressen überwiegt.

Man kann die Cookie-Settings nicht nachträglich ändern. Zumindest finde ich nichts. Man würde eine solche Funktion auf der Datenschutzseite erwarten, deren Link Du in kontrastschwachem Lila auf Schwarz ganz unten versteckst, statt ihn deutlich neben das Impressum zu stellen. Du weist in den Cookie-Settings auch nicht auf youtube hin, oder auf andere verwendete Dienste. Du sagst, dass Du Werbung machst, aber Du nennst die genutzten Dienste nicht. Und Du setzt Youtube-Cookies, bevor der Anwender irgendwas tun kann, d.h. selbst dann, wenn ich deine Seite sofort nach Aufruf verlasse, habe ich bereits youtube-Cookies eingefangen.

Die Hauptgliederung deiner Seite ist eine Table. Eine Row für die drei kleinen "Fensterchen" oben, eine Row für die vier Boxen unten. Dann das <div class="footer">, das gerne ein <footer> Element sein möchte, DANN Styles, HTML und Script für den Chat, DANN Klaro, dann der Foren-Footer (als Table!!!), und dann ein kaputter Link auf faq.html#privacy - eine ID, die es dort nicht gibt (es ist privacydiv).

Befasse Dich mit CSS Grid Layout für deine grundsätzliche Seitengestaltung. Mach deinen kompletten Body zu einem Grid und verteile deine Inhalte damit. Du kannst in einem Grid Template benannte Bereiche festlegen und deinen HTML Bereichen Gridbereiche zuordnen (grid-area Eigenschaft im CSS). Der Browser verteilt deine HTML Blöcke dann an Hand des Grid Templates. Über eine Media Query kannst Du erreichen, dass bei hinreichend breiten Bildschirmen das Template geändert wird, so dass mehr Dinge nebeneinander als untereinander stehen. Mit Hilfe der justify- und align-Eigenschaften kannst Du beeinflussen, wie die Grid-Zellen selbst und die Inhalte der Gridzellen platziert werden. Damit solltest Du deine Layout-Tabellen und "handgemachte" Zentrierungen wie für den Forum-Footer loswerden können.

Deinen Footer-Bereich solltest Du auch aufräumen, das ist alles ein Footer mit unterschiedlichen Abschnitten, und das sollte aus einem Guss gestaltet werden und nicht blindlings untereinander geklebt werden.

Rolf

[klawischnigg]

Hi there,

Hallo liebe Profiis...

Ich benötige Hilfestellung mal wieder..

Und immer schön sprechen! Es heisst "registrieren" und nicht regestrieren, wie auf Deiner Seite. Nimm' Dir doch einfach das "i", das bei den Profiis zu viel ist...