Solved

StyleSheet For RenderPage and MVC 3

Posted on 2012-03-14
9
604 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
 
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
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.

 
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

Suggested Solutions

Title # Comments Views Activity
Icons and Colors for Terms 3 24
Reset asp.net login password 4 31
Centered Image 2 22
manage footer size 4 11
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
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…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

920 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now