Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Web page doesn't fully show on all monitors

    I am new to html so I hope someone can help. I created a webpage using share point designer. On my 22 monitor it looks great after uploading it, on my laptop not so great. I cannot see the bottom 1/4 of the picture and text that I have. Maybe someone can help. thank you

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>


    <meta http-equiv="Content-Language" content="en-us" />


    <style type="text/css">
    html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left;}
    body {font-family:verdana, arial, sans-serif; font-size:76%;}
    #background{position:absolute; z-index:1; width:100%; height:100%;}
    #scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
    #content {padding:5px 300px 20px 200px;}
    p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
    #fixed {position:absolute; top:25px; left:10px; width:160px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
    .style1 {
    text-align: center;
    }
    </style>
    </head>

    <body style="background-image: url('images/orange.gif')">

    <div class="style1">

    <table border="0" cellpadding="0" cellspacing="0" style="width: 1403px; height: 735px">
    <!-- MSTableType="layout" -->
    <tr>
    <td valign="top">
    <!-- MSCellType="DecArea" -->
    </td>
    <td valign="top" style="height: 102px">
    <!-- MSCellType="ContentHead" -->
    <img alt="" src="images/coollogo_com-204063720.png" width="1117" height="102" /></td>
    </tr>
    <tr>
    <td valign="top" style="width: 286px">
    <!-- MSCellType="NavBody" -->
    <div class="left_column_narrow" style="width: 252px;">
    <h2 class="section_header">&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://xxxxx.com/biography.htm">Biography</a></h2>
    <div class="style1"></div>
    <div class="section_content" style="height:auto;">


    <div style="float:left;width:250px;margin-top:2px;" class="style1"><b>&nbsp;&nbsp;&nbsp;
    <a href="mailto:xxxx@xxxxx.com">Email xxxx</a></b><br />
    <br />
    </div>

    <div class="style1"><b><b><a href="mailto:xx@xxxxxx.com">Email xx</a></b><br />
    <br />
    <b></b><a href="mailto:xxxx@xxxxx.com">Email xxx</a></b><br />
    <br />
    <br />
    <a href="http://xxxx.com/contest.htm">
    <img src="images/contest.png" width="146" height="99"></a> <br />
    Click on the logo to ENTER<br />
    <br />
    <a href="http://www.xxxx.com/store/index/artist_937337m">
    <img src="images/shirt.png" width="146" height="99"></a> <br />
    Click to go to our store<br />
    <br />
    <br />
    <script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width= 626,height=436');return false;}</script><style> html .fb_share_link { padding:2px 0 0 20px; height:16px; background:url(http://static.ak.facebook.com/images...on.gif?6:26981) no-repeat top left; }</style><a rel="nofollow" href="http://www.facebook.com/share.php?u=<;http://xxxx.com>" onclick="return fbs_click()" target="_blank" class="fb_share_link">Share on Facebook</a><br />
    <br />
    <br />
    <br />
    </b><a href="mailto:xxx@xxxx.com">Email The Web Admin</a></b>




    <td valign="top" style="height: 633px; width: 1117px">
    <!-- MSCellType="ContentBody" -->
    <img alt="" src="newgroup.jpg" width="1106" height="630" /></td>
    </tr>
    </table>




    </div>
    <p class="style1">&nbsp;</p>

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    take out the height from the table.

    You can't set a width and a height for a page, because resolutions (width and height of a computer screen) or different among computers. Therefore a laptop height isn't as large as a desktop height.

    You set the height to 735px, try replacing that with:

    Code:
    min-height: 100%;
    Last edited by Sammy12; 07-03-2011 at 02:43 AM.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    take out the height from the table.

    You can't set a width and a height for a page, because resolutions (width and height of a computer screen) or different among computers. Therefore a laptop height isn't as large as a desktop height.

    You set the height to 735px, try replacing that with:

    Code:
    min-height: 100%;
    Like this ? <table border="0" cellpadding="0" cellspacing="0" style="width: 1403px; height: min-height: 100%;> if that is right, it still cuts off the bottom 1/4
    Last edited by Cobra2011; 07-03-2011 at 03:02 AM. Reason: it was wrong code

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Code:
    <style type="text/css"> 
    html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left;}
    this code is on like line 20. Delete the overflow: hidden;

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    Code:
    <style type="text/css"> 
    html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left;}
    this code is on like line 20. Delete the overflow: hidden;
    ok, that seemed to work, I now can see the slider on both the side and bottom . code looks like this now, thank you very much

    html, body {margin:0; padding:0; width:100%; height:100%; text-align:left;}

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    if you don't want the x silder, you can use

    overflow-x: hidden; but then the picture will be cut off to the right

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    if you don't want the x silder, you can use

    overflow-x: hidden; but then the picture will be cut off to the right
    I would rather have the full page showing, so the slider is fine lol. Now I kind of have the opposite issue with my 2nd page. On my 22" monitor it doesn't take up the entire screen and on my lap top it looks good, kind cramped but lol. I believe I centered the entire page

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    .style1 {
    text-align: center;
    }
    .style3 {
    text-align: center;
    font-size: large;
    }
    .style5 {
    font-family: "Times New Roman";
    }
    .style6 {
    text-decoration: underline;
    }
    .style7 {
    margin-right: 0px;
    }
    </style>
    </head>

    <body style="background-image: url('orange.gif')">


    <table border="0" cellpadding="0" cellspacing="0" style="width: 1361px; height: 546px">
    <!-- MSTableType="layout" -->
    <tr>
    <td valign="top" colspan="3" style="height: 74px" class="style1">
    <!-- MSCellType="ContentHead" -->
    <img alt="" src="coollogo_com-204063720.png" width="1189" height="102" /></td>
    </tr>
    <tr>
    <td valign="top" rowspan="4" style="width: 225px" class="style1">
    <!-- MSCellType="NavBody" -->
    <img alt="" src="3ofthem.jpg" width="312" height="418" class="style7" /></td>
    <td valign="top" style="height: 107px" class="style1">
    <!-- MSCellType="ContentHead2" -->
    <img alt="" src="VidContest.png" width="623" height="91" /></td>
    <td valign="top" rowspan="4" style="width: 227px" class="style1">
    <!-- MSCellType="NavBody2" -->
    <img alt="" src="3ofthemflipped.jpg" width="312" height="418" /></td>
    </tr>
    <tr>
    <td valign="top" style="height: 105px" class="style3">
    <!-- MSCellType="ContentBody" -->
    To all of xxxxx x xxxx xxxxxx xxxxxx fan base, this is what we are
    looking for.&nbsp; Submit to us your most xxxx xxxxxx for an opportunity
    to be chosen to be in one of our upcoming videos. Two lucky winners will
    be chosen by xxxxx x xxxx xxxxxxs at a later date.&nbsp; Winners will be
    verified prior to being in the video. So be outrageous, be xxxx, be xxx
    but most of all be<br />
    xxxxx x xxxx !!!</td>
    </tr>
    <tr>
    <td valign="top" style="height: 105px" class="style1">
    <!-- MSCellType="ContentBody2" -->
    <strong>Contest Rules<br />
    <span class="style5">●&nbsp; </span><span class="style6">You must also
    include an e-mail address as well as a 2nd way to get in touch with you
    if you are selected<br />
    <span class="style5">●&nbsp; If you are a winner, you agree to have your
    first name and possibly you picture posted on our site</span></span></strong><br />
    <span class="style5">●<strong>&nbsp; </strong> </span><span class="style6">
    <strong>You must be at
    least 18 years of age or older to participate</strong></span><strong><br />
    </strong><span class="style5"><strong>●&nbsp; </strong>
    <span class="style6"><strong>If your picture cannot be verified we will
    chose the runner up&#39;s<br />
    ●&nbsp; You picture
    must contain a clear view of your face</strong><br />
    &nbsp;</span></span><br />
    </td>
    </tr>
    <tr>
    <td valign="top" style="height: 105px; width: 909px" class="style1">
    <!-- MSCellType="ContentFoot" -->
    <br />
    <br />
    All photos should be submitted to the Web Admin for xxxxx x xxxx xxxxxx
    by clicking on the ENTER button below.<br />
    <br />
    <a href="mailto:&#119;ebadmin&#64;xxxxxxxxx&#115;.com">Email The Web Admin</a><br />
    <br />
    </td>
    </tr>
    <tr>
    <td valign="top" colspan="3" style="height: 50px" class="style1">
    <!-- MSCellType="ContentFoot2" -->
    &nbsp;</td>
    </tr>
    </table>


    </body>

    </html>

  • #8
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    If you don't use %, then it will always appear differently in different computers. I think for a beginning scripter I was suggest sticking with px though.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •