✔ HTML Homepage im Editor

Status
Nicht offen für weitere Antworten.
C

cyBerQueen

Grünschnabel
Hallo alle miteinander,

ich hab eine Frage bzg. meiner Homepage...

Ich hab sie mit Photoshop entworfen und "geslicet" jetz hab ich versucht sie im Browser (Explorer, Firefox) anzuzeigen, wo sie als ein großes Bild angezeigt wird (was auch logisch ist) ...

Mein Problem besteht darin Text in eines der Bilder der Homepage einzufügen. Such schon sehr lange ( :google:,SELFHTML) doch nichts funktioniert wirklich so wie ich es mir vorstelle.
Das witzige (oder eher nicht) ist dass andere Teile des entworfenen Layouts verschoben bzw. gelöscht werden sobald der Text halbwegs gut im "body-slice" steht.

Und weiß vielleicht jemand wie man die "gesliceten" Bilder verlinkt

Kennt vielleicht sogar jemand ein gutes Tutorial für das Ganze?

PS: Ich schreib das HTML ganz normal in den Editor (nicht Dreamweaver oder FrontPage)

Danke im Voraus
 
ich nehme an die "gesliceten" bilder machen nur das layout aus und darauf soll variabler text stehen?! sonst müsstest du das ganze ja nicht "slicen" sondern könntest es einfach als bild irgendwo uploaden.

du stellt die einzelnen teile des gesamten bildes, die du ja in einzelne bilder "geslicet" hast, per css als hintergrundbilder ein. dann geht's doch ganz normal..
 
Hi,

deiner Schilderung zufolge, hast du die Bilder als Grafikelemente (<img src="...">) in die Tabellenzellen eingebunden, und fügst nun einen Text ein, weshalb das Grafikelement nach unten verschoben wird.

An dieser Stelle muss die Grafik stattdessen als Hintergrundbild eingesetzt werden, dann verschiebt es sich auch nicht, wenn in der Tabellenzelle Text eingefügt wird.

:offtopic:

@uafsc: Bitte halte dich in deinen Beiträgen an den Punkt 15 unserer Netiquette bzgl. deiner durchgehenden Kleinschreibung. Vielen Dank.
 
Aha...ok,also dass mit dem "Bild als Hintergrund des Textes" hab ich raus.:)

Mein Problem wär noch warum sich andere Teile des Layouts einfach auflösen

Und wie man ein Bild verlinkt

Danke für alle Antworten

BTW so sieht es aus wenn Teile des Layouts verschwinden...

12556.jpg

und der HTML-Code dazu sieht so aus:

Code: 
<tr>
		<td colspan="5">
			<img src="http://www.tutorials.de/forum/images/img_33.gif" width="163" height="99" alt=""></td>
		<td colspan="11" rowspan="7">

<table style="background-image:url(images/img_34.jpg)" width="512" height="592" border="0" cellpadding="5" cellspacing="0">
<tr>
<td style="background-image:url(images/img_34.jpg)" align="left" >blablabla</td></tr></table>

			
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="1" height="99" alt=""></td></tr>
	<tr>
		<td colspan="5">
			<img src="http://www.tutorials.de/forum/images/img_35.gif" width="163" height="35" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="1" height="35" alt=""></td>
	</tr>
	<tr>
		<td colspan="5">

			<img src="http://www.tutorials.de/forum/images/img_36.gif" width="163" height="111" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="1" height="111" alt=""></td>
	</tr>
	<tr>
		<td colspan="5">
			<img src="http://www.tutorials.de/forum/images/img_37.gif" width="163" height="40" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="1" height="40" alt=""></td>

	</tr>
	<tr>
		<td colspan="5">
			<img src="http://www.tutorials.de/forum/images/img_38.gif" width="163" height="115" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="1" height="115" alt=""></td>
	</tr>
	<tr>
		<td colspan="5">

			<img src="http://www.tutorials.de/forum/images/img_39.gif" width="163" height="36" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="1" height="36" alt=""></td>
	</tr>
	<tr>
		<td colspan="5" rowspan="2">
			<img src="http://www.tutorials.de/forum/images/img_40.gif" width="163" height="159" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="1" height="156" alt=""></td>

	</tr>
	<tr>
		<td colspan="11">
			<img src="http://www.tutorials.de/forum/images/img_41.gif" width="512" height="3" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="1" height="3" alt=""></td>
	</tr>
	<tr>
		<td colspan="19">

			<img src="http://www.tutorials.de/forum/images/img_42.gif" width="800" height="71" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="1" height="71" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="19" height="1" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="6" height="1" alt=""></td>

		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="57" height="1" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="58" height="1" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="20" height="1" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="22" height="1" alt=""></td>
		<td>

			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="21" height="1" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="6" height="1" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="19" height="1" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="59" height="1" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="21" height="1" alt=""></td>

		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="75" height="1" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="25" height="1" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="51" height="1" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="33" height="1" alt=""></td>
		<td>

			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="79" height="1" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="57" height="1" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="87" height="1" alt=""></td>
		<td>
			<img src="http://www.tutorials.de/forum/images/spacer.gif" width="85" height="1" alt=""></td>
		<td></td>
	</tr>

</table>
<!-- End ImageReady Slices -->
</body>
</html>
 
Ein Bild verlinkt man genau so wie einen Textlink. Anstelle des Textes, der als Link angezeigt wird, machst du da einfach das Bild rein. Also so:
HTML: 
<a href="blabla.htm" target="_blank"><img src="bild.gif" width="100px" height="100px" alt="Bild" /></a>
 
Hi,

da wir keine Vergleichsmöglichkeit zwischen Soll- und Istzustand haben, kann hier nur geraten werden, weshalb sich das Layout auflöst.

In dem hervorgehobenen Quelltextausschnitt könnte es evtl. an dem "Spacer-Gif" liegen.

Ansonsten solltest du die Seite online zur Verfügung stellen, damit sich das mal in vollem Umfang näher anschauen kann.
 
Hi,

ja das Spacer-gif hab ich auch ziemlich komisch gefunden
aber wenn man das mit Photoshop abspeichert dann kommt
das so im Quelltext...Ich weiß auch nicht wozu das gut sein soll...
 
Nimms doch mal raus...

Programme, die Ccode generieren, erstellen noch viel Mist...
 
Zuletzt bearbeitet:
Neee,...habs versucht.

Die Space.gif's sind sozusagen der Abstand zwischen den einzelnen Slices.
Und wenn man die raus nimmt bleibt da ein unschöner Abstand zwischen den Slices.

.hehe.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück