Search code examples
htmlcsslayoutflexbox

Make a small rounded container in _layout.cshtml page

I have the following code on my _Layout.cshtml page:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"] - FeeCalc</title>
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
        <link rel="stylesheet" href="~/FeeCalc.styles.css" asp-append-version="true" />
    </head>
    <body style="background-color:cadetblue">
        <header>
            <nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:100%; ">
                <div class="container-fluid">
                    <span class="navbar-brand" style="display:flex;">
                        <a href="https://www.google.com/">
                            <img src="~/Img/Infoorange.png" alt="ACR" width="80" height="80" class="d-inline-block align-middle mr-2" runat="server" />
            
                        </a>
                        <span style="font-size:25px;color:white;"><span style="color:#e9c46a">SpringField</span><br />company Name</span>
    
                    </span>
          
                </div>
            </nav>
        </header>
        <div class="container-bg">
        <div class="container">
            <main role="main" class="pb-3">
                @RenderBody()
            </main>
        </div>
        </div>

This page looks like this:

enter image description here

I want to put a container in center of white color just like this:

enter image description here

so that I can put HTML control inside the white space. In order to achieve this. I tried to write the following code:

<div style="margin-top: 70px;position:relative;top:50px">
        <div  style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%;" class="container"   >
  <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
    </div>

nothing seems to appear on the page. the page looks the same with no color on the container. How can I make a white color center container on this blue color page.

Any help will be greatly appreciated.

Solution

  • I checked your code, and it seems your container-bg class with the white colored background under navbar-brand class. Add margin-top: 100px; to container-bg class.

     <div class="container-bg">
  <div style="background-color:white;border-radius:10px;align-content:center;align-self:center;vertical-align:middle;width:100%; margin-top: 100px; height: 90px;" class="container">
    <main role="main" class="pb-3">@RenderBody()</main>
  </div>
</div>