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

Firefox Tabelle mit Bildern

A

AzRaIL

Mitglied
Moin,

ich arbeite ja grundsätzlich mit Google Chrome und da habe ich eine 5 spaltige Tabelle mit Bildern:

Code: 
<table style="width:100%;">
<tr>
<td><img src="bild1.jpg"></td>
<td style="width:20px;"></td>
<td><img src="bild2.jpg"></td>
<td style="width:20px;"></td>
<td><img src="bild3.jpg"></td>
</tr>
</table>

Die Tabelle hat eine Breite von 100% (passt sich dem Parent an)
Das tolle an Chrome ist, dass die 3 Bilder von der Größe her automatisch angepasst werden an die Breite.

Sind die Bilder also jeweils 200px breit hätte man eine Gesamtbreite von 640px. Ist das Parentobjekt der Tabelle jedoch nur 520px Breit werden die Bilder automatisch verkleinert auf die entsprechende Größe

Firefox macht dies jedoch nicht. Die Tabelle ragt dann mit den 640px einfach über das Parentobjekt hinaus und begrenzt die Größe der Bilder nicht. (EDIT: max-width:100%; für die Bilder klappt in Firefox wohl nicht...)

Meine Lösung dafür ist es den Bildern ne feste Breite zu geben. Jedoch soll die Seite auch responsive werden und mit der Lösung müsste ich zusätzlich die Bildgröße verkleinern bei den Media Queries.

Gibt es eine Möglichkeit Firefox diese Funktionalität von Chrome auch zu geben, sodass die Bilder automatisch mitverkleinert werden?

EDIT2: Die Bilder werden in Firefox korrekt verkleinert wenn ich den td's max-width gebe...jedoch scheint mir das keine richtige Lösung zu sein

lg
 
Zuletzt bearbeitet:
Werbung:
Hallo,

hast du mal einen Link zu der Seite?

Und warum mißbrauchst du eine Tabelle für das Layout?

Gruss

MrMurphy
 
Und warum mißbrauchst du eine Tabelle für das Layout?
Zum Vergrößern anklicken....
Das mache ich auch immer so. Das hat viel Vorteile gegenüber dieser "modernen" Methode mit CSS, wo nur die Hälfte aller Browser die Seite anständig anzeigen kann und zudem der Code viel unübersichtlicher wird, aus meiner Sicht.
 
Werbung:
Hallo-Welt schrieb:
Das hat viel Vorteile gegenüber dieser "modernen" Methode mit CSS
Zum Vergrößern anklicken....
Das ist aber völlig falsch
Hallo-Welt schrieb:
wo nur die Hälfte aller Browser die Seite anständig anzeigen kann
Zum Vergrößern anklicken....
Wenn man es nicht richtig macht, hast du recht, aber unter normalen Umständen ist das leider auch falsch
Hallo-Welt schrieb:
und zudem der Code viel unübersichtlicher wird, aus meiner Sicht.
Zum Vergrößern anklicken....
Und Tabellen sind übersichtlicher? Das ist doch nur eine Frage des ordentlichen Einrückens. Wenn man sich dabei etwas Mühe gibt, sind Tabelen nicht im Geringsten übersichtlicher.
 
Werbung:
Und der Vorteil meiner Methode: Selbst steinalte Browser aus dem letzten Jahrtausend können meine Seite darstellen.
Bei dem Link, den du gepostet hast, war hingegen kein Argument dabei, das mich überzeugt hat, es künftig mit CSS zu machen. Das ist zudem auch viel komplizierter, dann jedem div eine eigene Klasse zu geben und dann mit margin deren Abstand zum nächsten... Meiner Ansicht nach geht es mit purem HTML besser, einfacher, schneller und übersichtlicher. Und zudem ist die Kompatibilität weitaus höher.
 
Naja, jeder hat so seine Einstellung. Wenn du der Meinung bist, du musst unbedingt noch den IE4 berücksichtigen, dann mach' das. Und vermutlich verweigerst du dich HTML5, das können die alten Browser ja auch nicht.
 
Werbung:
Werbung:
Hallo Hallo-Welt,

ich kann nicht verstehen, warum du AzRaIL nicht helfen willst, indem du ihm deine Lösung zur Verfügung stellst? Deine Anfragen sind schließlich auch möglichst konkret beantwortet worden.

Das Forum lebt davon, das die User sich gegenseitig helfen.

Und nicht einfach schreiben, sie haben eine Lösung, diese dann aber für sich behalten.

Gruss

MrMurphy
 
Hier ist ja richtig was los :D

Also ich arbeite mit Joomla und da ist es für den Kunden später einfach leichter etwas im Editor zu ändern wenn es mit Tabellen gemacht ist (Ist übersichtlicher dargestellt / Formatierungen werden direkt angezeigt)
Mit divs zb wären alle Elemente im Editor untereinander anstatt nebeneinander. Das verwirrt die Kunden meist.

Aber ich stimme euch zu, auch so neige ich eher dazu Tabellen zu benutzen (ausser es soll responsive werden).
Was wäre denn die semantisch korrekte Struktur eines dreispaltigen Contents mit Bildern?
Ich hätte ja jetzt zu Listen gegriffen

Code: 
<ul>
<li><a href="#"><img src="bild1.jpg"></a></li>
<li><a href="#"><img src="bild2.jpg"></a></li>
<li><a href="#"><img src="bild3.jpg"></a></li>
</ul>

Und das ganze dann mit float:left; o.ä. layoutet.

lg
 
Werbung:
Hallo,

das Problem ist weiterhin, das ohne den Quelltext keine konkrete Hilfe möglich ist.

Und wieso sollen die Bilder in andere Elemente gesteckt und gefloatet werden? Das sind doch nur drei Bilder, die entsprechend einfach in den Quelltext geschrieben werden. Das sollte zudem für die Kunden am einfachsten zu pflegen sein. Zudem passt sich die Darstellung flexibel der Fenstergröße an und ein Responsive Design (zum Beispiel wenn die Bilder ab einer bestimmten Schrumpfung untereinander rutschen sollen) erfordert nur ein paar Zeilen zusätzliches CSS.

Auch die Abstände können natürlich noch beliebig angepasst werden oder Rahmen oder Schatten hinzugefügt werden oder ... Alles per CSS.

Ich habe mal ein Beispiel gemacht, das gesamte CSS befindet sich im Quelltext:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_04_13_azrail_02_bilder.html

Edith:

Ich habe grade noch mal ein Beispiel mit Responsive Design erstellt, das sind ja grade mal zwei zusätzlichen CSS-Anweisungen. Bei weniger als 900px Fensterbreite werden die Bilder untereinander dargestellt, damit sie nicht zu klein werden:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_04_13_azrail_03_bilder.html

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Gut, äh... ich blick hier zwar gerade nicht mehr durch, aber ich habe bei meinem Layout einfach eine unsichtbare Tabelle genommen, bei der ich zwei Spalten wie mehrere Kolonen zum trennen von mehreren div-Containern verwende. Jedoch verstehe ich nicht ganz, wie ich damit AzRaIL helfen kann. Denn er hat doch ein ganz anderes Problem, soweit ich das verstanden habe, und nicht das, dass er es nicht schafft, eine Tabelle fürs Layout zu verwenden. Wir sind nur vom Eigentlichen Thema abgekommen, da diese Methode hier als schlecht und nicht mehr zeitgemäß dargestellt worden ist.

Kurz: Ich helfe gern, sagt mir nur wie.
 
Hallo MrMurphy,

danke erstmal für die Mühe :)
Deine Beispiele wären wohl die einfachste Methode das umzusetzen. Wie sieht es jedoch aus wenn ich Bildunterschriften habe? (Die ich leider mit berücksichtigen muss bei meinem jetzigen Problem)
Spätestens dann würde ich wie gewohnt zu Tabellen greifen und mir einiges an css Arbeit sparen.

Inwiefern sind Tabellen denn eigentlich "schlecht" (abgesehen wenn man responsive arbeitet). Denn bei mehrspaltigem Content greife ich eigentlich immer zu Tabellen.
Oder ist das z.b. aus SEO Sicht schlecht Tabellen für Inhalt zu benutzen?
 
Werbung:
Ich wiederhole mich ja gern:
bdt600 schrieb:
Guckst du: http://www.css4you.de/wslayout1/index.html
Zum Vergrößern anklicken....
Klar, auch mit Tabellen kann man sich ein Layout zusammenzimmern, immer nach dem Motto: Der Meister will's kaum glauben, auch mit 'nem Hammer kann man schrauben.
Und du machst ja auch keine Dose mit 'nem Trennjäger auf, geht auch, aber ist irgendwo blöd. Und so ist das auch mit Tabellen. Die sind nämlich dafür da, tabellarische Daten darzustellen, und für mehr sind die nicht gedacht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben