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

figure Tag, table, 3 Spalten mit Bilder und ul

JanHu

Neues Mitglied
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
 
Werbung:
ja, aber ich konnte nicht mehr antworten, weil das blockiert war. Bekomme nicht hin, daß meine Bilder angezeigt werden
 
Werbung:
super, danke. Das werde ich mir morgen gleich reinziehen. Flexbox ist wohl super, wie es mir auf den ersten Blick scheint
 
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
 
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
 
Werbung:
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
 
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;
}
 
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
 
Werbung:
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;
}
 
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
 
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
 
Werbung:
Das HTML ist vom Inhalt abhängig. Mit deinen Quellcodeschnipseln ohne richtigen Inhalt ist dir deshalb nicht zu helfen. Zudem willst oder kannst du die Rückfragen nicht hinreichend beantworten, was die Hilfe zusätzlich erschwert.

Im Prinzip musst du dich nur an die HTML-Regel und die empfohlenden / bewährten Vorgehensweisen halten um dein Problem zu lösen. Das ist dann eine Minutensache.

Genau wegen Fragenden wie dir wird das Crossposting übrigens meist abgelehnt und direkt gebrandmarkt. In einem Forum zu fragen und anschließend überhaupt nicht auf die Antwort zu reagieren wird als äußerst unhöflich angesehen.
 
Entschuldige, ich werde mich bessern. Aber ich ware noch für ein paar Tage weg und konnte deshalb nicht gleich antworten. Hatte mir aber bei einem anderen Post angesehen, wie das gemacht wird. Der hatte auch nicht alle Daten drin. In der Zukunft weiß ich bescheid.

Probiere gerade aus, ob ich das Problem auch anders regeln kann, indem ich die Seite anders aufstelle
 
Zurück
Oben