HTML/CSS Tabelle über Bild legen

MarkP · 13. November 2020

Das wird mal wieder eine Anfängerfrage, aber in HTML/CSS kenne ich echt nur die Grundbegriffe.

Aufgabe: Ich habe mehrere Grafiken aus denen ich jeweils eine Seite machen will, wo die Grafik in der Breite das Browser-Fenster füllen und in der Höhe automatisch die Proportionen anpassen soll, das sollte mit width:100%; height:auto; ja machbar sein.
Allerdings darf die Grafik nicht den gesamten body füllen, weil da noch der Seitenkopf und etwas Text drüber muss.
Alle Grafiken haben so ca. 1/4 leer, sprich da ist nur weisser Hintergrund, mal oben links, mal unten links, mal oben rechts, mal unten rechts und da soll nun eine Tabelle mit fester Grösse rein, der Einfachheit halber sagen wir mal 100x100px.
Die Tabelle ist auch nicht das Problem, die Frage ist nur:

Wie stelle ich es an, dass die Grafik sich automatisch ans Browser-Fenster anpasst, während die Tabelle mal oben mal unten mal links mal rechts die Grafik überlagert ohne ihre Grösse zu ändern?
(Mir ist klar, dass bei sehr kleinem Browser-Fenster der Platz nicht für die Tabelle mit fester Grösse reicht und die Tabelle dann die eigentliche Grafik überlagert, aber das ist kein Problem.)

djerunX · 13. November 2020

Ich verstehe das mit der Grafik nicht ganz. Ist dieses "weiße Fenster" Teil der Grafik und du willlst eine Tabelle da drüber legen, oder soll in dem Container die Tabelle als extra Element je nach Größe an einer bestimmten Stelle sein?

Das mit dem Seitenkopf kannst du mit dem Flexboxlayout oder Gridlayout machen. Wenn die Tabelle ein extra Element ist geht das auch damit, und du kannst z.B. mit der CSS-Regel "@ Media screen and (max-width:XYZpx)" (kein Leerzeichen zwischen dem @ und "media" aber er taggt sonst jemanden hier im Forum) festlegen ab welcher Displaygröße welche CSS-Regeln greifen.

edit: Ich würde dir auch empfehlen in Html die entsprechenden semantischen Elemente zu benutzen (https://www.w3schools.com/html/html_layout.asp)

edit2:

Hab hier mal auf die Schnelle was zusammengeschrieben. Ist nicht so schön aber hilft vllt weiter.

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./example.css">
    <title>Document</title>
</head>

<body>
    <div id="flexContainer">
        <header>Hier kommt deine Kopfzeile hin</header>

        <main id="flexContainerMain">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>Haus A</th>
                        <th>Haus B</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>Wohnfläche</th>
                        <td>100</td>
                        <td>150</td>
                    </tr>
                </tbody>
            </table>
            <img src="https://i.kinja-img.com/gawker-media/image/upload/kdjz6pz4badwin0xzxh5.jpg" alt="Bild" id="bild">
            <p>hier könnte Werbung stehen</p>
        </main>
        <aside>
        </aside>
    </div>

</body>

</html>

CSS:

#flexboxContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 20%, 80%;
}

#flexContainerMain {
    display: flex;
    flex-direction: row;
}

#bild {
    max-height: 100%;
    min-width: 100%;
}

@media screen and (max-width:480px) {
    #flexContainerMain {
        flex-direction: row-reverse;
    }
}

MarkP · 13. November 2020

Grafiken sind nun mal rechteckig, in diesem Falle sogar fast quadratisch und wenn das Ganze eine Zeichnung ist, sagen wir ein Plan von einem L-förmigen Haus von oben, dann bleibt halt oben rechts eine leere weisse Fläche, die trotzdem Bestandteil der Grafik ist, weil es L-förmige Grafiken nun mal nicht gibt.
Die Tabelle kann halt nicht Bestandteil der Grafik sein, weil die Grafik sich an die Grösse vom Browser-Fenster anpassen soll, die Tabelle aber eine feste Grösse haben soll.

djerunX · 13. November 2020

Also soll die Tabelle dann über der weißen Fläche liegen? Dann kannste das Flexboxlayout so lassen und und mit der CSS-Eigenschaft position arbeiten um die dadrüber zu legen

edit: und wann die wo überlegert halt mit der media CSS-Eigenschaft, wie in meinem Beispiel da oben.

MarkP · 13. November 2020

Richtig, solange das Browser-Fenster gross genug ist, so dass die weisse Fläche reicht um die Tabelle dort anzuzeigen läuft dann halt die Grafik L-förmig um die Tabelle rum, macht der User das Fenster zu klein werden halt auch Teile der Zeichnung überlagert, aber das wird der User dann schon erkennen (hoffe ich).

Ich danke dir herzlich für den Input.

Das_Oni · 13. November 2020

Eventuell versuchst Du es mal mit
Flexiblen Background sizes:
Flexible CSS-Hintergründe mit background-size gestalten

MarkP · 13. November 2020

@Das_Oni Ja, das hilft mir auch weiter, danke.

Suche

HTML/CSS Tabelle über Bild legen

MarkP

Lieutenant

djerunX

Cadet 4th Year

MarkP

Lieutenant

djerunX

Cadet 4th Year

MarkP

Lieutenant

Das_Oni

Lt. Junior Grade

MarkP

Lieutenant

Ähnliche Themen