PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Bilder in Prozent% darstellen


Sh0nix
21.09.2010, 18:09
Moin ich arbeite an einem kleinerem Projekt.
Startseite (http://sh0nix.sh.funpic.de/homestaging/)

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>
<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 (http://de.selfhtml.org/css/formate/wertzuweisung.htm)

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
<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...