Ankündigung

Einklappen
Keine Ankündigung bisher.

HTML - CSS Knof falsche größe

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • HTML - CSS Knof falsche größe

    Hi
    Ich habe ein kleines Problem und zwar:
    Ich habe eine Webview App programmiert, die mit meinem Webspace "verlinkt" ist.
    Ich habe auf der Webseite 2 Knöpfe

    Html Code
    HTML-Code:
    <html>
    <head>
    <img src="mwrlogo.png" alt="MWR Logo" class="center">
    <link rel="stylesheet" type="text/css" href="style/style.css" />
    </head>
    <body style="center">
    <button class="button1">
    Aktuelles/Schulausfaelle
    </button>
    <br>
    <button class="button1">
    Termine
    </button>
    </body>
    </html>
    Css Code
    Code:
    .button1 {
    background-color: white;
    color: black;
    padding: 50px 70px;
    border: 3px solid #4CAF50; /* Green */
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    cursor: pointer;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
    }
    Problem:
    In der App sehen die Knöpfe ein bisschen komisch aus:

    KLICK


    Wie kann ich das verhindern?

    mfg
    ~Luca

  • #2
    Die Buttons sehen genauso aus wie du sie im CSS definiert hast, wie sollen sie denn sonst aussehen?

    Nachtrag:
    Wenn du "width" auf 20% stellst, ist es klar, dass die Buttons kleiner dargestellt werden auf einem kleinen Device. Ich würde hier evtl. einfach mal eine feste Breite angeben, z.B. 200px;

    Hier mal ein Beispiel mit variabler Breite (20%) und fixer Breite (200px):
    http://jsfiddle.net/8e7uadxq/5/

    Du kannst das Vorschau-Fenster einfach mal mit der Maus per "Drag" vergrößern/verkleinern, dann siehst du die Unterschiede.

    Kommentar

    Lädt...
    X