Newbie - Apply CSS To An Element

Discussion in 'ASP .Net' started by =?Utf-8?B?Q2hyaXM=?=, Jul 3, 2006.

  1. I need to use CSS to control layout of a label on a webpage. I've added a
    CSS file to my project. I've added a style rule with a Class called vlabel.
    I've built the style I needed with the Style Builder for the vlabel class.

    Now on the webpage the Label has a CSS Class Property. I've added the
    vlabel to this property and the style is not applied.

    I'm not sure what I did wrong here, Please help.

    Thanks.
     
    =?Utf-8?B?Q2hyaXM=?=, Jul 3, 2006
    #1
    1. Advertising

  2. =?Utf-8?B?Q2hyaXM=?=

    Patrice Guest

    Does it work for some other elements ? My first thought would be that your
    HTML page doesn't have a link tag that references the stylesheet (use "view
    source" in your browser to check the html code).

    --
    Patrice

    "Chris" <> a écrit dans le message de news:
    ...
    >I need to use CSS to control layout of a label on a webpage. I've added a
    > CSS file to my project. I've added a style rule with a Class called
    > vlabel.
    > I've built the style I needed with the Style Builder for the vlabel class.
    >
    > Now on the webpage the Label has a CSS Class Property. I've added the
    > vlabel to this property and the style is not applied.
    >
    > I'm not sure what I did wrong here, Please help.
    >
    > Thanks.
     
    Patrice, Jul 3, 2006
    #2
    1. Advertising

  3. No it does not appear to have a link tag. Can you please tell me how to add
    this?
    I'm really not sure. Also here is the output of the view source.....

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <title>Welcome</title>
    <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
    <meta name="vs_defaultClientScript" content="JavaScript">
    <meta name="vs_targetSchema"
    content="http://schemas.microsoft.com/intellisense/ie5">
    </HEAD>
    <body MS_POSITIONING="GridLayout">
    <form name="Form1" method="post" action="Default.aspx" id="Form1"
    style="MARGIN-LEFT: 10px; MARGIN-RIGHT: 10px; TEXT-ALIGN: center">
    <input type="hidden" name="__VIEWSTATE"
    value="dDwyMDQwNjUzNDY2Ozs+CeErRuQscpKMuln2fOn2ZQCU5Hk=" />

    <span id="Label1" class="vLabel"
    style="color:White;background-color:DarkRed;height:25px;width:954px;Z-INDEX:
    101; LEFT: 7px; POSITION: absolute; TOP: 82px">WELCOME TO THE TEST
    WEBSITE</span>
    </form>
    </body>
    </HTML>




    "Patrice" wrote:

    > Does it work for some other elements ? My first thought would be that your
    > HTML page doesn't have a link tag that references the stylesheet (use "view
    > source" in your browser to check the html code).
    >
    > --
    > Patrice
    >
    > "Chris" <> a écrit dans le message de news:
    > ...
    > >I need to use CSS to control layout of a label on a webpage. I've added a
    > > CSS file to my project. I've added a style rule with a Class called
    > > vlabel.
    > > I've built the style I needed with the Style Builder for the vlabel class.
    > >
    > > Now on the webpage the Label has a CSS Class Property. I've added the
    > > vlabel to this property and the style is not applied.
    > >
    > > I'm not sure what I did wrong here, Please help.
    > >
    > > Thanks.

    >
    >
    >
     
    =?Utf-8?B?Q2hyaXM=?=, Jul 3, 2006
    #3
  4. I checked the w3schools website and figured out how to add the link. It
    seems to be working for at least part of the style. The text of the label
    was justified correctly but the label did not extend to the right edge of the
    browser window as hoped. I'll keep playing with the style and see what
    happens. I'll repost if needed, again thank you for your help.

    "Chris" wrote:

    > No it does not appear to have a link tag. Can you please tell me how to add
    > this?
    > I'm really not sure. Also here is the output of the view source.....
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    > <HTML>
    > <HEAD>
    > <title>Welcome</title>
    > <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
    > <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
    > <meta name="vs_defaultClientScript" content="JavaScript">
    > <meta name="vs_targetSchema"
    > content="http://schemas.microsoft.com/intellisense/ie5">
    > </HEAD>
    > <body MS_POSITIONING="GridLayout">
    > <form name="Form1" method="post" action="Default.aspx" id="Form1"
    > style="MARGIN-LEFT: 10px; MARGIN-RIGHT: 10px; TEXT-ALIGN: center">
    > <input type="hidden" name="__VIEWSTATE"
    > value="dDwyMDQwNjUzNDY2Ozs+CeErRuQscpKMuln2fOn2ZQCU5Hk=" />
    >
    > <span id="Label1" class="vLabel"
    > style="color:White;background-color:DarkRed;height:25px;width:954px;Z-INDEX:
    > 101; LEFT: 7px; POSITION: absolute; TOP: 82px">WELCOME TO THE TEST
    > WEBSITE</span>
    > </form>
    > </body>
    > </HTML>
    >
    >
    >
    >
    > "Patrice" wrote:
    >
    > > Does it work for some other elements ? My first thought would be that your
    > > HTML page doesn't have a link tag that references the stylesheet (use "view
    > > source" in your browser to check the html code).
    > >
    > > --
    > > Patrice
    > >
    > > "Chris" <> a écrit dans le message de news:
    > > ...
    > > >I need to use CSS to control layout of a label on a webpage. I've added a
    > > > CSS file to my project. I've added a style rule with a Class called
    > > > vlabel.
    > > > I've built the style I needed with the Style Builder for the vlabel class.
    > > >
    > > > Now on the webpage the Label has a CSS Class Property. I've added the
    > > > vlabel to this property and the style is not applied.
    > > >
    > > > I'm not sure what I did wrong here, Please help.
    > > >
    > > > Thanks.

    > >
    > >
    > >
     
    =?Utf-8?B?Q2hyaXM=?=, Jul 3, 2006
    #4
  5. Hi,

    Chris wrote:
    > I need to use CSS to control layout of a label on a webpage. I've added a
    > CSS file to my project. I've added a style rule with a Class called vlabel.
    > I've built the style I needed with the Style Builder for the vlabel class.
    >
    > Now on the webpage the Label has a CSS Class Property. I've added the
    > vlabel to this property and the style is not applied.
    >
    > I'm not sure what I did wrong here, Please help.
    >
    > Thanks.


    Is the style added inline (in the header of the same page), or in an
    external CSS file? In that second case, the file must be referenced
    using the following syntax:

    <link rel="Stylesheet" type="text/css" href="cssfile.css" />

    This must be placed in the header.

    It would help if you would show some code ;-)

    HTH,
    Laurent
    --
    Laurent Bugnion, GalaSoft
    Software engineering: http://www.galasoft-LB.ch
    Private/Malaysia: http://mypage.bluewin.ch/lbugnion
    Support children in Calcutta: http://www.calcutta-espoir.ch
     
    Laurent Bugnion, Jul 3, 2006
    #5
  6. Hi Laurent,

    Yes, it is an external sheet and adding the link worked, sort of. Where I
    seem to be having difficulty now is using the style correctly. I want the
    label to extend from the left edge of the users browser to the right edge.
    I've tried various position, left, and right, attributes with no luck. Do
    you know how to accomplish this?
    The color works, but positioning the label does not seem to work.

    Thanks
    Below is the code......

    HTML.....

    <%@ Page Language="vb" AutoEventWireup="false" Codebehind="default.aspx.vb"
    Inherits="devtest.WebForm1"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <title>Welcome</title>
    <link rel="stylesheet" type="text/css" href="Stylesheet1.css">
    <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
    <meta name="vs_defaultClientScript" content="JavaScript">
    <meta name="vs_targetSchema"
    content="http://schemas.microsoft.com/intellisense/ie5">
    </HEAD>
    <body MS_POSITIONING="GridLayout">
    <form id="Form1" method="post" runat="server" style="MARGIN-LEFT: 10px;
    MARGIN-RIGHT: 10px; TEXT-ALIGN: center">
    <asp:Label id="Label1" style="Z-INDEX: 101; LEFT: 7px; POSITION:
    absolute; TOP: 82px" runat="server"
    Width="954px" Height="25px" ForeColor="White" CssClass="vLabel">WELCOME
    TO THE TEST WEBSITE</asp:Label>
    </form>
    </body>
    </HTML>


    AND CSS....


    ..vLabel
    {
    left:10px;
    right:10px;
    background-image: none;
    position: absolute;
    background-color: #000000;
    }








    "Laurent Bugnion" wrote:

    > Hi,
    >
    > Chris wrote:
    > > I need to use CSS to control layout of a label on a webpage. I've added a
    > > CSS file to my project. I've added a style rule with a Class called vlabel.
    > > I've built the style I needed with the Style Builder for the vlabel class.
    > >
    > > Now on the webpage the Label has a CSS Class Property. I've added the
    > > vlabel to this property and the style is not applied.
    > >
    > > I'm not sure what I did wrong here, Please help.
    > >
    > > Thanks.

    >
    > Is the style added inline (in the header of the same page), or in an
    > external CSS file? In that second case, the file must be referenced
    > using the following syntax:
    >
    > <link rel="Stylesheet" type="text/css" href="cssfile.css" />
    >
    > This must be placed in the header.
    >
    > It would help if you would show some code ;-)
    >
    > HTH,
    > Laurent
    > --
    > Laurent Bugnion, GalaSoft
    > Software engineering: http://www.galasoft-LB.ch
    > Private/Malaysia: http://mypage.bluewin.ch/lbugnion
    > Support children in Calcutta: http://www.calcutta-espoir.ch
    >
     
    =?Utf-8?B?Q2hyaXM=?=, Jul 3, 2006
    #6
  7. =?Utf-8?B?Q2hyaXM=?=

    Alan Silver Guest

    In article <>, Chris
    <> writes
    >Where I seem to be having difficulty now is using the style correctly.
    >I want the label to extend from the left edge of the users browser to
    >the right edge. I've tried various position, left, and right,
    >attributes with no luck. Do you know how to accomplish this? The color
    >works, but positioning the label does not seem to work.

    <snip>

    What do you mean by "want the label to extend from the left edge of the
    users browser to the right edge"? The label will normally only extend as
    far as the text inside it, so if the text is not long enough to reach
    the full width of the window, then the label won't be.

    Also, why are you doing this? I'm not clear exactly what you expect to
    happen. What do you want to extend?

    Either way, it looks to me as though this is a poor way of laying out
    elements. It might pay to spend some time learning CSS positioning
    thoroughly, without the complication of doing it inside ASP.NET. You
    might also find that the Literal control is more useful than the Label
    as it doesn't add any spurious markup.

    HTH

    --
    Alan Silver
    (anything added below this line is nothing to do with me)
     
    Alan Silver, Jul 10, 2006
    #7
    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. Shiperton Henethe
    Replies:
    5
    Views:
    1,164
    Adrienne
    Sep 19, 2003
  2. WindAndWaves

    css element within element....

    WindAndWaves, Feb 2, 2005, in forum: HTML
    Replies:
    29
    Views:
    981
    Leif K-Brooks
    Feb 3, 2005
  3. Stefan Siegl
    Replies:
    1
    Views:
    994
    Marrow
    Jul 18, 2003
  4. vunet
    Replies:
    6
    Views:
    379
    Neredbojias
    Jan 15, 2008
  5. HANM
    Replies:
    2
    Views:
    762
    Joseph Kesselman
    Jan 29, 2008
Loading...

Share This Page