Text auf Bild

Coromu · 05/21/2012, 17:36

Hey,

ich habe folgendes Problem: Habe über PS ein Template gebastelt, sie gesliced und anschließend als Web Projekt mit HTML Datei gespeichert.
Somit habe ich eine HTML Datei und viele kleine Bilder.

Der folgende Code schaut dann so aus

Code:

<html>
<head>
<title>Beschreibung</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Beschreibung.psd) -->
<table id="Tabelle_01" width="1200" height="1081" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="4">
			<img src="Bilder/Beschreibung_01.gif" width="1200" height="261" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
			<img src="Bilder/Beschreibung_02.gif" width="1200" height="20" alt=""></td>
	</tr>
	<tr>
		<td rowspan="7">
			<img src="Bilder/Beschreibung_03.gif" width="94" height="799" alt=""></td>
		<td>
			<img src="Bilder/Beschreibung_04.gif" width="439" height="119" alt=""></td>
		<td colspan="2">
			<img src="Bilder/Beschreibung_05.gif" width="667" height="119" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="Bilder/Beschreibung_06.gif" width="968" height="337" alt=""></td>
		<td rowspan="6">
			<img src="Bilder/Beschreibung_07.gif" width="138" height="680" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="Bilder/Beschreibung_08.gif" width="968" height="23" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="Bilder/Beschreibung_09.gif" width="968" height="142" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="Bilder/Beschreibung_10.gif" width="968" height="22" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="Bilder/Beschreibung_11.jpg" width="968" height="142" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="Bilder/Beschreibung_12.gif" width="968" height="14" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="94" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="439" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="529" height="1" alt=""></td>
		<td>
			<img src="Bilder/Abstandhalter.gif" width="138" height="1" alt=""></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Mein probtem ist, ich habe nicht viele Kenntnisse über HTML. Meine Frage ist nun, wie kann ich auf manchen Bildern was schreiben? Ich habe vieles unter google gesehen mit div und sowas. Hab es auch ausprobiert. Aber nichts klappt irgendwie.

Ich danke für jede Antwort!

NotEnoughForYou · 05/21/2012, 17:44

Indem du das Bild dem jeweiligen Element mit CSS "zuordnest".

Bsp.

HTML Code:

<div id="bild1">
    <p>Das ist dein Text</p>
</div>

// In der CSS datei 

#bild1 {
width:500px;
height:200px;
background:url("pfad zum bild") no-repeat;
}

マルコ · 05/21/2012, 17:44

Du kannst die Bilder als Background setzen, und dann ganz normal schreiben.
Oder du machst ein Bild, ein div (drunter) und benutzt dann einen negativen Margin für das div.
BTW, wenn ich mir dein HTML so ansehe, da könnt man einige Bilder weg lassen und mit CSS dran gehen.
Außerdem ist die Table dort wirklich fehl am Platz.
DOCTYPE solltest du auch einfügen. Sieht mir nach HTML4 aus.