Width und height passen nicht wie gedacht

Simuletsplay

Hallo zusammen, ich habe folgende Seite:

HTML

<html>

    <head>
        <title>TITEL</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=1280, user-scalable=no" />

        <script src="/libs/qimessaging/1.0/qimessaging.js"></script>
        <script src="lib/js/jquery-3.3.1.min.js"></script>
    
    </head>
    <style>
    @font-face {
        font-family: 'OpenSans';
        src: url(lib/fonts/OpenSans-Regular.ttf);
    }
    
    @font-face {
        font-family: 'OpenSansBold';
        src: url(lib/fonts/OpenSans-Bold.ttf);
    }
    
    body {
        padding: 0;
        margin: 0;
        font-family: OpenSans;
        
    }
    
    .header {
        height: 25%;
        width: 100%;
        background-image: url('lib/img/hintergrundbild_1.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        padding-left: 50px;
    
    }
    
    .title {
        font-size: 55pt;
        font-family: OpenSansBold;
        color: #fff;
        position: absolute;
        bottom: 10px;
        left: 50px;
    }
    
    .content {
        font-size: 16pt;
        padding-left: 50px;
        padding-right: 50px;
        background-image: url('lib/img/hintergrundbild_2.png');
        background-size: contain;
        height: 75%;
        width: auto;
    }
    
    .row{
        margin-top: 40px;
        width: auto;
    }
    
    .headline {
        font-size: 20pt;
        color: #004969;
    }
    
    .button {
        padding: 10px 30px 10px 30px;
        border-radius: 0;
        background-color: #fff;
        border: 1px solid;
        border-color: #000;
        font-size: 16pt;
        
    }
    
    .button-red {
        color: #CC3300;
        border-color: #CC3300;        
    }
    
    .button-blue {
        color: #004969;
        border-color: #004969;    
    }
    
    .button-right {
        float: right;
    }
    
    .info-text {
        margin-top: 10px;
        color: #004969;
        font-size: 14pt;
    }
    
    .info-text ul{
        margin-top: 0px;
    }
    </style>
    <body>
    
    
        <div class="header">
<!--            <div class="text"> -->
                <div class="title">
                    Seitentitel
                </div>
<!--            </div> -->
        </div>
        
        <div class="content">
            <div class="row">
                <button class="button button-red button-right">Button 1</button>
            </div>
            <div class="row">
                <span class="headline">Überschrift</span>
                <div class="button-group">
                    <button class="button button-blue">Button 2</button>
                    <button class="button button-blue">Button 3</button>
                    <button class="button button-blue">Button 4</button>
                    <button class="button button-blue">Button 5</button>
                </div>
            </div>
            
            <div class="row">
                <span class="headline">Überschrift</span>
                <div class="button-group">
                    <button class="button button-blue">Button 6</button>
                    <button class="button button-blue">Button 7</button>
                </div>
            </div>
            <div class="row">
                <span class="headline">Überschrift</span>
                <div class="info-text">
                    Text
                    <ul>
                        <li>Punkt 1</li>
                        <li>Punkt 2</li>
                        <li>Punkt 3</li>
                    </ul>
                </div>
            </div>
        </div>
    
    
    </body>


</html>

Alles anzeigen

Das Display, auf dem die Seite geladen wird hat 1200x800px (oder 1280x800) Pixel.
Die beiden Hintergrundbilder sind

breite x 200px

breite x 600px breit.

Ich habe es bereits mit beiden Größen ausprobiert. Jedoch sind bei beiden Größen unterhalb und rechts neben dem eigentlichen Bereich noch leere Bereiche, die dadurch das Scrollen möglich machen und die Darstellung leicht verfälschen.

pasted-from-clipboard.png

Das ist rechts unten. Wie zu sehen wird das Handy-Mockup nicht bis zum Rand angezeigt.

Aber eigentlich ragt das obere Bild einfach zu weit rüber.

NICHT WUNDERN: Das Handy wäre sowieso nicht komplett angezeigt worden. Aber die Schnittkante beim Handy ist automatisch auch Bildschirm-Ende!

Kann mir dabei jemand helfen?

Viele Grüße

Ben

m.scatello

Ein Link zur Seite wäre nicht schlecht, damit man sich das mal ansehen kann.

Simuletsplay

Die Seite ist nur lokal... es gibt von daher leider keinen Link

Sempervivum

Hallo Ben,

in deinem HTML fehlt der Doctype. Außerdem kannst Du mit Vorteil semantische Tags verwenden: Die Überschriften, h1, h2, usw. und Absatz p gibt es schon ewig aber in letzter Zeit sind Dinge wie header, main, nav, figure, figcaption etc. hinzu gekommen.

Ich habe zunächst eine Testseite mit deinem HTML gemacht, jedoch sah diese ziemlich zerlegt aus. Aus deinem HTML kann man jedoch ablesen, was Du vorhast: Das Browserfenster soll vollständig ausgefüllt sein, ohne dass man scrollen muss. Der Header (dafür bietet sich das Tag <header>an) soll 25% der Höhe ausfüllen und der Hauptinhalt (Tag <main>) die restlichen 75%.

Ein Problem dabei, mit dem Du wahrscheinlich konfrontiert wirst: Diese Prozentangabe bezieht sich auf das Element ohne Border, Padding und Margin. Sind diese vorhanden, beansprucht das Element mehr als 100% der Breite.

Eine Lösung besteht darin, Flexlayout zu verwenden, das passt die Elemente ein ohne diese Probleme.

Du kannst dich hier auf html-seminar über die Grundlagen von Flexlayout informieren:

CSS Flexbox Layout - Design einfach umsetzen

Noch ein Hinweis: Damit die Elemente das Browserfenster vertikal vollständig ausfüllen musst Du html und body zunächst auf dessen Höhe einstellen:

Code

html, body {
    height: 100%;
}

Width und height passen nicht wie gedacht

Jetzt mitmachen!

Ähnliche Themen

[Suche] HTML Code 2 Layer parallax scrolling [erledigt]