Problem mit Slices und Auflösungen

Status
Nicht offen für weitere Antworten.
A

angus123

Grünschnabel
Hallo Tutorials-Forum,

ich bin gerade dabei meine erste seite mit slices zu bauen.
Hab die Slices von PS machen lassen.

Mein Ziel: -> Das Design soll bei verschiedenen Auflösungen trotzdem noch korrekt angezeigt werden.
Meine Idee war, Prozentwerte zu verwenden.

Hab dann in der index.html aber nur pixel werte drinne.
Is ja eigentlich kein ding. Hatte das Design vor dem Slicing auf 1024x768. Daher alle pixel-werte in Prozent umgerechnet.

Aber siehe da, nix funktioniert. Alles total zerschossen... :confused:

Hier mein Quellcode:
HTML: 
<!-- ImageReady Slices (Bannernochbearbeiten.psd) -->
<table id="Tabelle_01" align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
	<tbody><tr>
		<td colspan="11">
			<img src="Index-Dateien/Index_01.gif" alt="" height="20" width="1024"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="84" width="1"></td>
	</tr>
	<tr>
		<td rowspan="13">
			<img src="Index-Dateien/Index_02.gif" alt="" height="684" width="145"></td>
		<td colspan="9">
			<img src="Index-Dateien/Index_03.gif" alt="" height="119" width="734"></td>
		<td rowspan="13">
			<img src="Index-Dateien/Index_04.gif" alt="" height="684" width="145"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="119" width="1"></td>
	</tr>
	<tr>
		<td colspan="7">
			<img src="Index-Dateien/Index_05.gif" alt="" height="2" width="515"></td>
		<td rowspan="2">
			<img src="Index-Dateien/Index_06.gif" alt="" height="71" width="99"></td>
		<td rowspan="2">
			<img src="Index-Dateien/Index_07.gif" alt="" height="71" width="120"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="2" width="1"></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="Index-Dateien/Index_08.gif" alt="" height="69" width="246"></td>
		<td colspan="2">
			<img src="Index-Dateien/Index_09.gif" alt="" height="69" width="121"></td>
		<td>
			<img src="Index-Dateien/Index_10.gif" alt="" height="69" width="63"></td>
		<td>
			<img src="Index-Dateien/Index_11.gif" alt="" height="69" width="85"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="69" width="1"></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="Index-Dateien/Index_12.gif" alt="" height="2" width="148"></td>
		<td rowspan="3">
			<img src="Index-Dateien/Index_13.gif" alt="" height="117" width="98"></td>
		<td colspan="2" rowspan="2">
			<img src="Index-Dateien/Index_14.gif" alt="" height="87" width="121"></td>
		<td rowspan="2">
			<img src="Index-Dateien/Index_15.gif" alt="" height="87" width="63"></td>
		<td rowspan="3">
			<img src="Index-Dateien/Index_16.gif" alt="" height="117" width="85"></td>
		<td rowspan="3">
			<img src="Index-Dateien/Index_17.gif" alt="" height="117" width="99"></td>
		<td rowspan="3">
			<img src="Index-Dateien/Index_18.gif" alt="" height="117" width="120"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="2" width="1"></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="Index-Dateien/Index_19.gif" alt="" height="115" width="148"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="85" width="1"></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="Index-Dateien/Index_20.gif" alt="" height="32" width="121"></td>
		<td>
			<img src="Index-Dateien/Index_21.gif" alt="" height="30" width="63"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="30" width="1"></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="Index-Dateien/Index_22.gif" alt="" height="104" width="135"></td>
		<td colspan="2" rowspan="2">
			<img src="Index-Dateien/Index_23.gif" alt="" height="104" width="111"></td>
		<td rowspan="3">
			<img src="Index-Dateien/Index_24.gif" alt="" height="106" width="63"></td>
		<td rowspan="2">
			<img src="Index-Dateien/Index_25.gif" alt="" height="104" width="85"></td>
		<td rowspan="2">
			<img src="Index-Dateien/Index_26.gif" alt="" height="104" width="99"></td>
		<td rowspan="2">
			<img src="Index-Dateien/Index_27.gif" alt="" height="104" width="120"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="2" width="1"></td>
	</tr>
	<tr>
		<td>
			<img src="Index-Dateien/Index_28.gif" alt="" height="102" width="51"></td>
		<td>
			<img src="Index-Dateien/Index_29.gif" alt="" height="102" width="70"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="102" width="1"></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2">
			<img src="Index-Dateien/Index_30.gif" alt="" height="114" width="246"></td>
		<td colspan="2" rowspan="2">
			<img src="Index-Dateien/Index_31.gif" alt="" height="114" width="121"></td>
		<td rowspan="2">
			<img src="Index-Dateien/Index_32.gif" alt="" height="114" width="85"></td>
		<td rowspan="2">
			<img src="Index-Dateien/Index_33.gif" alt="" height="114" width="99"></td>
		<td rowspan="2">
			<img src="Index-Dateien/Index_34.gif" alt="" height="114" width="120"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="2" width="1"></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="Index-Dateien/Index_35.gif" alt="" height="114" width="63"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="112" width="1"></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2">
			<img src="Index-Dateien/Index_36.gif" alt="" height="75" width="246"></td>
		<td colspan="2" rowspan="2">
			<img src="Index-Dateien/Index_37.gif" alt="" height="75" width="121"></td>
		<td rowspan="2">
			<img src="Index-Dateien/Index_38.gif" alt="" height="75" width="85"></td>
		<td rowspan="2">
			<img src="Index-Dateien/Index_39.gif" alt="" height="75" width="99"></td>
		<td rowspan="2">
			<img src="Index-Dateien/Index_40.gif" alt="" height="75" width="120"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="2" width="1"></td>
	</tr>
	<tr>
		<td>
			<img src="Index-Dateien/Index_41.gif" alt="" height="73" width="63"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="73" width="1"></td>
	</tr>
	<tr>
		<td colspan="9">
			<img src="Index-Dateien/Index_42.gif" alt="" height="84" width="734"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="84" width="1"></td>
	</tr>
	<tr>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="1" width="145"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="1" width="135"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="1" width="13"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="1" width="98"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="1" width="51"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="1" width="70"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="1" width="63"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="1" width="85"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="1" width="99"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="1" width="120"></td>
		<td>
			<img src="Index-Dateien/Abstandhalter.gif" alt="" height="1" width="145"></td>
		<td></td>
	</tr>
</tbody></table>
<!-- End ImageReady Slices -->

Kann mir da jemand helfen, wie ich das flexibel anpassen kann?
Sodass das design eben bei verschiedenen Auflösungen passt?

Edit: Nich wundern, im Quellcode is grad alles wieder auf pixelwerten, weil ich die prozentwerte wieder gelöscht hab. War ja alles zerschossen.
Nur der Table (width/height) wert is noch in prozent
 
Zuletzt bearbeitet:
Hi,

wenn du das Layout flexibel (= liquid) gestalten willst, sind feste Breitenangaben bzw. die "feststehende" Breite der einzelnen Grafikdateien absolut hinderlich.

Zudem würden die Bilder mehr schlecht als recht "verpixelt" dargestellt werden, wenn sie mittels Prozentangaben in ihrem Anzeigebereich vergrößert werden.

mfg Maik
 
Hi Maik,

okay, das klingt logisch.
Schade, dass das so nicht realisierbar ist.

Wie könnte ich das ganze dann machen?
Bzw. was wäre dein Lösungsvorschlag für mein Problem?

Grüße
Angus
 
Mein Vorschlag: von vornherein ein schmäleres Seitenlayout als 1024px entwerfen, das auch die geringeren Bildschirmauflösungen bzw. einen minimierten Anzeigebereich im Browserfenster berücksichtigt, und es evtl. im Fenster horizontal zentrieren.

mfg Maik
 
alles klar, dann mach ich die slices, aus nem bild zwischen 1024x768 und 800x600 und zentriere das einfach.
Schade dass das nicht funktioniert wie ich mir das eigentlich dachte :-(

Trotzdem vielen Dank für die Hilfe!!
Grüße Angus
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück