Tekst over achtergrond

Status
Niet open voor verdere reacties.
P

passetti

Nieuwe gebruiker
Lid geworden
8 dec 2008
Berichten
4
Ik heb een photoshop template gesliced, opgeslagen als html en images en hij staat goed in Dreamweaver. Het probleem is alleen dat als ik op een vlak ga staan en tekst wil invoeren het achergrond plaatje verdwijnt. Ik heb op google al gezocht naar oplossingen en het lees dat het met ccs te maken heeft. Alleen weet ik niet welke ccs instelling het voor elkaar krijgt dat het achtergrond plaatje verdwijnt als ik tekst erop invoer. Is er een Dreamweaver guru die me hiermee een klein beetje op weg kan helpen?
 
Je vraag is een beetje abstract, heb je dit ook ergens op internet staat zodat we het kunnen bekijken?

Hoe je pagina precies is opgebouwd weet ik niet (tabel of via div's) maar het vermoeden rijst bij mij dat je afbeelding als <img> in dat vlak staat, je moet er voor zorgen dat hij als "background" staat.

Hoe je dat precies op kunt lossen hangt dus van je opbouw af :)
 
tekst over image

Ok ik weet hoe ik dat kan doen in page properties maar hoe doe ik dat bij een page selection?

De code heb ik hieronder:
HTML: 
<html>
<head>
<title>Directionspage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../../../Users/Andre/Documents/ASTROMUD/HGKLJG.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
	background: #7d7d7d url(../.Net%20Site/body_bgd.gif) fixed;
	overflow: visible;
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 0.75em;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
  <!-- ImageReady Slices (Directionspage.psd) -->
  <table id="Table_01" width="781" height="1229" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td colspan="20">
        <img src="images/Directionspage-test_01.jpg" width="768" height="126" alt=""></td>
	    <td width="12" rowspan="2">
		    <img src="images/Directionspage-test_02.jpg" width="12" height="214" alt=""></td>
	    <td width="10">
		    <img src="images/spacer.gif" width="1" height="126" alt=""></td>
	  </tr>
    <tr>
      <td colspan="10">
        <img src="images/Directionspage-test_03.jpg" width="469" height="88" alt=""></td>
	    <td colspan="9">
		    <img src="images/Directionspage-test_04.jpg" width="297" height="88" alt=""></td>
	    <td width="2">
		    <img src="images/Directionspage-test_05.jpg" width="2" height="88" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="88" alt=""></td>
	  </tr>
    <tr>
      <td width="11" rowspan="17">
        <img src="images/Directionspage-test_06.jpg" width="11" height="938" alt=""></td>
	    <td colspan="2" rowspan="2">
		    <img src="images/Directionspage-test_07.jpg" width="80" height="61" alt=""></td>
	    <td width="68" rowspan="2">
		    <img src="images/Directionspage-test_08.jpg" width="68" height="61" alt=""></td>
	    <td colspan="2" rowspan="2">
		    <img src="images/Directionspage-test_09.jpg" width="54" height="61" alt=""></td>
	    <td width="70" rowspan="2">
		    <img src="images/Directionspage-test_10.jpg" width="70" height="61" alt=""></td>
	    <td width="72" rowspan="2">
		    <img src="images/Directionspage-test_11.jpg" width="72" height="61" alt=""></td>
	    <td width="63" rowspan="2">
		    <img src="images/Directionspage-test_12.jpg" width="63" height="61" alt=""></td>
	    <td colspan="2" rowspan="2">
		    <img src="images/Directionspage-test_13.jpg" width="64" height="61" alt=""></td>
	    <td width="73" rowspan="2">
		    <img src="images/Directionspage-test_14.jpg" width="73" height="61" alt=""></td>
	    <td width="2">
		    <img src="images/Directionspage-test_15.jpg" width="2" height="21" alt=""></td>
	    <td colspan="4" rowspan="2">
		    <img src="images/Directionspage-test_16.jpg" alt="" width="61" height="61" class="aBD"></td>
	    <td width="3">
		    <img src="images/Directionspage-test_17.jpg" width="3" height="21" alt=""></td>
	    <td width="145" rowspan="3">
		    <img src="images/Directionspage-test_18.jpg" width="145" height="62" alt=""></td>
	    <td colspan="2" rowspan="4">
		    <img src="images/Directionspage-test_19.jpg" width="14" height="66" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="21" alt=""></td>
	  </tr>
    <tr>
      <td rowspan="5">
        <img src="images/Directionspage-test_20.jpg" width="2" height="80" alt=""></td>
	    <td rowspan="3">
		    <img src="images/Directionspage-test_21.jpg" width="3" height="45" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="40" alt=""></td>
	  </tr>
    <tr>
      <td colspan="11" rowspan="3">
        <img src="images/Directionspage-test_22.jpg" width="544" height="7" alt=""></td>
	    <td colspan="4" rowspan="2">
		    <img src="images/Directionspage-test_23.jpg" width="61" height="5" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
	  </tr>
    <tr>
      <td>
        <img src="images/Directionspage-test_24.jpg" width="145" height="4" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="4" alt=""></td>
	  </tr>
    <tr>
      <td colspan="7" rowspan="3">
        <img src="images/Directionspage-test_25.jpg" width="211" height="38" alt=""></td>
	    <td rowspan="3">
		    <img src="images/Directionspage-test_26.jpg" width="12" height="38" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="2" alt=""></td>
	  </tr>
    <tr>
      <td width="1" rowspan="12">
        <img src="images/Directionspage-test_27.jpg" width="1" height="870" alt=""></td>
	    <td colspan="3">
		    <img src="images/Directionspage-test_28.jpg" width="199" height="33" alt=""></td>
	    <td colspan="7">
		    <img src="images/Directionspage-test_29.jpg" width="344" height="33" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="33" alt=""></td>
	  </tr>
    <tr>
      <td colspan="11" rowspan="11">
        <img src="images/Directionspage-test_30.jpg" width="545" height="837" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="3" alt=""></td>
	  </tr>
    <tr>
      <td colspan="8">
        <img src="images/Directionspage-test_31.jpg" width="223" height="105" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="105" alt=""></td>
	  </tr>
    <tr>
      <td colspan="6">
        <img src="images/Directionspage-test_32.jpg" width="209" height="102" alt=""></td>
	    <td colspan="2" rowspan="2">
		    <img src="images/Directionspage-test_33.jpg" width="14" height="207" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="102" alt=""></td>
	  </tr>
    <tr>
      <td colspan="6">
        <img src="images/Directionspage-test_34.jpg" width="209" height="105" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="105" alt=""></td>
	  </tr>
    <tr>
      <td colspan="7">
        <img src="images/Directionspage-test_35.jpg" width="211" height="96" alt=""></td>
	    <td rowspan="7">
		    <img src="images/Directionspage-test_36.jpg" width="12" height="522" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="96" alt=""></td>
	  </tr>
    <tr>
      <td colspan="7">
        <img src="images/Directionspage-test_37.jpg" width="211" height="75" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="75" alt=""></td>
	  </tr>
    <tr>
      <td width="4">
        <img src="images/Directionspage-test_38.jpg" width="4" height="2" alt=""></td>
	    <td colspan="6" rowspan="2">
		    <img src="images/Directionspage-test_39.jpg" width="207" height="68" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="2" alt=""></td>
	  </tr>
    <tr>
      <td rowspan="4">
        <img src="images/Directionspage-test_40.jpg" width="4" height="349" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="66" alt=""></td>
	  </tr>
    <tr>
      <td width="5" rowspan="3">
        <img src="images/Directionspage-test_41.jpg" width="5" height="283" alt=""></td>
	    <td colspan="4">
		    <img src="images/Directionspage-test_42.jpg" width="200" height="101" alt=""></td>
	    <td>
		    <img src="images/Directionspage-test_43.jpg" width="2" height="101" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="101" alt=""></td>
	  </tr>
    <tr>
      <td width="2" rowspan="2">
        <img src="images/Directionspage-test_44.jpg" width="2" height="182" alt=""></td>
	    <td colspan="4">
		    <img src="images/Directionspage-test_45.jpg" width="200" height="95" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="95" alt=""></td>
	  </tr>
    <tr>
      <td colspan="4">
        <img src="images/Directionspage-test_46.jpg" width="200" height="87" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="87" alt=""></td>
	  </tr>
    <tr>
      <td colspan="21">
        <img src="images/Directionspage-test_47.jpg" width="780" height="75" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="75" alt=""></td>
	  </tr>
    <tr>
      <td colspan="21">
        <img src="images/Directionspage-test_48.jpg" width="780" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
	  </tr>
    <tr>
      <td>
        <img src="images/spacer.gif" width="11" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
	    <td width="79">
		    <img src="images/spacer.gif" width="79" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="68" height="1" alt=""></td>
	    <td width="52">
		    <img src="images/spacer.gif" width="52" height="1" alt=""></td>
	    <td width="2">
		    <img src="images/spacer.gif" width="2" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="70" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="72" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="63" height="1" alt=""></td>
	    <td width="51">
		    <img src="images/spacer.gif" width="51" height="1" alt=""></td>
	    <td width="13">
		    <img src="images/spacer.gif" width="13" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="73" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="2" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="4" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="5" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="2" height="1" alt=""></td>
	    <td width="50">
		    <img src="images/spacer.gif" width="50" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="3" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="145" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="2" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="12" height="1" alt=""></td>
	    <td></td>
	  </tr>
  </table>
  <!-- End ImageReady Slices -->
</div>
</body>
</html>
 
Laatst bewerkt door een moderator:
Ik werk nooit in het Design-scherm.

Wat je moet doen is de juiste afbeelding opzoeken (Dus de afbeelding welke in het vlak staat waar je die tekst in wilt hebben) en vervolgens de <img> er uit halen.

Je moet wel de src="" inhoud bewaren en de bijbehorende <td> als extra attribuut background="{hetgeen tussen src="" stond}" meegeven.

Als je het niet begrijpt moet je even opzoeken welke afbeelding het is dan proberen we je er bij te helpen :)
 
tekts over image

Fantastisch dit werkt perfect. Hartelijk dank hiervoor. Ik kan nu gewoon de tekst over de image heen invoeren. Ik heb meteen wel een 2e vraag en dat is als ik een regel tekst intik en dan enter geef dan verspringt de tabel ernaast ook meteen naar beneden.

Hoe kan ik de tabel waar ik nu de tekst invoer als een aparte sheet vastzetten? Ik weet niet goed hoe ik het moet uitleggen, maar wanneer ik bijvoorbeeld tekst invoer in een specifieke tabel en als ik enter geef er in de andere tabellen niks gebeurd?

Is dat met een DIV mogelijk? Of moet ik daar ccs voor gebruiken?
 
