Bilder in Prozent% darstellen

**Sh0nix** · 21.09.2010, 18:09

Moin ich arbeite an einem kleinerem Projekt.
Startseite

Da ich das ganze ein wenig sehr groß gehalten habe, möchte ich gerne sämtliche Bilder in Prozent darstellen.

(Ist mit Photoshop gesliced und gespeichert.. ich weiß, der Html Code von Photoshop ist nicht der Beste.)

D.h. ich muss ALLE angaben von width und height in dieselben Prozentangabe ändern oder?
Denn wenn ich überall z.B. 75% hinschreibe, dann verändert sich das Design komplett...

Weiß jemand wo mein Fehler liegt?

Hier der Html code vom Index nochmal:

HTML-Code:

<html>
<head>
<title>Startseite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<!-- ImageReady Slices (Startseite.psd) -->
<table id="Tabelle_01" width="1201" height="801" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="6">
            <img src="Bilder/index_01.gif" width="1200" height="128" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="128" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="Bilder/index_02.gif" width="218" height="24" alt=""></td>
        <td colspan="2" rowspan="9">
            <img src="Bilder/index_03.gif" width="942" height="466" alt=""></td>
        <td rowspan="11">
            <img src="Bilder/index_04.gif" width="40" height="617" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="24" alt=""></td>
    </tr>
    <tr>
        <td rowspan="9">
            <img src="Bilder/index_05.gif" width="21" height="472" alt=""></td>
        <td>
            <img src="Bilder/index_06.gif" width="177" height="10" alt="" onmouseover="this.src='Bilder/index_06_1.gif'" onmouseout="this.src='Bilder/index_06.gif'" onClick = "location.href='index_einr.html';"></td>
        <td rowspan="9">
            <img src="Bilder/index_07.gif" width="20" height="472" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="10" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/index_08.gif" width="177" height="20" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="20" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/index_09.gif" width="177" height="10" alt="" onmouseover="this.src='Bilder/index_09_1.gif'" onmouseout="this.src='Bilder/index_09.gif'" onClick = "location.href='index_Homestaging.html';"></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="10" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/index_10.gif" width="177" height="20" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="20" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/index_11.gif" width="177" height="10" alt="" onmouseover="this.src='Bilder/index_11_1.gif'" onmouseout="this.src='Bilder/index_11.gif'" onClick = "location.href='Vita.html';"></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="10" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/index_12.gif" width="177" height="19" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="19" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/index_13.gif" width="177" height="11" alt="" onmouseover="this.src='Bilder/index_13_1.gif'" onmouseout="this.src='Bilder/index_13.gif'" onClick = "location.href='Kontakt.html';"></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="11" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="Bilder/index_14.gif" width="177" height="372" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="342" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <img src="Bilder/index_15.gif" width="942" height="151" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="30" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="Bilder/index_16.gif" width="218" height="121" alt="" onclick="window.open('http://dghr-info.de')"></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="121" alt=""></td>
    </tr>
    <tr>
        <td colspan="6">
            <img src="Bilder/index_17.gif" width="1200" height="4" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="4" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="Bilder/index_18.gif" width="932" height="51" alt=""></td>
        <td colspan="2">
            <img src="Bilder/index_19.gif" width="268" height="51" alt="" onmouseover="this.src='Bilder/index_19_1.gif'" onmouseout="this.src='Bilder/index_19.gif'" onClick = "location.href='Impressum.html';"></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="51" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="21" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="177" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="20" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="714" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="228" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="40" height="1" alt=""></td>
        <td></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

**SleiZer** · 21.09.2010, 18:34

Naja du hast überall konkrete Werte wie 'width="200"' diese musste um 75% verringern, sprich width="150" (200*0.75).
Dann müsste das passen.

**Sh0nix** · 21.09.2010, 18:39

Kann ich anstatt dessen nicht direkt 75% dorthin schreiben?

Wenn ich das so mache mit dem umrechnen via Taschenrechner, kommen oft Nachkommastellen bei raus... ;(

**100** · 21.09.2010, 18:40

SELFHTML: Stylesheets / CSS-Formate definieren / Maßeinheiten, Farbangaben und Wertzuweisung

Bei einer Tabelle zum Beispiel würde 20% heißen, dass die Spalte 20% der gesamten Tabelle einnehmen soll. Insgesamt kommt die Tabelle also auf 100%. Ich versteh zwar noch nicht genau was du willst, aber ich glaub mein Vorposter hat Recht mit dem Ratschlag.

/edit auf Doppelpost
Nachkommastellen kann es nicht geben, da es hier um Pixel geht. Also einfach so schreiben wie er es gemacht hat oder bei dir die Kommazahl weglassen.

**blackberry** · 21.09.2010, 18:46

HTML-Code:

<img src="deinBild.png" onload="this.width *= 0.75;" />

**Sh0nix** · 21.09.2010, 18:46

Ich glaub ich hatte mich unklar ausgedrückt, sorry^^
Also mein eigentliches Ziel ist es:
Die Seite soll sich bei Leuten, die eine niedrige Bildschirmauflösung eingestellt haben, in den Browser anpassen.
Wenn man die Seite aufrucht und die Bildschirmauflösung z.B. auf 1024x768 steht, dann muss man zur Seite und nach oben scrollen.
Dies möchte ich durch Prozentangaben beheben, oder gibts da noch bessere Ideen?

**SleiZer** · 21.09.2010, 18:52

Ja dann musst du die Bilder in abhängigkeit der Auflösung darstellen....
also wenn du jetzt width='200' hast und ne Auflösung von 1000x2000,
dann width=20% dabei würde die Homepage sich bei anderen Auflösungen mit verkleinern. Aber ich bin mir nicht sicher wie genau man die Prozentzahlen angeben kann.

**blackberry** · 21.09.2010, 18:54

Width und Height je nach Bedarf auf 100% setzen (immer nur eins von beiden!) und die Container (in deinem Fall die Tabelle) relativ zur Fenstergröße halten (auch via width/height=XYZ%). Die Bilder passen sich dann der Größe ihrer Container an und die Container der Größe des Fensters...
Allgemein ist es aber nicht zu empfehlen Seiten so aufzubauen, da es doof aussieht, wenn sich alles beim Verkleinern des Fensters mit verkleinert (insbesondere Grafiken).

P.S.: <table>s sind als Strukturierungstags (für Daten) gedacht und nicht zur Positionierung. Deren Einsatz ist allgemein verpönt.

**Sh0nix** · 21.09.2010, 19:14

Iwie hauen die Änderung immer mein ganzes Design auseinander ;(
Egal wie ich height und width änder, es haut immer das ganze Design komplett auseinander, so dass es total scheisse aussieht und nichts mehr aneinander passt...

Thema: Bilder in Prozent% darstellen

Themen-Optionen

Anzeige

Bilder in Prozent% darstellen

Ähnliche Themen

[Global] Entwickler: Anspruch auf 84 Prozent von Facebook

[Global] Windows 7: 46 Prozent der PCs mit 64-Bit-Version

IPv4-Adressen zu über 90 Prozent verbraucht

c++ grafisch darstellen

Stichworte

Berechtigungen