Overlaying text

[JH10]

I have this code on a page which pulls in an image for a header.

Over laying this image I wish to lay some text for SEO (h1)

<%a5 a5w_include("header.a5w")%>
Can anyone please say how this is carried out?
Thank you
John

[Steve Wood]

Re: Overlaying text

What you are asking about requires using CSS, there is nothing in A5 that inherently allows you to overlay an image with text. Learning and using CSS requires as much work as learning A5.

You can also use CSS to tag an image with text (for SEO) but not have the text visible. In this FileMaker website many of the images have associated text, but the text is positioned, using CSS, 'off the page' with negative margins.

Much of the text at this website is text-overlaying graphics: http://www.trinav.com/. This page should show some items with "Sold" or "Reduced Price" tags over the photo image: http://trinav.com/list_vessels.a5w?s=ReducedVess.

Taking the text in the upper right on the "map". The HTML is as follows, and the text comes from the database with lookup():

<div id="map" style="WIDTH: 411px; POSITION: relative; HEIGHT: 304px">
 <div id="mapcontent"><%a5 ?lookup("[PathAlias.ADB_Path]\defaults",".t.","Sellyourboat") %>
 </div>
</div>

And the CSS file for the two DIV ID's:

#map{
height: 305px;
width: 411px;
margin-left: 5px;
float: left;
background: transparent url(../images/map.jpg) no-repeat;
}

#mapcontent{
color:white;
font-size:11px;
line-height:1.4;
margin-left:10px;
margin-right:200px;
margin-top:45px;
}

[JH10]

Re: Overlaying text

Thanks Steve

there is nothing in A5 that inherently allows you to overlay an image with text.

Thats a shame guess I have been spoiled with Dreamweaver which is good at that sort of thing.

John

[Steve Wood]

Re: Overlaying text

Alpha's HTML Editor is not up to par with Dreamweaver, especially when you adopt CSS for your layouts. But the good news is that you get to become proficient at writing CSS code yourself:). I'm only being semi-humerous because I do believe it has helped me to apply CSS by hand in the last several Alpha applications.

You CAN use Dreamweaver to create A5W pages, layout anyway. When it comes to inserting a component, you need to use Alpha's editor if you want to insert it. To work around this, I have often inserted the component in a draft page, and then copied over all the code to my final page. Again, that exercise taught me how the A5W pages work.

[JH10]

Re: Overlaying text

To emulate the above code
I created a field in the defaults table called BoatParts
I Entered Boat Parts in the field.
When I publish the page I get no errors but cannot see the text "Boat Parts" which I am trying to get to show over the image. The image appears correctly.

I placed the css code into styles.css
#map{
height: 305px;
width: 411px;
margin-left: 5px;
float: left;
background: transparent url(../images/map.jpg) no-repeat;
}

#mapcontent{
color:white;
font-size:11px;
line-height:1.4;
margin-left:10px;
margin-right:200px;
margin-top:45px;
}

The code for this section is
<tr>
<td colSpan=2>
<img style="WIDTH: 940px; HEIGHT: 120px" height=100 src ="images/header.jpg" width=800>
<div id="map" style="WIDTH: 411px; POSITION: relative; HEIGHT: 50px">
<div id="mapcontent"><%a5 ?lookup("[PathAlias.ADB_Path]\defaults",".t.","BoatParts") %>
</div>
</div>
</td>
</tr>
Can anyone say where I am going wrong please?
Thanks
John

[Steve Wood]

Re: Overlaying text

Honestly, this is an area that is very difficult to debug in a forum. CSS is a complete study. Having said that, note that the text color in the CSS you/I posted is WHITE. So change it to black and maybe it will appear.

[JH10]

Re: Overlaying text

Thanks Steve
I chose white because the image has a lot of blue.
I tried with DW and that works OK but when the the code is placed in A5 the words refuse to sit over the image.

[Pat Bremkamp]

Re: Overlaying text

CSS also includes a setting named "z-index" and the image with the highest Z-index shows on top.

So you might try adding z-index: 5; to map and z-index:10; to mapcontent.

Pat

[JH10]

Re: Overlaying text

Thanks Pat
I tried the z index point but still cannot see the words.

Strange because I can see the words "Boat Parts" in the source code as follows.

<tr>
<td colSpan=2>
<img style="WIDTH: 940px; HEIGHT: 120px" height=100 src ="images/header.jpg" width=800>
<div id="map" style="WIDTH: 411px; POSITION: relative; HEIGHT: 50px">
<div id="mapcontent">Boat Parts </div>
</div>
</td>
</tr>

[WendyWelton]

Re: Overlaying text

What you are asking about requires using CSS, there is nothing in A5 that inherently allows you to overlay an image with text. Learning and using CSS requires as much work as learning A5.

You can also use CSS to tag an image with text (for SEO) but not have the text visible. In this FileMaker website many of the images have associated text, but the text is positioned, using CSS, 'off the page' with negative margins.

Much of the text at this website is text-overlaying graphics: http://trinav.alphatogohost.com/

Taking the text in the upper right on the "map". The HTML is as follows, and the text comes from the database with lookup():

<div id="map" style="WIDTH: 411px; POSITION: relative; HEIGHT: 304px">
 <div id="mapcontent"><%a5 ?lookup("[PathAlias.ADB_Path]\defaults",".t.","Sellyourboat") %>
 </div>
</div>

And the CSS file for the two DIV ID's:

#map{
height: 305px;
width: 411px;
margin-left: 5px;
float: left;
background: transparent url(../images/map.jpg) no-repeat;
}

#mapcontent{
color:white;
font-size:11px;
line-height:1.4;
margin-left:10px;
margin-right:200px;
margin-top:45px;
}

THANK YOU THANK YOU THANK YOU!!!!!!!!!!!!!!!!


Here's an add-on question - if my builders need to be able to download both PDF and jpegs, with the copyright text on it - can that be done without us having to add it in photoshop (which is what we currently do)? I'm guessing I can use Reports to get to the PDF, but jpegs? Possible?

[NoeticCC]

Re: Overlaying text

Please check the response I gave in our own thread - CSS only visually overlays, but ImageMagick and a bit of XBasic coding can automate merging the two layers for you.

[Steve Wood]

Re: Overlaying text

To get the copyright text on the image you have do what Andrea said to actually alter the image. For PDF's you should add a watermark, which can be done in Alpha somewhere, can't quite recall where.

If you want text superimposed over an image using CSS, I have improved that process at that Trinav website referenced below. I don't think you are asking how to do that here, but for future reference it superimposes words like SOLD, ON SALE, REDUCED PRICE, etc based on a Status field.

[NoeticCC]

Re: Overlaying text

Steve, the trinav site redirects to something called "Urban menu" for me. Is this intended?

[Steve Wood]

Re: Overlaying text

Andrea - I went back and fixed the url in the previous post. It had been a staging location, fixed it to show the live site.

[NoeticCC]

Re: Overlaying text

Andrea - I went back and fixed the url in the previous post. It had been a staging location, fixed it to show the live site.

Thanks - very nice site :)