Background Einstellungen

    Guten Tag,


    Ich rätsele jetzt schon ein paar Tage an diesem Problem, ich will eine Webseite erstellen, auf der es Header, Footer und ein Background Image geben soll. Der Content soll mit weiß und der opacity 0.75 hervorgehoben werden. Da es sich hierbei aber um eine Seite handeln soll, deren menge an Inhalt unbekannt ist, weil ständig neue Beiträge erstellt werden können. Das Problem ist, dass die Hervorhebung durch das weiß immer vom Header bis zum Footer sichtbar sein soll, auch wenn es nicht genügend Content dafür gibt.

    Ich hoffe mal ich habe das jetzt verständlich erklärt und bedanke mich schonmal im Voraus für alle Antworten.



    Mit freundlichen Grüßen


    Hoppeltiger

    Nein, ich habe ein Hintergrundbild, einen Header und einen Footer. Der Bereich zwischen Header und Footer soll immer, von oben bis unten, mit weiß hinterlegt sein. Und das auch, wenn der Content nicht von oben bis unten geht

    So wie ich das verstehe ist calc nur für die Breite, ich brauche aber wenn dann die Höhe. Viewport funktioniert auch nicht, weil weder Header noch Footer eine bestimmte höhe haben und von php included werden.

    Sei so gut und teste es mal

    min-height: calc(100vh - 100px);

    und wenn das nicht passt, weil header und footer mehr oder weniger px haben, dann kannst du den Wert für px anpassen.

    Das erledigt man besser mit Flexlayout, damit sich die Höhe des Content-Bereiches automatisch anpasst, so dass er den verfügbaren Platz zwischen Header und Footer genau ausfüllt. Es ist immer ungünstig, mit festen Abmessungen zu arbeiten, weil man dann die Berechnungen jedes Mal anpassen muss, wenn sich an der Höhe des Header oder des Footer etwas ändert.

    • Wie oben schon geschrieben, ist calc für alle Maßeinheiten möglich, d. h. auch für die Höhe.
    • Wenn Du Flexlayout verwendest, wie in dem Beispiel bei Stackoverflow, brauchst Du kein calc, weil der Browser automatisch die richtige Höhe berechnet.

    ich wüsste nicht, wo sich da der Browser was im Beispiel Stackoverflow bei der JSFiddle zusammenrechnet, trotzdem habe ich zum überprüfen, die css angaben übernommen (abgesehen von den festgelegten Werten bei dem Header und Footer) es hat trotsdem nicht geklappt.

    Mein html/php script:


    <?php

    session_start();

    $pname = "Test1";

    $thema = "Test1";

    ?>

    <head><link rel='stylesheet' href='../css/themen-home.css'><meta charset='UTF-8'></head>

    <div class="all">

    <?php

    include '../header2.php';

    ?>

    <div class='body'>

    <?php

    $sql = "SELECT * FROM beitraege WHERE thema LIKE 'Test1%'";

    $res = mysqli_query($con, $sql);

    $num = mysqli_num_rows($res);

    if($num > 0){

    $count = 0;

    while($dsatz = mysqli_fetch_assoc($res)){

    $count = $count+1;

    echo "<a href='./" . $dsatz["id"] . "." . $dsatz["ueberschrift"] . ".php'><div class='beitraege'>";

    echo "<h1>" . $dsatz["ueberschrift"] . "</h1>";

    echo "<div class='einr'><p class='p'>" . $dsatz["ersteller"] . "</p>";

    echo "<p class='p'>" . $dsatz["aenderungsdatum"] . "</p></div>";

    echo "</div></a>";

    if($count < $num){

    echo "<hr>";

    } } } else echo '<h1>Es wurde bisher kein Beitrag in diesem Thema erstellt.</h1>';



    ?>

    </div>

    <?php include '../footer2.php'; ?>

    </div>


    Mein css script:


    html {

    height: 100%;

    width: 100%;

    }

    body {

    margin: 0;

    padding: 0;

    background-image: url("../img/startbild1.png");

    background-repeat: no-repeat;

    background-attachment: fixed;

    display: flex;

    flex-direction: column;

    }
    .sbutton {

    border: 2px solid #595a5b;

    padding: 10px 20px;

    outline: none;

    cursor: pointer;

    transition-duration: 0.4s;

    text-transform: uppercase;

    border-radius: 15px;

    margin-bottom: 20px;

    margin-left: 20px;

    text-align: center;

    opacity: 0.75;

    }
    .sbutton:hover {

    background-color: #595a5b;

    color: white;

    }
    a {

    color: black;

    text-decoration: none;

    }
    .beitraege {

    margin-top: 15px;

    margin-bottom: 15px;

    }
    .beitraege h1 {

    line-height: 0;

    }
    .p_dat {

    text-align: right;

    font-size: 1em;

    }
    .p {

    font-size: 1em;

    }
    .p {

    line-height: 0;

    }
    .einr {

    display: flex;

    justify-content: space-between;

    }
    hr {

    border-color: rgba(192,192,192,1);

    }
    .body {

    padding: 15px;

    background-color: rgba(255,255,255,0.75);

    flex: auto;

    }
    @media(min-width: 700px) {

    .body {

    width: 45%;

    margin: 0 auto;

    padding-bottom: 64px;

    }

    }

    <html><head><link href="../css/themen-home.css" rel="stylesheet"><meta charset="UTF-8"></head>

    <body><div class="all">

    <title>Skytastic.eu- Forum Test1</title>

    <link href="../css/header.css" rel="stylesheet">

    <header>

    <div class="header">

    <div class="navigate">

    <a href="../anmelden.php"><button class="navs">Anmelden</button></a><a href="../registrieren.php"><button class="navs">Registrieren</button></a> </div>

    <div class="navigate">

    <a href="../"><button class="navs">Start</button></a>

    <form action="../beitrag-erstellen.php" method="post">

    <input name="thema" type="hidden" value="Test1">

    <button name="gesendet" class="navs1" type="submit">Beitrag erstellen</button>

    </form>

    <a href=""><button class="navs"></button></a>

    <a href=""><button class="navs"></button></a>

    <a href=""><button class="navs"></button></a>

    <a href="../../"><button class="navs">Website</button></a>

    </div>

    </div>

    <h1>Skytastic.eu - Forum - Test1</h1> </header>

    <div class="body">

    <h1>Es wurde bisher kein Beitrag in diesem Thema erstellt.</h1>

    </div> <link href="../css/footer.css" rel="stylesheet">

    <meta charset="UTF-8">
    <footer>

    <p>Erstellt von Hoppeltiger</p>

    <p>Discord: <a href="https://discord.gg/Mk4BBe">https://discord.gg/Mk4BBe</a></p>

    <p><a href="../adminpannel.php">Adminpannel</a></p>

    </footer></div></body></html>

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden