Post
Ask Question
osyris zosar

osyris zosar

  • NA
  • 289
  • 26.9k

C# mvc Html and css are not connecting

Mar 5 2021 10:34 PM
For some strange reason my css does not seem to connect Html
 
_layout.cshtml:

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
  6.     <title>@ViewData["Title"] - test4</title>  
  7.       
  8.     <link rel="stylesheet" href="~/css/site.css" />  
  9. </head>  
  10.     
  11.     <body>  
  12.   
  13.         <div id="Navbar">  
  14.             <div id="Navcentered">  
  15.                 <div class="Navbuttons"> Home</div>  
  16.                 <div class="Navbuttons"> Upload</div>  
  17.                 <div class="Navbuttons"> Login</div>  
  18.             </div>  
  19.         </div>  
  20.   
  21.         <div class="Thecontainer">  
  22.             @RenderBody()  
  23.         </div>  
  24.   
  25.         <footer class="border-top footer text-muted">  
  26.             <div class="container">  
  27.                 © 2021 - test4 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>  
  28.             </div>  
  29.         </footer>  
  30.          
  31.     </body>  
  32. </html>  
Site.css
  1. body {  
  2.    
  3.   margin-bottom: 60px;  
  4.   background-color:red;  
  5. }  
  6. .footer {  
  7.   position: absolute;  
  8.   bottom: 0;  
  9.   width: 100%;  
  10.   white-space: nowrap;  
  11.   line-height: 60px;   
  12. }  
  13.   
  14. .container-field{  
  15.     width:100%;  
  16.     height:auto;  
  17.     background-color: white;  
  18.     border-radius: 10px;  
  19.     box-shadow: 5px 5px 15px #929292;  
  20.     display: flex;  
  21.     flex-wrap: wrap;  
  22. }  
  23.   
  24. .card{  
  25.     height: 500px;  
  26.     width: 220px;  
  27.   
  28.     margin: 15px;  
  29.     border-radius:10px;  
  30.     margin-top:20px;  
  31.     box-shadow: 5px 5px 15px #929292;  
  32.    text-align:center;  
  33. }  
  34.   
  35. .card-image {  
  36.     width: 100px;  
  37.     height: 210px;  
  38.     margin: 10px;  
  39.     background-repeat: no-repeat;  
  40.     background-size: contain;  
  41. }  
  42.   
  43. .Thecontainer {  
  44.     width: 60%;  
  45.     padding-right: 15px;  
  46.     padding-left: 15px;  
  47.     margin-right: auto;  
  48.     margin-left: auto;  
  49.     height: 600px;  
  50.     background-color: green;  
  51. }  
  52.   
  53.  #Navbar{  
  54.     height:200px;  
  55.     background-color:green;  
  56.     width:100%;  
  57. }  
  58. #Navcentered{  
  59.     width:70%;  
  60.   
  61. }  
  62. .Navbuttons{  
  63.     width:auto;  
  64.     margin:10px;  
  65.     padding:10px;  
  66.     height: 100%;  
  67.     background-color:blue;  
  68. }  
 In the Index.cshtml it does seem to connect:

  1. @model IEnumerable<test4.Models.Product>  
  2.   
  3. @{  
  4.     ViewData["Title"] = "Index";  
  5. }  
  6.   
  7. <h1>store</h1>  
  8.   
  9. <h2>list here: @ViewBag.Message</h2>  
  10. <h2>last: @ViewBag.Message2</h2>  
  11. <h2>count: @ViewBag.count</h2>  
  12.   
  13. <form asp-controller="Products" asp-action="Index">  
  14.     <p>  
  15.         Title: <input type="text" name="SearchString" />  
  16.         Description: <input type="text" name="Description" />  
  17.         <input type="submit" value="Filter" />  
  18.     </p>  
  19.   
  20. </form>  
  21.   
  22. <div class="container-field">  
  23.   
  24.     @foreach (var item in Model)  
  25.     {  
  26.     <div class="card">  
  27.         <div class="card-image"> <img src="~/Images/Example.jpg" alt="example Picture" width="200" height="200" />  </div>  
  28.         <h2> @Html.DisplayFor(modelItem => item.Title)</h2>  
  29.         <h3> Price: @Html.DisplayFor(modelItem => item.Price)</h3>  
  30.         <p> @Html.DisplayFor(modelItem => item.ProductDescription)</p>  
  31.         <p> stocks: @Html.DisplayFor(modelItem => item.Stock)</p>  
  32.         <a asp-action="Details" asp-route-id="@item.Id">View</a>   
  33.   
  34.     </div>  
  35.     }  
  36.   
  37. </div>  
 

Answers (1)