Layout ohne Tabellen

[Sandro Birke]

hi@all

immer wieder und öfter hört man vom "layouten ohne tabellen". Ich erstellen gerade eine Seite, in der ich versuche das umzusetzen. ich arbeite ausschließlich mit <div>-tags und css. so hab ich auch beispielsweise den grundriss einer etage mit mehreren räumen mit hilfe von <div>-tags und css umgesetzt. das ergebnis ist tadellos und natürlich um ein vielfaches an speicherplatz kleiner als eine grafik.

andererseits befinden sich in dieser datei jetzt ca. 50 <div>-tags und die css-dateien werden entsprechend mehr und länger. bis jetzt hab ich drei externe css-dateien mit je etwa 3kb (ca. 40 zeilen code).

da ich vorher viel mit tabellen gearbeitet habe ist deshalb meine frage: ist dies noch im sinne des erfinders oder kann ich so weiter machen und komplett auf tabellen verzichten?

vielen dank

[Ashura]

Hallo Sandro.

andererseits befinden sich in dieser datei jetzt ca. 50 <div>-tags und die css-dateien werden entsprechend mehr und länger.

Dann hast du _eindeutig_ das Prinzip von semantischem Markup missverstanden.
Bitte konsultiere Google und überarbeite dann deinen Entwurf !sinnvoll!.

Gruß, Ashura

[Chräcker Heller]

Hallo,

Dann hast du _eindeutig_ das Prinzip von semantischem Markup
missverstanden.

wollte sie denn semantisches Markup haben? Konnte ich jetzt nicht rauslesen. ich konnte nur sehen, das sie per Internetvernetzte Computer den Grudriss eines Hauses übertragen wollte.

Bitte konsultiere Google

muß es immer google sein?

Chräcker

[Ashura]

Hallo Chräcker.

Bitte konsultiere Google

muß es immer google sein?

Nein, fastbot>> ist auch OK. ;)

Gruß, Ashura

[Gernot Back]

Hallo Sandro,

(...) so hab ich auch beispielsweise den grundriss einer etage mit mehreren räumen mit hilfe von <div>-tags und css umgesetzt. das ergebnis ist tadellos und natürlich um ein vielfaches an speicherplatz kleiner als eine grafik.

andererseits befinden sich in dieser datei jetzt ca. 50 <div>-tags und die css-dateien werden entsprechend mehr und länger. bis jetzt hab ich drei externe css-dateien mit je etwa 3kb (ca. 40 zeilen code).

da ich vorher viel mit tabellen gearbeitet habe ist deshalb meine frage: ist dies noch im sinne des erfinders oder kann ich so weiter machen und komplett auf tabellen verzichten?

Ein Bild mit DIV-Elementen zu imitieren ergibt semantisch gesehen meines Erachtens genauso wenig Sinn, wie dies mit Tabellen zu tun. Wenn es aber um die Einsparung von Speicherplatz geht, so halte ich pragmatisch gesehen die Lösung für die sinnvollste, bei der du am meisten Speicherplatz einsparst. Das dürfte nach meiner Einschätzung die Tabellenlösung sein.

Gruß Gernot

[Gernot Back]

Hallo nochmal,

ich habe vor einiger Zeit mal -so als Übung- nach der speicherplatzärmsten, das Browserfenster in mindestens einer Dimension füllenden Umsetzung für die norwegische Flagge gesucht.

Was meint ihr, was die Lösung ist?

Gruß Gernot

[MudGuard]

Hi,

ich habe vor einiger Zeit mal -so als Übung- nach der speicherplatzärmsten, das Browserfenster in mindestens einer Dimension füllenden Umsetzung für die norwegische Flagge gesucht.

Mit nur einer Datei komm ich auf 502 Byte Dateigröße.
Mit 2 Dateien komm ich auf 177 + 109 Byte = 286 Byte Dateigröße.

Welche der beiden Varianten aber speicherplatzärmer ist, hängt vom Filesystem ab - je nach Größe der kleinsten vergebenen Einheit ...

cu,
Andreas

[Gernot Back]

Hallo Andreas, hallo Thomas

Mit nur einer Datei komm ich auf 502 Byte Dateigröße.
Mit 2 Dateien komm ich auf 177 + 109 Byte = 286 Byte Dateigröße.

Welche der beiden Varianten aber speicherplatzärmer ist, hängt vom Filesystem ab - je nach Größe der kleinsten vergebenen Einheit ...

