Slice Umsetzung mit Prozentwerten?

[Verhueterli]

Huhu,

ich sitze gerade an der Umsetzung eines Photoshop Slices. Der Slice besteht aus einer komplexen Tabelle (ja, sorry, mit Divs habe ich es nicht hinbekommen) aus verschiedenen Grafiken. Alles zusammen stellt das Ganze eine Startseite da, die zu verschiedenen Unterpunkten weiterführt.

Soweit alles kein Problem. Die Sache ist Folgende: ich würde gerne Usern mit höherer Auflösung auch eine höherauflösende Version der Startseite anbieten. Sprich 1920x User sollten eine größere Variante erhalten als 1024x User.

Nun tue ich mich allerdings schwer, das komplette Tabellen-Konstrukt einfach mal so kleiner zu machen, inklusive Bilder. Letztere möchte ich via HTML/CSS einfach runterskalieren auf die benötigte Größe, qualitätstechnisch ist das passabel.

Aber wie bekomme ich das Tabellen-Konstrukt ordentlich kleiner, ohne dass die Struktur (mit rowspans, colspans, etc.) nicht zerschossen wird? Ich hatte erst an prozentuale Werte gedacht, das geht aber völlig in die Höse.

Jetzt kann ich natürlich den Tabellenspalten und den Bildern einfach kleinere Werte geben für eine kleinere Auflösung, aber wie komme ich auf die korrekten Werte? Aktuell ist die Startseite 1601 x 925 Pixel groß. Wie finde ich nun die einzelnen Werte aller Spalten für eine Auflösung von z.B. 1024 x 768 heraus? (mal davon ausgegangen das Verhältnis Höhe:Breite würde sich nicht ändern)

Hat jemand eine Idee, wie man hier voran kommt?


Grüße

 

[Körnerbrötchen]

Hallo Verhueterli,
auch wenn es sich enttäuschend anhört: Setz dich an das Ursprungsdesign in Photoshop, zerschneide es dir selbst und bau es dann per div zusammen. Alles andere wird nämlich nur Murks. Die Bilder bindest du dann (zumindest jene, die keinen Inhalt haben) per CSS ein und lässt das ganze dann per repeat wiederholen.

Gruß

 

[Verhueterli]

Das Design habe ich bereits zerschnitten (gesliced). Per DIV klappt es nicht, das ist eine sehr komplexe Konstruktion, nichts wo man einfach mal nur ein paar Floats setzen muss. Ich finde das mit der Tabelle auch nicht fürchterlich schlimm, auch wenn alle darüber schimpfen.

Wie man einen Slice umsetzt ist mir klar, das habe ich oft gemacht. Mir geht es jetzt speziell darum wie man diesen Slice im Gesamten verkleinern kann ohne alle Grafiken manuell zu verkleinern.

Hat da jemand eine Idee?

P.S. Mit Repeats kann ich hier nicht arbeiten, in dem Slice wiederholt sich nichts. Es ist ein Foto. Manche Bereiche dieses Fotos werden anklickbar sein, darum ist der Slice auch so kompliziert.

 

[Körnerbrötchen]

Man kann jedes Design auch ohne Tabellen umsetzen. Gib mir den Auftrag und ich erledige das für dich. ;) Du willst also ein Design, das seine Größe in Höhe und Breite ändert? Wozu? Dadurch bekommst du doch nur Probleme mit Schriften etc. pp. Zeig uns das Design doch mal…

 

[struppi]

Es gibt auch Imagemaps. Eine Slice hat selten Vorteile, meistens eher Nachteile.

 

[Verhueterli]

Es geht hier nicht um die Diskussion "Tabellen vs DIVs". Klar kann man alles ohne Tabellen machen, ist halt eine Frage des Aufwands.

Das Design kann ich leider nicht herzeigen, das sollte vor Veröffentlichung nirgends auftauchen. Ich kann es aber kurz erklären: es geht hier nicht um ein typisches Design für eine Webseite, sondern lediglich um die Startseite. Ihr kennt sicherlich diese Webseiten, wo man erst mal ein Logo anklicken muss um dann auf die eigentliche Webseite zu gelangen. So in etwa wird das hier auch ablaufen. Spezieller wird der User das Foto eines Geschäftes sehen. Einzelne Teile des Fotos sind anklickbar, dadurch gelangt man zur eigentlichen Webseite und zur angeklickten Sektion. Beim Mouseover über Teile des Fotos werden diese "aufleuchten".

Und noch genauer: ein Foto eines Ladens, wo es z.B. eine Theke, eine Service-Ecke und ein Regal gibt. Nun kann man über alle 3 Sektionen des Fotos "mouseovern", diese werden dann durch einen "Glow-Effekt" markiert und man kommt durch Anklicken zur entsprechenden Sektion.

Sprich: das Design dieser Startseite hat keine Schrift, es ist ausschließlich ein großes Bild, zusammengesetzt aus vielen kleinen.

Genauer krieg ich es nicht hin

An eine Imagemap hatte ich auch gedacht. Ich würde dann statt vieler kleiner Bilder, die zusammengesetzt werden, ein großes Bild nehmen und dieses über eine Imagemap "klickbar" machen in bestimmten Bereichen. Das Problem dabei: wie realisiere ich dann den Mouseover von einzelnen Teilen des Bildes? Ich will nicht für jeden einzelnen Mouseover ein komplett neues Bild in Größe 1600x925 laden müssen. Das wäre sicherlich suboptimal.

Hat jemand eine Idee?

P.S. Verschont mich bitte mit "Moralthemen" à la "Tabellen sind Mist" oder "so Startseiten sind doch blöd". Ich hab das alles schon oft gehört und bin mir dessen bewusst. Ich bin kein absoluter Anfänger und weiß schon relativ genau, wieso ich was wie mache. Trotzdem danke für die Aufklärungsversuche.

P.P.S. Ich kann das notfalls auch einfach in zwei verschiedenen Auflösungen slicen. Ich hoffte nur, dass es vielleicht auch geht ohne alles in zwei Größen zu slicen