Antworten auf deine Fragen:
Neues Thema erstellen

Slice zusammensetzen

M

mildred

Guest

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
 

Photoshop

taffrot

Hat immer langweile...

AW: Slice zusammensetzen

Also,

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

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

offline

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 ;)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben