Typing over images in DW?

November 24, 200916 yr

Hi, for some reason, i am unable to make editable regions in DW ithout the image breaking up. So im bodging it and making it all images though before i do that i was just wondering if there was anyway to type text over images??

Cheers!

Rich

November 24, 200916 yr

You could have the image as a background within the CSS and type over it in the HTML.

November 24, 200916 yr

Author

ok nice, how do i do that as im not totally up to speed with css yet??

November 24, 200916 yr

Hi

Something like this

#yourdiv {
background-image:url(yourimage);
background-repeat:no-repeat;
height yourimageheight;
margin-top:20px;
width:yourimagewidth;
}
#yourdiv p {
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color: #FFFFFF;
margin-top:20px;
margin-left:20px;

}

the html

<div id="yourdiv"><p>your text here</p></div>

alter the margins to position the text

Pat

November 25, 200916 yr

Author

cheers Pat!

So the html, do i put that in between the <head> tags? if not where will i put it in the html?

Rich

November 25, 200916 yr

Hi

Something like this

#yourdiv {
background-image:url(yourimage);
background-repeat:no-repeat;
height yourimageheight;
margin-top:20px;
width:yourimagewidth;
}
#yourdiv p {
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color: #FFFFFF;
margin-top:20px;
margin-left:20px;

}

the html

<div id="yourdiv"><p>your text here</p></div>

alter the margins to position the text

Pat

<html><head>here goes the css,javascript,metatags with their propper code structure</head><body><div id="yourdiv"><p>your text here</p></div></body></html>

November 25, 200916 yr

Author

Ok i nt have to put any code in the head tags for this??

November 25, 200916 yr

Ok i nt have to put any code in the head tags for this??

<style type="text/css">#yourdiv {
background-image:url(yourimage);
background-repeat:no-repeat;
height yourimageheight;
margin-top:20px;
width:yourimagewidth;
}
#yourdiv p {
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color: #FFFFFF;
margin-top:20px;
margin-left:20px;

}
</style>

this goes within the head

November 25, 200916 yr

Author

ok so i dont have to create a new css file then?

November 25, 200916 yr

ok so i dont have to create a new css file then?

if u wish to keep css within ur html then no otherwise u have to make another external css file and put this

<link rel="stylesheet" type="text/css" href="css/nameofyourcssfile.css" media="screen" />

in the header mentioning the name and path of your css file

November 25, 200916 yr

Hi

the css code I gave you can go in your existing css or in the head section of the page your div is in.

Pat

November 25, 200916 yr

Author

Ok so from the top then..

Ive copied an pasted the first bit of code you sent to me Pat in the header tags of my page.

Secondly i have puting the <div id="yourdiv"><p>your text here</p></div> bit of code in various places but it doesnt seem tobe working. Bare in mind my web si was made in PS and sliced up so the image i am trying to type over is in the middle of my web page. Can i have one of your email addresses so i can send u a print screen image of what is goin on?

November 25, 200916 yr

Its normally better to have all your style information separate to your html to make it easier to edit later on down the line. But if it is just going to be on one page rather than multiples then there is no harm in the head of the page.

Its really just a case of deciding which is easiest for later updating.

EDIT:Have you edited the css to fit into where you are wanting it, rather than just copying it exactly how pat has posted it?

Also you can attach images to the forum, if you click on add reply rather than using the fast reply you will have option to add images onto your post.

November 25, 200916 yr

November 25, 200916 yr

Author

Well the same image will need to be able to be edited on every page so il make a seperate css file:)

and how do i insert images on here?? i need a url?

November 25, 200916 yr

Well the same image will need to be able to be edited on every page so il make a seperate css file:)

and how do i insert images on here?? i need a url?

go here imageshack

and upload ur printscreen and choose the size for forum and then paste the link u generate from there in the add image section here

November 25, 200916 yr

Click on "add reply" instead of using the fast reply box. under the reply box is an attachments section

Click browse, find your image on your computer, once you done all that click attach this file, when attached it will look like this:

Click on the add to post button and it will add the image into your post through the forum, saves on using something like imageshack or uploading it onto your own site

November 25, 200916 yr

Author

http://img205.imageshack.us/gal.php?g=39386832.jpg

here are two images, the second image shows the image in the site i want to be able to write over

November 25, 200916 yr

http://img205.images...?g=39386832.jpg

here are two images, the second image shows the image in the site i want to be able to write over

can u post the browser shot of your whole page to get a clear idea? and also post the whole code

November 25, 200916 yr

Author

here is the layout of my pages though the cotent with obviously be different... ive been told i need to play and with the css hight and width etc, but also where exactly do i put the other bit of code so i can type over that image in the centre?

November 25, 200916 yr

here is the layout of my pages though the cotent with obviously be different... ive been told i need to play and with the css hight and width etc, but also where exactly do i put the other bit of code so i can type over that image in the centre?

where is the code ? post the code

November 25, 200916 yr

Author

<html>

<head>

<title>Proudly Leading Southamptons Cultural Revolution </title>

<!--

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}

}

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

</head>

<table id="Table_01" width="772" height="1524" border="0" cellpadding="0" cellspacing="0">

<tr>

<td colspan="19">

<img src="images/layout2_01.jpg" width="772" height="33" alt=""></td>

</tr>

<tr>

<td colspan="3">

<img src="images/layout2_02.jpg" width="63" height="59" alt=""></td>

<td colspan="7">

<img src="images/layout2_04.jpg" alt="" name="Chalkboard" width="419" height="59" border="0" usemap="#ChalkboardMap" id="Chalkboard"></td>

<td colspan="3">

<img src="images/layout2_06.jpg" width="60" height="59" alt=""></td>

</tr>

<tr>

<td colspan="19">

<img src="images/layout2_07.jpg" width="772" height="22" alt=""></td>

</tr>

<tr>

<td rowspan="6">

<img src="images/layout2_08.jpg" width="10" height="1409" alt=""></td>

<td>

<img src="images/layout2_09.jpg" width="12" height="49" alt=""></td>

<td>

<img src="images/layout2_18.jpg" width="13" height="49" alt=""></td>

<td rowspan="6">

<img src="images/layout2_19.jpg" width="13" height="1409" alt=""></td>

</tr>

<tr>

<td colspan="17">

<img src="images/layout2_20.jpg" width="749" height="44" alt=""></td>

</tr>

<tr>

<td colspan="4" rowspan="3">

<img src="images/layout2_21.jpg" width="141" height="1305" alt=""></td>

<td colspan="9"><img src="images/layout2_22.jpg" width="469" height="1087"></td>

<td colspan="4" rowspan="3">

<img src="images/layout2_23.jpg" width="139" height="1305" alt=""></td>

</tr>

<tr>

<td colspan="9">

<img src="images/layout2_24.jpg" alt="" width="469" height="165" border="0" usemap="#Map"></td>

</tr>

<tr>

<td colspan="5"><img src="images/footer.jpg" name="Links" width="345" height="53" border="0" usemap="#LinksMap" id="Links"></td>

<td colspan="4">

<img src="images/layout2_26.jpg" alt="" name="Culture" width="124" height="53" border="0" usemap="#CultureMap" id="Culture"></td>

</tr>

<tr>

<td colspan="17">

<img src="images/layout2_27.jpg" width="749" height="11" alt=""></td>

</tr>

<tr>

<td>

<img src="images/spacer.gif" width="10" height="1" alt=""></td>

<td>

<img src="images/spacer.gif" width="12" height="1" alt=""></td>

<td>

<img src="images/spacer.gif" width="41" height="1" alt=""></td>

<td>

<img src="images/spacer.gif" width="21" height="1" alt=""></td>

<td>

<img src="images/spacer.gif" width="67" height="1" alt=""></td>

<td>

<img src="images/spacer.gif" width="21" height="1" alt=""></td>

<td>

<img src="images/spacer.gif" width="60" height="1" alt=""></td>

<td>

<img src="images/spacer.gif" width="85" height="1" alt=""></td>

<td>

<img src="images/spacer.gif" width="98" height="1" alt=""></td>

<td>

<img src="images/spacer.gif" width="81" height="1" alt=""></td>

<td>

<img src="images/spacer.gif" width="12" height="1" alt=""></td>

<td>

<img src="images/spacer.gif" width="68" height="1" alt=""></td>

<td>

<img src="images/spacer.gif" width="15" height="1" alt=""></td>

<td>

<img src="images/spacer.gif" width="29" height="1" alt=""></td>

<td>

<img src="images/spacer.gif" width="38" height="1" alt=""></td>

<td>

<img src="images/spacer.gif" width="54" height="1" alt=""></td>

<td>

<img src="images/spacer.gif" width="34" height="1" alt=""></td>

<td>

<img src="images/spacer.gif" width="13" height="1" alt=""></td>

<td>

<img src="images/spacer.gif" width="13" height="1" alt=""></td>

</tr>

</table>

</div>

<map name="ChalkboardMap"><area shape="rect" coords="2,2,420,57" href="index.htm" alt="Back to the start...">

</map>

<map name="LinksMap"><area shape="rect" coords="228,35,263,44" href="links.htm" alt="Links">

</map>

<map name="Map"><area shape="rect" coords="343,163,346,167" href="#"></map>

<map name="CultureMap"><area shape="rect" coords="2,2,123,52" href="culturalrevolution.htm" alt="What lies ahead for the Soul Cellar?...">

<div id="yourdiv"><p>your text here</p></div>

</map></body>

</html>

November 25, 200916 yr

Author

Here is the images i need to edit

November 25, 200916 yr

Author

i know im not doinf it the rite way, its certainly not the way you guys would do it but i am learning..slowly...

Any ideas?

November 25, 200916 yr

you put an id to the td u used

<td colspan="9" id="yourdiv">
<p class="c">put your text here</p></td>

and add this to css


.c  {
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color: #FFFFFF;
margin-top:20px;
margin-left:20px;

}

and mention the height and width of images in css that pat gave and c how it comes

and better you learn css and div as early as possible because slicing is not at all the way to learn webdesigning

November 25, 200916 yr

Author

Ok ive updated my css so itgs the same size as the image/area i want to be able to edit as shown below..

Now what exact code to i put exactly where havng done this?

(sorry to be a pain)

November 25, 200916 yr

Author

Is this correct so far where i have put in the 'id='?

November 25, 200916 yr

Author

can i just send someone my html file and css file and to do it and then send it back and il hav a look at how uve done it? would that be easier??

November 25, 200916 yr

can i just send someone my html file and css file and to do it and then send it back and il hav a look at how uve done it? would that be easier??

OK send it also send the images and mark where u have to add text

add zipped file here

November 25, 200916 yr

Author

Cool cheers man.

New Folder.zip

November 25, 200916 yr

Author

oh and the bit i want to be able to edit (paste images on and write text on) is the white ish section on the middle.

Cheers.

November 25, 200916 yr

oh and the bit i want to be able to edit (paste images on and write text on) is the white ish section on the middle.

Cheers.

anyway buddy though i am not the comfortable with this slicing still u c this linkand for the inside part try curvycorners

November 25, 200916 yr

Author

i can do that....but the posted to ask how i can edit 'over' the image that was there?

November 26, 200916 yr

u can do one thing slice the area leaving the borders of ur white area and then import in dreamweaver and delete that inside part and fill the background with similar colour and then u can do anything inside that

November 26, 200916 yr

Author

Ok cheers! but the background is a warm 'off' white and the content region is light grey. I thought of doing that a few days ago but didnt know how to change the colour the centr 'content region' with out changing the colour of the background once i have deleted the image that was in the centre?

November 26, 200916 yr

Ok cheers! but the background is a warm 'off' white and the content region is light grey. I thought of doing that a few days ago but didnt know how to change the colour the centr 'content region' with out changing the colour of the background once i have deleted the image that was in the centre?

frst slice it as i said then gnerate the code from photoshop and show it to me u just need to change the background color of the td that is generated within that area matching that of ur image, u can add any colors once u slice it as i said

and follow this tutorial for future projectsnetutts

November 26, 200916 yr

Just a suggestion about learning CSS really. I learnt it all off 'you tube', and found it really helpful.

November 26, 200916 yr

Author

hmm ive not thought about that, il look into it.

Here is the new code with what ou said to do, i had deleted the cetre piece but kept the bits surrounding it, beflow is also an image of DW and where the code is etc..

<html>

<head>

<title>layout2</title>

</head>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

<td>

<td>

<td>

<td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

</tr>

</table>

</body>

</html>

November 26, 200916 yr

Author

...the snap shot was taken just after i deleted the image in the centre...

November 26, 200916 yr

Author

but when i save it the image all breaks up again so im back to square one? lol

Typing over images in DW?

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)