Auf Thema antworten

Beitrag

[QUOTE="AndyRandy691, post: 12920, member: 4378"]
Hallo zusammen,

ich bin Neueinsteiger im Thema HTML und CSS und versuche mich gerade an einem kleinen Projekt. Habe einiges an Erfahrung in C#, WinForms und WPF allerdings nicht in CSS. Ich habe mein Layout mit CSS soweit gestaltet, dass es im Firefox auf dem PC gut funktioniert und sich wie gewollt an die Größe des Browserfensters anpasst. Rufe ich die Seite über mein iPhone auf zerschießt es aber das Layout. Mein Ziel wäre folgendes Layout:

[ATTACH type="full" width="450px"]266[/ATTACH]
So sieht es im Firefox auch aus.
Im Hintergrund ein Background-image, welches zentriert ist und das Fenster füllt ohne das Seitenverhältnis zu ändern. Darauf eine halb-transparente Box, die jeweils 80% Breite und Höhe des Fensters einnehmen soll. Im oberen Teil davon eine Input box, die einen margin zur halbtransparenten Box hat. Darunter ein Bild, welches horizontal zentriert ist mit festem Seitenverhältnis und welches den verfügbaren Platz ausnutzt ohne das Seitenverhältnis zu ändern. Die Buttons sind unten auf dem Bild platziert und sollen idealerweise über die Breite des Bildes verteilt werden.

Auf dem iPhone ist das eher so:

[ATTACH type="full" width="451px"]267[/ATTACH]

Habe auch schon gegoogelt und einiges zu -webkit properties gefunden, konnte es damit aber nicht fixen. Vielleicht besteht bei meinem Layout auch ein grundsätzliches Propblem. Daher vertraue ich jetzt auf die Community hier. Hier mal mein Code:

[CODE=html]<!DOCTYPE html>
<html>
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<body>
    <form action="Submit.php" method="post">
        <div class="container">
            <div class="grid">
                <input type="text" name="guests" placeholder="Du bist?">
                <div class="portrait">
                </div>
                <div class="subgrid">
                    <style>
                        .submit-button {
                            background-position: center;
                            background-color: transparent;
                            background-size: cover;
                            object-fit: contain;
                            display: table-cell;
                            height: 8vh;
                            width: 8vh;
                            border-radius: 4vh;
                            border: none;
                            box-shadow: inset 0 0 0 2px rgb(32, 236, 195);
                            -webkit-box-shadow: inset 0 0 0 2px rgb(32, 236, 195);
                            grid-area: confirmBtn;
                            justify-self: left;
                            margin-left: 5vmin;
                            align-self: center;
                            position: relative;
                            text-align: center;
                            transition: all 0.1s ease-in-out;
                            -webkit-transition: all 0.1s ease-in-out;
                        }

.submit-button:active {
                            background-color: rgb(131, 247, 161);
                            box-shadow: inset 0 0 0 2px rgb(131, 247, 161);
                            -webkit-box-shadow: inset 0 0 0 2px rgb(131, 247, 161);
                            transform: scale(0.8, 0.8);
                            -webkit-transform: scale(0.8, 0.8);
                        }

.fa-heart {
                            content: "\f004";
                            background: linear-gradient(45deg, rgb(32, 231, 169), rgb(33, 240, 221));
                            ;
                            background-clip: text;
                            font-size: 3vh;
                            -webkit-text-fill-color: transparent;
                            transition: transform 0.1s ease-in-out;
                            -webkit-transition: transform 0.1s ease-in-out;
                        }

.submit-button:active .fa-heart {
                            background: white;
                            background-clip: text;
                            -webkit-text-fill-color: transparent;
                            transform: scale(1.25, 1.25);
                            -webkit-transform: scale(1.25, 1.25);
                        }

.refuse-button {
                            background-position: right;
                            background-color: transparent;
                            background-size: cover;
                            display: table-cell;
                            height: 8vh;
                            width: 8vh;
                            border-radius: 4vh;
                            border: none;
                            box-shadow: inset 0 0 0 2px rgb(221, 69, 94);
                            -webkit-box-shadow: inset 0 0 0 2px rgb(221, 69, 94);
                            grid-area: refuseBtn;
                            justify-self: right;
                            margin-right: 5vmin;
                            align-self: center;
                            position: relative;
                            text-align: center;
                            transition: all 0.1s ease-in-out;
                            -webkit-transition: all 0.1s ease-in-out;
                        }

.refuse-button:active {
                            background-color: rgb(245, 54, 50);
                            transform: scale(0.8, 0.8);
                            -webkit-transform: scale(0.8, 0.8);
                        }

.fa-close {
                            background: linear-gradient(45deg, rgb(221, 69, 135), rgb(255, 137, 65));
                            background-clip: text;
                            font-size: 5vh;
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            transition: transform 0.1s ease-in-out;
                            -webkit-transition: transform 0.1s ease-in-out;
                        }

.refuse-button:active .fa-close {
                            background: white;
                            background-clip: text;
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            transform: scale(1.25, calc(1.25));
                            -webkit-transform: scale(1.25, calc(1.25));
                        }
                    </style>
                    <button class="refuse-button" type="submit" name="btnRefuse"><i class="fa fa-close"></i></button>
                    <button class="submit-button" type="submit" name="btnSubmit"><i class="fa fa-heart"></i></button>
                </div>
            </div>
        </div>
    </form>
</body>

</html>[/CODE]

[CODE=css]@font-face {
    font-family: "Gotham";
    src: url(gothamroundedlight_21020.ttf) format("truetype");

}

@font-face {
    font-family: "GothamBold";
    src: url(GothamRoundedMedium_21022.ttf) format("truetype");
}

html {
    height: 100%;
}

body {
    background-image: url("../img/Background.JPG");
    height: 100%;
    width: 100%;
    -webkit-background-size: center;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
}

.container {
    display: block;
    position: absolute;
    height: 80%;
    width: 80%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    offset: 0;
    padding: 4vmin;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 3vmin;
    border-radius: 3vmin;
}

form {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.grid {
    display: grid;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    grid-gap: 3%;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 10% 88%;
    grid-template-areas: "name name name"
        "photo photo photo";
}

input {
    border-radius: 2vmin;
    background-color: rgba(255, 255, 250, 0.8);
    border: none;
    width: 100%;
    text-align: center;
    font-family: "Gotham";
    font-size: 5vh;
    -webkit-grid-area: name;
    grid-area: name;
}

.portrait {
    -webkit-grid-area: photo;
    grid-area: photo;
    background-image: url(../img/Portrait.PNG);
    width: 100%;
    max-height: 100%;
    -webkit-aspect-ratio: 3/4;
    aspect-ratio: 3/4;
    -webkit-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 15px;
}

.subgrid {
    display: grid;
    width: 100%;
    max-height: 100%;
    -webkit-aspect-ratio: 3/4;
    aspect-ratio: 3/4;
    object-fit: contain;
    object-position: bottom;
    -webkit-grid-area: photo;
    grid-area: photo;
    grid-template-columns: 50% 50%;
    grid-template-rows: 80% 20%;
    grid-template-areas: ". ."
        "refuseBtn confirmBtn";
}[/CODE]

Vielen Dank schon mal und viel Grüße
Andy
[/QUOTE]

Authentifizierung