Zwei div's liegen übereinander - sollten aber nicht - warum?

R3D3 · 12.02.2021

Hallo, meine HTML-Kenntnisse liegen mehr als 10 Jahre zurück und ich habe aktuell Schwierigkeiten mit div's.
Zwei Container scheinen übereinander zu liegen, ich weiß aber nicht, warum.
Die Texte zum Testen "Hauptcontainer" und "Abstand header -> main" liegen an derselben Stelle und überlappen sich.
Das ist die Seite: stylebox.trendline-freyung.de

index.php:

Code:

<!DOCTYPE html>
<html>

    <head>
        <title>TRENDline &#124; Fashion in Freyung &#124; Stylebox</title>
        <meta charset="utf-8">
        <meta name="keywords" content="Stylebox,TRENDline,Outfit,Mode,Freyung,Kleidung,Frau,Mann">
        <meta name="author" content="Code99.it">
        <meta name="description" content="In wenigen Schritten zu deinem neuen Outfit mit der Stylebox von TRENDline.">
        <link rel="stylesheet" href="css/main.css">
    </head>
    
    <body>
        
        <!-- Globaler Header -->
        <?php include 'global/header.php'; ?>
        
        <!-- Abstand zwischen Header und Hauptcontainer -->
        <?php include 'global/space_header_main.php'; ?>
        
        <!-- Hauptcontainer -->
        <div style="height: 1024px";>
            Hauptcontainer
        </div>
        
        <!-- Abstand zwischen Hauptcontainer und Footer -->
        <?php include 'global/space_main_footer.php'; ?>
        
        <!-- Globaler Footer -->
        <?php include 'global/footer.php'; ?>
        
    </body>
    
</html>

header.php

Code:

<!-- Header -->
<div>
    
    <!-- Linker Bereich -->
    <div style="float: left; width: 34%; text-align: left; ">
        TRENDline Logo
    </div>

    <!-- Mittlerer Bereich -->
    <div style="float: left; width: 33%; text-align: left;">
        Stylebox Logo
    </div>

    <!-- Rechter Bereich -->
    <div style="float: left; width: 33%; text-align: right;">
        <img src="images/leere-stylebox-mit-firmenlogo-und-produktlogo.png" width="133" height="128">
    </div>
    
</div>

space_header_main.php

Code:

<div style="height: 100px;">Abstand header -> main</div>

space_main_footer.php

Code:

<div style="height: 100px;">Abstand main -> footer</div>

footer.php

Code:

<!-- Footer -->
<div>
    
    <!-- Linker Bereich -->
    <div style="float: left; width: 34%; text-align: left; ">
        Footer 1
    </div>

    <!-- Mittlerer Bereich -->
    <div style="float: left; width: 33%; text-align: left;">
        Footer 2
    </div>

    <!-- Rechter Bereich -->
    <div style="float: left; width: 33%; text-align: right;">
        Footer 3
    </div>
    
</div>

basti1012 · 12.02.2021

Du solltest das alles neu machen und mit Flexbox erstellen.
Das ganz6e floaten und inline Style ist veraltet und bringt nur ärger.
Erstell doch mal eine Skizze wie das aussehen soll dann kann man dir einfacher helfen.

Mit Flexbox meine ich das
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

R3D3 · 12.02.2021

Hier ist die ursprüngliche Seite, die als Vorlage dient: outfit.trendline-freyung.de/stylebox

Ursprünglich habe ich alles mit Word Press und Elementor erstellt, die Seitenladezeiten sind aber manchmal eine Katastrophe und auch der Speicherplatzverbrauch auf dem FTP-Server ist außerirdisch. Das Einbauen von PHP-Befehlen in eine Elementorseite ist auch recht aufwändig, zumindest in der kostenlosen Version. Daher soll nun eine reine HTML Lösung geschaffen werden. Insbesondere scheiterte ich bisher daran, bereits eingegebenen Formulardaten mittels POST an die nächste Seite zu transportieren. Mittels Elementor war das ein sehr mühseliger Weg, da lassen sich zwar HTML Blöcke einfügen und Formularfelder anlegen, jedoch funktionieren in Elementor keine PHP Befehle. Vor mehr als zehn Jahren habe ich alles mögliche in HTML und PHP programmiert und auch kleine MySQL Datenbanken angelegt und befüllt. Soviel zu meinem Kenntnisstand und zur bisherigen Geschichte.

R3D3 · 13.02.2021

Habe jetzt alles umgebaut und es wird langsam so wie es soll. Nur der komplette div-Container sollte 100% Seitenbreite einnehmen, das tut er aktuell aber noch nicht. Warum? LG.

Neu -> http://stylebox.trendline-freyung.de/
Vorlage -> http://outfit.trendline-freyung.de/stylebox-konfigurator/

Hier die Links zu den aktuellen Live-Dateiversionen:
main.css
header.php
footer.php

main.css

Code:

/* Google-Fonts */
@import url('https://fonts.googleapis.com/css?family=Exo+2');

/* HTML-Body */
body {

    /* Schriftarten */
    font-family: "Exo 2";

    /* Lückenlose Darstellung ohne Ränder */
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 0;

    background-color: #fff;
}

/* Hauptcontainer für die komplette Seite */
.container {
    display: flex;
    min-width: 100%;
}

/* Container für Header */
.container_header {
    display: flex;
}

/* Container für Body */
.container_body {
    display: flex;
    min-height: 1024px;
}

/* Container für Footer */
.container_footer {
    display: flex;
}

header.php

Code:

<div class="container_header">

    <!-- Linker Bereich -->
    <div>
        TRENDline Logo
    </div>

    <!-- Mittlerer Bereich -->
    <div>
        Stylebox Logo
    </div>

    <!-- Rechter Bereich -->
    <div>
        <img src="images/leere-stylebox-mit-firmenlogo-und-produktlogo.png" width="133" height="128">
    </div>

</div>

index.php

Code:

<!DOCTYPE html>
<html>

    <head>
        <title>TRENDline &#124; Fashion in Freyung &#124; Stylebox</title>
        <meta charset="utf-8">
        <meta name="keywords" content="Stylebox,TRENDline,Outfit,Mode,Freyung,Kleidung,Frau,Mann">
        <meta name="author" content="Code99.it">
        <meta name="description" content="In wenigen Schritten zu deinem neuen Outfit mit der Stylebox von TRENDline.">
        <link rel="stylesheet" href="css/main.css">
    </head>

    <body>
   
        <!-- Globaler Header -->
        <?php include 'global/header.php'; ?>
           
        <!-- Hauptcontainer -->
        <div class="container_body">
            Hauptcontainer
        </div>
   
        <!-- Globaler Footer -->
        <?php include 'global/footer.php'; ?>
   
    </body>

</html>

footer.php

Code:

<div class="container_footer">

    <!-- Linker Bereich -->
    <div>
        Footer 1
    </div>

    <!-- Mittlerer Bereich -->
    <div>
        Footer 2
    </div>

    <!-- Rechter Bereich -->
    <div>
        Footer 3
    </div>

</div>