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

Seite um 50% verkleinern

G

getit

Neues Mitglied
Hallo,

ich habe folgende Seite:

HTML: 
<table>
    <tr>
        <td><img src="..." /></td>
        <td>Some text</td>
    </tr>
</table>
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 <img>: 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?
 
Tronjer schrieb:
CSS3 in HTML Mails?
Zum Vergrößern anklicken....
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.

threadi schrieb:
Versuchs mal mit der CSS-Eigenschaft transform.

Code: 
table { transform: scale(0.5); }

https://developer.mozilla.org/en-US/docs/Web/CSS/transform
Zum Vergrößern anklicken....
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.
 
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.
 
Zuletzt bearbeitet:
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 <td> ü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.
 
threadi schrieb:
Verstehe nicht was Du meinst. Kann man das irgendwo sehen?
Zum Vergrößern anklicken....
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ß.

Tronjer schrieb:
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 <td> ü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.
Zum Vergrößern anklicken....
ist aber nun mal Anforderung...
 
Zuletzt bearbeitet:
threadi schrieb:
Soweit waren wir schon. Was hat das jetzt mit floaten zu tun?
Zum Vergrößern anklicken....
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.
 
transform zentriert nichts. Das muss eine andere Eigenschaft sein. Ohne Quellcode oder Link zur Seite kann man dir weiterhin nicht helfen.
 
Hier der Quellcode:
HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Adminseite</title>
    <script type="text/javascript" src="./js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
</head>
<body>
    <div id="readExistingTemplate">
        <form action="readExistingTemplate.php" method="post" enctype="multipart/form-data">
            <input type="hidden" name="MAX_FILE_SIZE" value="8000" />
            <label for="readTemplate">Bestehendes Template hochladen</label>
            <input id="readTemplate" name="readTemplate" type="file" accept="text/html" />
            <input for="readTemplate" type="submit" value="Hochladen" />
        </form>
    </div>
  
    <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>
</body>
</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);
                }
            },
        });
    });
});

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.
 
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: 
<div id="box">
  <div id="previewArea">
    <table>
      ............
    </table>
  </div>
</div>


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

$.ajax({
  ............
  success: function(data) {
    $("#box").html(data);
  }
});
 
Tronjer schrieb:
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: 
<div id="box">
  <div id="previewArea">
    <table>
      ............
    </table>
  </div>
</div>


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

$.ajax({
  ............
  success: function(data) {
    $("#box").html(data);
  }
});
Zum Vergrößern anklicken....

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).
 
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");
});

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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben