html.ActionLink put a logo with CSS using a class, logo is never showing up

StackOverflow https://stackoverflow.com/questions/22179123

  •  05-06-2023
  •  | 
  •  

Question

I am trying to put a logo using the CSS but it is not showing up. I tried using the class=site-title

_Layout.cshtml

     <body>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
            </div>
            <div class="float-right">
                <section id="login">
                    @Html.Partial("_LoginPartial")
                </section>
                <nav>
                    <ul id="menu">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("Categorie", "Index", "Categorie")</li>
                        <li>@{Html.RenderAction("CartSummary", "Panier");}</li>

CSS

 .site-title {
     color: #c8c8c8;
     font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
     font-size: 2.3em;
     margin: 0;
 }

 .site-title a, .site-title a:hover, .site-title a:active {
      background: none;
      color: #c8c8c8;
     outline: none;
     text-decoration: none;
 }

 .site-title {
     background: url(../Images/htc_magic_black_open2.jpg) no-repeat top left;
     display: block;
     width: 150px;
     height: 150px;
     text-indent: -9999px; /* hides the link text */
     }

I also tried with this

 <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home", new { @class = "logo" 
     })</p>

Also tried this

 <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home" ,null, new { @class = 
   "logo" })</p>

and the CSS changed to

 .logo {
     background: url(../Images/htc_magic_black_open2.jpg) no-repeat top left;
     display: block;
     width: 150px;
     height: 150px;
     text-indent: -9999px; /* hides the link text */
     }

but I left the class=site-title in front. Any suggestion ?

No correct solution

OTHER TIPS

I can't add a comment as I am newly registered, so unfortunately it has to go in the Answers box...

If you replace the relative "../Images/htc_magic_black_open2.jpg" path with a full URL (i.e. http://www.example.com/images/htc_magic_black_open2.jpg) does the image appear? That would identify if it is a relative path issue.

If you add a "background-color: red" class to your .site-title class, does the box go red? If not, perhaps your CSS isn't being applied.

Finally the logo is showing up. The css was not refreshing. I closed everything including Visual Studio and I tried with the background-color: red and it finally showing up. I deleted the background-color: red; and I added the logo. Thanks for your help.

Here is the css I used.

 .site-title {
    color: #c8c8c8;
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 2.3em;
    margin: 0; 
    background: url(../Images/large-logo.png) no-repeat top left;
    display: block;
    width: 602px;
    height: 132px;
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top