Hello Baab,
The FIG element was part of HTML3.0. This standard however never
officially made it and was superceded by HTML3.2 during the so-called
browser wars, in which browser vendors abandoned parts of the official
recomendations, while pushing proprietary elements in hopes of a
bigger market share. As to wether or not the FIG element will come
back; it's unlikely at the moment, but you can never know.
In the meantime: these days, we have HTML4 and XHTML1, which are both
intended to just define the logical document structure, while style
sheets (CSS2, Cascading Style Sheets Level 2) are used to suggest
presentational aspects -- for better cross-browser & cross-media
compatibility.
This brings us to your desired effect, of overlaying a bigger image
with a smaller one. I will present you with one possible solution.
First, in the HTML (here, XHTML1) we can define two wrapping elements
(divisors):
<div class="figure"><img src="big.jpg" alt="" /></div>
<div class="caption"><img src="small.gif" alt="" /></div>
Now to style this, put the following line into the "head" section of
your HTML document:
<link rel="stylesheet" href="screen.css" type="text/css"
media="screen" />
This links to "screen.css" (which you can give another name), a style
sheet to be used for the screen (defined by the "media" attribute).
Please create this CSS file with a text editor at the same location as
the HTML file, and put the following in it:
.caption
{
position: relative;
top: -20px;
left: 20px;
}
Above means: every element with the class attribute-value "caption"
should be positioned relative to the context, with the top and left
pixel values as defined.
This works in most modern browsers (such as Internet Explorer 5+,
Netscape 4, 6/ Mozilla 1, and Opera 4+), but it also degrades well for
browsers ignoring the style sheet.
Hope that helps!
References:
The World Wide Web Consortium
http://www.w3.org
Specifications at the W3C
HTML 3.0 (historical)
http://www.w3.org/MarkUp/html3/html3.txt
HTML 3.2 (historical)
http://www.w3.org/TR/REC-html32
HTML 4.0
http://www.w3.org/TR/1998/REC-html40-19980424/
XHTML 1.0
http://www.w3.org/TR/xhtml1/
CSS2
http://www.w3.org/TR/REC-CSS2/
Validators at the W3C
HTML Validation
http://validator.w3.org/
CSS Validation
http://jigsaw.w3.org/css-validator/ |
Request for Answer Clarification by
baab-ga
on
03 Aug 2002 22:41 PDT
My question ID: 47651
Hello, in trying/using the code as suggested by researcher, it works well;
however, I have discovered that the (ref: below) top and left values viz:
-20 and 20 (px) do not put the overlay image at top left of underside image!
the "left" (20) is ok, the "top" (-20 pixels) had to be changed to -380;
as if the origin (0,0 upper left) is really bottm-left of under image.
This is with Internet EXplorer 5.5, where the little image places itself at
top left of under image IF I USE left=20 top= -380; with any NETSCAPE (4.7
to 6.2) I cannot get the little image to go on top of the big image AT ALL!
It seems to ignore the values in screen.css entirely and always puts the
little image DOWN UNDER the big image. Does Netscape(s) recognize and know
what to do with the "screen css routine"?
I can live with the funny 20,-380 but I need to have Netscape do it as well
as IE, thanx in advance bob mackey baab-ga smackey549@aol.com
|
Clarification of Answer by
j_philipp-ga
on
04 Aug 2002 04:25 PDT
Hello Baab,
The approach described works in Netscape 6 (as well as Internet
Explorer).
Here's a complete sample:
----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sample</title>
<style media="screen"><!--
.caption
{
position: relative;
top: -80px;
left: 20px;
}
--></style>
</head>
<body>
<div class="figure"><img src="big.jpg" alt="" /></div>
<div class="caption"><img src="small.gif" alt="" /></div>
<div class="figure"><img src="big.jpg" alt="" /></div>
<div class="caption"><img src="small.gif" alt="" /></div>
</body>
</html>
----
Unfortunately Netscape 4 ignores the positioning. However, you can use
"position: absolute;" in the CSS, which Netscape 4 understands. But
then you have to give the values as absolute values (from top left),
instead of the relative values (which, as you correctly noticed, are
relative from the bottom of the bigger image). See the following
sample:
----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sample</title>
<style media="screen"><!--
.figure
{
position: absolute;
top: 20px;
left: 20px;
}
.caption
{
position: absolute;
top: 80px;
left: 60px;
}
--></style>
</head>
<body>
<div class="figure"><img src="big.jpg" alt="" /></div>
<div class="caption"><img src="small.gif" alt="" /></div>
</body>
</html>
----
The relative positioning works better for you if you have many figures
with captions in the normal text-flow. I suggest you include the
stylesheets as described in the original answer, as the method above
is just for sample purposes.
I hope this helps!
|
,
0 Comments
)