Button als Icon mit Tooltip

[hmm]

Hi Leute,

ich bau mal wieder an einer Webseite und möchte jetzt Html Inputfelder vom Typ "Button" als Icon darstellen und mit einem Tooltip ausrüsten. Die Html Button bau ich mit JS.

Gibt es einen sauberen Weg das zu machen? Im Internet werden Divs definiert die dann wiederum per css mit Tooltip und Icon befüllt werden. Macht man das so oder geht das sauberer?

p.s.: Ich habe hier schon viele Tipps für meine Webseite bekommen, ich poste demnächst wie die Seite inzwischen aussieht!

[Auge]

Hallo

ich bau mal wieder an einer Webseite und möchte jetzt Html Inputfelder vom Typ "Button" als Icon darstellen und mit einem Tooltip ausrüsten. Die Html Button bau ich mit JS.

Ein inputvom Typ button hat keinen Inhalt, außer seinem value. Heutzugate gibt es keine Browser mehr, für die man <input type="button"> braucht. Nimm stattdessen, erst recht, wenn du irgendwas gestaltbares machen willst, einen button. Dem kannst du jegliche HTML-Elemente verpassen.

Erstelle den Tooltip, so es den wirklich einen braucht, mit dem Attribut title.

Gibt es einen sauberen Weg das zu machen?

S. o.

Im Internet werden Divs definiert die dann wiederum per css mit Tooltip und Icon befüllt werden.

Aua!

Macht man das so …

Nein.

… oder geht das sauberer?

S. o.

Tschö, Auge

[Martl]

Hallo hmm,

Gibt es einen sauberen Weg das zu machen?

Ja, CSS und <button>.

Grüße, Martl

[hmm]

Danke!

Muss ich jetzt für jeden meiner 5 Buttons eine eigene css Klasse anlegen?

.addMitarbeiter-button {
	background: url('../images/icons/add-employee.png') center center no-repeat;
  	width: 30px;
  	height: 30px;
  	background-color: rgb(255, 235, 156);
}

Der CSS Code ist, ausser der url, redundant.

[Auge]

Hallo

Da wir deinen HTML-Quelltext nicht kennen, können wir das nicht mit Gewissheit sagen. Eventuell kannst du die Buttons auch anhand ihrer Namen oder anderer Attribute oder Attributwerte unterscheiden.

button {
}
button[name="geschaeftspartner"] {
}
button[name="mitarbeiter"] {
}

Tschö, Auge

[Martl]

Hallo hmm,

nein; eine Möglichkeit: Eine für alle und das Icon als <img> in den <button>. Wie Auge schon sagte: "Dem kannst du jegliche HTML-Elemente verpassen."

Grüße, Martl

[Gunnar Bittersmann]

@@hmm

ich bau mal wieder an einer Webseite und möchte jetzt Html Inputfelder vom Typ "Button"

Für Buttons gibt es das button-Element. Dieses solltest du nehmen, nicht <input type="button">

als Icon darstellen

Im button-Element kannst du Markup unterbringen, auch ein img-Element. Alternativtext nicht vergessen!

und mit einem Tooltip ausrüsten.

Dafür gibt es das title-Attribut. Bedenke, dass nur ein Teil der Nutzer sowas wie eine Maus hat und in den Genuss des Tooltips kommen kann.

<button id="v1" title="Auf nach San Escobar!">
	<img src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Flag_of_San_Escobar.svg" alt="San Escobar" width="42"/>
</button>

Hinweise:

• Icons sollten üblicherweise als Vektorgrafiken (SVG) vorliegen, nicht als Rastergrafiken (PNG, GIF, schon gar nicht JPEG)
• Die Breite hab ich da mal mit reingesetzt; die sollte aber besser im Stylesheet angegeben werden.

Die Html Button bau ich mit JS.

??

Im Internet werden Divs definiert

Button dürfen keine div-Elemente sein. Solche wären nicht für alle Nutzer bedienbar.

LLAP 🖖

[JürgenB]

Hallo,

und mit einem Tooltip ausrüsten.

Dafür gibt es das title-Attribut. Bedenke, dass nur ein Teil der Nutzer sowas wie eine Maus hat und in den Genuss des Tooltips kommen kann.

ich habe für meine Seite da mal was gebastelt:

[title]:focus::after {
  content: attr(title); 
  position: absolute; 
  margin-top: 2em;
  margin-left: -6.5em;
  padding: .2em; 
  font-size: 0.8em;
  border: 1px solid black;
  background-color: #fff;
  color: #000; 
  white-space: nowrap;

Gruß
Jürgen

[Matthias Apsel]

Hallo JürgenB,

ich habe für meine Seite da mal was gebastelt:

[title]:focus::after {
  content: attr(title); 
  position: absolute; 
  margin-top: 2em;
  margin-left: -6.5em;
  padding: .2em; 
  font-size: 0.8em;
  border: 1px solid black;
  background-color: #fff;
  color: #000; 
  white-space: nowrap;

Ein solcher Tooltip hat aufgrund der absoluten Positionierung allerdings den Nachteil, dass er sich auch außerhalb des Viewports befinden kann.

Bis demnächst
Matthias

[JürgenB]

Hallo Matthias,

Ein solcher Tooltip hat aufgrund der absoluten Positionierung allerdings den Nachteil, dass er sich auch außerhalb des Viewports befinden kann.

das ist jetzt auf meinen Seiten kein Problem, da der Button mit genügend Abstand zum Rand positioniert ist. Evtl. kann man hier mit Javascript noch etwas nachhelfen. Ich habe es auch nach der Devise „besser als nichts“ eingebaut.

Gruß
Jürgen

[hmm]

Danke für die Tipps!

Die Seite sieht aktuell so aus:

https://scala-play-framework-11-blutwurst1.c9users.io/

Login geht per:

Christopher

hallo123

Die Registrierung geht ebenfalls (aktuell noch ohne Aktivierungslink). Registriert man sich z.B. per

Vorname: Tester

Nachname: Muster

So ist der Loginname (mit Leerzeichen): Tester Muster

Ich muss die Loginseite noch, wie hier im Forum besprochen, ausbessern/korrigieren. Nachdem einloggen kommt ihr auf die Seite auf der ich die Buttons gemacht habe. Die Buttons tun auch alle genau das, was der Tooltip verspricht (probierts aus!). Die Skillnamen, Mitarbeiternamen und die Zahlen können direkt durch reinklicken überschrieben werden.

Eine Kollegin hat kurz draufgeschaut und meinte, dass die Seite "verloren" aussieht... Ist das was ich da gebaut habe kompletter Mist? Sollte ich mir nochmal ein neues Konzept für die Seite ausdenken? Wie schätzt Ihr das Projekt aktuell ein?

Ich habe vor das Grundgerüst bzw. den Grundcode der Seite in ca. 6-10 Monaten zu verwenden um das Programm das ich in meiner Masterarbeit entwickle zu veröffentlichen.

[hmm]

Beim hinzufügen neuer Mitarbeiter werden aktuell noch drei Spalten zuviel gesetzt, korrigiere ich morgen zusammen mit der Login-Seite

[Julius]

Hallo hmm,

die Login-Seite ist auf schmalen Viewports nicht zu gebrauchen (Bild verdeckt Formular). Die Seite selbst ebenfalls. Außerdem sehe ich keinen horizontalen Scrollbalken (wird der vom Footer verdeckt?). Des Weiteren finde ich persönlich immer sichtbare Footer (oder Menüs) doof, weil sie Platz wegnehmen und vom eigentlichen Inhalt ablenken. Ich kann ja nach unten Scrollen, um den Footer zu sehen (dort erwartet man ihn und auch das Impressum und die AGBs normalerweise).

Gruß
Julius

[hmm]

Danke, ich bau jetzt die Fehler aus und mache, dass das auch auf dem Handy geht.

Sollte ich noch etwas am Desing verbessern bevor ich Firmenintern eine Desingerin frage? (die sitzt in der Chefetage...)

Wo pack ich die Knöpfe hin? In den Header oder an die Seite oder lass ich die da wo sie sind? Sollte ich die Tabellenanordnung ändern? Gibt es irgendwelche Konventionen?

[dedlfix]

Tach!

Die Seite sieht aktuell so aus:

https://scala-play-framework-11-blutwurst1.c9users.io/

Mit anderen Worten: schrecklich. Sehr unruhig, alles steht irgendwie in der Gegend rum, manches um ein paar Pixel versetzt. Wenn du kein Händchen für Oberflächen hast, was ja nicht per se schlimm ist, dann versuch dich mal an Bootstrap. Das ist nicht unbedingt der Weisheit letzter Schluss, aber damit bekommt man auch mit wenig künstlerischer Fertigkeit ein brauchbares Ergebnis zustande. Und das sogar responsiv mit sehr wenig Mehraufwand.

dedlfix.

[hmm]

Ok. Ich hatte Bootstrap in meinem Webkurs.

Was genau soll ich mit Bootstrap anstellen? Woran kann ich mich orientieren?

[Achot]

Hallo,

wenn du überhaupt kein Händchen hast was das Design betrifft, nimm doch etwas fertiges. Gerade im Bootstrap Bereich gibt es so viele kopstenlose Vorlagen. Die @dedlfix schon gesagt hat, nicht jeder hat ein Händchen für Design, was überhaupt nicht schlimm ist. Man muss ich nur zu helfen wissen, wenn man sich keinen Grafiker leisten kann / will. Glaub mir, ich rede da aus Erfahrung.). Und mit jeder Anpassung die du an einem fertigen Template vornimmst, lernst du und wirst mutiger.

• http://t3n.de/news/kostenlose-bootstrap-themes-593928/
• http://blog.neweb.co/de/27-free-bootstrap-html-templates/
• https://speckyboy.com/free-bootstrap-3-templates/
• https://templatemag.com/free-bootstrap-templates/

Ansonsten kann ich dir die Videos vom Rheinwerk-Verlag sehr ans Herz legen: https://www.rheinwerk-verlag.de/video-trainings/grafik-design/webdesign/

[hmm]

danke!

die Templates sehen auf den ersten Blick alle fast gleich aus, ich guck die jetzt durch.

Hast du eine Empfehlung, welches gut passen könnte?

[Achot]

Also wenn diese http://blog.neweb.co/de/27-free-bootstrap-html-templates/ Templates alle gleich aussehen, dann habe ich etwas mit den Augen 😉 Aber ja, wenn man mit Bootstrap arbeitet und nicht aufpasst, dann sehen wirklich sehr viele Seiten gleich aus, es kommt eben auf Bilder, Texte und das verwendete Raste an. Da musst du dich selber durcharbeiten.

Eine Empfehlung kann ich dir leider nicht geben, da ich von Bootstrap immer Abstand genommen habe.

Du könntest mit diesem https://startbootstrap.com/template-overviews/modern-business/ anfangen und nach deinen Wünschen aufbauen, gestallten.

[hmm]

danke, das Ding nehm ich für die Willkommenseite.

Sollte nach dem Login noch ein Template kommen, z.B. dass von unten, oder programmiere ich das selber?

[Achot]

Ich persönlich würde ein Design für alle Seite nehmen. Das Login kann von mir aus etwas abgespeckt sein, vom Grundaufbau sollte es gleich sein.

[hmm]

ok, dann mach ich das so. danke!

vielleicht bin ich heut abend schon so weit und poste die ersten Fortschritte!

Sollte ich für meine Skillmatrix-Seite Bilderverwenden? Falls ja, eigene oder krieg ich da auch welche gratis die passen könnten?

Ich werde die Bildershow auf der Hauptseite aufjedenfall auf 1 Bild reduzieren, weil ich von Bilderwechsel Kopfschmerzen bekomme.

[Achot]

Sollte ich für meine Skillmatrix-Seite Bilderverwenden? Falls ja, eigene oder krieg ich da auch welche gratis die passen könnten?

Ich denke das ist Geschmacksache.

Wenn du kostenlose Bilder nehmen willst, dann schau mal hier: https://pixabay.com/

Wenn du Icons nehmen willst, schau hier: http://www.flaticon.com/ Hier am besten SVG auswählen und drauf achten, dass du im Impressum einen Hinweis auf die Seite setzt, wenn du diese kostenlos nutzen möchtest.

Ansonsten kannst du auch hier mal schauen: http://de.freepik.com/

[hmm]

mir tut sich gerade eine neue Welt auf, danke!

[Achot]

Bitte 😉 Man muss ich oftmals nur zu helfen wissen, wo man etwas herbekommt.

[hmm]

Das Template für die Login Seite:

https://bootstrapmade.com/demo/Butterfly/

Und das für den Bereich nach dem Login:

https://bootstrapmade.com/demo/NiceAdmin/

?

[Achot]

Müsstest du dieses nicht eher mit deiner Chefin klären bzw. mit deinem Kunden?

Sollte ich noch etwas am Desing verbessern bevor ich Firmenintern eine Desingerin frage? (die sitzt in der Chefetage...)

Wenn ich dich richtig verstehe, hast du einen Designer in der Firma? Dann frage ich mich, warum du dich damit überhaupt groß beschäftigst? Es gibt Frontend und Backend Entwickler. Und ich denke du gehörst eher zu den Backend Entwickler 😉

[hmm]

ich bin werkstudent und mache Querbeet alles. Die Webseiten Sache interessiert mich am meisten, auch weil ich mir zu meiner Masterarbeit eine eigene bauen möchte. Das Problem ist, dass mein Vorgesetzter kaum Zeit hat und die Desingnerin in der obersten Chefetage sitzt. (Die wäre quasi die Vorgesetzte, des Vorgesetzten, des Vorgesetzten meines Vorgesetzten... wir haben hier eine stark ausgeprägte Hierarchie...)

[beatovich]

hallo

https://bootstrapmade.com/demo/NiceAdmin/

Durchaus interessant, dass bootstrap.com den Online-Status von Usern merkt. Ich frage mich, wie dirty dieser "Dienst" sonst noch ist.

[Achot]

Wie kommst du darauf, dass dieser Dienst einen Online-Status merkt? Du weißt schon, dass https://bootstrapmade.com/demo/NiceAdmin/ ein Demo ist?

[beatovich]

hallo

Wie kommst du darauf, dass dieser Dienst einen Online-Status merkt? Du weißt schon, dass https://bootstrapmade.com/demo/NiceAdmin/ ein Demo ist?

Zumindest legt bootstrap nahe, dass das eine akzeptable Idee ist. Wer Ideen propagiert, nutzt sie wohl selber auch…

[Achot]

Hallo,

Zumindest legt bootstrap nahe, dass das eine akzeptable Idee ist. Wer Ideen propagiert, nutzt sie wohl selber auch…

schlimm wäre es, wen ein Dienst sich den aktuellen Status nicht merkt. Dann müssten sich die User ständig neu einloggen? Ich bin z.B. auf Twitter, Instagram, Facebook, Webmail, Google Drive und diversen anderen Seiten ständig eingeloggt.

Oder reden wir gerade aneinander vorbei?

[beatovich]

hallo

Hallo,

Zumindest legt bootstrap nahe, dass das eine akzeptable Idee ist. Wer Ideen propagiert, nutzt sie wohl selber auch…

schlimm wäre es, wen ein Dienst sich den aktuellen Status nicht merkt. Dann müssten sich die User ständig neu einloggen? Ich bin z.B. auf Twitter, Instagram, Facebook, Webmail, Google Drive und diversen anderen Seiten ständig eingeloggt.

Oder reden wir gerade aneinander vorbei?

Nein, du redest an dir selber vorbei. Der Zustand eines Session-Cookies hat nichts damit zu tun, ob ein User im Internet surft.

Aber hier ein nettes Szenario: Ein Chat gibt Auskunft darüber (an jeden) ob User xy sich eingeloggt hat (also technisch eine aktive Session hat). Du kannst nun den Usernamen schützen und statt dessen nur sandere Atribute aufführen

• Geschlecht
• Herkunftsland.

Ich hoffe du hast die Problematik erkannt.

[hmm]

frage am Rande:

Ich hab meinen Login/Session Zeugs einschließlich Sicherheit per Skala Play gebaut, überschneidet sich das mit Bootstrap? Ich dachte Bootstrap stellt nur css-Klassen?

Apropro, könnt ihr kurz testen ob das Login bzw. die Session bei dem Link den ich gepostet habe einigermassen vernünftig gemacht ist?

[Achot]

Bootstrap ist nur HTML und CSS und ab und an bisschen JS 😀 PHP und Co musst du selber reinfummeln.

[beatovich]

Apropro, könnt ihr kurz testen ob das Login bzw. die Session bei dem Link den ich gepostet habe einigermassen vernünftig gemacht ist?

Insofern beim Browser beim Aufruf deiner Seite kein Cookie erscheint, kann von einer Session auch nicht die Rede sein.

[hmm]

hm... ich habe mehrere .wthNewSession Aufrufe in meiner Scala Play Implementierung und benutze ein withNewSession.flashing um das Logout auszuführen. Ich dachte dass macht schon das nötigste.

[beatovich]

hallo

hm... ich habe mehrere .wthNewSession Aufrufe in meiner Scala Play Implementierung und benutze ein withNewSession.flashing um das Logout auszuführen. Ich dachte dass macht schon das nötigste.

Ich kann über die Interna da nicht mitreden.

Die Sache ist, dass du ein Login-Form bereitstellst, ohne dass ein Cookie erforderlich ist. Das macht natürlich so ein Formular angreifbar.

[dedlfix]

Tach!

hallo

https://bootstrapmade.com/demo/NiceAdmin/

Durchaus interessant, dass bootstrap.com den Online-Status von Usern merkt. Ich frage mich, wie dirty dieser "Dienst" sonst noch ist.

Ich sehe auf bootstrap.com keinen Dienst, nur eine Coming-Soon-Seite.

Falls du getbootstrap.com meinst, das wäre die Seite vom Bootstrap-Framework, da finde ich nichts, das einen Online-Status anzeigt.

Wenn du hingegen bootstrapmade.com meinst - welche Relation hat das zu Bootstrap, außer dass sie das Framework verwenden?

dedlfix.

[beatovich]

hallo

Falls du getbootstrap.com meinst, das wäre die Seite vom Bootstrap-Framework, da finde ich nichts, das einen Online-Status anzeigt.

Wenn du hingegen bootstrapmade.com meinst - welche Relation hat das zu Bootstrap, außer dass sie das Framework verwenden?

Das ist eine gute Frage.

Ich korrigiere hier meine Kritik zu dem in meinen Augen anstössigen Beispiel auf bootstrapmade.com.

[dedlfix]

Tach!

Ok. Ich hatte Bootstrap in meinem Webkurs.

Was genau soll ich mit Bootstrap anstellen? Woran kann ich mich orientieren?

Die Bootstrap-Dokumentation lesen, die Beispiele ausprobieren und kennenlernen, eine ganze Seite in Bootstrap bauen, schauen ob es gefällt, das Grid-System verstehen lernen und schauen, wie man es responsiv hinbekommt. Anschließend zurück zum Projekt gehen und für den Anfang eine Seite mit dem Formular in Bootstrap bauen.

Kurzform: Das übliche halt, um etwas kennenzulernen: sich damit beschäftigen.

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Wenn du kein Händchen für Oberflächen hast, was ja nicht per se schlimm ist, dann versuch dich mal an Bootstrap.

2017 jemandem die Verwendung eines externen Grid-Systems anstatt dass CSS-eigene zu empfehlen, ist wohl der Zeit etwas hinterher. Und präsentationsbezogenes Markup – was Bootcrap ja ist – ist sowieso bäh.^[1]

Außerdem fühle ich mich an Aral Balkan Artikel Design is not veneer erinnert.

LLAP 🖖

---

1. gut begründete Ausnamefälle ausgenommen ;-) ↩︎

