Jump to content

Help! Table to fill the whole page

mark110384

By mark110384
in CSS Help

 Share

Recommended Posts

mark110384 Regular Member

mark110384

Posted
Posted

I currently have a table that opens over the document that adds a tint that is intiated when the user hits a button. The table only covers the part of the screen that is visible to the user and if the user scrolls down it leaves a thick white space the coding I'm using is as follows.

 

.tint

{

filter:alpha(opacity=55);

opacity:.55;

position: absolute;

width: 100%;

height: 100%;

min-height: 100%;

top: 0px;

left: 0px;

background-color:#63A5E1;

}

 

 

 

 

body {

 

margin:0px;

width: 100%;

height: 100%;

 

}

 

 

#loginbox

{

position: absolute;

width: 100%;

height: 100%;

top: 0px;

left: 0px;

visibility: hidden;

 

}

 

 

.tint is the class for the table that will expand over the page. Any suggestions would be appreciated.

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

How are you triggering the .tint? With javascript?

 

Use a div instead of a table. Create one class or id with all the attributes of the .tint class that you have, but set the position to fixed instead of absolute. Then create another class/id with display set to none. Apply the second class/id to the div upon load, and then change the class with javascript when the trigger is clicked.

 

 

Link to comment
Share on other sites
mark110384 Regular Member

mark110384

Posted
  • Author
Posted

Yeah, I used a div as shown bellow

 

<div id="loginbox">

 

<table class="tint">

<tr>

    <td width></td>

  </tr>

</table>

 

 

 

 

 

<table class="logintable">

<tr>

    <td width="210" height="70">

<td width="30"><a href="javascript://" onMouseUp= "close_it()"><img src="closebutton.JPG" border="0"</a></td>

      </tr>

</table>

 

 

</div>

 

 

Turns out that setting it to fixed instead of absoloute has corrected the problem. Thanks again Haku.

Link to comment
Share on other sites
mark110384 Regular Member

mark110384

Posted
  • Author
Posted

Hmmm IE does not like that at all, for some reason there is a large white space at the bottom of the site I think it has something to do with where the <div> is placed the bottom of the coding. My coding is as follows

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Lilley and Gillie</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

 

<Script Language="JavaScript">

<!-- Script courtesy of http://www.web-source.net - Your Guide to Professional Web Site Design and Development

function load() {

var load = window.open('legal_information.html','','scrollbars=yes,menubar=no,height=600,width=800,resizable=yes,toolbar=no,location=no,status=no');

}

// -->

</Script>

 

<style>

