✔ Tabellengröße "FIXIEREN"

B

baeri

Erfahrenes Mitglied
Hallo ich habe eine Tabelle mit folgenden Aufbau:

Code: 
<table class="p2">
        <tr>
            <td rowspan="3" colspan="3"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr><tr>
            <td></td>
            <td rowspan="2" colspan="2"></td>
        </tr><tr>
            <td></td>
        </tr>
    </table>

das CSS dazu sieht so aus...
Code: 
.p2 {
    border-collapse: collapse;
    width: 100%; 
    height: 350px; 
    table-layout: fixed;
}
.p2 td {
    border: 0px solid #f39;
    background-size: 100% auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.p2Img {
  width: 100%;
  opacity: 0;
}

jetzt will ich Bilder einfügen (das mach ich Dynamisch mit Javascript)...

aber vom Prinzipt passiert nix anderen als

<td><img class="p2Img" src="pfad/bild.jpg" /></td>

soweit funktioniert alles... allerdings "vergrößert" er meine Zellen...
das macht er deshalb weil das Bild in der Breite zwar angepasst wird, in der höhe allerdings etwas größer ist...
mit "overflow: hidden" wollte ich erziehlen, dass das Bild einfach abgeschnitten wird <- was beim DIV auch gut funktioniert... in der Tabelle allerdings nicht...

vermutlich liegt es daran, weil die Zellhöhe nicht vergeben ist... die höhe ergibt sich ja automatisch, indem ich die Gesamthöhe durch Teile die "Zeilen", da ich aber "Verbunde" über Reihen habe, gibt es keine "Pauschalhöhe"... <- ebenso pass ich diese natürlich via (Javascript abhänig zur Breite immer an [das allerdings nicht auf die Zelle sondern auf die ganze Tabelle]).

Die Frage besteht nun daran, kann ich die Bilder auch irgendwie "abschneiden" oder muss ich die Zellenhöhe meiner 3 Zelltypen manuell anpassen?

Danke
 
baeri hat gesagt.:
ich habe eine Tabelle ... jetzt will ich Bilder einfügen
Zum Vergrößern anklicken....
Dass für dieses Vorhaben die Tabelle semantisch mißbraucht wird, ist Dir wohl nicht bewußt?

Die Aufgabenstellung wird mit Elementen gelöst, die speziell der Seiten-/Textstrukturierung dienen, wie z.B. <figure>.
  1. https://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/figure
  2. http://www.w3schools.com/tags/tag_figure.asp
Dazu ein wenig CSS, um den Inhalt nach den Vorstellungen anzuordnen - fertitsch :cool:

Aber das sei hier nur grundsätzlich angemerkt ;)

Zur Antwort auf Deine Frage und Lösung des Problems komme ich jetzt :)
baeri hat gesagt.:
vom Prinzipt passiert nix anderen als

<td><img class="p2Img" src="pfad/bild.jpg" /></td>

soweit funktioniert alles... allerdings "vergrößert" er meine Zellen...
das macht er deshalb weil das Bild in der Breite zwar angepasst wird, in der höhe allerdings etwas größer ist...
Zum Vergrößern anklicken....
Der vertikale Abstand zum unteren Zellenrand schließt sich mit display:block für das Inline-Element <img> (in diesem Fall die Klasse .p2Img).

[edit]Tipp-Ex[/edit]​
 
Zuletzt bearbeitet:
Dankeschön...

ich denke, es macht sinn etwas "RICHTIG" zu machen :) ...
das ist mein "aktueller" Stand...
https://jsfiddle.net/baer777/ea4bLg7c/1/
ehrlich gesagt, fand ich die Lösung über Tabelle auch nicht sooooo Ideal.

wie kann ich denn so eine "gut angeordnete" Liste über "figures" machen!?

was ich halt noch als "Nebeneffekt" haben möchte ist ein "austausch" mit einem "langsamen Abgang" ...

in JS mach ich gerade folgendes, dass ich ein Bild darüberlege (als display:block läuft das jetzt auch perfekt passend) mit einer opacity von 0 welche ich dann "langsam" auf 1 wandern lasse... sobald das fertig ist, tausche ich den Hintergrund aus und lösche das Element wieder... X Sekunden später das selbe wieder von vorne...
=> dabei ist zu beachten, dass es sich um "nicht vorhersehbare" Bilder handelt (also aus einen Pool von Hunderten Bildern eine Zufallsauswahl)...

Ich habe mal einen kleinen versuch gestartet komme da aber nicht so wirklich weiter...
die Reihenfolge (wo im1 und im5 ist) spielt hier keine Rolle...

danke
 
Hallo

Für solche Layouts erscheint mir Flexbox eher nicht geeignet.

Flexbox ordnet Container eindimensional an, entweder waagerecht oder senkrecht. Für beides zusammen ist Flexbox nicht gedacht. Deshalb müssen bei solchen verschränkt-verschachtelt angeordneten Containern drei oder vier Hilfscontainer nur zum Layouten eingefügt werden. Das ist zwar möglich, sollte aber nach Möglichkeit vermieden werden.

Sachlich ist die Verwendung von Flexbox aber genau so korrekt wie die Verwendung von float. Die Verwendung des table-Elements ist hingegen sachlich falsch und die Verwendung von CSS-table schafft unnötige Probleme, weil die damit angeordneten Container den gleichen Einschränkungen wie table-Containern unterliegen.

Für solche verschränkt-verschachtelten Layouts ist das zukünftige CSS-Grid ausgedacht, welches mangels Browserunterstützung aber kurz- und wahrscheinlich mittelfristig in der Praxis nicht nutzbar ist.

Von daher würde ich die Bilder in diesem Fall mittels float anordnen.

Dabei sollte der Grundsatz beachtet werden, das Bilder für Internetseiten in Größe und Proportionen angepasst werden sollten. Größe und Proportionen von Bildern nachträglich mittels CSS anzupassen gilt als schlechter Stil und führt zu Problemen, egal ob die Bilder auf einer Webseite mit Flexbox, float oder anderen Möglichkeiten angeordnet werden.

Ich habe mal eine Beispielseite mit mehreren Beispielen erstellt. Falls Abstände oder Rahmen gewünscht werden müssen die natürlich entsprechend einberechnet und die Bildproportionen angepasst werden:

http://boratb.bplaced.net/index06.html

Gruss

MrMurphy
 
Zuletzt bearbeitet:
@MrMurphy

sieht net schlecht aus...
allerdings seh ich das Problem, dass es hier "sehr sehr" komplex wird und ich trotzdem weit weniger flexibel bin...

Beispiel 3 Zeigt dann schon, wenn ich einen Rand haben möchte, verschiebt es alle Bilder und es ist bei weiten nicht mehr so "angeordnet"

... das mit den Bilder perfekt zuschneiden leuchtet mir zwar ein, müsste dann aber wenn ich den rand um auch nur 1px veränder, schon wieder "nachschneiden" ... außerdem passt das "kleine" bild dann nicht in den Frame vom großen bild (weil ich ja beim kleinen 2x zwischen rand in der höhe haben kann beim großen aber 0x)...

Ich will die Methode nicht schlecht reden... im gegenteil ich will was dazulernen, aber gerade stellen wir auf E-Auto um und es gibt keine Steckdosen...

http://jsfiddle.net/baer777/63nmj127/embedded/js,html,css,result/dark/
während es im Chrome und Edge schon sehr sehr gut ausschaut, ist im Firefox beim Übergang oben und unten noch ein Rand...

aber die Frage ist doch nun, wie löse ich das in RICHTIG... wie gesagt, die vorangestellten Möglichkeiten bringen mir nicht oder nur äußerst komplex ans Ziel

Danke
Gruß baer
 
Einen möglichen richtigen Weg hat @MrMurphy ja nun ausreichend erläutert. Richtig ist auch immer schwer zu sagen, da es eben kein allzu festes Regelset gibt. Richtig macht man etwas immer dann, wenn es in möglichst vielen Browsern und auf möglichst vielen Geräten funktioniert, wenig Zeit und Ressourcen kostet und für sich selbst gut umsetzbar ist.

Sollen die Bilder auf Events (click, mouseover, etc.) reagieren oder nur angezeigt werden? Da du ja sowieso viel mit Javascript arbeitest könntest du auch en dynamisch erstelltes Canvas nutzen. Das bringt Vor- und Nachteile mit sich. Auf der einen Seite bekommst du damit mehr Dynamik und Kontrolle als mit purem CSS. Auf der anderen Seite kannst du durch die entstehende Kontrolle auch sehr viele Fehler machen und es wird nicht weniger komplex, sondern das Gegenteil.

Wenn du interesse daran hast, kann ich mal ein Beispiel gestalten.
 
MrMurphy hat gesagt.:
Für solche Layouts erscheint mir Flexbox eher nicht geeignet.

Flexbox ordnet Container eindimensional an, entweder waagerecht oder senkrecht. Für beides zusammen ist Flexbox nicht gedacht. Deshalb müssen bei solchen verschränkt-verschachtelt angeordneten Containern drei oder vier Hilfscontainer nur zum Layouten eingefügt werden. Das ist zwar möglich, sollte aber nach Möglichkeit vermieden werden.
Zum Vergrößern anklicken....
Flexbox-Modell: https://jsfiddle.net/spicelab/rwkua4hd/ :cool:

Mit der entsprechenden Restrukturierung einzelner Grafiken kommt das Beispiel auch ohne zusätzliche Hilfscontainer aus.
HTML: 
<main>
  <section>
    <figure>
      <img src="http://lorempixel.com/600/600/transport/4" alt="Beispielbild">
    </figure>
    <figure>
      <img src="http://lorempixel.com/600/400/city/1" alt="Beispielbild">
      <img src="http://lorempixel.com/600/400/food/4" alt="Beispielbild">
      <img src="http://lorempixel.com/600/400/animals/8" alt="Beispielbild"> 
    </figure>
    <figure>
      <img src="http://lorempixel.com/600/400/city/7" alt="Beispielbild">
      <img src="http://lorempixel.com/600/400/city/9" alt="Beispielbild">
      <img src="http://lorempixel.com/600/400/nature/2" alt="Beispielbild"> 
    </figure>
  </section>
</main>
CSS: 
section {
  display:-webkit-flex;
  display:flex;
  width:100%;
}
section figure {
  display:block;
  min-width:0;
  max-width:100%;
  margin:0;
}
section figure:nth-child(1),
section figure:nth-child(3) {
  width:40%;
}
section figure:nth-child(2) {
  width:20%;
}
section figure img {
  display:block;
  min-width:0;
  max-width:100%;       
  border:0;
}
section figure:nth-child(3) img:nth-child(1) {
  float:left;
  width:50%;
}
section figure:nth-child(3) img:nth-child(2) {
  float:right;
  width:50%;
}
section figure:nth-child(3) img:nth-child(3) {
  clear:both;
}

[edit]Tipp-Ex[/edit]​
 
Zuletzt bearbeitet:
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück