0

New to css. I have a div element, in which there are multiple links in it, now I like to apply css to all of the elements inside the div like below:

#menu {
    top: 150px;
    left: 650px;
    position: absolute;
    color: #151B54;
    font: 10pt;
    font-family: Arial;
}

However this doesn't seem to be working.

Here is the div:

    <div id="menu">
        <asp:HyperLink ID="lnk_Home" runat="server"  
        NavigateUrl="~/Default.aspx">  Home  </asp:HyperLink>
    </span>
    &nbsp;&nbsp;<asp:HyperLink ID="HyperLink14" runat="server" NavigateUrl="~/About/About.aspx" 
    Target="_blank">  About  </asp:HyperLink>
&nbsp;
<asp:HyperLink ID="HyperLink16" runat="server" 
    NavigateUrl="~/About/ContactUs.aspx" Target="_blank">  Contact Us  </asp:HyperLink>
<asp:HyperLink ID="HyperLink17" runat="server" 
    NavigateUrl="~/About/FAQ.aspx" Target="_blank">  FAQ  </asp:HyperLink>
    </div>
2
  • You have a closing tag </span> but it doesn't match anything? Are you sure you're pasting all of the code ?
    – tftd
    Jul 9, 2011 at 4:46
  • 1. What "doesn't seem to be working" 2. What is your HTML output? 3. What do you want to happen?
    – Mog
    Jul 9, 2011 at 4:56

3 Answers 3

1

None of your CSS styles anything inside of the #menu div.The right way would be like this:

div#menu {
    position: absolute;
    top: 150px;
    left: 650px;
}

/* "<asp>" isn't a valid HTML element, but I assume that
 * <asp:Hyperlink> actually generates an HTML anchor */

/* Links also have pseudo-elements that represent their
 * valid statuses.*/
div#menu a,
div#menu a:visited,
div#menu a:hover,
div#menu a:active,
div#menu a:focus {
    color: #151B54;
    font: 10pt;
    font-family: Arial;
}

More information about the pseudo-classes mentioned can be found here: http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes

0

Not exactly sure what you're asking, as you provided ASP.NET code, but to select elements inside of elements via CSS, you can do it like this:

#menu your_link {
  /* Styles */
}

If you could provide the generated HTML, that would be nice.

0

I think you are looking for something like

#menu asp {
  ...styles...
}

This will target all <asp> tags inside the #menu element. Your current style only targets the #menu element, not any of its children.

(Although the <asp> tag is non-valid, you could substitute any type of element and the concept still applies.)


Also, there's a rogue <span> element in your code, and a lot of &nbsp; where CSS can do the job. It should maybe look like this:

<div id="menu">
  <asp:HyperLink ID="lnk_Home" runat="server" NavigateUrl="~/Default.aspx">
    Home</asp:HyperLink>

  <asp:HyperLink ID="HyperLink14" runat="server" NavigateUrl="~/About/About.aspx" Target="_blank">  
    About</asp:HyperLink>

  <asp:HyperLink ID="HyperLink16" runat="server" NavigateUrl="~/About/ContactUs.aspx" Target="_blank">  
    Contact Us</asp:HyperLink>

  <asp:HyperLink ID="HyperLink17" runat="server" NavigateUrl="~/About/FAQ.aspx" Target="_blank">
    FAQ</asp:HyperLink>
</div>
3
  • DV'd your original answer, removed because at least you added something else, but: asp is not an HTML tag - the first part of your answer makes no sense. This question is quite bad as well, so I apologize.
    – Mog
    Jul 9, 2011 at 4:54
  • Thanks for the info and correction. Hopefully regardless of the validity of the tag, the OP will learn something helpful about CSS selectors (which will work on made-up tags also). :)
    – Ben
    Jul 9, 2011 at 4:57
  • No, you've got the wrong idea, it's an asp tag: see here: msdn.microsoft.com/en-us/library/…
    – Mog
    Jul 9, 2011 at 4:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.