Ankündigung

Einklappen
Keine Ankündigung bisher.

Datenbankausgabe in Div (CSS)

Einklappen

Neue Werbung 2019

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

  • Datenbankausgabe in Div (CSS)

    Guten Abend,




    leider habe ich ein kleines Problem und benötige Hilfe. In diesem Quelltext wird für jeden Datensatz in der Datenbank ein Div Container erstellt. Die Div Container sollen alle nebeneinander sein mit einem kleinen Abstand. Ich habe den Containern eine bestimmte Größe in Prozent gegeben, jedoch sind sie nur ein paar Pixel breit. Durch meine angegeben Größen der Container dürften normalerweise nur vier Container nebeneinander auf eine Seite passen, jedoch möchte ich das man horizontal scrollen kann und somit alle Container nebeneinander hat. Was ist mein Fehler ? Wieso sind die Container nur so klein? Die Container sind nicht 24,5% von der Seite groß wie im Style programmiert, sondern höchstens 5px breit! Es wäre super wenn mir jemand helfen könnte! Danke!!!!!




    Hier ist der Quelltext:
    PHP-Code:
    <div class="output-Main-Div">
    <?php

    include("connection.php");

    $query "Select * FROM `datenbankUser`";
    $result $link->query($query);


    if (
    $result->num_rows 0) {

        while(
    $row $result->fetch_assoc()) {
    ?>
    <div class="output-Container">
    </div>
    <?php
        
    }

    } else {

        echo 
    "0 results";

    }

    $link->close();
    ?>
    </div>
    Hier ist der Style:
    Code:
    .output-Main-Div {
        width: 100%;
        height: 310px;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        display: table-cell;
        vertical-align: middle;
    }
    
    .output-Container{
        width: 24.5%;
        height: 80%;
        display:inline-block;
        margin: 0% 0.25% 0% 0.25%;
        background-image: url(blablabla);
    }
    
    .output-Container:hover{
        width: 40%;
        height: 100%;
    }

  • #2
    Bei CSS-Problemen bitte keinen PHP-Code posten. Am besten du zeigst ein Beispiel auf JSFiddle.

    Kommentar

    Lädt...
    X