Aussehen eines buttons mit CSS ändern

Django, Flask, Bottle, WSGI, CGI…
Antworten
Pitwheazle
User
Beiträge: 869
Registriert: Sonntag 19. September 2021, 09:40

Ich habe es geschafft, meinen diversen Links einen button zu verpassen. Mir ist es aber nicht gelungen, deren Aussehen anzugleichen (die sehen immer anders aus).
Den hier z.B.:

Code: Alles auswählen

<nav>
    <button  type="submit">
         <a href="{% url 'loesung' zaehler_id protokoll_id %}">Lösung</a>
     </button>
</nav>
Egal, ob ich den dem button eine Klasse zuweise, oder den Eintrag zu "nav a" ändere, das ändert nix.
Benutzeravatar
Whitie
User
Beiträge: 216
Registriert: Sonntag 4. Juni 2006, 12:39
Wohnort: Schulzendorf

Da fehlen einige Informationen. Benutzt du ein CSS-Framework? Wenn ja, welches?
Wenn nicht ist vielleicht Milligram was für dich (sehr schlank), oder wenn es etwas mehr mitbringen soll Bulma. Beide kommen ohne Javascript und sind angenehm zu benutzen. Ich meine, ich habe bei meiner Demo damals Milligram verwendet.

Viele Grüße
Whitie
Pitwheazle
User
Beiträge: 869
Registriert: Sonntag 19. September 2021, 09:40

Whitie hat geschrieben: Mittwoch 30. November 2022, 18:57 Da fehlen einige Informationen. Benutzt du ein CSS-Framework?
Ich meine, ich habe bei meiner Demo damals Milligram verwendet.
Ich benutze zurzeit kein CSS-Framwork. Stimmt, du hattest Miligram verwendet. Ich wollte das halt ursprüngich alles selbst lernen (Auweh, da habe ich mich wahrscheinlich auch übernommen). Mir hat sich der Sinn des Frameworks nicht gleich erschlossen. Geht das nicht auch einfach ohne?
Benutzeravatar
Whitie
User
Beiträge: 216
Registriert: Sonntag 4. Juni 2006, 12:39
Wohnort: Schulzendorf

Na klar geht das auch ohne. Aber Milligram sorgt z. B. ganz ohne eine Klasse schon mal für eine angenehme Optik, die auch in jedem Browser gleich aussieht.

Grüner Button (weiße Schrift):

Code: Alles auswählen

<nav>
    <button  type="submit" style="background-color: #4CAF50;border: none;color: white;padding: 20px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;">
         <a href="{% url 'loesung' zaehler_id protokoll_id %}">Lösung</a>
     </button>
</nav>
Das sollte man dann natürlich in eine CSS-Datei packen und eine oder mehrere Klassen draus machen.

Gruß

Edit: Etwa der selbe Button mit Bulma erstellt

Code: Alles auswählen

<button class="button is-success"><a href="{% url 'loesung' zaehler_id protokoll_id %}">Lösung</a></button>
Pitwheazle
User
Beiträge: 869
Registriert: Sonntag 19. September 2021, 09:40

Da bin ich anscheinend zu dusselig dazu.
Also in CSS zB. mit ".button{...} und im Template dann "button type="submit" class="button"" geht schon mal nicht.
Benutzeravatar
Whitie
User
Beiträge: 216
Registriert: Sonntag 4. Juni 2006, 12:39
Wohnort: Schulzendorf

Wird die CSS-Datei denn geladen? Funktioniert es, wenn du es direkt angibst (wie in meinem Beispiel)? Hast du den Cache des Browsers mal geleert?
Pitwheazle
User
Beiträge: 869
Registriert: Sonntag 19. September 2021, 09:40

Whitie hat geschrieben: Mittwoch 30. November 2022, 19:36 Wird die CSS-Datei denn geladen? Funktioniert es, wenn du es direkt angibst (wie in meinem Beispiel)? Hast du den Cache des Browsers mal geleert?
Wenn ich es direkt eingebe:

Code: Alles auswählen

<nav>
    <button type="submit" style="background-color: #4CAF50;border: none;color: white;padding: 20px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;">
        <a href="{% url 'loesung' zaehler_id protokoll_id %}">Lösung</a>
    </button>
    {% if hilfe  %}
        <button type="submit" style="background-color: #4CAF50;border: none;color: white;padding: 20px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;">
            <a href="{% url 'hilfe' zaehler_id protokoll_id %}"> Hilfe</a>
        </button>
    {% endif %}
    <button type="submit" style="background-color: #4CAF50;border: none;color: white;padding: 20px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;">
        <a href="{% url 'abbrechen' zaehler_id %}">Abbrechen</a>
    </button>
</nav> 
... kommt das raus:
Bild
... ein Teil funktioniert (grün) ein Teil nicht (unterstrichen).
Ja, geladen wird CSS, den Rest kann ich ja ändern.
Stimmt das mit dem Punkt (.button {})? Das habe ich bisher nämlich nur mit "<div class=".." eingesetzt.
Cache habe ich geleert.
Benutzeravatar
Whitie
User
Beiträge: 216
Registriert: Sonntag 4. Juni 2006, 12:39
Wohnort: Schulzendorf

Dann musst du mal in den Entwicklertools (vom Browser) schauen, woher die Styles kommen.
Sirius3
User
Beiträge: 17710
Registriert: Sonntag 21. Oktober 2012, 17:20

Es ist sehr seltsam, ein Formular zu haben, dann aber den Submit-Button mit einem extra Link auszustatten. Warum brnutzt Du nicht das Formular, wie es vorgesehen ist?
Pitwheazle
User
Beiträge: 869
Registriert: Sonntag 19. September 2021, 09:40

Falls es interessiert - ich habe es jetzt so gelöst, dass ich die Buttons in "footer" und "nav" eingeschlossen habe und das entsprechend in CSS formatiert habe. Z.B so:

Code: Alles auswählen

        <footer>
            {% if 'drei' in message_unten %}
                <nav>
                    <button type="button">
                        <a href="{% url 'kategorien'  %}">weiter</a>
                    </button>
                </nav>
                ...
Antworten