Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Divide window 50%-50%, whatever resolution

Posted on 2000-04-11
10
Medium Priority
?
176 Views
Last Modified: 2010-04-09
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>&nbsp;</TD>
</TR>
<TR height=50% width=100% bgcolor="#FFFFFF">
<TD>&nbsp;</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Thanks,


georgedb
0
Comment
Question by:georgedb
10 Comments
 
LVL 1

Expert Comment

by:hkmdj
ID: 2704800
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
0
 
LVL 11

Expert Comment

by:MacAnthony
ID: 2706021
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
0
 
LVL 1

Expert Comment

by:Smacked
ID: 2706521
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
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:georgedb
ID: 2706863
Your answer is probably correct, but please give me some sample code, as your answer is a bit too cryptic for me....
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 2707145
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%>
&nbsp;
    </td>
    <td bgcolor=blue  width=50%>
&nbsp;
    </td>
  </tr>
</table>

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

llllllllllllaaaaaaaaaaaaaa
</div>

</html>

This works in IE...
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 2707160
oops...width=100pct should be width:100pct
0
 

Author Comment

by:georgedb
ID: 2707318
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>&nbsp;</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>&nbsp;</TD>
</TR>
</TABLE>
</BODY>
</HTML>

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

Expert Comment

by:CJ_S
ID: 2707398
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%>
 
 
0
 
LVL 22

Accepted Solution

by:
CJ_S earned 450 total points
ID: 2707409
OK, you can't get rid of the scrollbars in Netscape unless you use a frameset, and set the scrolling to no.

Just make a framesetting with one frame and you're done with the scrollbars in Netscape.
0
 

Author Comment

by:georgedb
ID: 2707524
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>
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

963 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question