Ich glaube, Ihr seid beide besser, meine Variante, die ich gerade wieder zu rekonstruieren versuche, besteht aus einem 97Byte großen Gif und einem Wahnsinns-JS-Gebilde von über 1KB, mit dem ichs zu skalieren versuche. Mich würde aber mal ein Vergleich zwischen SVG und Flash interessieren, das muss ich aber noch bauen.

Gruß Gernot

[MudGuard]

Hi,

Mit nur einer Datei komm ich auf 502 Byte Dateigröße.

Update: 431 Byte - wenn man die Zeilenumbrüche wegläßt:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><title></title><style type="text/css">  
[code lang=css]*{padding:0;margin:0}  
html,body{height:100%;overflow:hidden;background:#c00}  
i{background:#fff}b{background:#009}  
i,b{position:absolute}  
#a,#c{height:100%}  
#b,#d{width:100%}  
#a{left:27.27%;width:18.18%}  
#c{left:31.82%;width:9.09%}  
#b{top:37.5%;height:25%}  
#d{top:43.25%;height:12.5%}

</style>
<i id=a></i><i id=b></i><b id=c></b><b id=d></b>
[/code]

Mit 2 Dateien komm ich auf 177 + 109 Byte = 286 Byte Dateigröße.

Update: 165 + 86 = 251 Byte (einer der wenigen Fälle, wo gif kleiner als png ist)

(auch hier: Zeilenumbrüche noch wegwerfen)

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><title></title><style type="text/css">  
[code lang=css]*{padding:0;margin:0}

</style>
<img src=f.gif alt="" width="100%">
[/code]

und dazu

(theoretisch ging's noch ein bißchen kleiner, aber dann kriegen die Browser Probleme, weil die nicht wirklich mit den Auswirkungen von SHORTTAG YES klarkommen.)

cu,
Andreas

[Thomas Meinike]

Hallo,

ich habe vor einiger Zeit mal -so als Übung- nach der speicherplatzärmsten, das Browserfenster in mindestens einer Dimension füllenden Umsetzung für die norwegische Flagge gesucht.

Was meint ihr, was die Lösung ist?

Hier mal eine nicht bis aufs letzte Byte optimierte SVG-Umsetzung:

  
<?xml version="1.0"?>  
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
<svg width="100%" height="100%" viewBox="0 0 22 16">  
  <rect x="0" y="0" width="22" height="16" fill="#F00"/>  
  <g fill="#FFF">  
    <rect x="0" y="6" width="22" height="4"/>  
    <rect x="6" y="0" width="4" height="16"/>  
  </g>  
  <g fill="#00F">  
    <rect x="0" y="7" width="22" height="2"/>  
    <rect x="7" y="0" width="2" height="16"/>  
  </g>  
</svg>

MfG, Thomas

[Thomas Meinike]

Unter Verwendung von Pfaden lassen sich noch Zeichen einsparen (77 weniger im Vergleich zur Version mit Rechtecken):

  
<?xml version="1.0"?>  
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
<svg width="100%" height="100%" viewBox="0 0 22 16">  
  <path d="M0,0h22v16h-22Z" fill="#F00"/>  
  <g fill="#FFF">  
    <path d="M0,6h22v4h-22Z"/>  
    <path d="M6,0h4v16h-4Z"/>  
  </g>  
  <g fill="#00F">  
    <path d="M0,7h22v2h-22Z"/>  
    <path d="M7,0h2v16h-2Z"/>  
  </g>  
</svg>

MfG, Thomas

[Jeena Paradies]

Hallo,

Unter Verwendung von Pfaden lassen sich noch Zeichen einsparen (77 weniger im Vergleich zur Version mit Rechtecken):

So ganz neben bei, gute Browser[TM] (wie zum beispiel der Opera 8 beta 3/preview 5), könen diese Dateien mittlerweile auch ganz ohne irgendwelche Plugins darstellen, ist das nicht wunderbar? Siehe:

[iframe:http://jeenaparadies.net/t/norwegen-fahne.svg]

Grüße
Jeena Paradies

[Thomas Meinike]

Hallo,

So ganz neben bei, gute Browser[TM] (wie zum beispiel der Opera 8 beta 3/preview 5), könen diese Dateien mittlerweile auch ganz ohne irgendwelche Plugins darstellen, ist das nicht wunderbar? Siehe:

Ist mir bekannt, siehe Opera-Screenshot einer SVG-Tiny-Anwendung.

MfG, Thomas

[Jeena Paradies]

Hallo,

Ist mir bekannt, siehe Opera-Screenshot einer SVG-Tiny-Anwendung.

Ah sehr cooler link, danke.

Grüße
Jeena Paradies