Solved

StyleSheet For RenderPage and MVC 3

Posted on 2012-03-14
9
611 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 500 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

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…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

770 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