Seite um 50% verkleinern

system · 7. März 2014 um 14:36

Hallo,

ich habe folgende Seite:

[HTML]

Some text

[/HTML] ich weiss, dass ich so ein Layout eigentlich nicht verwenden sollte - aber ich will HTML-Mails generieren und da klappt das nicht so mit CSS.

Das so erzeugt Template lese ich auf einer anderen Seite mit PHP ein und möchte dieses auf der Webseite anzeigen - allerdings 50% verkleinert.
→ Es geht darum das Designer ein Template entwerfen können und bereits erzeugte Templates einlesen können und bearbeiten…

Wie bekomme ich alles um 50% kleiner ?
Übrigens kann ich auf dieser Seite (wo lediglich die Vorschau des Templates) angezeigt wird wieder CSS verwenden.
Alles um 50% zu verkleinern, funktioniert nicht.
Also in der Vorschau zb. für das : width=„50%“ - damit ist die Grafik fast weg.

Hierzu nochmal ein Beispiel:
Wenn ich ne Website im Browser geöffnet habe und dann das Browserfenster verkleinere wird der gesammte Inhalt entsprechend kleiner.
Genau sowas möchte ich auch.

Geht das nicht?

threadi · 7. März 2014 um 18:04

Versuchs mal mit der CSS-Eigenschaft transform.

table { transform: scale(0.5); }

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

system · 7. März 2014 um 18:24

Das ist genau was ich will !!

Danke

Tronjer · 7. März 2014 um 18:30

CSS3 in HTML Mails?

system · 7. März 2014 um 18:38

nein

Die erzeugten Templates gehen als HTML-Mail raus (deswegen darin auf das Markup mit tabellen).

Aber für die Adminseite - wo die Templates nur als Vorschau angezeigt werden habe ich das volle Programme (also auch CSS3) zur Verfügung.

Ein Problem gibt es damit nur.
Wie kann ich das damit verkleinerte div links im Browser anzeigen ?
Floating oder absolute Positionierung gehen nicht - das div bleibt immer mittig im Browserfenster.

system · 7. März 2014 um 19:07

mit neg. Margins kann ich zwar das Fenster verschieben.
Mit margin-left wird das Fenster aber breiter !?
Eine um 50% kleinere Seite hat bei mir auf dem Laptop ca. 16,2cm. Mit margin-left:-500px komme ich auf fast 21,2cm.

threadi · 7. März 2014 um 21:04

Verstehe nicht was Du meinst. Kann man das irgendwo sehen?

Tronjer · 7. März 2014 um 22:25

Am Tabellenlayout kann man sich die Finger brechen. Ein klassischer Fallstrick ist, dass Breite, Höhe und/oder Abstände der in den Tabellenzellen eingebetteten HTML-Elemente die Größe der überschreiten. Das kann zu merkwürdigen Ergebnissen führen, die sich auf den ersten Blick nicht erklären lassen.

Da hilft dann wirklich nur die Analyse im Firebug und eventuell temporäres Verändern der Attribute, bis es irgendwie passt.

system · 8. März 2014 um 08:39

Nein leider nicht.
Aber ich versuchs nochmal zu erklären:
Ich habe ein Template, das dann als HTML-Mail verschickt wird.
Zweitens habe ich eine Adminseite wo man bereits angelegte Templates einlesen und bearbeiten kann, oder neue Templates anlegen kann.
Auf dieser Adminseite werden die Templates nur als Vorschau angezeigt - deshalb nur ca. 50% so groß.

ist aber nun mal Anforderung…

threadi · 8. März 2014 um 08:55

Soweit waren wir schon. Was hat das jetzt mit floaten zu tun?

system · 8. März 2014 um 09:00

wenn ich transform: scale(0.5); anwende, wird dieser Bereich zentriert auf der Seite angezeigt.

Ich möchte diese Vorschau aber links auf der Seite platzieren und rechts daneben einen Div-Container wo mir dann Möglichkeiten angeboten werden, diese Vorschau zu bearbeiten.
→ Deshalb dachte ich an floaten.

threadi · 8. März 2014 um 09:04

transform zentriert nichts. Das muss eine andere Eigenschaft sein. Ohne Quellcode oder Link zur Seite kann man dir weiterhin nicht helfen.

system · 8. März 2014 um 10:36

Hier der Quellcode:
[HTML]

Adminseite

Bestehendes Template hochladen

