asked on

Divide window 50%-50%, whatever resolution

I try to make a window with the upper half of the screen blue and the other half white. I can't do it with a background image as I don't know what the screenresolution will be. I try to avoid frames. The only thing I can think of is defining a table with two rows (though that isn't the best solution perhaps too, 'cause then the rest of my layout really depends on these two cells, and I might like to have a picture half in the blue row and half in the white row). Another problem with tables is that Netscape sort of expects horizontal and vertical scrollbars, although the table is specified as height=100% and width=100%.... IE uses the whole browser window. I'd like to see a better solution than with tables, or if that's not possible, the solution with a table.... This is the code I use for the table solution:

<HTML>
<HEAD>
<TITLE>Welcome</TITLE>
</HEAD>
<BODY bgcolor="lime" background="" MARGINWIDTH="0" MARGINHEIGHT="0" LEFTMARGIN="0" TOPMARGIN="0" RIGHTMARGIN="0" BOTTOMMARGIN="0" SCROLL="no" STYLE="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px">
<TABLE height=100% width=100% border=0 cellspacing=0 cellpadding=0>
<TR height=50% width=100% bgcolor="#092991">
<TD> </TD>
</TR>
<TR height=50% width=100% bgcolor="#FFFFFF">
<TD> </TD>
</TR>
</TABLE>
</BODY>
</HTML>

Thanks,

georgedb

hkmdj

Well, I feel your pain. I understand wanting to stay away from frames, and I understand how your tables are going to get munged once you put content in there.

So the only thing that I could think of was a background image. Actually more than one background image. Depending on the screen.availheight you would load the different image. I saw it work in IE, saw it error out in NN, but feel that it could be a viable solution for you if you really want to stay away from tables and frames.

I know that others will come up with reasons why not. I only had so much of a lunch hour and was working within the no tables no frames criteria.

Here is the javascript code:

<script language="javascript">
if (window.screen) {
var sizeMe = screen.Height
            if (sizeMe < 1000) {
              document.write('<BODY bgcolor="lime" background="small.jpg">')
            }
            if (sizeMe > 1000) {
              document.write('<BODY bgcolor="lime" background="medium.jpg">')
            }
}
</script>

Of course put your attributes back in.

dj

MacAnthony

This will work as long as you have a background image big enough to cover a large area. The image I used to test out was 1200 x 2 (only needs to be a small number because it will repeat)

<html>
<style type="text/css">
BODY {background-image: url(bg.gif); //this is the url to your background image
background-position: center middle; //This keeps the image centered on the page
}
</style>
<body>
web content
</body>
</html>

It works in IE and should work in netscape though I didn't try it. The only thing you need to watch out for is to make sure the image will be big enough to cover any monitor resolution.

Anthony

Smacked

another thing u could do is use the tables then put all your content in a div set at 100%,100% with the background set to transparent. then u could have all the control of an empty document whilst having the table with two colors 'behind' it.

don't forget to set the z-index

georgedb

ASKER

Your answer is probably correct, but please give me some sample code, as your answer is a bit too cryptic for me....

CJ_S

Like the following:

<html>

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>

<table border=0 width=100% cols=2 height=100%>
<tr height=100%>
<td bgcolor=yellow width=50% height=100%>
 
</td>
<td bgcolor=blue width=50%>
 
</td>
</tr>
</table>

<div name="MyTextAndAll" style="position:absolute;left:0;top:0;width=100pct">
blllllllllllllllllllaaaaaaaaaaaaaaahblllllllllllllllllllaaaaaaaaaaaaaaahblllllllllllllllllllaaaaaaaaaaaaaaahblllllll

llllllllllllaaaaaaaaaaaaaa
</div>

</html>

This works in IE...

CJ_S

oops...width=100pct should be width:100pct

georgedb

ASKER

No, in my IE 5, there still is a very small border, though these cells should touch directly. In NS (4.7), I still see the body bgcolor for the places where scrollbars could appear. BTW, window should by horizontally divided, not vertically, but I don't think things will change then....

I now tried with frames, though this isn't a very good solution aswell, as I want to have an image half in the blue part, half in the white part. This minimizes borders in NS to 1 or 2 pixels, but that's 1-2 pixels too much! In IE the frames touch seamlessly. To achieve this result, I used almost all tricks:

framedefinition:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET rows="50%,50%" frameborder="0" border="0" framespacing="0">
<FRAME name="blue" src="blue.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" noresize>
<FRAME name="white" src="white.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" noresize>
</FRAMESET>
</HTML>

blue.html

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0" bgcolor="#041858">
<TABLE border=0 width=100% height=100% cellpadding="0" cellspacing="0" hspace="0" vspace="0" style="margin: 0pt">
<TR bgcolor="lime">
<TD> </TD>
</TR>
</TABLE>
</BODY>
</HTML>

white.html

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0" bgcolor="#FFFFFF">
<TABLE border=0 width=100% height=100% cellpadding="0" cellspacing="0" hspace="0" vspace="0" style="margin: 0pt">
<TR bgcolor="lime">
<TD> </TD>
</TR>
</TABLE>
</BODY>
</HTML>

So, this works in IE5, but still doesn't work in NS....

CJ_S

Then replace
<table border=0 width=100% cols=2 height=100%>

with
<table cellspacing=0 cellpadding=0 border=0 width=100% cols=2 height=100%>

ASKER CERTIFIED SOLUTION

CJ_S

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

georgedb

ASKER

That's almost it, and I think that's as close as we can get.... I think your answer deserves the credits, all others, thanks for your suggestions. This is what I made of it, and it looks almost perfect in both IE and NS.... The stupid thing is the dummy construction, as NS doesn't accept a frame definition with just one frame, as it seems. Therefore the "100%,*", weird, not?

The Code:

framedefinition:

<HTML>
<FRAMESET rows="100%,*" frameborder="0" border="0" framespacing="0">
<FRAME name="blue" src="blue-white.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" noresize>
<FRAME name="blue" src="blue-white.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" noresize>
</FRAMESET>
</HTML>

blue-white.html

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0" bgcolor="#FFFFFF">
<TABLE border=0 width=100% height=100% cellpadding="0" cellspacing="0" hspace="0" vspace="0" style="margin: 0pt">
<TR>
<TD align=center valign=bottom bgcolor="#041858"><IMG src="b.gif"></TD>
</TR>
<TR>
<TD align=center valign=top bgcolor="#FFFFFF"><IMG src="a.gif"></TD>
</TR>
</TABLE>
</BODY>
</HTML>