Slice zusammensetzen

mildred · 05.03.2011

Hallo zusammen.

Ich hab ein Problem, das sowohl PS-Natur ist, sowie HTML.
Bin am verzweifeln und weiß nicht mehr weiter. Ich hoffe sehr, jemand hier kann mir behilflich sein.
Habe vorgestern mit dem Slicen angefangen, dazu das Tutorial von hier runtergeladen und auch gleich alles super geklappt. Ich habe eine Grafik erstellt, die ich nun wieder richtig via HTML Befehle zusammensetzen will.
Soweit, so gut. Ich habe insgesamt 11 Slice's, die ich meiner Meinung nach auch richtig zusammen gesetzt habe, doch am Ende ist ein kompletter Block nicht da, wo er hinsoll.

Hier mal eine Deskcopy von dem Slice-Projekt mit eingeblendeten Slice-Feldern.

Habe alle Slice der Reihe nach ins HTML übertragen. Hier der Code (Url's für die Slice's entfernt und durch entsprechende Slice-Nummern ersetzt)

PHP:

<table width="800" border="0" cellpadding="0" cellspacing="0">
    <tr><td colspan="5"><img src="SLICE 01" width="800" height="279" alt="">
        </td>
    </tr>
    <tr><td colspan="3" rowspan="2"><img src="SLICE 02" width="394" height="315" alt="">
        </td>
        <td colspan="2" td background="SLICE 03" width="363" height="233" alt="">
            <div style="padding: 7px; overflow: auto; width: 340px; height: 140px; font style: times new roman;">
                <div align="justify"><font face="times new roman" size="2">Der Testtext!</font>
                </div>
            </div>
        </td>
        <td rowspan="5"><img src="SLICE 04" width="43" height="864" alt="">
        </td>
    </tr>
    <tr><td colspan="2"><img src="SLICE 05" width="363" height="82" alt="">
        </td>
    </tr>
    <tr><td colspan="4" rowspan="3"><img src="SLICE 06" width="84" height="549" alt="">
        </td>
        <td colspan="3" td background="SLICE 07" width="310" height="214" alt="">
            <div style="padding: 7px; overflow: auto; width: 340px; height: 140px; font style: times new roman;">
                <div align="justify"><font face="times new roman" size="2">Der Testtext</font>
                </div>
            </div>
        </td>
        <td colspan="2"><img src="SLICE 08" width="363" height="214" alt="">
        </td>
    </tr>
    <tr><td colspan="3" rowspan="2"><img src="SLICE 09" width="310" height="335" alt="">
        </td>
        <td colspan="2"><img src="SLICE 10" width="363" height="75" alt="">
        </td>
    </tr>
    <tr><td colspan="2" td background="SLICE 11" width="363" height="260" alt="">
            <div style="padding: 7px; overflow: auto; width: 340px; height: 140px; font style: times new roman;">
                <div align="justify"><font face="times new roman" size="2">Der Testtext</font>
                </div>
            </div>
        </td>
    </tr>
</table>

Das Endergebnis jedoch sieht dann -so- aus (DeskCopy für den betroffenen Bereich geschossen)

Wo liegt der blöde Fehler?? Ich weiß es einfach nicht mehr! Bin ratlos ohne Ende.
Wer auf diese Weise den Fehler nicht entdecken kann, dem schicke ich auch gerne das entsprechende .psd-File,sowie den HTML-Code

Ich freu mich über Hilfe! Ich brauche sie. :'(

Viele Grüße
Mildred

taffrot · 05.03.2011

AW: Slice zusammensetzen

Also,

zuersteinmal benutzt man keine Tabellen für ganze Webseiten, das ist uncool

.

zweitens is das design schon recht komplex für das erste imo.

Verwende div tags um deine Seite zu strukturieren. Mein standard Layout sieht so aus:

HTML:

<div id="wrapper">
	<div id="head">
	</div>
	
	<div id="body">
	</div>
	
	<div id="footer">
	</div>
</div>

Danach kannst du mittels CSS deine Styles definieren.

Ich würde dennoch zuerst an einem einfacheren Beispiel üben.

Gruß
taffrot

Herr_D · 05.03.2011

AW: Slice zusammensetzen

Lerne bitte html/ css der Code da oben ist ganz schlimm.... die Tabelle ist mir erst mal wumpe, aber was du als Inhalt einfügen wolltest... *hust

Schnelle Lösung:

1. Bezeichne alle Slices anders! Keine Lehrzeichen!

2. statt:

HTML:

        <td colspan="3" td background="SLICE 07" width="310" height="214" alt="">
            <div style="padding: 7px; overflow: auto; width: 340px; height: 140px; font style: times new roman;">
                <div align="justify"><font face="times new roman" size="2">Der Testtext</font>
                </div>
            </div>
        </td>

HTML:

        <td colspan="3" style="background:url(SLICE 07);width:310px;height:214px; vertical-align:top; text-align:left;">
            <div style="overflow: auto; width: 310px; height: 210px; font-family:'times new roman'; font-size:1em;text-align:justify;">
                <p style="padding:7px;">Der Testtext</p>
            </div>
        </td>

Müßte eigentlich klappen...

Ansonsten: Wie Taffrot schreibt, bau das html/ css neu auf und dann gleich ohne Tabelle und vernünftig