We help IT Professionals succeed at work.

StyleSheet For RenderPage and MVC 3

allanau20
allanau20 asked
on
Hi Experts!

Thanks for reading; this is for MVC 3.


Would like to apply the 'footer' style to the RenderPage (~/Shared/_footer.cshtml)

The stylesheet (~/Content/Site.css) has this:

body
{
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    color: #232323;
    background-color: #fff;
}

header,
nav,

footer
{
    padding: 5px;
    font-size: 8pt;
    text-align: center;
    background-color: #CCCCCC;
    font-weight: bold;
    margin-top: 30px;
}

Open in new window


The _footer.cshtml looks like this:

<div id="Footer">
    <div>
        Blah Blah</div>
    <div>
Blah Blah
        </div>
    <div>
        More Blah</div>
</div>

Open in new window


Any ideas?

TIA!
Comment
Watch Question

Research & Development Manager
Commented:
Mmm... adding the following code before <div id="footer">

<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/site.css")" />
jorge_torizResearch & Development Manager

Commented:
And you must fix the footer selector of your css file:

#footer{ ... }

Author

Commented:
Thanks jorge_toriz, added

<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/site.css")" />

Now it looks like this:

<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/site.css")" />

<div id="Footer">
    <div>
Blah Blah
        </div>
    <div>
        More Blah</div>
</div>

Open in new window


Got compiled error:

c:\Visual Studio 2010\Projects\Web\HelloWorld\HelloWorld\Shared\_footer.cshtml(2): error CS0103: The name 'Url' does not exist in the current context

Also, I don't see the '#' for the other sections? ie: Body.

The Site.css was created by default with VS 2010.
jorge_torizResearch & Development Manager

Commented:
Change to:
<link rel="stylesheet" type="text/css" href="/Content/site.css" />

And you can't find the "#" character in body because body is a tag: <body>, but footer is an identifier <div id="footer">

Author

Commented:
Thanks; I tried that, too and it didn't apply.

I've attached the files. Can please you try it out?

Here are the files:

/Content/Site.css
/Controllers/LoadCustomerAndDisplayController.cs
/Shared/_footer.cshtml
/Views/LoadCustomerAndDisplay/Index.cshtml

I"m unable to load '.cshtml' files; so I change it to '.txt'

Thanks again for your help!
files.zip
jorge_torizResearch & Development Manager

Commented:
I removed the header and nav elements of your css file:

body
{
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    color: #232323;
    background-color: #fff;
}

#footer
{
    padding: 35px;
    font-size: 28pt;
    text-align: center;
    background-color: #CCCCCC;
    font-weight: bold;
    margin-top: 30px;
}

Can you press Ctrl + F5 to refresh your browser cache?

Author

Commented:
thanks; so everything is good. I will try it now.

Author

Commented:
Style not applying.

1. Edit the css file
2. F5 from VS 2010
3. Browser shows up. Ctrl + F5
4. Go to page

Any ideas? Thanks!
jorge_torizResearch & Development Manager

Commented:
Can you post the HTML of your browser?, the result of the execution

Explore More ContentExplore courses, solutions, and other research materials related to this topic.