positioning content with CSS
by Andrew Browne <andrew(at)pbm.co.za>
|
| Date: |
Tue, 19 Sep 2000 09:44:34 +0200 |
| To: |
"'hwg-languages(at)hwg.org'" <hwg-languages(at)hwg.org> |
| |
todo: View
Thread,
Original
|
|
Hi all
Maybe someone can shed some light on my problem:
I use an ASP page to generate a score result. I would like to plot it =
on a bar using dynamic HTML. The ASP is working fine and I generate the =
correct left position in pixels of the marker (in my case, a small orb). =
However, I am having difficulty with CSS positioned content. I created =
a test page to simplify things for myself and have run into problems.
Essentially, I would like to have a 5-cell-single-row-table within a =
relatively positioned layer to act as my bar. I need relative =
positioning in this case, I assume, so that the layer will occupy space =
within the flow of the document. Now, I would like a second layer =
within layer1 which will have a transparent background and contain the =
orb image (in this test it just contains a bit of text). I would like =
to be able to change the left position of layer 2 relative to layer 1. =
Thus when I specify a left position of 200px for layer 2, it must be =
placed 200px across from the left side of the layer irrespective on =
layer1's position on the page.
Below is the code for my test page - if anyone can help I'll remain =
eternally grateful.=20
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
<title>Untitled</title>
<style>
#layer1 {position: relative; background-color: red; }
#layer2 {position: relative; background-color: blue; left: 200px; =
width: 20px;}
</style>
</head>
<body>
<table>
<tr>
<td height=3D"200"> </td>
</tr>
<tr>
<td>
<div id=3D"layer1">=20
<table width=3D"500" border=3D"1">
<tr>
<div id=3D"layer2">test</layer2>
<td width=3D"100"> </td>
<td width=3D"100"> </td>
<td width=3D"100"> </td>
<td width=3D"100"> </td>
<td width=3D"100"> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
=09
</body>
</HTML>
_____________
Andrew Browne
IT
658-6484 =20
_____________
HWG: hwg-languages mailing list archives,
maintained by Webmasters @ IWA
This page is part of a preserved archive of archives.hwg.org. The site is no longer active and its content is not maintained. For enquiries about this archive, write to archive(at)iwanet.org.