<div id="previewArea">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td colspan="2"><img width="100%" height="40px" src="" /></td>
            </tr>
            <tr>
                <td>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Mauris metus lacus, rutrum vel quam quis, pharetra malesuada lectus.
                    Donec sit amet nunc sollicitudin, tempor ipsum vel, dictum nibh.
                    Nam vel molestie magna, id tempor dolor.
                    Sed sit amet dolor fringilla nulla consequat aliquam.
                </td>
            </tr>
        </tbody>
    </table>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td colspan="2" bgcolor="#00568A">Block 1</td>
            </tr>
            <tr>
                <td><img width="80%" src="" /></td>
                <td>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </td>
            </tr>
            <tr>
                <td colspan="2" bgcolor="#00568A">Block 2</td>
            </tr>
            <tr>
                <td><img width="80%" src="" /></td>
                <td>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </td>
            </tr>
            <tr>
                <td colspan="2" bgcolor="#00568A">Block 3</td>
            </tr>
            <tr>
                <td><img width="80%" src="" /></td>
                <td>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </td>
            </tr>
            <tr>
                <td colspan="2" bgcolor="#00568A">Block 4</td>
            </tr>
            <tr>
                <td><img width="80%" src="" /></td>
                <td>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </td>
            </tr>
            <tr>
                <td colspan="2" bgcolor="#00568A">Block 5</td>
            </tr>
            <tr>
                <td><img width="80%" src="" /></td>
                <td>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </td>
            </tr>
        </tbody>      
    </table>
</div>

<div id="editArea">
</div>

[/HTML]

[CODE]jQuery().ready(function() {
var ratio = 0.5;
var cssObj = {
„transform“: „scale(“ + ratio + „)“, /* FF /
„-webkit-transform“: „scale(“ + ratio + „)“, / Chrome, Safari, Opera /
„-ms-transform“: „scale(“ + ratio + „)“, / IE9 */
};
jQuery(„#previewArea“).css(cssObj);

jQuery("input[type='submit'][for='readTemplate']").click(function(event) {
    event.preventDefault();
   
    var file = jQuery("input[name='" + jQuery(this).attr("for") + "']")[0].files;
    var formData = new FormData();
    formData.append("File", file[0]);
   
    jQuery.ajax({
        data: formData,
        type: "POST",
        url: "readTemplate.php",
        mimeType: 'text/plain; charset=x-user-defined-binary',
        processData: false,
        contentType: false,
        dataType: 'html',
        success: function(returnData) {
            if (returnData != 'error') {
                jQuery("#previewArea").html(returnData);
            }
        },
    });
});

});[/CODE]

Im div#previewArea wird beim laden der Seite ein Bsp. Template angezeigt.
Über den Btn. input#readTemplate wird ein bestehendes Template eingelesen.

Das div#previewArea wird horizontal zentriert auf der Webseite dargestellt.

Tronjer · 8. März 2014 um 14:53

Da du ohnehin Ajax einsetzt, bieten sich doch noch weitere Optionen.

Für die Vorschau-Tabelle ließen sich beliebig Inline-Styles setzen und die width und height Attribute der src-Images mit dem jQuery-Funktionsaufruf manipulieren. Beim Klick auf den Submit-Button wird dann die #previewArea gelöscht und die „normale“ Tabelle in ein übergeordnetes Elternelement geladen.

[HTML]

............

$(„#previewArea table“).css();
$(„#previewArea einUnterElement“).css();
$(„#previewArea > img“).prop(„width“, „200“);
…

$.ajax({
…
success: function(data) {
$(„#box“).html(data);
}
});
[/HTML]

system · 8. März 2014 um 15:09

Hallo, an diese Möglichkeit habe ich natürlich gedacht.
Aber so müsste ich ja jedes Seitenelement einzeln manipulieren - oder sehe ich das Falsch??
Ausserdem muss ich da viel rumprobieren - font-size:50% ergibt ein anderes Resultat als width:50% (bei einem Bild).

system · 9. März 2014 um 09:55

Ich habe jetzt ein Lösung gefunden:

Achtung: Verkleinerung jetzt auf 60% (nicht wie im Titel 50%).

[CODE]jQuery().ready(function() {
var ratio = 0.6;
var cssObj = {
„transform“: „scale(“ + ratio + „)“, /* FF /
„-webkit-transform“: „scale(“ + ratio + „)“, / Chrome, Safari, Opera /
„-ms-transform“: „scale(“ + ratio + „)“, / IE9 */
„position“: „absolute“, //1
};

jQuery("#previewArea").css(cssObj);                                          //2

var previewAreaWidth = jQuery("#previewArea").width();
var previewAreaHeight = jQuery("#previewArea").height();
jQuery("#previewArea")
    .css("left", "-290px")
    .css("top", "-90px")
    .css("width", parseInt(previewAreaWidth) + "px")
    .css("height", parseInt(previewAreaHeight) + "px");

});[/CODE]

Der Code bis zur Marke 2 hat vorher schon funktioniert. (die Zeile bei Marke1 ist neu).
Dabei gab es nur das Problem, das das transformiert div zentriert auf der Seite dargestellt wurde.

Das div konnte ich nur mit position:absolute positionieren. Allerdings wurde dadurch die Abmessungen des transformierten divs falsch.
Aus einer Breite von 19,5cm (transformiert auf 0.6) wurden durch das positionieren (left: -290px) dann mal ca. 22cm.

Deswegen ermittle ich die Größe des divs nach der Transformierung.
Verschiebe das div und passe dann die Größe an.

threadi · 9. März 2014 um 15:20

Das sollte auch ohne jQuery/JavaScript mittels calc() im CSS möglich sein.

system · 9. März 2014 um 15:35

danke !!!