Newbie - Apply CSS To An Element

Guest · Jul 3, 2006

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

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).

Guest · Jul 3, 2006

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

arkRed;height:25px;width:954px;Z-INDEX:
101; LEFT: 7px; POSITION: absolute; TOP: 82px">WELCOME TO THE TEST
WEBSITE</span>
</form>
</body>
</HTML>

Guest · Jul 3, 2006

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.

Laurent Bugnion · Jul 3, 2006

Hi,

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

Guest · Jul 3, 2006

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;
}

Alan Silver · Jul 10, 2006

Chris said:
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

Positioning CSS components	1	Nov 16, 2023
How to apply CSS to visited item in menu control?	1	Oct 13, 2009
How can I hide a div using an event listener on multiple checkboxes?	6	Dec 23, 2022
Need help making the position of an infinite animation sticky	1	Dec 18, 2022
How to paint an element in screen using javascript?	1	Jan 11, 2023
HTML Webpage to CSS Class-Element mapping tool...?	2	Mar 4, 2009
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
I am trying to make an audio player, how do I get the selected file to be playable?	5	Mar 29, 2022

Newbie - Apply CSS To An Element

Guest

Patrice

Guest

Guest

Laurent Bugnion

Guest

Alan Silver

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads