473,848 Members | 1,828 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How can I do this?

I would like to know if something specific is possible with HTML and CSS
and, if it is possible, how best to do it.

I have a large JPEG showing an open book and would like to overlay the right
hand page in the JPEG with quotations, like "We learn from failure, not from
success! - Bram Stoker, Dracula". Now, I realize that I could use a drawing
program to add the text of the quotation to the graphic but I am wondering
if I can accomplish the same result vi HTML and/or CSS?

I can imagine placing the JPEG at an appropriate spot on a page and writing
the quote in the HTML and then using CSS to force the text to be within the
appropriate area of the right hand page of the JPEG. I'm not sure if this
can be done though or how to do it if it is possible.

Can anyone suggest the best technique?

I'd like to have the book JPEG on a few different pages of my site and be
able to change the actual quotes regularly by simply altering the quotes in
the HTML.

--
Rhino
Apr 19 '06 #1
5 1457
jim
Rhino,
Yes, this is very easily possible. There are a variety of ways, but
I'll try and point you in the easiest direction.

You will need two pairs of html page elements which are <div></div>
tags.
Between one set of div-tags is where you'll put your jpg image coding
eg:
<div>
<img src="book.jpg" />
</div>

Inside the other set of div-tags you can put your text:
eg:
<div>
<p> put your quotation or comment here</p>
</div>

Now comes the fun part with the css; this will be an inline style
versus putting the css rules within <style> tags in the <head> section
of your html document.

To use an inline style, you type style=" " inside the first 'opening'
element
eg:
<div style=" " >

Between the quotes is where you put your style rules which tell the web
browser the rules and ways you want that
tag or element to be shown to your web page visitors. inline style
rules need to follow this recipe:
style="rule:pro perty; rule:property; rule:property"
note the colons and semi-colons which must appear for the style to be
used.

Now, let's set up the rules and properties for your div tags to make
them look how you want them!

Div-tags or boxes can be positioned anywhere on your html page.
"Absolute" positioning
means you plop them at a location and it will not move. "Relative"
positioning allows the box to move depending on other page elements.
You want to use absolute positioning for your two div boxes so that
they stay put.
eg:
<div style="position :absolute;">

Of course to go along with positioning is *where* to position things.
You give the div a left and top coordinate: how many pixels from the
left of the page and how many pixels down from the top of the page you
want the upper left corner of your div box to appear.
eg:
<div style="position :absolute; left:10px; top:10px;">

** IMPORTANT ** : You will have to play-with and alter your left and
top coordinates a bit to make sure your image and text line up where
you want them.

Last item about div positioning: you can put them in layers with one
behind the other. how? you give them a z-index. An index of '1' puts
that div-box in the background. The higher the z-index the more visible
in the fore-front that div-box will be.

For your purposes, you'll want the div holding your image to be in the
background, so it should have a z-index of '1'. You want your text to
be seen in the foreground, so it should have a higher z-index; you can
give it '2' or '10' or '100' as long as it is higher than the div
holding your image.

In this way, using div-box elements, absolute positioning, and
assigning a z-index value, you can literally "layer" or stack images
and text upon one another (note: this does not work using applets,
sound, movie, flash or any type of object/embed html tags).

Here's one example of how you might want to setup your code:
------------------------------------------------------
<div id="imageholder " style="position :absolute; left:50px; top:50px;
z-index:1">
<img src="book.jpg"/></div>

<div id="textholder " style="position :absolute; left:100px; top:100px;
z-index:10">
<p>We learn from failure, not from success! - Bram Stoker, "Dracula".
</p>
</div>
------------------------------------------------------
Keep in mind that you can change the left and top values in the div
styles above to 'move' them around on the web page; First determine
where you want your jpg image to appear on the page and get the left &
top coordinate values set for it. Then, change your quote-holding
div's left and top coordinates so that your quote sits right on top of
the image, in the area (ie: the right 'page' of the image) you want it.
Hope this info is helpful; there are other more complicated ways to do
this using formal css rules and styles and background images etc.
There can be a much more detailed and technically oriented explanation
of this process, but for your use and understanding right now, I tried
to scale it down a bit. Hopefully this is easier to understand and
will give you a non-frustrating easy transition into the fun world of
html style-sheets.

-Jim

Apr 19 '06 #2
Rhino wrote:
I have a large JPEG showing an open book and would like to overlay the right
hand page in the JPEG with quotations, like "We learn from failure, not from
success! - Bram Stoker, Dracula". Now, I realize that I could use a drawing
program to add the text of the quotation to the graphic but I am wondering
if I can accomplish the same result vi HTML and/or CSS?

I can imagine placing the JPEG at an appropriate spot on a page and writing
the quote in the HTML and then using CSS to force the text to be within the
appropriate area of the right hand page of the JPEG. I'm not sure if this
can be done though or how to do it if it is possible.


Put the JPEG in as the background image for a div element, and then
nest the content within that. For example:

..image {height: 100px; width: 140px; background-image: url(image.jpg); }
..text {position: relative; top: 10px; left: 30px;}

<div class="image">
<div class="text">
text goes here
</div>
</div>
--
AGw.

Apr 19 '06 #3
"Rhino" <no************ ***********@nos pam.com> wrote:
I have a large JPEG showing an open book and would like to overlay the right
hand page in the JPEG with quotations, like "We learn from failure, not from
success! - Bram Stoker, Dracula". Now, I realize that I could use a drawing
program to add the text of the quotation to the graphic but I am wondering
if I can accomplish the same result vi HTML and/or CSS?

I can imagine placing the JPEG at an appropriate spot on a page and writing
the quote in the HTML and then using CSS to force the text to be within the
appropriate area of the right hand page of the JPEG. I'm not sure if this
can be done though or how to do it if it is possible.


Mmmh, pretty inflexible.
http://homepage.ntlworld.ie/spartanicus/Book/index.htm

--
Spartanicus
Apr 19 '06 #4
On 19 Apr 2006 09:18:03 -0700, jim wrote:
Rhino,
Yes, this is very easily possible. There are a variety of ways, but
I'll try and point you in the easiest direction. - cut
-Jim


Very thorough and informative reply.
This is exactly why I love NG.

--
o'tom po'tom
Apr 20 '06 #5
A belated thanks to you all for your very helpful replies and suggestions!

I got the effect I wanted and it was surprisingly easy as a result of your
clear explanations.

--
Rhino
Apr 21 '06 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
3367
by: James | last post by:
I have a from with 2 fields: Company & Name Depening which is completed, one of the following queries will be run: if($Company){ $query = "Select C* From tblsample Where ID = $Company Order By Company ASC";
5
2762
by: Scott D | last post by:
I am trying to check and see if a field is posted or not, if not posted then assign $location which is a session variable to $location_other. If it is posted then just assign it to $location_other I keep getting "Notice: Undefined index: location_other" referring to (!($_POST)) { $location_other = $location; } else
2
2738
by: Nick | last post by:
Can someone please tell me how to access elements from a multiple selection list? From what ive read on other posts, this is correct. I keep getting an "Undefined variable" error though... Form page************************************************************ <form action="/process.php" method="get" name="formOne" id="formOne"> <select name="owner" size="6" multiple id="owner"> <option value="one">one</option> <option...
2
2561
by: Alexander Ross | last post by:
I have a variable ($x) that can have 50 different (string) values. I want to check for 7 of those values and do something based on it ... as I see it I have 2 options: 1) if (($x=="one") || ($x=="two") || ... || ($x=="seven")) ... or 2) switch ($x){ case("one"):
0
3286
by: Dan Foley | last post by:
This script runs fine, but I'd like to know why it's so slow.. Thanks for any help out there on how i can make it faster (it might take up to 5 min to write these 3 export files whith 15 records each!!!) Dan ==================== <style> body, table, tr, td { font-family: 'verdana'; font-size: 12px;
5
3238
by: Lee Redeem | last post by:
Hi there I've created abd uploaded this basic PHP script: <html> <head> <title>PHP Test</title> </head> <body> <H1 align="center">
5
10059
by: christopher vogt | last post by:
Hi, i'm wondering if there is something like $this-> to call a method inside another method of the same class without using the classname in front. I actually use class TEST { function func1()
6
2673
by: Phil Powell | last post by:
Ok guys, here we go again! SELECT s.nnet_produkt_storrelse_navn FROM nnet_produkt_storrelse s, nnet_produkt_varegruppe v, nnet_storrelse_varegruppe_assoc sv, nnet_produkt p WHERE s.nnet_produkt_storrelse.id = sv.nnet_produkt_storrelse_id AND sv.nnet_produkt_varegruppe_id = v.nnet_produkt_varegruppe_id AND sv.nnet_produkt_varegruppe_id IN ( SELECT nnet_produkt_varegruppe_id FROM nnet_produkt_varegruppe
1
2202
by: Michel | last post by:
a site like this http://www.dvdzone2.com/dvd Can you make it in PHP and MySQL within 6 weeks? If so, send me your price 2 a r a (at) p a n d o r a . b e
11
3193
by: Maciej Nadolski | last post by:
Hi! I can`t understand what php wants from me:( So: Cannot send session cache limiter - headers already sent (output started at /home/krecik/public_html/silnik.php:208) in /home/krecik/public_html/silnik.php on line 251 Line 208: print ( "error: " . mysql_error()); Line 251: session_register("uprawnienia", "zalogowany"); I can understand that sth, is wrong in line 251 after line 208 and it is logical to
0
9893
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9738
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
11001
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10664
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
7894
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7069
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5735
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5919
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
4137
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.