Beiträge von nextuser

  • Was brauche ich alles für einen *funktionsfähiges CSS?

    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:

    Zitat von html nerd

    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...


    Zitat von html nerd

    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:

    HTML
    <link rel="stylesheet" href="styles.css">


    Zitat von html nerd

    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


    Zitat von html nerd

    4.) Wie werde ich von einer Seite auf die andere geführt im Code?

    Im HTML-Code primär durch Links (a-Tags).


    Zitat von html nerd

    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...


    Zitat von html nerd

    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...


    Zitat von html nerd

    7.) Wie mache ich diese Weißen Boxen richtig anzeigbar auf meine Seite?

    Welche weißen Boxen?


    Zitat von html nerd

    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 ;)

  • Aufbau und Umsetzung Kiosk Menü

    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?

  • Email senden aus eine Form

    Zitat von tk1234

    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...

  • a link in Texten (html)

    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.

  • fontawesome local speichern

    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:

    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)

  • CSS Hilfe - eilt sehr

    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...

  • Overlay mit Bild in voller Größe

    Hi,


    ne ganz einfache Lösung wäre:

    • Einen simplen Container mit absoluter Position vollflächig und mit dem gewünschten, abgedunkelten Hintergrund erstellen
    • Darin einen weiteren Container mit einem img-Tag & einem Button (zum Schließen) als Kindelemente erstellen
    • Bei einem Klick auf ein Thumbnail, entsprechendes Bild in das img-Tag laden, Container anzeigen & die Abmessungen des Bildes für einen schönen Effekt mit einer CSS-Animation auf die finale Größe animieren...

    Den zweiten Container könnte man sogar auch weglassen, dann wäre es noch einfacher...

  • Alternative für Unicode-Icon in einem <button>-Tag

    Zitat von snaisy

    ... 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:

    Code
    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.

  • Mehrere Inline-Elemente in einem Block?

    Zitat von casco89

    Und zwar schaffe es nicht meine Absätze in dem jeweiligen Block mit Zeilenumbrüchen zu zentrieren.


    während die Überschriften so wie die Auflistungen sich mit Umbrüchen zentrieren, laufen die Absätze einfach weiter.

    Hi casco,


    was genau meinst du mit "mit Zeilenumbrüchen zentrieren"?


    Meinst du den einen langen Absatz unter der "sehr spannenden Überschrift", das er über die Box hinausgeht?

    Falls ja, dann verwende

    overflow-wrap: break-word;


    Oder meinst du, das sich alle Elemente in der jeweiligen Box zentrieren?

    Bei mir sind in deinem Code nur die Elemente in der ersten Box zentriert, die anderen nicht...


    Das geht übrigens viel bequemer mit Flexboxen.

    Außerdem kannst du die section mit der ID "main" ruhig durch das main-Tag ersetzen...