tekst ove rimage

Hier is de code van de originele template die ik dus in photoshop heb bewerkt en opnieuw heb gesliced. In deze code zie ik allemaal div commands staan.
HTML: 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>

<body id="page3">
	<div id="site_center">
		<div id="main">
			<!-- header -->
			<div id="header">
				<div class="row_1">
					<div class="indent">
						<a href="index.html"><img alt="" src="images/logo.jpg" /></a>
					</div>
				</div>
				<div class="row_2">
					<ul class="main_menu">
						<li><a href="#"><b><em>Home</em></b></a></li>
						<li><a href="#"><b><em>Forums</em></b></a></li>
						<li><a href="#"><b><em>News</em></b></a></li>
						<li><a href="#"><b><em>Downloads</em></b></a></li>
						<li><a href="#"><b><em>Videos</em></b></a></li>
						<li><a href="#"><b><em>Links</em></b></a></li>
						<li><a href="#"><b><em>Tech</em></b></a></li>
						<li><a href="#"><b><em>Features</em></b></a></li>
						<li><a href="#"><b><em>Contacts</em></b></a></li>
					</ul>
					<a class="rss" href="#">Get RSS Feeds</a>
				</div>
			</div>
			<!-- content -->
			<div id="content">
				<div class="col_1">
					<div class="indent">
						<div class="menu_box">
							<a href="#"><img alt="" src="images/3_menu1.jpg" /></a>
						</div>
						<div class="block">
							<div class="r">
								<div class="b">
									<div class="l">
										<div class="left_top_corner">
											<div class="left_bottom_corner">
												<div class="right_top_corner">
													<div class="right_bottom_corner">
														<div class="ind">
															<p class="txt5">Lordfddt amet, consectetuer adipiscing elit. Praesent vestibu- lum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis par- turient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit.</p>
															<p class="txt6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Integer rutrum ante eu lacus.</p>
															<p class="txt5">Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna.</p>
															<p class="txt6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis. Integer rutrum ante eu lacus.</p>
															<p class="txt5">Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci.</p>
															<p class="txt6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. </p>
															<p class="txt5">Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio.</p>
															<p class="txt6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi.</p> 
															<p class="txt5">E-mail: <a href="#">info@companyname.com</a></p>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col_2">
					<div class="title_block">
						<div class="left">
							<div class="right">
								<div class="ind">
									Terms Of Use
								</div>
							</div>
						</div>
					</div>
					<div class="block6">
						<div class="top">
							<div class="bottom">
								<div class="ind">
									<ul class="list2">
										<li>
											<a href="#"><em><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hen- drerit mauris. Phasellus porta. Fusce suscipit varius mi. </b></em></a>
										</li>
										<li>
											<a class="current" href="#"><em><b>Praesent vestibulum molestie lacus. Aenean nonummy hen- drerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis partu.</b></em></a>
										</li>
										<li>
											<a href="#"><em><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hen- drerit mauris. Phasellus porta. Fusce suscipit varius mi. </b></em></a>
										</li>
										<li>
											<a class="current" href="#"><em><b>Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis partu.</b></em></a>
										</li>
										<li>
											<a href="#"><em><b>Rem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonum.</b></em></a>
										</li>
										<li>
											<a class="current" href="#"><em><b>Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. </b></em></a>
										</li>
										<li>
											<a href="#"><em><b>Dipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis </b></em></a>
										</li>
										<li>
											<a class="current" href="#"><em><b>Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis partu.</b></em></a>
										</li>
										<li style="background:none;">
											<a href="#"><em><b>Dipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. </b></em></a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<!-- footer -->
			<div id="footer">
				<p>Game Mania &copy; 2008 | <a href="#">Privacy Policy</a></p>
			</div>
		</div>
	</div>	
</body>
</html>
 
Laatst bewerkt door een moderator:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan