Table design... problem.

Last post 07-04-2009 1:08 AM by ChaitanyaC. 10 replies.

Sort Posts:

  • Table design... problem.

    07-02-2009, 4:23 PM
    • Member
      134 point Member
    • b007
    • Member since 06-21-2008, 8:27 PM
    • Posts 1,106

     Hi.

    I just added a table in my site which I would like it to be in a specific Width and in height 100% on whole page (from Top to Bottom)

    [what I got now it's not on whole height (top to bottom..)

    I did this:

    <head runat="server">
        <title></title>
         <style>
        #Content
            {
                direction: rtl;
                border-style: dashed;
                border-color: Black;
                border-width: 1px;
                text-align: center;
                font-family: Arial;
                font-size: 13px;
                vertical-align: middle;
                margin: 0px auto;
                padding: 0px;
                width: 850px;
                padding-top: 0px;
            }
         </style>
        <asp:ContentPlaceHolder id="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body bgcolor="black" topmargin="0px" style="height:100%;">
        <form id="form1" runat="server"> 
        <div id="Content">
        <table id="Tbl1" runat="server" height="100%" width="100%" bgcolor="White">
        <tr>
        <td>
            <b>Title</b></td>
        </tr>
        <tr>
        <td style="direction: rtl; text-align: right">
            <asp:LoginView ID="LoginView1" runat="server">
                <LoggedInTemplate>
                    Hello
                    <asp:LoginName ID="LoginName1" runat="server" />
                </LoggedInTemplate>
                <AnonymousTemplate>
                    Guest
                </AnonymousTemplate>
            </asp:LoginView>
     <asp:LoginStatus ID="LoginStatus1" runat="server" LoginText="LogIn" 
                LogoutText="LogOff" />
                     
            <asp:HyperLink ID="HyperLink_Admin" runat="server" 
                NavigateUrl="~/Admin/Admin.aspx">Admin</asp:HyperLink>
         <hr style="border-style:dotted; border-width:0.6px; border-color:Gray;" />
        </td>
        </tr>
        <tr>
        <td>
        </td>
        </tr>
        <tr>
        <td><asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </td>
        </tr>
        </table>
            
        </div>
        </form>
    </body>
    </html>
    

    What I did wrong?

    How to fix it?

    Thanks...

     

  • Re: Table design... problem.

    07-03-2009, 2:32 AM
    • Member
      561 point Member
    • harieis
    • Member since 04-23-2009, 12:11 PM
    • Trivandrum
    • Posts 150

     <div id="Content">......  in the "content" u written as the width of the div is 850px..please change that width and add 100%..it will work

     

     

    Please, Mark as Answer if this reply helped you
    ==============================================

    Harikrishnan.S
    Trivandrum,Technopark,
    Kerala,
    India
    harikrishnans82@gmail.com
    ==================================================
  • Re: Table design... problem.

    07-03-2009, 2:49 AM
    • Member
      134 point Member
    • b007
    • Member since 06-21-2008, 8:27 PM
    • Posts 1,106

     I wonna keep the width in a specific size,

    my problem is the height, I want the table to be from bottom to top of the page.

    What should I change?

    Thanks..

  • Re: Table design... problem.

    07-03-2009, 4:20 AM
    • Member
      561 point Member
    • harieis
    • Member since 04-23-2009, 12:11 PM
    • Trivandrum
    • Posts 150

     Hello

     

    Please change the height as 500px(your exac height)..Add as a pixel.

    Please, Mark as Answer if this reply helped you
    ==============================================

    Harikrishnan.S
    Trivandrum,Technopark,
    Kerala,
    India
    harikrishnans82@gmail.com
    ==================================================
  • Re: Table design... problem.

    07-03-2009, 5:09 AM
    • Member
      134 point Member
    • b007
    • Member since 06-21-2008, 8:27 PM
    • Posts 1,106

    Why exactly 500px?

    is it fix to all resolutions?


    Thanks..

     

  • Re: Table design... problem.

    07-03-2009, 5:42 AM
    • Member
      561 point Member
    • harieis
    • Member since 04-23-2009, 12:11 PM
    • Trivandrum
    • Posts 150

     Hello

    We cannot the set the height of  a table/div as %(100%).Only pixel... In your case

    Add this line in the table:

    <table id="Tbl1" runat="server" height="400px" width="100%" bgcolor="White">

    It will work fine in all resoltuion.

     

    Please, Mark as Answer if this reply helped you
    ==============================================

    Harikrishnan.S
    Trivandrum,Technopark,
    Kerala,
    India
    harikrishnans82@gmail.com
    ==================================================
  • Re: Table design... problem.

    07-03-2009, 6:21 AM
    • Member
      134 point Member
    • b007
    • Member since 06-21-2008, 8:27 PM
    • Posts 1,106

     But 400px is not fill my all table from bottom till top...

     

  • Re: Table design... problem.

    07-03-2009, 7:07 AM
    • Member
      561 point Member
    • harieis
    • Member since 04-23-2009, 12:11 PM
    • Trivandrum
    • Posts 150

     I think you are  created a master page.So add this code in the div.

    <div id="Content" style="height:500px;">

    Add the height as per your reqiurement.I jst told 400px.

     

    Please, Mark as Answer if this reply helped you
    ==============================================

    Harikrishnan.S
    Trivandrum,Technopark,
    Kerala,
    India
    harikrishnans82@gmail.com
    ==================================================
  • Re: Table design... problem.

    07-03-2009, 8:35 AM
    • Member
      134 point Member
    • b007
    • Member since 06-21-2008, 8:27 PM
    • Posts 1,106

    But I need it to fit to any resolution of screen / browser,

    So that the Table will be fill from bottom to top of the page..

    What to Do?

  • Re: Table design... problem.

    07-03-2009, 8:51 AM
    Answer
    • Member
      561 point Member
    • harieis
    • Member since 04-23-2009, 12:11 PM
    • Trivandrum
    • Posts 150

     Hello

    Add this style in the div

    style="min-height:500px"..

    In this case, the Low resolution monitor it will display with the scroll bar..Other high resolution Monitors(ex MAC)

    it will be correct ...

    Please, Mark as Answer if this reply helped you
    ==============================================

    Harikrishnan.S
    Trivandrum,Technopark,
    Kerala,
    India
    harikrishnans82@gmail.com
    ==================================================
  • Re: Table design... problem.

    07-04-2009, 1:08 AM
    Answer
    • Member
      636 point Member
    • ChaitanyaC
    • Member since 06-06-2009, 12:30 AM
    • Mumbai
    • Posts 94

    Hey, this is the vary tricky issue in designing, it's tough to give 100 % height to page, but this is the solution for all browsers supported, try.....but i would suggest to give some fixed with and height before you put all your contents inside for handling internal scrolbars.

    ----------------------------------

    <head runat="server">

    <title>Untitled Page</title>

    <style type="text/css">

    body { overflow-y:auto; overflow-x : hidden; position:relative; height: 100%; margin:0 ; padding :0;}

    .dvstyle

    {

    position:fixed; top:0; bottom:0; border: solid 1px black; width:99%; height:99%;

    }

    *html .dvstyle

    {

    position:absolute;top:0;bottom:0;

    }

     

    </style>

    </head>

    <body>

    <form id="form1" runat="server">

    <div class="dvstyle">

    <table>

    <tr>

    <td style=" width: 100%; height: 100%">

    Your contents are here.

    </td>

    </tr>

    </table>

    </div>

    </form>

    </body>

    -------------------------------

    visit this link also:

    http://www.cssplay.co.uk/layouts/fixed.html#

    ** Mark any post that really helps you as “ANSWER” to indicate all other viewers in future for reference; **
    Thnks,
Page 1 of 1 (11 items)