figure Tag, table, 3 Spalten mit Bilder und ul

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

JanHu

Neues Mitglied
9 Februar 2020
21
0
1
40
Versuche 2 Bilder nebeneinander und eine unsortierte Liste mit figure zu machen. Das gelingt mir aber nicht. Bin Anfänger

<figure>
<tr>
<th>img src="bilder/Bild1.jpg" alt="Bild101"</th>
<th>img src="bilder/Bild2.jpg" alt="Bild102"</th>
<th><ul><li><a href="https://Quelle">Name</a></li>
<li><a href="https://Quelle">Name</a></li>
<li><a href="https://Quelle">Name</a></li>
<li><a href="https://Quelle">Name</a></li>
<li><a href="https://Quelle">Name</a></li>
<li><a href="https://Quelle">Name</a></li>
<li><a href="https://Quelle">Name</a></li>
</ul>/th>
</tr>
<figcaption>Zusammenfassung der Tabelle<figcaption>
</figure>

Das führt dazu, daß in einem großem umrahmten Block
img src="bilder/Bild1.jpg" alt="Bild101" img src="bilder/Bild2.jpg" alt="Bild102" als Text erscheint, und darunter (statt daneben) die Tabelle voll ausgeführt. Die Bilder werden dann aber nicht mehr angezeigt.

Wie kann ich die Bilder denn anzeigen lassen?

Habe sowohl
figure
{
border:1px solid;margin-left:auto;margin-right:auto;
}
als auch
table
{
border:1px solid;margin-left:auto;margin-right:auto;
}
ausprobiert.

Wäre nett, wenn Ihr mir helfen könntet,

Danke
 

JanHu

Neues Mitglied
9 Februar 2020
21
0
1
40
ja, aber ich konnte nicht mehr antworten, weil das blockiert war. Bekomme nicht hin, daß meine Bilder angezeigt werden
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.721
332
83
67
Mache dich mit Flexlayout vertraut, damit kannst Du eine solche Anordnung leicht erzeugen:
 

JanHu

Neues Mitglied
9 Februar 2020
21
0
1
40
super, danke. Das werde ich mir morgen gleich reinziehen. Flexbox ist wohl super, wie es mir auf den ersten Blick scheint
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.721
332
83
67
Dann kannst Du dir auch gleich dieses durchlesen, denn es gibt da einen kleiner Fallstrick mit min-width:
 
Zuletzt bearbeitet:

JanHu

Neues Mitglied
9 Februar 2020
21
0
1
40
Sempervivum, die letzte Nachricht war gut. Dann habe ich es hinbekommen, daß die Reihen untereinander standen. Bekomme es aber nicht hin, daß ich nebeneinander 3 Spalten habe. Überschrift und Text brauche ich nicht, sondern nur links 2 Bilder und rechts die Liste.

Habe etliche Möglichkeiten probiert und zeige mal das, was ich als letztes ausprobiert habe:

<div class="content">

<figure>
<div>
<img src=""bilder/Bild1.jpg" alt="Bild101" >
</div>
<figcaption>

</figcaption>
</figure>
<figure>
<div>
<img src=""bilder/Bild2.jpg" alt="Bild102" ">
</div>
<figcaption>

</figcaption>
</figure>
<figure>
<div>
<ul><li><a href="https://Quelle">Name</a></li>
<li><a href="https://Quelle">Name</a></li>
<li><a href="https://Quelle">Name</a></li>
<li><a href="https://Quelle">Name</a></li>
<li><a href="https://Quelle">Name</a></li>
<li><a href="https://Quelle">Name</a></li>
<li><a href="https://Quelle">Name</a></li>
</ul>
</div>
<figcaption></figcaption>
</figure>
</div>

Bei der CSS habe ich es mit .content versucht, als auch ohne

img {
display: flex;
margin-top: 50px;
margin-bottom: 50px;
}


figure {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
max-width: 400px;

}

figure figcaption {
flex: 1;
margin: 1em;
flex-wrap: nowrap;
flex-direction: row;
width: 1px;
}

figure div {
flex: 1;
flex-wrap: nowrap;
flex-direction: row;
max-width: 400px;
}

figure img {
width: 100%;
height: auto;
flex-wrap: nowrap;
flex-direction: row;
}

Die beiden Bilder sind in der endgültigen Version dann etwa 200-300 px breit, derzeit aber schmaler

Was mache ich denn verkehrt?

Danke
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.721
332
83
67
Ich denke mal, das ist zu viel der figure-Tags. So funktioniert es auch:
Code:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        figure {
            display: flex;
            align-items: center;
        }

        figure img {
            width: 100%;
            height: auto;
            flex: 2;
            min-width: 0;
            min-height: 0;
        }

        figure ul {
            flex: 1;
        }
    </style>
    <title>Test</title>
</head>

<body>
    <figure>
        <img src="images/dia0.jpg">
        <img src="images/dia1.jpg">
        <ul>
            <li>Listenpunkt 1</li>
            <li>Listenpunkt 2</li>
            <li>Listenpunkt 3</li>
            <li>Listenpunkt 4</li>
            <li>Listenpunkt 5</li>
        </ul>
    </figure>
</body>

</html>
Möglicher Weise passt hier das figure-Tag nicht wirklich, denn eigentlich eignet es sich für ein Bild mit einer Beschreibung dazu (Caption). Ist diese Liste überhaupt als Beschreibung zu verstehen?
 
Zuletzt bearbeitet:

JanHu

Neues Mitglied
9 Februar 2020
21
0
1
40
Danke, werde ich heute später ohne flex-direction ausprobieren.

Die ul dient dazu, auf eine fremde Seite geleitet zu werden. Das funktioniert auch. Dann habe ich aber zuviel freien Platz in dem Bereich. Die Bilder sind dazu, die Lücke zu füllen und weil es gut zur Thematik paßt
 

JanHu

Neues Mitglied
9 Februar 2020
21
0
1
40
jetzt macht das schon einen besseren Eindruck. Nebeneinander sind die Sachen schon, aber noch nicht so, wie es sein soll

Probiere noch aus und melde mich dann

Danke
 

JanHu

Neues Mitglied
9 Februar 2020
21
0
1
40
klappt noch nicht. Das erste Bild links ist zu breit, das zweite aber auch schmale Bild macht sich nicht auf. Der ul habe ich jetzt eine Breite von 300px gegeben, aber die wird von der ul nicht in Anspruch genommen

<div class="content">

<figure>
<img src="bild..." />
<img src="bild..." />

<ul>
<li><a href="https://...</a></li>
<li><a href="https://....</a></li>
<li><a href="https://...n</a></li>
<li><a href="https://...</a></li>
<li><a href="https://...</a></li>
<li><a href="https://...</a></li>
<li><a href="https://...</a></li>
</ul>
</figure>
</div>

.content

figure {
display: flex;
align-items: center;
}

figure img {
width: 100%;
height: auto;
flex: 2;
min-width: 0;
min-height: 0;
}

figure ul {
flex: 1;
width: 300px;
}
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.721
332
83
67
Wie groß sind denn die beiden Bilder jeweils in Pixeln?

Was die Liste betrifft, so weiß ich im Moment nicht, was Vorrang hat,
flex: 1; oder width: 300px;
Besser mit den Mitteln von Flex einstellen, also so:
flex: 0 0 300px;
 

JanHu

Neues Mitglied
9 Februar 2020
21
0
1
40
Danke

Die Bilder sind nicht breit, max. 200 px wenn ich mich recht erinnere. Werde aber nochmal nachsehen. Die Liste ist auf jeden Fall wichtiger, als die Bilder. Habe es jetzt vielleicht verstanden; dachte anfangs, daß flex:2 bedeutet, daß ich 2 Bilder habe. Du sagst aber 0 0. Das probiere ich morgen gleich aus, ist mir jetzt schon zu spät

Möchte die flexbox auf meiner Seite gerne mehrmals verwenden. Denke mir daß ich dann jeweils einen div mache, und einen Class-name vergebe. Das sollte doch gehen
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.721
332
83
67
dachte anfangs, daß flex:2 bedeutet, daß ich 2 Bilder habe.
Nein, das war Zufall. flex: 2; gibt den relativen Platz an, den das Element einnimmt, d. h. wenn die Liste flex: 1; hat und die Bilder flex: 2; nehmen die Bilder doppelt so viel Platz ein, wie die Liste, also je 40% während die Liste 20% einnimmt. Dies ist nur eine Kurzschreibweise. flex: 0 0 300px; ist die vollständige Schreibweise und bedeutet, dass die Ausgangsbreite 300px ist und weder vergrößert noch verkleinert wird (grow/shrink), d. h. die Breite des Elementes ist fest.
 

JanHu

Neues Mitglied
9 Februar 2020
21
0
1
40
Es ist immer noch so, daß das linke Bild viel zu breit ist (breiter als hoch), und das rechte nur mit seine alt-Bezeichnung erscheint. Die Liste ist zu schmal, weil die Angaben pro Punkt der Liste jeweils in 2 Zeilen erscheinen, statt in einer

das linke Bild hat 105x242px
das rechte Bild hat 197x350px, also die Bilder sind schmal, aber hoch

Habe das so angegeben:

.content

figure {
display: flex;
align-items: center;
}

figure img {
width: 100%;
height: auto;
flex: 0;
min-width: 0;
min-height: 0;
}

figure ul {
flex: 0 0 300px;
}
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.721
332
83
67
Wenn ich das CSS von dir verwende, verschwinden beide Bilder wegen des flex:0;

Mit meinem CSS und deinen Bildabmessungen sieht es bei mir so aus:
2im-ul-1.png
Weil die Bilder relativ klein sind, habe ich das flex auf 1 gesetzt. Möglicher Weise müsste man sie noch kleiner machen, weil Du oben schreibst, dass die Listenpunkte auf zwei Zeilen erscheinen.

Meine Testseite:
Code:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        figure {
            display: flex;
            align-items: center;
        }

        figure img {
            width: 100%;
            height: auto;
            flex: 1;
            min-width: 0;
            min-height: 0;
        }

        figure ul {
            flex: 1;
        }
    </style>
    <title>Test</title>
</head>

<body>
    <figure>
        <img src="https://via.placeholder.com/105x242">
        <img src="https://via.placeholder.com/197x350">
        <ul>
            <li>Listenpunkt 1</li>
            <li>Listenpunkt 2</li>
            <li>Listenpunkt 3</li>
            <li>Listenpunkt 4</li>
            <li>Listenpunkt 5</li>
        </ul>
    </figure>
</body>
</html>
 

JanHu

Neues Mitglied
9 Februar 2020
21
0
1
40
Habe jetzt die Language auf en statt de eingestellt

<div class="content">
<figure>
<img src="Bild1..alt width="105px" />
<img src="Bild2 width="197px" />
.
.
.content

figure {
display: flex;
align-items: center;
}

figure img {
width: 100%;
height: auto;
flex: 1;
min-width: 0;
min-height: 0;
}

figure ul {
flex: 0 0 350px;
}

auf der linken Seite habe ich dann einen Rand, das müßte auch ok sein denke ich. Dann ist das linke Bild viel zu breit gegenüber dem Original, das Bild in der Mitte wird nicht angezeigt. Die ul habe ich auf 350px verändert. Die Ul ist jetzt in Ordnung. Nur die Bilder sind das Problem. Die Höhe vom linken Bild ist bestens, aber das Bild ist erheblich zu breit.

Sage ich
figure ul {
flex: 1 1 350px; }
wird das linke Bild fast Quadratisch und die ul rückt erheblich weiter nach links. Das rechte Bild kommt dann trotzdem nicht.
Bei
figure ul {
flex: 1 2 350px; } ändert sich nichts

Nachdem ich width 105 angegeben habe, sollte das Bild doch in Ordnung sein, aber ist nicht
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.721
332
83
67
Sieh dir doch Mal mein Screen in Posting #17 an und beschreibe, wie Du es haben möchtest, d. h. was demgegenüber anders sein soll.
 

JanHu

Neues Mitglied
9 Februar 2020
21
0
1
40
Habe rumprobiert, ein anderes Bild reingesetzt und die Höhe der Bilder bleibt ungefähr wie die ul, gleich was ich mache. Habe 70 margin gesetzt und habe quadratische Bilder. Dann werde ich jetzt ander Motive nehmen und dann müßte das auch klappen. Warum die Höhe bei allen Sachen gleich bleibt, kann ich nicht nachvollziehen.

Danke Euch vielmals für die gute Hilfe und die guten Ratschläge. Jetzt werde ich ähnliches an anderen Stellen des Seite mal probieren und sehen, ob es irgendwie geht