Bewertungssystem HTML 5 / CSS3

Hallo Leute,

folgendes Problem ich muss für ein Schulprojekt eine Website erstellen in der Schüler meiner Schule sich Registrieren können und zum Betrieb indem sie ein Praktikum absolviert haben, ein persönliches Statement dazu geben können. Das meiste der Seite hab ich schon fertig das Design, Registration, Userverwaltung und und und. Bei einer Sache jedoch hänge ich schon seit mehreren Tagen fest und zwar das Bewertungssystem. Ich will dass man zu jedem Betrieb eine Bewertung abgeben kann am besten mit 5 Sternen, vorerst nur in HTML und CSS. Ich hab einige Anleitungen im Internet gefunden jedoch hat nie eine funktioniert, das Prinzip mit den Fonts oder mit den Zwei Bildern hab ich auch soweit alles verstanden doch wenn ich es selber versuche klappt es vorne und hinten nicht.. . Also meine Frage lautet könnte mir jemand vllt sagen der es selber kann, wo der oder die jenige es gelernt hat ? Oder kann mir jemand ein Buch empfehlen ?

Schöne Grüße

3 Antworten

DavidHuber

22.12.2014, 10:06

Hallo,

hier eine Anleitung ohne JavaScript nur mit HTML Radio-Buttons: http://everythingfrontend.com/posts/star-rating-input-pure-css.html

Dann unter Punkt 'Making selection "stick"'.

Hier das Bild für die Sterne: everythingfrontend.com/samples/star-rating/star.png

Du kannst den Radio-Buttons jeweils ein Value (z.B. 5 Sterne: value="5") zuweisen, dann kannst Du den Wert mit PHP nach Absenden des Forms auslesen.

VG David

Ksarthan

Beitragsersteller

23.12.2014, 17:09

na das ist mal interessant danke dir david !!! :)

maximilianus7

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Webseite

21.12.2014, 23:26

wenn du dich dazu durchringen kannst, javascript zu verwenden: http://www.fyneworks.com/jquery/star-rating/

ansonsten brauchst du für die sterne nur radio-buttons definieren (mit class=star).

um weiterzukommen, kannst du ja zunächst die radio-buttons definieren und die interaktion mit dem server und dem eintragen in die datenbank realisieren.

bei diesen vorläufigen buttons musst du auch die value-angaben machen. mit dem javascript wird das irgendwie anders geregelt (ist beschrieben)

LordZnarf

21.12.2014, 19:14

Ein Bewertungssystem in Html und Css wird nicht funktionieren, weshalb ich mich auch frage wie du die gesamte nutzerverwaltung geschafft hast ohne zu wissen, dass eine Bewertung so nicht funktionieren kann... Wenn du was anderes meinst tut mir leid dann hab ich deine Frage missverstanden :D

Lg, LordZnarf

Ps: Dann könntest du mir die Frage ja nochmal erklären, hätte durchaus Interesse dir zu helfen ;)

Ksarthan

Beitragsersteller

21.12.2014, 19:50

ich glaube du hast sie schon richtig verstanden :)

mir ist schon bewusst das dort PHP ins Spiel kommen muss um die die Bewertung in einer Datenbank zu speichern welcher Nutzer sie gegeben hat etc. nur finde ich einfach dazu schlecht Anlaufpunkte wie ich anfangen soll.

LordZnarf

21.12.2014, 21:07

@Ksarthan

Ok gut ;) naja ich würde erstmal einfach ein Bild von nicht ausgefüllten Sternen und eins von ausgefüllten nehmen (kannst du einfach z.b . von Amazon kopieren ^^) nehmen und die leeren Sterne so als background in div boxen packen, dass sie das typische "Bewertungslayout" (fünf Sterne nebeneinander) haben. Dann könnte man per javascript den pfad den Hintergrund bei klick einfach verändern und damit die Bewertung anzeigen. Dann könnte man das via Php in eine Datenbank schreiben bzw. vorher halt den Durchschnitt berechnen. So ließe sich das ganze dann in drei Teile einteilen: 1. Layout (front-end) (Html, Css) 2. "lebendiges" Layout (back-end) (Javascript) 3. Interaktionen mit der Datenbank (Php, sql...)

Lg und frohe Weihnachten, LordZnarf

Ps: Wenn die Website online ist, ich würde sie mir gerne anschauen :D

rmnstr

21.12.2014, 21:32

@LordZnarf

lebendiges layout (back-end)? javascript läuft doch (außer in spezialfällen mit node.js) clientseitig..

Ähnliche Beiträge

Html css und php zusammen?

Hi ich bin dabei eine Seite zu erstellen und habe grade das login und registrations design mit Css und Html fertig gestellt. Nun bräuchte ich noch eine art system dahinter. Ich habe geschaut und denke man nutzt Php für dieses System mit Datenbank etc. Nun meine Frage: Kann ich ein Php login system mit meiner html css login seite kombinieren? oder ist das nicht möglich? Sorry wenn die Frage dumm ist :/

...zum Beitrag

Website schrift ändert sich nicht?

Font face wurde verwendet.

Ich hatte vorher eine andere Schriftart installiert und ausgewählt in der css datei .

nun zeigt mir die webseite noch immer die alte schrift an, sogar dann, wenn ich die schriftart aus dem ordner entferne oder in der css datei den namen umbenenne. (dann müsste es normalerweise die standard html schrift anzeigen)

...zum Beitrag

Echo-Ausgabe mit CSS formatieren?

Hey,

ich möchte eine echo-Ausgabe mit CSS formatieren.

An sich funktioniert es auch, also Textgröße und Farbe ändern geht.

Jedoch wenn ich die Position mit z.B. text-align: center; mache, dann bleibt es trotzdem oben links in der Ecke kleben.

PHP-Teil:

if ($user !== false && password_verify($passwort, $user['passwort'])) {
  $_SESSION['userid'] = $user['id'];
  die('Login erfolgreich. Weiter zu <a href="geheim.php">internen Bereich</a>');
}
else {
  $errorMessage = "<a class='Error'>E-Mail oder Passwort war ungültig<br></a>";
}

CSS-Teil:

.Error {
  font-size: 20px;
  color: black;
}

...zum Beitrag

[HTML|CSS] <Datalist> größe ändern?

Ist es überhaupt möglich die Eigenschaften (zb Size) einer <Datalist> zu ändern?

HTML:

<datalist id="users" class="dle" >
    ...
</datalist>

CSS:

.dle{
    padding: 3px 4px;
    width: 91px;
    font-size: 15px;
}

Leider passiert da rein gar nichts.

Mit <Input> Feldern und anderen klappt es aber.

...zum Beitrag

Von wo bekommt man HTML5 und CSS3 und reicht es um eine einfache Webseite mit Bildern zu erstellen?

Ich würde gerne eine Homepage selbst gestalten, wäre es ein Problem dies nur mit HTML und CSS zu machen? Wenn nein, dann ist die Frage woher ich HTML5 und CSS3 bekommen, hab schon gegoogelt, finde aber leider diesbezüglich nichts.. Da ich denke, dass HTML5 und CSS3 schon moderner sind als das Notepad mit HTML und CSS.. ZB kann das alte Programm keine Zwielaute richtig auf der Seite wiedergeben und das stört mich.. also zusammenfassend.. woher bekomme ich HTML5 und CSS3, und reichen die Programme um eine Seite mit Text Bildern und einem moderneren Design zu erstellen? Java Script würde ich ja nur für professionnellere Interaktive Vorgänge brauchen oder?

Ich bedanke mich schonmal im Voraus und mfg :)

...zum Beitrag

Html, CSS und JS Liste?

Guten Tag,

Wir müssen eine Einkaufsliste mit HTML, CSS und JS machen. Es soll in einer Liste aufgezählt werden, wenn man auf Hinzufügen drückt. Man soll es links eingeben können und das was man dort schreibt wird dann aufgelistet. Sobald man Hinzufügen gedrückt hat soll das Feld auf der linken Seite wieder geleert werden.

<ul >
 <li></li>
 <li></li>
</ul>

Es wäre top, wenn mir jemand helfen könnte :)

...zum Beitrag

Html / Css Text auf Header bzw. Div-Container Text über Hintergrund?

CSS formatiert die Schrift so, dass immer der ganze Querbalken über dem Hintergrund nicht transparent ist. Wie mache ich das? ** Siehe Grafiken **

h1 { font-family: arial, verdana, helvetica; font-size: 40px; font-weight: 200; }

header { position: relative; height: 200px; display: block; background-color: black;

} nav { width: 500px; height: 200px; background-color: aqua; }

...zum Beitrag

HTML,CSS Dark/White mode?

Moin, Ich habe ein Dark/White mode gemacht aber irgendwie wechselt er nicht die font-color zu weiß wenn ich ihn den darkmode gehe.Vielleicht wäre jemand so Nett und würde mit genau sagen wo was hin muss.
LG

HTML:

CSS:

...zum Beitrag

Balken in html/css hinbekommen?

Wie mache ich diese verschiedenen Balken diese weiße dunkelblau und schwarze balken?

Das ist ein bild von einer anderen webseite. Das würde ich auch gerne so für ein schulprojekt machen

...zum Beitrag

Ordnerstruktur bei HTML Webseiten für Fonts?

Hallo. Ich frage mich, wo ich meine Schriftarten (Fonts) in meinem HTML-Project unterbringen soll. Meine derzeitige Struktur sieht wie folgt aus:

Ordner

↳index.html

↳css
 ↳style.css

↳js
 ↳script.js

↳img
 ↳Alle meine Bilder

Wo soll ich die .tff- oder .otf-Dateien unterbringen? Wie macht ihr das? In etwa so:

↳fonts
 ↳Schriftart.tff

Oder wie ?

...zum Beitrag

In CCS Datei bestehenden Font durch TTF Font ersetzen?

Hallo zusammen.
Ich habe ein Problem. Auf einer Webseite muss ich die Schriftart ändern und weiss absolut nicht wie.

Die Website ist mit HTML und CSS Stylesheet programmiert.

Kann mir jemand helfen und zeigen, wie ich das Stylesheet so abändern kann, dass der TTF Font, der sich im selben Verzeichnis befindet wie die CSS Datei, als Schriftart auf der Webseite verwendet wird anstelle des bestehenden Webfonts.

Die Schriftart heisst: MuseoSans_100: https://www.georgyboy.ch/test/MuseoSans_100.ttf
Link zur CSS Datei:
https://www.georgyboy.ch/test/style.css
Link zur HTML Datei:
https://www.georgyboy.ch/test/index.html

Ganz herzlichen Dank für eure Hilfe.

...zum Beitrag

HTML / CSS: Meine div-Box-Breite passt sich automatisch dem Inhalt an?

Wie löse ich das Problem? Die div-Box soll immer die gleiche Breite behalten.

CSS-Code:

.btn-1 {
  text-transform: none;
  cursor: pointer;
  overflow: visible;
  font-family: inherit;
  line-height: inherit;
  padding: 20px 50px;
  color: white;
  background-color: #424242;
  border-color: #fff;
  transition-duration: 0.4s;
  border-radius: 15px !important;
  font-size: 1.3em !important;
  text-rendering: auto;
  word-spacing: normal;
  letter-spacing: normal;
  text-shadow: none;
  align-items: flex-start;
  font: 400 13.3333px Arial;
  border-width: 2px;
  border-style: outset;
  border-image: initial;
}

HTML:

<button data-shoppy-product="hzX6G9S" class="btn-1">Pay 15 €</button>

Unwichtig:

<script src="https://shoppy.gg/api/embed.js"></script>

...zum Beitrag

Mit Pfeil zu nächster Seite: Wie lautet der Code dafür?

Ich hab jetzt einen Pfeil in meiner HTML-Seite und möchte den jetzt gerne mit einer anderen HTML-Seite verbinden. Wie ist denn der Code dafür?

Mein HTML-Code:

<a class="pfeil" onclick="umschalten(1)"><span>&#10095;</span></a>

Mein CSS-Code dazu:

.pfeil {
  position: relative;
  top: 0;
  bottom: 0;
  font-size: 50px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2%;
  color: red (255, 255, 255, 0.5);
  user-select: none;
  cursor: pointer;
}

...zum Beitrag

Kann jemand diesen Button in HTML CSS umwandeln?

Hallo,

schafft es jemand, mir diesen Button in HTML und CSS zu machen?

Border color ist #f5bf8c

Font color ist #363639

Gradient links ist #fdc591

Gradient recht ist #cd9969

Und dann ist da noch so ein kleiner Schatten nach außen (gold) und nach Innen ein kleiner, schwarzer Schatten

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen