Aber nicht <input type="submit">
Jo, schon klar.
Ich meinte aber eher aus der Sicht einer "strikten, logischen" Trennung.
Wozu Eingaben & Buttons mit dem input-Tag realisieren, wenn es doch den button-Tag als "richtigen" Button gibt?
Ich denke, du weißt wie ich es meine 
ja danke das wars ??
TAG nicht geschlossen ??
wie meinst du Button ?
Mit Tag nicht geschlossen meinte ich deine von mir oben zitierten input-Zeilen, die du nicht mit einem ">" geschlossen hast.
Dadurch ist auch der Rest innerhalb der Verlinkung.
Mit Button meine ich den HTML Button-Tag:
<button></button>Der Input-Tag ist eher für Eingaben.
HTML$button_m = "<input style=background-color:green type='submit' value='Anmelden'";
Für deine konkrete Frage: Du schließt dein input-Tag nicht!
Und wieso nutzt du keinen richtigen Button?
Viel geschrieben, aber all das steht auch auf den von mir verlinkten Seiten.
Ich weiß, aber wollte grad einfach...
Ist ja nur Standard-Zeugs, schnell geschrieben.
Warum man zeitnah in mehreren Foren Fragen muss und dann nach 18 Stunden die Frage mit der Begründung "keine wirkliche Hilfe" löscht, weil jemand auf Crossposting verwiesen hat...
Hi html nerd,
erst einmal, ist deine Formulierung wohl etwas falsch.
Für ein "funktionsfähiges CSS" brauchst du garnichts, die CSS brauchst du eher für eine funktionsfähige Seite, wenn überhaupt.
Zu deinen Fragen:
1.) Was brauche ich alles, für einen funktionsfähigen CSS Code? HTML, CSS und Java?
Mit HTML baust du deine Seite auf, mit CSS stylst du sie und mit Javascript (nicht Java!) beeinflusst du das Verhalten, kannst mit Events arbeiten, Inhalte dynamisch hinzuladen, ect...
2.) Wie verbinde ich den HTML und CSS Code so, dass mir das, was ich programmiert habe, angezeigt wird?
In deinem HTML-Code bindest du eine CSS-Datei mit folgendem ein:
<link rel="stylesheet" href="styles.css">3.) Wie setze ich eigene Buttons ein, dass sie funktionieren und auch grafisch "anklickbar" sind?
Einen Button erstellst du mit dem button-Tag und bearbeitest das Aussehen, falsch gewünscht mit CSS.
Anklickbar ist er im Standardverhalten. Bei grafischer Anpassung kannst du mit CSS mit verschiedenen Selektoren (hover, focus) arbeiten.
Es gibt 3 Button-Typen, welche du mit der Eigenschaft "type" setzen kannst:
- submit => Standardwert, schickt das entsprechende Formular an den Server.
- reset => Setzt Elemente in dem entsprechenden Formular wieder auf ihren Standardwert
- button => Dieser Typ hat keine Standardaktion und dient meistens für eine spätere Funktionszuweisung über Javascript
4.) Wie werde ich von einer Seite auf die andere geführt im Code?
Im HTML-Code primär durch Links (a-Tags).
5.) Wie ist der statische Aufbau der CSS Codes? Ähnlich wie bei HTML?
Mit CSS sprichst du Elemente im HTML-Code an und nutzt dabei verschiedene Selektoren, Pseudo-Klassen ect...
6.) Bei html muss ich ja mit <html> anfangen. Bei CSS auch so ähnlich?
Bei CSS musst du mit nichts global anfangen. Du sprichst Elemente an und setzt deine Änderungen dann in einen Block (geschweifte Klammern), um es einfach auszudrücken...
7.) Wie mache ich diese Weißen Boxen richtig anzeigbar auf meine Seite?
Welche weißen Boxen?
Ich würde gerne eine richtig moderne Seite machen......
Und mit CSS richtig arbeiten. Mein Problem hierbei: Ich verstehe nicht, wie HTML und CSS bzw. Java ineinander greifen.
Wie gesagt:
HTML => Ist deine Seite (Struktur, Aufbau)
CSS => Damit passt du das Aussehen deiner Seite nach deinen wünschen an, machst sie responsiv, setzt einfache Animationen um ect...
Javascript => Damit beeinflusst du das Verhalten, nutzt Funktionen, setzt Events ect...
Wenn du das wirklich vorhast, dann würde ich mich endlich mal wieder über eine richtige Webseite nicht aus Baukasten oder mit nem CMS zusammengeklickt freuen
Hi disko,
und, gibt es noch irgendwelche Fragen?
Dein Vorhaben lässt sich sehr einfach umsetzen.
Aber da du gefragt hast...
Gibt es Verständnisprobleme wie du eine simple Form aufsetzt? Oder beim Abfragen der übertragenen Daten?
Das sagt dass die Funktion each() nicht existiert...
Jo, hätte mal lieber den Code anschauen sollen.
Hatte nur kurz auf die mail-Zeile geschaut und dann Nachgefragt, da der Rückgabewert nicht beachtet wird...
Aber werd weiß, vielleicht wird ja noch PHP 5 verwendet...
Hi Dainer,
da fehlt wohl noch ein Leerzeichen:
Code... .blog-titleh3 h4 h5 h6 .blog-titleh3 h4 h5 h6 ...
Hättest du auch die Domain, um das ganze live anzusehen?
Hi Frankti,
ist denn der eigentliche mail-Aufruf erfolgreich?
Hast du eine Meldung in der mail.log?
Und was sagt die allgemeine error-Log?
Ah ok.
Wobei ich es für lediglich 3 Icons doch so machen würde wie ich oben erwähnt.
Du brauchst ja weder alles aus dem webfonts-Ordner, noch die tausenden Zeilen aus all.css.
... Dann wäre mir dieser Umweg erspart geblieben. Lesson to learn.
Hi Lupus,
wie hast du es jetzt gemacht?
Hi Ferdi,
am schnellsten ist es, wenn du die entsprechenden Stellen mit z.B. dem Inspektor im Firefox (Entwicklertools) anschaust.
Da dürftest du dann sofort sehen können, welche Angabe im CSS oder so diese Lücke verursacht.
Hi Lupus,
ich habe zwar noch nie Font Awesome benutzt, mir das grad aber mal angeschaut.
Da die Lizenz der Free-Version entsprechend offen ist, würde ich es so machen:
Eine eigene CSS erstellen und nur das was ich brauche da hineinpacken, z.B. so:
/*!
* Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2023 Fonticons, Inc.
*/
:root, :host
{
--fa-style-family-classic: 'Font Awesome 6 Free';
--fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free';
--fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free';
--fa-style-family-brands: 'Font Awesome 6 Brands';
--fa-font-brands: normal 400 1em/1 'Font Awesome 6 Brands';
}
@font-face
{
font-family: 'Font Awesome 6 Brands';
font-style: normal;
font-weight: 400;
font-display: block;
src: url("../webfonts/fa-brands-400.woff2") format("woff2");
}
@font-face
{
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 400;
font-display: block;
src: url("../webfonts/fa-regular-400.woff2") format("woff2");
}
@font-face
{
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 900;
font-display: block;
src: url("../webfonts/fa-solid-900.woff2") format("woff2");
}
.fa
{
font-family: var(--fa-style-family, "Font Awesome 6 Free");
font-weight: var(--fa-style, 900);
}
.fa,
.fa-classic,
.fa-sharp,
.fas,
.fa-solid,
.far,
.fa-regular,
.fab,
.fa-brands
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: var(--fa-display, inline-block);
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
}
.fas,
.fa-classic,
.fa-solid,
.far,
.fa-regular
{
font-family: 'Font Awesome 6 Free';
}
.far,
.fa-regular
{
font-weight: 400;
}
.fas,
.fa-solid
{
font-weight: 900;
}
.fab,
.fa-brands
{
font-family: 'Font Awesome 6 Brands';
font-weight: 400;
}
/* Hier die Icons, die gebraucht werden... */
.fa-facebook:before {content: "\f09a";}Die ttf-Dateien habe ich ausgelassen, da woff2 weit unterstützt wird und die Dateigröße deutlich kleiner ist.
Wenn du nur Icons von einer Schriftart brauchst (nur "regular/solid" oder nur "brands" ), dann die andere natürlich nicht hineinpacken.
Auf der Webseite beim gewünschten Element dann entsprechend die Klassen setzen.
Für Facebook (als Beispiel aus der CSS oben) wäre das dann z.B. class="fab fa-facebook"
Wenn jetzt auch noch Effekte / Animationen gebraucht werden, dann einfach den gewünschten Effekt / die gewünschte Animation mit aus der all.css in die eigene packen und gut ist.
So ist alles was du auf deinem Webspace dann brauchst nur die eigene CSS-Datei und die WOFF2-Datei(en)
Mal ein Lösungsansatz.
Na da geht das Lernen aber flöten...
Besonders, da es sich um eine eigens gewollte Weiterbildung handelt.
Hi Studentenfutter,
wo hakt es denn?
Einfach eine Aufgabe posten und um Hilfe bitten ist weder Zielführend, noch sind Fertiglösungen erlaubt!
Bitte versuche die Aufgabe und konkretisiere deine Frage auf die Stelle, an der du nicht weiter kommst...
Hi Axel,
ah ok, hatte das damals dann wohl etwas falsch in Erinnerung gehabt.
Schön das es hier weitergeht.
Danke an dich und deinen Bruder!
Ja, hoffe auch, das die alten Nutzer wieder mal vorbei schauen.
Hi,
sprichts du auch das richtige Element in der Animation an?
Hast du vielleicht die Achse mit translate verschoben?
Könntest du mal den Code dazu posten?
Hi,
ne ganz einfache Lösung wäre:
Den zweiten Container könnte man sogar auch weglassen, dann wäre es noch einfacher...
... in Anchor wäre mir zwar lieber ... aber durch das javascript ... das ich nicht ganz verstehe, habe ich mich mit Button abgefunden ...
Naja, der Javascript-Teil ist einfach nur ein Event, welcher durch data-toggle & data-target gesetzt wird:
if (target.hasAttribute('data-toggle') && target.getAttribute('data-toggle') == 'modal') {
if (target.hasAttribute('data-target')) {
var m_ID = target.getAttribute('data-target');
document.getElementById(m_ID).classList.add('open');
e.preventDefault();
}
}Dein Button hat als data-target "simpleModal_1", welches halt die ID der Text-Lightbox ist.
Wird drauf geklickt, ergänzt obiges Event einfach ein "open" in die Klassenliste.
Das kannst du problemlos wie die anderen beiden als Link mit einem inneren i-Tag setzen.