[Achot]

Hallo @Gunnar Bittersmann,

2017 jemandem die Verwendung eines externen Grid-Systems anstatt dass CSS-eigene zu empfehlen, ist wohl der Zeit etwas hinterher. Und präsentationsbezogenes Markup – was Bootcrap ja ist – ist sowieso bäh.1

warum ist dann Bootstrap und Foundation in aller Munde und wird gefühlt in jedem Tutorial empfohlen? Ich glaube eher das Problem ist, dass sich viele einfach nicht mehr die Mühe machen und sich fertigen Code 1zu1 kopieren und sagen schaut her, hier ist meine fertige Seite. Daher sehen so viele Seiten einfach gleich aus.

[dedlfix]

Tach!

Wenn du kein Händchen für Oberflächen hast, was ja nicht per se schlimm ist, dann versuch dich mal an Bootstrap.

2017 jemandem die Verwendung eines externen Grid-Systems anstatt dass CSS-eigene zu empfehlen, ist wohl der Zeit etwas hinterher.

Das kann sein, aber mein Vorschlag richtete sich auch an jemanden, der nur versucht eine Webseite zu erstellen und nicht an jemanden, der neueste Technik einsetzen möchte - die noch dazu sehr rot ist. Immerhin ist Flexbox grad dabei in Bootstrap 4 einzuziehen (derzeit Alpha-Status).

dedlfix.

[Gunnar Bittersmann]

@@hmm

Die Seite sieht aktuell so aus:

https://scala-play-framework-11-blutwurst1.c9users.io/

Auf der Anmeldeseite ist ein Formular zu viel zu sehen. Entweder man hat sich schon registriert, dann braucht man das Registrierungsformular nicht. Oder man hat es nicht, dann braucht man das Login-Formular nicht.

Du könntest die Formulare in Tabs packen, so dass nur jeweils eins zu sehen ist und der Nutzer das für ihn relevante auswählen kann.

Die Vorauswahl könnte man durch einen Cookie steuern: Wenn der Nutzer den Cookie schon hat, bekommt er das Login-Formular zu sehen, ansonsten das Registrierungsformular.

LLAP 🖖

[hmm]

danke!

also, ich hab mir jetzt die Workspace geclont und werde jetzt Testweise das Template einbauen. Allerdings nur jeweils die Code Files des Templates die ich brauche, ich denke meine seite bekommt dadurch nur zwei html Files mehr. Ich poste dann das Ergeniss.

Das Bootstrap im Template ist minimal und lässt sich dann im zweiten Schritt austauschen. Ein Vorteil bei Bootstrap wäre allerdings, dass es Response ist.

Meine zweite Überlegung ist:

Ich kann im CSS setzen, bei welcher Bildschirmbreite welches Element im Body angezeigt werden soll. Ich denke ich werde das so coden, dass bei einer kleinen Bildschirmbreite für jeden Mitarbeiter eine Tabelle angezeigt wird. Wenn ich dannoch diese Tabellen response mache, müsste das auf dem Handy sichtbar sein.

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich hänge immer noch auf der Anmeldeseite fest.

Wieso ist da englisch und deutsch gemischt?

Die Eingabefelder im Login-Formular haben keine Beschriftung, da ihnen die IDs fehlen, auf die sich die for-Attribute der label-Elemente beziehen können.

Die Placeholder in den Eingafeldern erfüllen für mich auch keinen Zweck und müllen das UI zu. Weg damit.

Den Rahmen des fieldsets um die Radiobuttons solltest du auch entfernen (nicht das fieldset-Element; das soll bleiben) und das legend-Element visuell verstecken (d.h. für Screenreader soll es „sichtbar“ sein).

LLAP 🖖

[hmm]

Wie mach ich ein Bild responsed?

.login {
    top: 100px;
    left: 50%;
    top:0px;
    width: 600px;
    height: 0px;
    margin: 10px;
    float: right;
}
 
.slider {
    top: 100px;
	left: 0%;
	width: 50%;
 }
 

    <div class="login">
        @content
    </div>
    <div class="slider">
        <img src="@routes.Assets.at("images/slider2.jpg")" width="750" height="600" class="bild">
    </div>

Das Bild dient nur der Seitenverschönerung, kann ich einen Alternativtext weglassen?

[Gunnar Bittersmann]

@@hmm

Wie mach ich ein Bild responsed?

Du meinst responsive?

Im einfachsten Fall mit width: 100% bzw. max-width: 100% im Stylesheet.

Für Bilder in verschiedenen Auflösungen und verschiedenen Bildausschnitten siehe in diesem Posting verlinkte Artikel sowie Wiki.

Das Bild dient nur der Seitenverschönerung, kann ich einen Alternativtext weglassen?

In dem Fall sollte es überhaupt nicht im HTML auftauchen, sondern als Hintergrundbild im Stylesheet.

Wenn doch im HTML, dann Alternativtext weglassen, aber nicht das alt-Attribut (Screenreader würden sonst den Dateinamen vorlesen). Außerdem per role als Schmuckbild kennzeichnen:

<img src="…" role="none presentation" alt=""/>

LLAP 🖖

[hmm]

danke teste ich gleich (dauert immer eine Weile, weil mein Scala play für alles 5 Min Kompelieren muss).

Das Bild hat 5000x4000px, ich möchte es aber auf 750x600px darstellen, oder gleichmäßig verkleinern, wenn zuwenig Platz vorhanden ist. Muss ich dafür etwas beachten?

[hmm]

So kann man zumindest das Login nutzen:

.login {
    max-width: 100%;
    top: 100px;
    left: 50%;
    top:0px;
    width: 600px;
    height: 0px;
    margin: 10px;
    float: right;
}
 
.slider {
    top: 100px;
	left: 0%;
	max-width: 50%;
	width: 750px;
	height: 600px;
	background: url('../../images/slider2.jpg');
	background-size: 750px 600px;
 }

Leider verkleinert sich das Hintergrundbild noch nicht

[hmm]

so müsste es gehen

.login {
    max-width: 100%;
    top: 100px;
    left: 50%;
    top:0px;
    width: 600px;
    height: 0px;
    margin: 10px;
    float: right;
}
 
.slider {
    top: 100px;
	left: 0%;
	max-width: 50%;
	width: 750px;
	height: 600px;
	background: url('../../images/slider2.jpg');
	background-size: contain;
	background-repeat: no-repeat;
 }

[hmm]

https://skillmatrix-2-blutwurst1.c9users.io/

Seite 1 ist die Login Seite und Seite 2 kommt nach dem Login.

User: Christopher

Passwort: hallo123

Wird das besser aussehen als mein voriger Versuch?

[hmm]

ich konnte mir das Bild auch nur als jpg downloaden, kann ich das in svg umwandeln? das bild hat 5000x4000 px

[hmm]

Hier ist die aktuelle Fassung der Seite mit Bootstrap:

https://skillmatrix-3-blutwurst1.c9users.io/

Login geht per:

User: Christopher Passwort: hallo123

Alternativ könnt ihr das Registrierformular benutzen und logt euch dann mit dem gewählten Vornahmen, einem Leerzeichen und dem Nachnamen ein.

Ist das Desing so professioneller oder siehts immernoch scheiße aus? Als nächstes möchte ich, neben dem weiteren korrigieren etc., ein Dashboard einbauen über das man Projektmanager-Teams für einzelne Skillmatrizen zusammenklicken kann. Habt ihr ein paar Tipps?

p.s.: Es macht richtig spass so eine Seite zu basteln und weiterzuentwickeln!

[Achot]

Willst du dieses Bild nicht ein wenig kleiner einbinden? https://skillmatrix-3-blutwurst1.c9users.io/assets/images/slider2.jpg das ist viel viel viel zu groß. 500x500px würden völlig reichen.

Ist das Desing so professioneller oder siehts immernoch scheiße aus?

Sieht schon sehr viel besser aus. Allerdings würde ich da noch ein wenig Farbe mit ins Spiel bringen und die Bereiche, die du nicht benötigst raus schmeißen.

ein Dashboard einbauen über das man Projektmanager-Teams für einzelne Skillmatrizen zusammenklicken kann.

Willst du nicht erst einmal eine Seite fertig machen und dich dann um die weiteren Seiten kümmern? Ich finde du bist viel zu schnell und willst auch viel zu viel auf einmal. Mach kleine Schritte, eines nach dem anderen, so entsteht eine Webseite.

Zum Thema Bild und Login, warum lässt du dieses über die ganze Seite laufen? Ich finde dieses ist viel zu breit. Die unteren Bereiche liegen in einem DIV zur Begrenzung, vielleicht solltest du dieses oben auch anwenden.

[hmm]

Hallo,

danke, die Seite sieht jetzt so aus:

https://skillmatrix-4-blutwurst1.c9users.io/

Die Breite oben kann ich verkleinern. Was könnte ich noch ändern?

Login geht wie üblich mit Christopher und hallo123

Frage:

Wie kann ich die Tabelle und die Skilltabelle besser anordnen? Wären hier tabs passend? Ich möchte auch noch einbauen, dass man sich mehrere verschiedene Skillmatrizen erstellen kann, wie könnte ich das anordnen?