Slice-Werkzeug - die Höhe

Status
Nicht offen für weitere Antworten.
L

LordAvalon

Grünschnabel
Hi,

ich habe versucht mit bei Photoshop mit dem Slice-Werkzeug eine Homepage zu designen. Klappt auch wunderbar, allerdings geht das Desing vollende kaputt (wird extrem verzerrt), sobald der Inhalt meines Haupt"frames" über die autoamtisch eingestellt Höhe hinaus geht.

Woran liegt das? Kann ich das irgendwie ändern? Meine Versuche sind bisher alle gescheitert.
 
Hi,
was wird verzerrt? Das Bild des Hauptframes? Wie erstellst du den Inhalt des Hauptframes (HTML)?
Ich denke mal das Problem resultiert aus HTML.

Gruß
 
Hallo,

danke für deine Antwort.

Der Inhalt des Hauptframes wird per PHP includiert. Bei diesem habe ich das Bild gelöscht und durch eine einfache Hintergrundfarbe ersetzt.

Diese Zelle weitet sich aus, wenn Inhalt eingefügt wird (nach unten), wie es auch soll. Was verzerrt wird, sind die anderen Zellen. Zum Beispiel die, in der sich die Navigation befindet. Das soll natürlich nicht.

Ich denke, es liegt nicht an HTML, sondern wirklich an der reinen Menge an Text, die zur Verzerrung führt.
 
Zuletzt bearbeitet:
Hi,

ohne jetzt den Quellcode des HTML-Dokuments gesehen zu haben, vermute ich mal, dass den benachbarten Tabellenzellen das Attribut valign=top bzw. die CSS-Eigenschaft vertical-align:top fehlt, weshalb der Tabellenzelleninhalt in der Vertikalen zentriert wird, und sich bei zunehmenden Inhalt im benachbarten "Hauptframe" nach unten verschiebt.

Ich schiebe den Thread dann mal rüber ins HTML-Board und bitte dich, uns den Quelltext zu posten oder einen Link zur Seite zu nennen ;)
 
Hallo,

überall habe ich nun valign=top eingefügt, aber das Ergebnis ist das selbe.

Ich poste hier dann den Quelltext:

HTML: 
<HTML>
<HEAD>
<TITLE>Unbenannt-2</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#DEDEDE LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (Unbenannt-2.psd) -->
<TABLE WIDTH=750 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD COLSPAN=6 valign="top">
			<IMG SRC="images/index_01.gif" WIDTH=750 HEIGHT=22 ALT=""></TD>
		<td valign="top">
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=22 ALT=""></TD>
	</TR>
	<TR>
		<td valign="top" ROWSPAN=6>
			<IMG SRC="images/index_02.gif" WIDTH=27 HEIGHT=371 ALT=""></TD>
		<td valign="top" COLSPAN=2>
			<IMG SRC="images/index_03.gif" WIDTH=136 HEIGHT=70 ALT=""></TD>
		<td valign="top" COLSPAN=3 ROWSPAN=2>
			<IMG SRC="images/index_04.gif" WIDTH=587 HEIGHT=115 ALT=""></TD>
		<td valign="top">
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=70 ALT=""></TD>
	</TR>
	<TR>
		<td valign="top" COLSPAN=2 ROWSPAN=3><img src="images/index_05.gif" width=136 height=107 alt=""></TD>
		<td valign="top">
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=45 ALT=""></TD>
	</TR>
	<TR>
		<td valign="top" ROWSPAN=4>
			<IMG SRC="images/index_06.gif" WIDTH=47 HEIGHT=256 ALT=""></TD>
		<td valign="top">
			<IMG SRC="images/index_07.gif" WIDTH=518 HEIGHT=12 ALT=""></TD>
		<td valign="top" ROWSPAN=4>
			<IMG SRC="images/index_08.gif" WIDTH=22 HEIGHT=256 ALT=""></TD>
		<td valign="top">
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=12 ALT=""></TD>
	</TR>
	<TR>
		<td valign="top" ROWSPAN=7 valign="top">		
		
INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT 

</TD>
		<td valign="top">
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=50 ALT=""></TD>
	</TR>
	<TR>
		<td valign="top" align="center" background="images/index_10.gif"><a href="tests.html">Tests</a></TD>
		<td valign="top" ROWSPAN=2>
			<IMG SRC="images/index_11.gif" WIDTH=18 HEIGHT=194 ALT=""></TD>
		<td valign="top">
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=180 ALT=""></TD>
	</TR>
	<TR>
		<td valign="top">
			<IMG SRC="images/index_12.gif" WIDTH=118 HEIGHT=14 ALT=""></TD>
		<TD valign="top">
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=14 ALT=""></TD>
	</TR>
	<TR>
		<td valign="top" COLSPAN=4 ROWSPAN=2>
			<IMG SRC="images/index_13.gif" WIDTH=210 HEIGHT=12 ALT=""></TD>
		<td valign="top">
			<IMG SRC="images/index_14.gif" WIDTH=22 HEIGHT=1 ALT=""></TD>
		<td valign="top">
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
	</TR>
	<TR>
		<td valign="top">
			<IMG SRC="images/index_15.gif" WIDTH=22 HEIGHT=11 ALT=""></TD>
		<td valign="top">
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=11 ALT=""></TD>
	</TR>
	<TR>
		<td valign="top" COLSPAN=4>
			<IMG SRC="images/index_16.gif" WIDTH=210 HEIGHT=1 ALT=""></TD>
		<td valign="top" ROWSPAN=2>
			<IMG SRC="images/index_17.gif" WIDTH=22 HEIGHT=145 ALT=""></TD>
		<td valign="top">
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
	</TR>
	<TR>
		<td valign="top" COLSPAN=4>
			<IMG SRC="images/index_18.gif" WIDTH=210 HEIGHT=144 ALT=""></TD>
		<td valign="top">
			<IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=144 ALT=""></TD>
	</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
 
Gut, und welche der Tabellenzellen betrifft es nun konkret? Denn ohne die eingebundenen Grafiken kann ich nämlich derzeit keine Verschiebungen im Layout erkennen.

Gibt es evtl. eine Online-Version der Seite, um da mal einen Blick drauf werfen zu können?

Ansonsten hänge die Seite incl. aller Grafiken hier als ZIP-Datei an.
 
Okay,

ich habe die Datei + Bilder als Zip-Datei angehängt.

Hoffe, ihr könnt mir nun helfen. Allerdings ist das nun ohne valign="top", da es ja nichts gebracht hatte.
 

Anhänge

  • 27822attachment.zip
    36,2 KB · Aufrufe: 21
Hi,

die einfachste Lösung wäre es, den "Content-Frame" scrollfähig zu gestalten. Somit dehnen sich die benachbarten Tabellenzellen bei zunehmenden Inhalt auch nicht in der Vertikalen aus.

Code: 
<td valign="top" ROWSPAN=7 valign="top">
    <div style="width:100%;height:400px;overflow:auto;">
          INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT INHALT          
    </div>
</td>
 
Oder du erstellst dir dein Grundgerüst nochmal von Hand und verwendest Divs.
Es zwingt dich ja keiner auch die Html-Datei von Photoshop zu verwenden.

Gruß
 
Hallo,

was genau meinst du mit Divs?
Kann man damit nicht nur beefinlussen, ob der Text rechts- oder linksbünidg oder in der Mitte steht?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück