Hello, let's see if anyone here could help me out with this. I'm currently converting a webpage to a better, more refined version with as similar look and function to the old one as possible. For example, I've changed it to XHTML 1.1 and removed presentational markup.<br />
<br />
Some nonessential background info, within the page (this forms most of the page) is a series of tables (including side by side and on top of one another) wherein there is dynamic text (by which I mean, the text is often updated and changed). This means that the tables and thus the page changes shape often.<br />
<br />
Of course, this is a complete, if convenient, misuse of tables, and I'm trying to convert them to div "layers" with absolute position on the page that can still hold text, but adapt to different amounts of text (i.e. stretch vertically like a table) and browser window resizing. That's where I'm stumped. I can position a layer a certain amount of pixels from the top left and give it a fixed size, but the one below it needs to be right below it. Since you can't space the two apart, I have the second layer a certain number of pixels from the bottom left with a fixed size. This gives the illusion that the two layers are against one another, which is fine until one of them ends up with too much text.<br />
<br />
So that's the background. Basically, my question is, is it possible to make such a div "layer" change in size like a table does? And if not, is it possible to space different elements apart (i.e. have the second layer one pixel below the first one)? I only know how to position them relatively or absolutely.<br />
<br />
If you need anything clarified, ask away, but setting up an example page I doubt would help and shouldn't be necessary...<br />
<br />
Thanks in advance if you can help out!<!--content-->if i understood you correctly, use % for the divs and use relative positioning for the second div
<!--content-->Hmmm... It's a bit too hard to be clear. Here's some source of the original page more or less. Can anyone figure out how to make CSS positioned divs behave like this?:<br />
<br />
<?xml version="1.0" encoding="utf-8"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"<br />
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" ><br />
<head><br />
<title>title</title><br />
<br />
<br />
<meta http-equiv="Content-Type"<br />
content="application/xhtml+xml; charset=utf-8" /><br />
<br />
</head><br />
<body><br />
<table border="0" cellspacing="8"><br />
<tbody><br />
<tr> <br />
<td colspan="2"<br />
style="text-align: left; vertical-align: middle; background-color: #08829C;"> <br />
<div>Hello, let's see if anyone here could help me out with this. I'm <br />
currently converting a webpage to a better, more refined version with <br />
as similar look and function to the old one as possible. For example, <br />
I've changed it to XHTML 1.1 and removed presentational markup.<br />
<p>Some nonessential background info, within the page (this forms most <br />
of the page) is a series of tables (including side by side and on <br />
top of one another) wherein there is dynamic text (by which I mean, <br />
the text is often updated and changed). This means that the tables <br />
and thus the page changes shape often.<br /><br />
<br />
</p><br />
</div></td><br />
<td style="width: 649px; text-align: left; vertical-align: middle; background-color: #6699cc;"<br />
rowspan="4" > <div style="text-align: left;"> <br />
<div> <br />
<p> So that's the background. Basically, my question is, is it possible <br />
to make such a div "layer" change in size like a table <br />
does? And if not, is it possible to space different elements apart <br />
(i.e. have the second layer one pixel below the first one)? I only <br />
know how to position them relatively or absolutely.</p><br />
<p>If you need anything clarified, ask away, but setting up an example <br />
page I doubt would help and shouldn't be necessary...</p><br />
<br />
</div><br />
</div><br />
</td><br />
</tr><br />
<tr><br />
<td style="width: 649px; text-align: left; vertical-align: middle; background-color: #BC6D3E;" <br />
rowspan="4"> <div> <br />
<p> Of course, this is a complete, if convenient, misuse of tables, <br />
and I'm trying to convert them to div "layers" with absolute <br />
position on the page that can still hold text, but adapt to different <br />
amounts of text (i.e. stretch vertically like a table) and browser <br />
window resizing. That's where I'm stumped. I can position a layer <br />
a certain amount of pixels from the top left and give it a fixed size, <br />
but the one below it needs to be right below it. Since you can't space <br />
the two apart, I have the second layer a certain number of pixels <br />
from the bottom left with a fixed size. This gives the illusion that <br />
the two layers are against one another, which is fine until one of <br />
them ends up with too much text.</p><br />
<br />
</div></td><br />
<td> <br />
<table border="0" cellpadding="2" cellspacing="2"<br />
style="text-align: left; width: 100%;"><br />
<tbody><br />
<tr> <br />
<td style="vertical-align: top; background-color: #ffffff">image</td><br />
</tr><br />
</tbody><br />
</table></td><br />
<br />
</tr><br />
<tr> <br />
<td style="background-color: #990000; text-align: center"><strong>link bar... <br />
look at the noexisitant links!</strong></td><br />
</tr><br />
<tr> <br />
<td align="center" style="background-color: #0000cc;"> <div style="text-align: center;"> </div><br />
<table border="0" width="50%"><br />
<tbody><br />
<br />
<tr > <br />
<td style="text-align: center;">title<br />
</td><br />
</tr><br />
</tbody><br />
</table></td><br />
</tr><br />
<tr> <br />
<td style="text-align: left; vertical-align: middle; background-color: #009900;" align="center" valign="middle"<br />
colspan="2"> <div style="text-align: left;"> <br />
<p>Thanks in advance if you can help out!</p><br />
<br />
</div></td><br />
</tr><br />
</tbody><br />
</table><br />
</body><br />
</html><!--content-->yup, use what i said before, for the 2nd div if you use relative, it will be positioned a distance from the other div (anchor div), and percentage values for the sizes, you'll just have to play around with them until you get what you need, throwing in different sizes of data see how they react<!--content-->I can't get that to work perfectly. Can anyone give a more detailed description of what to do or suggested code?<br />
<br />
The main problem right now lies in getting the middle div to stay centred through any window resize.<!--content-->
<br />
Some nonessential background info, within the page (this forms most of the page) is a series of tables (including side by side and on top of one another) wherein there is dynamic text (by which I mean, the text is often updated and changed). This means that the tables and thus the page changes shape often.<br />
<br />
Of course, this is a complete, if convenient, misuse of tables, and I'm trying to convert them to div "layers" with absolute position on the page that can still hold text, but adapt to different amounts of text (i.e. stretch vertically like a table) and browser window resizing. That's where I'm stumped. I can position a layer a certain amount of pixels from the top left and give it a fixed size, but the one below it needs to be right below it. Since you can't space the two apart, I have the second layer a certain number of pixels from the bottom left with a fixed size. This gives the illusion that the two layers are against one another, which is fine until one of them ends up with too much text.<br />
<br />
So that's the background. Basically, my question is, is it possible to make such a div "layer" change in size like a table does? And if not, is it possible to space different elements apart (i.e. have the second layer one pixel below the first one)? I only know how to position them relatively or absolutely.<br />
<br />
If you need anything clarified, ask away, but setting up an example page I doubt would help and shouldn't be necessary...<br />
<br />
Thanks in advance if you can help out!<!--content-->if i understood you correctly, use % for the divs and use relative positioning for the second div
<!--content-->Hmmm... It's a bit too hard to be clear. Here's some source of the original page more or less. Can anyone figure out how to make CSS positioned divs behave like this?:<br /><br />
<?xml version="1.0" encoding="utf-8"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"<br />
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" ><br />
<head><br />
<title>title</title><br />
<br />
<br />
<meta http-equiv="Content-Type"<br />
content="application/xhtml+xml; charset=utf-8" /><br />
<br />
</head><br />
<body><br />
<table border="0" cellspacing="8"><br />
<tbody><br />
<tr> <br />
<td colspan="2"<br />
style="text-align: left; vertical-align: middle; background-color: #08829C;"> <br />
<div>Hello, let's see if anyone here could help me out with this. I'm <br />
currently converting a webpage to a better, more refined version with <br />
as similar look and function to the old one as possible. For example, <br />
I've changed it to XHTML 1.1 and removed presentational markup.<br />
<p>Some nonessential background info, within the page (this forms most <br />
of the page) is a series of tables (including side by side and on <br />
top of one another) wherein there is dynamic text (by which I mean, <br />
the text is often updated and changed). This means that the tables <br />
and thus the page changes shape often.<br /><br />
<br />
</p><br />
</div></td><br />
<td style="width: 649px; text-align: left; vertical-align: middle; background-color: #6699cc;"<br />
rowspan="4" > <div style="text-align: left;"> <br />
<div> <br />
<p> So that's the background. Basically, my question is, is it possible <br />
to make such a div "layer" change in size like a table <br />
does? And if not, is it possible to space different elements apart <br />
(i.e. have the second layer one pixel below the first one)? I only <br />
know how to position them relatively or absolutely.</p><br />
<p>If you need anything clarified, ask away, but setting up an example <br />
page I doubt would help and shouldn't be necessary...</p><br />
<br />
</div><br />
</div><br />
</td><br />
</tr><br />
<tr><br />
<td style="width: 649px; text-align: left; vertical-align: middle; background-color: #BC6D3E;" <br />
rowspan="4"> <div> <br />
<p> Of course, this is a complete, if convenient, misuse of tables, <br />
and I'm trying to convert them to div "layers" with absolute <br />
position on the page that can still hold text, but adapt to different <br />
amounts of text (i.e. stretch vertically like a table) and browser <br />
window resizing. That's where I'm stumped. I can position a layer <br />
a certain amount of pixels from the top left and give it a fixed size, <br />
but the one below it needs to be right below it. Since you can't space <br />
the two apart, I have the second layer a certain number of pixels <br />
from the bottom left with a fixed size. This gives the illusion that <br />
the two layers are against one another, which is fine until one of <br />
them ends up with too much text.</p><br />
<br />
</div></td><br />
<td> <br />
<table border="0" cellpadding="2" cellspacing="2"<br />
style="text-align: left; width: 100%;"><br />
<tbody><br />
<tr> <br />
<td style="vertical-align: top; background-color: #ffffff">image</td><br />
</tr><br />
</tbody><br />
</table></td><br />
<br />
</tr><br />
<tr> <br />
<td style="background-color: #990000; text-align: center"><strong>link bar... <br />
look at the noexisitant links!</strong></td><br />
</tr><br />
<tr> <br />
<td align="center" style="background-color: #0000cc;"> <div style="text-align: center;"> </div><br />
<table border="0" width="50%"><br />
<tbody><br />
<br />
<tr > <br />
<td style="text-align: center;">title<br />
</td><br />
</tr><br />
</tbody><br />
</table></td><br />
</tr><br />
<tr> <br />
<td style="text-align: left; vertical-align: middle; background-color: #009900;" align="center" valign="middle"<br />
colspan="2"> <div style="text-align: left;"> <br />
<p>Thanks in advance if you can help out!</p><br />
<br />
</div></td><br />
</tr><br />
</tbody><br />
</table><br />
</body><br />
</html><!--content-->yup, use what i said before, for the 2nd div if you use relative, it will be positioned a distance from the other div (anchor div), and percentage values for the sizes, you'll just have to play around with them until you get what you need, throwing in different sizes of data see how they react
<!--content-->I can't get that to work perfectly. Can anyone give a more detailed description of what to do or suggested code?<br /><br />
The main problem right now lies in getting the middle div to stay centred through any window resize.<!--content-->