Solved

Divide window 50%-50%, whatever resolution

Posted on 2000-04-11
10
167 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 

Author Comment

by:georgedb
Comment Utility
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
Comment Utility
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 22

Expert Comment

by:CJ_S
Comment Utility
oops...width=100pct should be width:100pct
0
 

Author Comment

by:georgedb
Comment Utility
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
Comment Utility
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 150 total points
Comment Utility
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
Comment Utility
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

771 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now