We help IT Professionals succeed at work.

ASP.net - pulling style into .css > masterpage> .aspx issue

GlobaLevel
GlobaLevel used Ask the Experts™
on
Added a new item to my asp.net a .css...but it is not working for me...unexpected character sequence...


 <style type="text/css">
        html
        {
            background-color:silver;
        }
        .navigation
        {
            float:left;
            width:280px;
            height:500px;
            padding:20px;
            background-color:#eeeeee;
        }
        .content
        {
            float:left;
            width:350px;
            height:500px;
            padding:20px;
            background-color:white;
        }
        .menuItem
        {
            border:Outset 1px black;
            background-color:Gray;
            font:14px Arial;
            color:White;
            padding:8px;
        }
    </style>
    <title>Menu Navigate</title>
</head>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2015

Commented:
Not seeing anything wrong with what you posted. Can you provide more code, specific error message?
GlobaLevelProgrammer

Author

Commented:
issue is with the contentplaceholder(MP)...content(.aspx)--->Left_Side_Nav



here is the menuItem.css:

-=-=-=-=-=
  html
        {
            background-color:silver;
        }
        .navigation
        {
            float:left;
            width:280px;
            height:500px;
            padding:20px;
            background-color:#eeeeee;
        }
        .content
        {
            float:left;
            width:350px;
            height:500px;
            padding:20px;
            background-color:white;
        }
        .menuItem
        {
            border:Outset 1px black;
            background-color:Gray;
            font:14px Arial;
            color:White;
            padding:8px;
        }
 


-=-=-=-=-=


here is the masterpage....

-=-=-=-=

<%@ Master Language="VB" AutoEventWireup="false"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <style type="text/css">
        html
        {
            background-color:white;
            font:14px Georgia,Serif;
        }
        .content
        {
            width:700px;
            margin:auto;            
            background-color:white;
            padding:10px;
        }
        .header
        {
            width:700px;
            height:80px;
            border:1px solid grey;
        }

   
        .breadCrumb
        {
            width:700px;
            height:30px;
            border:1px solid red;
        }
        .menu
        {
            width:700px;
            height:40px;
            border:1px solid blue;
        }
        .centerSection
        {
            width:700px;
            height:302px;
        }
        .leftSide
        {
            width:148px;
            height:300px;
            border:1px solid green;
            float:left;
        }
        .mainContent
        {
            width:548px;
            height:300px;
            border:1px solid orange;
            float:right;
        }
        .upperFooter
        {
            width:700px;
            height:80px;
            border:1px solid brown;
        }
        .footer
        {
            width:700px;
            height:60px;
            border:1px solid grey;
        }
        </style>
       
       
    <title>Site Master</title>
</head>
<body>
<form id="form1" runat="server">    
<div class="content">
    <div class="header">
        <asp:contentplaceholder id="Header" runat="server">    
        </asp:contentplaceholder>
    </div>

    <div class="menu">
        <asp:contentplaceholder id="Menu" runat="server">
        </asp:contentplaceholder>
    </div>
   
   
    <div class="breadCrumb">
        <asp:contentplaceholder id="Bread_Crumb" runat="server">        
        </asp:contentplaceholder>
    </div>
   
   
    <div class="centerSection">
        <div class="leftSide">
            <asp:contentplaceholder id="Left_Side_Nav" runat="server">  
            <link href="menuItem.css" rel="stylesheet" type="text/css" />
       
            </asp:contentplaceholder>
        </div>
       
       
        <div class="mainContent">
            <asp:contentplaceholder id="Main_Content" runat="server">              
            </asp:contentplaceholder>
        </div>
    </div>
   
   
    <div class="upperFooter">
        <asp:contentplaceholder id="Upper_Footer" runat="server">        
        </asp:contentplaceholder>
    </div>  
   
   
    <div class="footer">    
        <asp:contentplaceholder id="Footer" runat="server">              
        </asp:contentplaceholder>
    </div>        
</div>
</form>
</body>
</html>




-=-=-=-=

here is a content page I ma trying to pull the masterpage...pulling hte .css....

-=-=-=-=-=
<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Site_Home.Master" title="Untitled Page" %>

<script runat="server">

    Sub ImageButton_Home_Click(ByVal sender As Object, ByVal e As ImageClickEventArgs) Handles ImageButton_Home.Click
        Response.Redirect("Home.aspx")
    End Sub
   
    Sub Imagebutton_Product_Click(ByVal sender As Object, ByVal e As ImageClickEventArgs) Handles Imagebutton_Product.Click
        Response.Redirect("Product.aspx")
    End Sub
   
    Sub Imagebutton_Support_Click(ByVal sender As Object, ByVal e As ImageClickEventArgs) Handles Imagebutton_Support.Click
        Response.Redirect("Support.aspx")
    End Sub
   
    Sub Imagebutton_About_Click(ByVal sender As Object, ByVal e As ImageClickEventArgs) Handles Imagebutton_About.Click
        Response.Redirect("About.aspx")
    End Sub

</script>
 
<asp:Content ID="Content1" ContentPlaceHolderID="Header" runat="server">  
    <div>        
        <asp:image id="Image1"
            imageUrl="App_Data/Graphics/t3_DL_MASTER_Home_BANNER_TOP.jpg"
            runat="Server">      
        </asp:image>
    </div>
</asp:Content>


<asp:Content ID="Content2" ContentPlaceHolderID="Bread_Crumb" runat="server">

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Menu" runat="server">
   
    <asp:image id="ImageButton_Top_Banner"
      imageUrl="App_Data/Graphics/t3_DL_MASTER_Home_LEFT_BANNER.jpg"
      runat="Server">      
    </asp:image>
           
    <asp:imagebutton id="ImageButton_Home"
      imageUrl="App_Data/Graphics/t3_DL_MASTER_SUPPORT_HOMEPAGE.jpg"
      alternatetext="Go to the Home Page"
      postbackurl="Home.aspx"
      runat="Server">      
    </asp:imagebutton>
   
    <asp:imagebutton id="Imagebutton_Product"
      imageUrl="App_Data/Graphics/t3_DL_MASTER_SUPPORT_PRODUCTS.jpg"
      alternatetext="Go to Product Page"
      postbackurl="Products.aspx"
      runat="Server">    
    </asp:imagebutton>
   
    <asp:imagebutton id="Imagebutton_Support"
      imageUrl="App_Data/Graphics/t3_DL_MASTER_SUPPORT_SUPPORT.jpg"
      alternatetext="Go to Support Page"
      postbackurl="Support.aspx"
      runat="Server" Width="113px">      
    </asp:imagebutton>
   
    <asp:imagebutton id="Imagebutton_About"
      imageUrl="App_Data/Graphics/t3_DL_MASTER_SUPPORT_ABOUT.jpg"
      alternatetext="Go to Support Page"
      postbackurl="About.aspx"
      runat="Server">      
    </asp:imagebutton>

</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="Main_Content" runat="server">

</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="Upper_Footer" runat="server">

</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="Footer" runat="server">

    <center>Copyright &copy; 2010 by DhhcLouity</center>
</asp:Content>


<asp:Content ID="Content8" runat="server" contentplaceholderid="Left_Side_Nav">


   
   

       <asp:Menu
        id="Menu1"
        DataSourceID="srcSiteMap"
        StaticMenuItemStyle-CssClass="menuItem"
        DynamicMenuItemStyle-CssClass="menuItem"
        Runat="server" />
       
   



</asp:Content>





-=-=-=-
GlobaLevelProgrammer

Author

Commented:
the goal os to try to create a vertical menu in the left side nav area on various pages....i couldnt have more than one css pasted in the masterpage, so I thought I would create a separate file for it...
GlobaLevelProgrammer

Author

Commented:
ERROR:"The Css is not defined"



StaticMenuItemStyle-CssClass="menuItem"
        DynamicMenuItemStyle-CssClass="menuItem"
Top Expert 2015

Commented:
Separate file is fine for the css, but if you want it to apply only to the menu items, you will want to remove this entry from your content block...
 
            <link href="menuItem.css" rel="stylesheet" type="text/css" />

...and instead rely on the CssClass="menuItem" to handle the css. This will cover both static and dynamic.

Also, you should have an asp:SiteMapDataSource below your asp:Menu:
<asp:Menu
        id="Menu1"
        DataSourceID="srcSiteMap"
        StaticMenuItemStyle-CssClass="menuItem"
        DynamicMenuItemStyle-CssClass="menuItem"
        Runat="server" />

<asp:SiteMapDataSource ID="srcSiteMap" runat="server"
                ShowStartingNode="False" />

You did not post your Web.sitemap file, so I could not test with your menu items.

Commented:
It seems like you haven't referenced CSS in master page..

if not then reference it like this...

<head id="Head1" runat="server">

<link href="menuItem.css" rel="stylesheet" type="text/CSS" />
Top Expert 2015

Commented:
@rushShah,
@GlobaLevel is looking to use the css he posted originally to affect only the menu items. If it is referenced in the head section, it will affect the whole page and there are conflicting entries.
GlobaLevelProgrammer

Author

Commented:
tommyBoy...

Where would I see this...do I have to create first?
Top Expert 2015

