CSS Layout question - how to duplicate a table layout with CSS

Discussion in 'ASP .Net' started by Eric, Dec 23, 2004.

  1. Eric

    Eric Guest

    I'm trying to reproduce the following table layout using CSS only and am
    having some trouble with it. I'd like them to look identical but I'm having
    trouble sizing the labels properly as it doesnt seem to be working
    correctly:

    Here's the table:

    <table class="Table1" cellSpacing="0" cellPadding="0"
    borderColorLight="white" border="1">
    <tr class="HeaderTr">
    <td align="center">Static Reports</td>
    <td align="center">Real Time Reports</td>
    <td align="center">Daily Reports</td>
    <td align="center">Month End Reports</td>
    </tr>
    <tr>
    <td align="center"><asp:label id="lStaticUpdateTime" RUNAT="server"
    WIDTH="173px"></asp:label></td>
    <td align="center"><asp:label id="lCurrentReportsTime"
    RUNAT="server" WIDTH="173px"></asp:label></td>
    <td align="center"><asp:dropdownlist id="dDailyDate" RUNAT="server"
    WIDTH="173px"></asp:dropdownlist></td>
    <td align="center"><asp:dropdownlist id="dEomDate" RUNAT="server"
    WIDTH="173px"></asp:dropdownlist></td>
    </tr>
    </table>

    Here's the style sheet entry for the table.
    ..Table1
    {
    background-color: #6699cc;
    font-family: Verdana, Arial;
    font-size: 11px;
    color: white;
    border: 0px;
    text-align: left;
    font-weight: bold;
    }
    Eric, Dec 23, 2004
    #1
    1. Advertising

  2. Eric

    Eric Guest

    Ah, part of the problem is Visual Studio doesnt display it correctly in
    design mode when using CSS. You have to use View in Browser to get what it
    really looks like. Although I'm not sure how to remove the spacing between
    labels, it looks closer now.
    Is there any way to specify a percentage size? I tried Width=25% hoping
    that would make the label 25% the width of the container but that didnt
    work.
    Here's my first attempt using solely CSS. It looks bad in VS design mode
    but ok in a browser:

    <asp:panel id="Panel1" style="Z-INDEX: 101; LEFT: 40px; POSITION:
    absolute; TOP: 40px" runat="server"
    CssClass="ReportTypes">
    <asp:Label id="lblStatic" runat="server"
    CSSclass="QuarterLabel">Static</asp:Label>
    <asp:Label id="lblCurrent" runat="server" CSSclass="QuarterLabel">Real
    Time</asp:Label>
    <asp:Label id="lblDaily" runat="server"
    CSSclass="QuarterLabel">Daily</asp:Label>
    <asp:Label id="lblMonthEnd" runat="server" CssClass="QuarterLabel">Month
    End</asp:Label>
    <asp:Label id="txtStatic" CssClass="QuarterLabel"
    Runat="server">12/4/2004</asp:Label>
    <asp:Label id="txtCurrent" CssClass="QuarterLabel"
    Runat="server">12/5/2004</asp:Label>
    <asp:DropDownList id="ddlDaily" CssClass="QuarterLabel"
    Runat="server"></asp:DropDownList>
    <asp:DropDownList id="ddlMonthEnd" CssClass="QuarterLabel"
    Runat="server"></asp:DropDownList>
    </asp:panel>

    ..QuarterLabel
    {
    border: solid 1 black;
    position: relative;
    text-align: center;
    width: 173px;
    }

    "Eric" <> wrote in message
    news:...
    > I'm trying to reproduce the following table layout using CSS only and am
    > having some trouble with it. I'd like them to look identical but I'm

    having
    > trouble sizing the labels properly as it doesnt seem to be working
    > correctly:
    >
    > Here's the table:
    >
    > <table class="Table1" cellSpacing="0" cellPadding="0"
    > borderColorLight="white" border="1">
    > <tr class="HeaderTr">
    > <td align="center">Static Reports</td>
    > <td align="center">Real Time Reports</td>
    > <td align="center">Daily Reports</td>
    > <td align="center">Month End Reports</td>
    > </tr>
    > <tr>
    > <td align="center"><asp:label id="lStaticUpdateTime"

    RUNAT="server"
    > WIDTH="173px"></asp:label></td>
    > <td align="center"><asp:label id="lCurrentReportsTime"
    > RUNAT="server" WIDTH="173px"></asp:label></td>
    > <td align="center"><asp:dropdownlist id="dDailyDate"

    RUNAT="server"
    > WIDTH="173px"></asp:dropdownlist></td>
    > <td align="center"><asp:dropdownlist id="dEomDate" RUNAT="server"
    > WIDTH="173px"></asp:dropdownlist></td>
    > </tr>
    > </table>
    >
    > Here's the style sheet entry for the table.
    > .Table1
    > {
    > background-color: #6699cc;
    > font-family: Verdana, Arial;
    > font-size: 11px;
    > color: white;
    > border: 0px;
    > text-align: left;
    > font-weight: bold;
    > }
    >
    >
    >
    Eric, Dec 23, 2004
    #2
    1. Advertising

  3. Eric

    bruce barker Guest

    there is no css equalivent value for cellpadding and cellspacing, as this is
    a table only attribute.

    -- bruce (sqlwork.com)

    "Eric" <> wrote in message
    news:...
    | I'm trying to reproduce the following table layout using CSS only and am
    | having some trouble with it. I'd like them to look identical but I'm
    having
    | trouble sizing the labels properly as it doesnt seem to be working
    | correctly:
    |
    | Here's the table:
    |
    | <table class="Table1" cellSpacing="0" cellPadding="0"
    | borderColorLight="white" border="1">
    | <tr class="HeaderTr">
    | <td align="center">Static Reports</td>
    | <td align="center">Real Time Reports</td>
    | <td align="center">Daily Reports</td>
    | <td align="center">Month End Reports</td>
    | </tr>
    | <tr>
    | <td align="center"><asp:label id="lStaticUpdateTime"
    RUNAT="server"
    | WIDTH="173px"></asp:label></td>
    | <td align="center"><asp:label id="lCurrentReportsTime"
    | RUNAT="server" WIDTH="173px"></asp:label></td>
    | <td align="center"><asp:dropdownlist id="dDailyDate"
    RUNAT="server"
    | WIDTH="173px"></asp:dropdownlist></td>
    | <td align="center"><asp:dropdownlist id="dEomDate" RUNAT="server"
    | WIDTH="173px"></asp:dropdownlist></td>
    | </tr>
    | </table>
    |
    | Here's the style sheet entry for the table.
    | .Table1
    | {
    | background-color: #6699cc;
    | font-family: Verdana, Arial;
    | font-size: 11px;
    | color: white;
    | border: 0px;
    | text-align: left;
    | font-weight: bold;
    | }
    |
    |
    |
    bruce barker, Dec 23, 2004
    #3
  4. "Eric" <> a écrit dans le message de news:
    ...
    > Ah, part of the problem is Visual Studio doesnt display it correctly in
    > design mode when using CSS. You have to use View in Browser to get what
    > it
    > really looks like. Although I'm not sure how to remove the spacing
    > between
    > labels, it looks closer now.


    Generally speaking, Visual Studio seems to behave somewhat like IE5, even if
    you are using IE6 / DOCTYPE detection for your aspx.
    Michel de Becdelièvre, Dec 23, 2004
    #4
  5. Eric

    clintonG Guest

    Actually, that is a misleading statement bruce. The CSS box model [1]
    supports such constructs that can be applied to any HTML element (when using
    the div) noting that IE requires the infamous 'box model hack' to support
    such constructs.

    --
    <%= Clinton Gallagher
    METROmilwaukee "Regional Information Services"
    NET csgallagher AT metromilwaukee.com
    URL http://clintongallagher.metromilwaukee.com/

    [1] http://webdesign.about.com/library/weekly/aa121602a.htm



    "bruce barker" <> wrote in message
    news:%...
    > there is no css equalivent value for cellpadding and cellspacing, as this

    is
    > a table only attribute.
    >
    > -- bruce (sqlwork.com)
    >
    > "Eric" <> wrote in message
    > news:...
    > | I'm trying to reproduce the following table layout using CSS only and am
    > | having some trouble with it. I'd like them to look identical but I'm
    > having
    > | trouble sizing the labels properly as it doesnt seem to be working
    > | correctly:
    > |
    > | Here's the table:
    > |
    > | <table class="Table1" cellSpacing="0" cellPadding="0"
    > | borderColorLight="white" border="1">
    > | <tr class="HeaderTr">
    > | <td align="center">Static Reports</td>
    > | <td align="center">Real Time Reports</td>
    > | <td align="center">Daily Reports</td>
    > | <td align="center">Month End Reports</td>
    > | </tr>
    > | <tr>
    > | <td align="center"><asp:label id="lStaticUpdateTime"
    > RUNAT="server"
    > | WIDTH="173px"></asp:label></td>
    > | <td align="center"><asp:label id="lCurrentReportsTime"
    > | RUNAT="server" WIDTH="173px"></asp:label></td>
    > | <td align="center"><asp:dropdownlist id="dDailyDate"
    > RUNAT="server"
    > | WIDTH="173px"></asp:dropdownlist></td>
    > | <td align="center"><asp:dropdownlist id="dEomDate"

    RUNAT="server"
    > | WIDTH="173px"></asp:dropdownlist></td>
    > | </tr>
    > | </table>
    > |
    > | Here's the style sheet entry for the table.
    > | .Table1
    > | {
    > | background-color: #6699cc;
    > | font-family: Verdana, Arial;
    > | font-size: 11px;
    > | color: white;
    > | border: 0px;
    > | text-align: left;
    > | font-weight: bold;
    > | }
    > |
    > |
    > |
    >
    >
    clintonG, Dec 24, 2004
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rio
    Replies:
    4
    Views:
    1,172
  2. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    979
  3. Replies:
    1
    Views:
    560
    John Timney \(MVP\)
    Jun 19, 2006
  4. Habib

    Css-Layout vs Table-Layout

    Habib, Jun 19, 2006, in forum: HTML
    Replies:
    15
    Views:
    984
    Wÿrm
    Jun 20, 2006
  5. sso
    Replies:
    6
    Views:
    572
    Roedy Green
    Apr 30, 2009
Loading...

Share This Page