Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Divide window 50%-50%, whatever resolution

Posted on 2000-04-11
10
Medium Priority
?
177 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
Technology Partners: 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

580 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