Commented:
Yes, you need a Web.sitemap file to tell the asp:Menu what items to include in the list. Or you can add items programatically.

I have attached a generic Web.sitemap file you can modify to suite your needs. It has both static and dynamic menus. You must remove the .txt file extension. I only added that because EE does not allow upload of the .sitemap extension.
Web.sitemap.txt
GlobaLevelProgrammer

Author

Commented:
>>You did not post your Web.sitemap file, so I could not test with your menu items.

tommyBoy...

Where would I see this...do I have to create first?
GlobaLevelProgrammer

Author

Commented:
I am starting to see menu items in my menu control in design time...however they are not nesting...


I still get an error on the ="menuItem"

"The class ...is not defined"

  <asp:Menu
        id="Menu1"
        DataSourceID="srcSiteMap"
        StaticMenuItemStyle-CssClass="menuItem"
        DynamicMenuItemStyle-CssClass="menuItem"
        Runat="server" Width="79px" >
       
<StaticMenuItemStyle CssClass="menuItem"></StaticMenuItemStyle>

<DynamicMenuItemStyle CssClass="menuItem"></DynamicMenuItemStyle>
       </asp:Menu>
       
-=-=-=
web.sitemap
-=-=-=
im jut testing at this point...but I was expecting the home page to also nest under the About...

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="~/Support.aspx" title="Support"  description="">
        <siteMapNode url="~/About.aspx" title="About"  description="" />    <---nest
            <siteMapNode url="~/Home.aspx" title="Home"  description="" />
        <siteMapNode url="~/Home.aspx" title="Home"  description="" />
    </siteMapNode>
</siteMap>
Top Expert 2015

Commented:
Nesting would look like this:
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
            <siteMapNode url="~/Support.aspx" title="Support"  description="">
                  <siteMapNode url="~/About.aspx" title="About"  description="" >
                        <siteMapNode url="" title="Home"  description="" />                                    
                  </siteMapNode>
                  <siteMapNode url="~/Home.aspx" title="Home"  description="" />
            </siteMapNode>
      </siteMap>

But the nested 'Home' would have to direct to a different page because you cannot have two links to the same page in one asp:Menu.

My apologies to @rushShah, the menuItem.css does have to be referenced in the head tag. Pleas add...
 
            <link href="menuItem.css" rel="stylesheet" type="text/css" />

...to the head tag of your master page.

You will need to work on your menuItem.css file so the entries are relevant to the menu.
Top Expert 2015
Commented:
"instead rely on the CssClass="menuItem" to handle the css. This will cover both static and dynamic"

This statement was not accurate. I was just experimenting and CssClass="menuItem" only affects the static items. Use:

        StaticMenuItemStyle-CssClass="menuItem"
        DynamicMenuItemStyle-CssClass="subItem"

in your Menu definition.
Attached is the menuItem.css file I was experimenting with.

You can also set styles by using tags like these in your definition:
              <DynamicMenuStyle BackColor="#B5C7DE" />
              <DynamicSelectedStyle BackColor="#507CD1" />
              <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
              <DynamicHoverStyle BackColor="#284E98" Font-Bold="False"
                ForeColor="White" />
              <StaticHoverStyle BackColor="#284E98" Font-Bold="False"
                ForeColor="White" />
.menuItem
{
	background-color:silver;
	font:14pt Arial;
	color:White;
	padding:5px;
}
.subItem
{
	padding:5px;
	background-color:silver;
	font:14pt Arial;
	color:White;
}
a:hover
{
	color:Blue;
}
a:visited
{
	color:Purple;
}

Open in new window

GlobaLevelProgrammer

Author

Commented:
I was going to ask how can I control the background color...font..bold..underline...of the menu


I suppose this is going in the <asp:menu>....tag on the content page...

  <DynamicMenuStyle BackColor="#B5C7DE" />
              <DynamicSelectedStyle BackColor="#507CD1" />
              <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
              <DynamicHoverStyle BackColor="#284E98" Font-Bold="False"
                ForeColor="White" />
              <StaticHoverStyle BackColor="#284E98" Font-Bold="False"
                ForeColor="White" />
Top Expert 2015

Commented:
Yes, nested inside the asp:Menu tags. You can use the css file method or the menu tags or a combination of both.
GlobaLevelProgrammer

Author

Commented:
If I wanted to use javascript I could paste that in there too in between the <asp:content>...</asp:content> on the content page...do I need to include html tags in there as well?
Top Expert 2015

Commented:
Javascript is ok as long as it's between script tags. Negative on the html tags or body tags. The master page takes care of those.
GlobaLevelProgrammer

Author

Commented:
tommyBoy, you have been a great help...thanks