[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

StyleSheet For RenderPage and MVC 3

Posted on 2012-03-14
9
Medium Priority
?
645 Views
Last Modified: 2012-03-16
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!
0
Comment
Question by:allanau20
  • 5
  • 4
9 Comments
 
LVL 15

Accepted Solution

by:
jorge_toriz earned 2000 total points
ID: 37722832
Mmm... adding the following code before <div id="footer">

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

Expert Comment

by:jorge_toriz
ID: 37722834
And you must fix the footer selector of your css file:

#footer{ ... }
0
 
LVL 5

Author Comment

by:allanau20
ID: 37722888
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.
0
Get your Disaster Recovery as a Service basics

Disaster Recovery as a Service is one go-to solution that revolutionizes DR planning. Implementing DRaaS could be an efficient process, easily accessible to non-DR experts. Learn about monitoring, testing, executing failovers and failbacks to ensure a "healthy" DR environment.

 
LVL 15

Expert Comment

by:jorge_toriz
ID: 37724864
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">
0
 
LVL 5

Author Comment

by:allanau20
ID: 37726615
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
0
 
LVL 15

Expert Comment

by:jorge_toriz
ID: 37727459
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?
0
 
LVL 5

Author Comment

by:allanau20
ID: 37727463
thanks; so everything is good. I will try it now.
0
 
LVL 5

Author Comment

by:allanau20
ID: 37727478
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!
0
 
LVL 15

Expert Comment

by:jorge_toriz
ID: 37730455
Can you post the HTML of your browser?, the result of the execution
0

Featured Post

Free Backup Tool for VMware and Hyper-V

Restore full virtual machine or individual guest files from 19 common file systems directly from the backup file. Schedule VM backups with PowerShell scripts. Set desired time, lean back and let the script to notify you via email upon completion.  

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month18 days, 23 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question