.navi_text:link    {color:#666666; text-decoration:none;}

.navi_text:visited {color:#666666; text-decoration:none;}

.navi_text:active  {color:#666666; text-decoration:none;}

.navi_text:hover  {color:#63A5E1; text-decoration:underline;}

 

.textbg { background-image: url(text_bg.bmp); }

 

.logintable

{

position: absolute;

width: 30%;

height: 200;

top: 40%;

left: 35%;

background-color:#666666;

}

 

.tint

{

filter:alpha(opacity=55);

opacity:.55;

position: absolute;

width: 100%;

height: 100%;

min-height: 100%;

top: 0px;

left: 0px;

background-color:#63A5E1;

}

 

 

 

 

body {

 

 

margin:0px;

 

width: 100%;

height: 100%;

 

}

 

 

#loginbox

{

position: fixed;

width: 100%;

height: 100%;

top: 0px;

left: 0px;

visibility: hidden;

 

}

 

 

 

</style>

 

<script language="javascript">

function openlogin() {

document.all.loginbox.style.visibility = "visible";

}

 

function close_it()

{

document.all.loginbox.style.visibility = "hidden";

}

 

</script>

 

</head>

 

<body>

 

<!--Contains Flash banner and Navigation-->

<table width="64%" height="100" border="0" cellpadding="0" cellspacing="0" align="center">

  <tr>

    <td height="2"></td>

  </tr>

  <tr>

    <td><param name="wmode" value="transparent">

        <embed src="banner04.swf" height="170" width="100%" wmode="transparent" /></td>

  </tr>

  <tr>

    <td height="4"></td>

  </tr>

</table>

<table width="64%" border="0" cellpadding="0" cellspacing="0" align="center">

  <tr>

    <td><param name="wmode" value="transparent">

        <embed src="menu02.swf" height="52" width="100%" wmode="transparent" /></td>

  </tr>

  <tr>

  <td height="20"></td>

  </tr>

</table>

<!--Main Content of page-->

<!-- Main table comtents content table-->

<table width="65%" border="0" cellpadding="0" cellspacing="0" align="center">

  <tr>

    <td width="51%" height="677"> <table width="98%" border="0" cellpadding="0" cellspacing="0">

        <tr>

          <td height="214">

            <!--table contains project info-->

            <table width="69%" border="0" cellpadding="0" cellspacing="0" class="textbg">

              <tr>

                <td width="40%" height="208"><table width="100%" border="0" cellspacing="0" cellpadding="0">

                    <tr>

                      <td width="5%" height="150"> </td>

                      <td><table width="100%" border="0" cellspacing="0" cellpadding="0">

                          <tr>

                            <td width="40%" height="150"><font face="Lucida Sans" size="3" color="#666666">

                              <strong>DNTM SETS SAIL</strong>

                              <p></p></b>

                              </font> <img src="tanker.jpg"/></td>

                            <td> <p> </p>

                              <p><font size="1" face="Lucida Sans" color="#666666"><font size="2" color="#000000"><br>

                                </font>The DNTM has successfully been installed

                                on over 50 BP vessels. The DNTM by Lilley and

                                Gillie enables the mariner onboard a vessel to

                                view and print up to date corrections and tracings...</font>

                                <br><param name="wmode" value="transparent">

                                <embed src="more_info.swf" height="26" width="85" wmode="transparent" /></td>

                          </tr>

                        </table></td>

                      <td width="5%"></td>

                    </tr>

                  </table></td>

              </tr>

              <tr>

                <td height="21"><img src="bottomtext.bmp" align="absbottom" border="0"/></td>

              </tr>

            </table></td>

        </tr>

        <tr>

          <td height="21"></td>

        </tr>

        <!--New potion of the site-->

        <tr>

          <td height="300"> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="textbg">

              <tr>

                <td width="5%" height="48"> </td>

                <td width="95%"><font face="Lucida Sans" size="3" color="#666666"><b>NEWS</b></font></td>

              </tr>

              <tr>

                <td> </td>

                <td height="261"> <table width="100%" border="0" cellpadding="0" cellspacing="0">

                    <tr>

                      <td width="13%" height="125"><img src="news_image.bmp" width = "50%"/></td>

                      <td width="71%"><font face="Lucida sans" size="1" color="#666666">30/07/2008

                        - <font face="Lucida sans" size="1" color="#000000">Lilley

                        & Gillie wins major contract to supply Navmaster ECDIS

                        systems to 20 tankers operated by Overseas Shipholding

                        Group, Inc.</font> OSG Ship Management (UK) Ltd has decided

                        to fit ECDIS systems on board 20 of its tankers following

                        shipboard trials and a competitive bidding process. The

                        turnkey contract to supply and install these systems has

                        been placed with Lilley & Gillie as agents... <font color="#333333"><b>More</b></font></font></td>

                      <td width="16%"></td>

                    </tr>

                    <tr>

                      <td width="13%" height="125"><img src="news_image.bmp" width="50%"/></td>

                      <td width="71%"><font face="Lucida sans" size="1" color="#666666">10/07/2008

                        - <font face="Lucida sans" size="1" color="#000000">Lilley

                        & Gillie and DPM to market the Meteo Consult Ship Performance

                        Optimisation System.</font> Lilley & Gillie and DPM, two

                        of the world's largest international Admiralty chart agents,

                        have teamed up with leading weather company Meteo Consult

                        to provide state of the art weather forecasting data to

                        their customers worldwide. All three companies are renowned

                        for the highest levels of quality... <font color="#333333"><b>More</b></font></font></td>

                      <td width="16%"><font face="Lucida sans" size="1" color="#666666"> </font></td>

                    </tr>

                  </table></td>

              </tr>

            </table></td>

        </tr>

        <tr>

          <td height="21"><img src="bottomtext.bmp" align="absbottom" border="0"/></td>

        </tr>

        <tr>

          <td height="31"></td>

        </tr>

      </table></td>

    <td width="2%"></td>

    <td width="52%"> <table width="100%" border="0" cellpadding="0" cellspacing="0" class="textbg">

        <tr>

          <td width="2%" height="573"><table width="93%" border="0" cellspacing="0" cellpadding="0">

              <tr>

                <td width="5%" height="34"> </td>

                <td width="77%"><font face="lucida sans" size="3" color="#666666"><b>WELCOME</b></font></td>

              </tr>

              <tr>

                <td height="508"> </td>

                <td><table width="97%" border="0" cellspacing="0" cellpadding="0">

                    <tr>

                      <td><font face="lucida sans" size="1" color="#666666">The Content of the page here</font></td>

                    </tr>

                    <tr>

                      <td height="475"> </td>

                    </tr>

                  </table></td>

              </tr>

            </table></td>

        </tr>

<tr>

          <td width="2%" height="32"><img src="bottomtext.bmp"/></td>

        </tr>

<tr>

          <td height="32" bgcolor="#FFFFFF"></td>

        </tr>

      </table></td>

  </tr>

</table>

 

<!-- Links amnd legal information-->

 

<table width="64%" border="0" align="center" bgcolor="#DADADA">

  <tr>

    <td height="29"><table width="82%" height="25" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#DADADA">

        <tr>

          <td width="3%"></td>

          <td width="12%"></td>

          <td width="4%" height="2"></td>

          <td width="20%"></td>

          <td width="5%"></td>

          <td width="14%"></td>

          <td width="5%"></td>

        </tr>

        <tr>

          <td > </td>

    <td ><font face="lucida sans" color="#666666" size="2"><a class="navi_text" href="web3.htm"><b>HOME</b></font></a></td>

    <td height="23" ><img src="dot.png"/></td>

    <td bgcolor="#DADADA"><font face="lucida sans" color="#666666" size="2"><a class="navi_text"><b>INFORMATION</b></font></a></td>

    <td height="23" ><img src="dot.png"/></td>

    <td bgcolor="#DADADA"><font face="lucida sans" color="#666666" size="2"><a class="navi_text" href="services.html"><b>SERVICES</b></font></a></td>

    <td height="23" ><img src="dot.png"/></td>

    <td width="15%" bgcolor="#DADADA"><font face="lucida sans" color="#666666" size="2"><a class="navi_text"><b>PRODUCTS</b></font></a></td>

          <td width="4%" height="23" ><img src="dot.png"/></td>

          <td width="18%" bgcolor="#DADADA"><font face="lucida sans" color="#666666" size="2"><a class="navi_text"><b>CONTACT US</b></font></a></td>

        </tr>

      </table></td>

  </tr>

  <tr>

    <td height="31"><table width="75%" border="0" align="center" bgcolor="#DADADA">

        <tr>

          <td width="74%" align="center"><font face="lucida sans" size="1" color="#666666">Copyright © Lilley and Gillie - <a class="navi_text" href="javascript:load()">Legal Information</a></font></td>

        </tr>

      </table></td>

  </tr>

</table>

 

<div id="loginbox">

 

<table class="tint">

<tr>

    <td width></td>

  </tr>

</table>

 

 

 

 

 

<table class="logintable">

<tr>

    <td width="210" height="70">

<td width="30"><a href="javascript://" onMouseUp= "close_it()"><img src="closebutton.JPG" border="0"</a></td>

      </tr>

</table>

 

 

</div>

 

 

</body>

</html>

 

 

 

 

Thanks

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.