NetTalk Central

Author Topic: Hint - How to float text over an image  (Read 4937 times)

MyBrainIsFull

  • Full Member
  • ***
  • Posts: 134
    • View Profile
Hint - How to float text over an image
« on: September 15, 2015, 09:07:51 PM »
Hi, hope this helps someone.
I have students course, when they pass I want to show them a pretty page "well done"

Its easy to make graphic nowerdays, I made a HUGE one and wanted to position the text for students name / course name etc  EXACTLY in the right position  AND control the font.

See Image 1 & 2  you will notice this image is 800 x 640

By making a html page I can call this up from server side code as
p_web.script(  p_web.WindowOpen( 'webpages/endofcoursepass.htm' ) )  from my WebPages folder.

The htm is included here, basically you load your image - here its CpePass.gif
Then when you want text you can position a <div> to be in absolute postion - that is absolute to the page !   And you can have plain text like "Mary had a little lamb" or ANY variable from your server,  or a list box etc.

In the section bellow I have the students name <!-- Net:s:LoggedInAs --> in nice bold letters, then I drop the font size for line two the course name and drop it again for the date.  And for all those wondering about 16/9/2015  this is how the civilised world does it. <grin>

Image one is the GIF by itself,   two shows the page without the GIF so you can see the text the server is drawing from its session variables and three is the page as the student sees it.
___________________________________________________________
ENDOFCOURSEPASS.HTM

<!-- NetWebServer -->
<Html>
<Head><!-- Net:c:Head -->     <Title>MyCpe Pass</Title></Head>
<Body BGcolor="#ffffff">

    <Img Src="CpePass.gif" UseMap="#map1" Border="0">

<DIV STYLE="position:absolute; top:120px; left:50px; width:500px; height:55px; font-family: Verdana;">
<CENTER><FONT SIZE="+4" COLOR="0000"><!-- Net:s:loggedinas --></FONT></CENTER>
</DIV>

<DIV STYLE="position:absolute; top:250px; left:70px; width:500px; height:45px; font-family: Verdana;">
<CENTER><FONT SIZE="+3" COLOR="0000"><!-- Net:s:Cou:Name --></FONT></CENTER>
</DIV>

<DIV STYLE="position:absolute; top:300px; left:90px; width:500px; height:45px; font-family: Verdana;">
<CENTER><FONT SIZE="+2" COLOR="0000">on &nbsp; &nbsp; &nbsp;<!-- Net:d:today --></FONT></CENTER>
</DIV>
<!--Net:c:BodyEnd -->
</Body>
</Html>
_______________________________________________________________
For anyone interested the graphics is from an old (1998) version of Image Styler
Took 12 mins to do a pass and fail page,  anyone wants the .ist  pleas email me.

____________________________________ Added
this is the same concept where a table is positioned in absolute terms
Image four,  has a browse box positioned nicely around the graphics and a html button with js rollover to take the user back to the site. 
Using <a Href="http://<!-- Net:s:RequestHost -->/indexPage"   but could go anywhere.



[attachment deleted by admin]
« Last Edit: September 15, 2015, 11:42:40 PM by MyBrainIsFull »

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11155
    • View Profile
Re: Hint - How to float text over an image
« Reply #1 on: September 16, 2015, 02:05:35 AM »
as you see, easy with CSS (the style="" attributes.)

But it would be a LOT better to put the style attributes into a .css file, and then assign that css class to the html element.

A good rule of thumb is to keep the css and the html apart from each other wherever possible.

cheers
Bruce