CODEWITHSUNDEEP
htmlcss
Adrian
Adrian

Reputation: 3438

Automatic margins in top side nav bar?

I noticed every time I try to make a nav bar I have a left and top margin of about 8px that is just there.. I have no idea where this came from as my css file is small and I do not have that code anywhere. I'm beginning to think it's some type of standard and perhaps I am doing it all wrong. How would I overcome this problem? I added a -8px margin to the left and top of the tool bar and it is now flush with the browser; however, now there is empty space if the user horizontally scrolls to the right.

Take a look at the margins on the top nav bar

CSS

body {
}

.navbar-container {
width: 100%;
background-color: #252122;
/*margin-left:-8px;
margin-top:-8px;*/
}

    .navbar-container table {
    width: auto;
    }


.classifieds-container {
overflow: hidden;
z-index: -1;
top: 40px;
left: 0;
right: 0;
display: block;
width: 960px;
padding-bottom: 25px;
background: #fff;
box-shadow: 1px 0 7px;
font: 11px "Arial",sans-serif;
color: #000;
/*line-height: 59px;*/
}

    .classifieds-container label {
    color: blue;
    }

        .classifieds-container label:hover {
        color: red;
        text-decoration: underline;
        }

    .classifieds-container table {
    width: 960px;
    }

    .classifieds-container .col {
    float: left;
    margin-left: 15px;
    }

.col-one {
margin-top: 60px;
float: left;
margin-left: 200px;
max-width: 175px;
text-wrap: normal;
}

    .col-one h3 {
    text-align: center;
    }

.row-splitter {
border-bottom: solid;
border-width: 1px;
border-color: gray;
margin-top: 5px;
margin-bottom: 5px;
}

.classified-link-descriptor {
color: gray;
text-decoration: none;
font: 11px "Arial",sans-serif;
margin-bottom: 5px;
display: block;
}

nav {
display: block;
}

.logo-header {
height: 35px;
width: auto;
float: right;
}

HTML

<body>
 <nav>
    <div id="Navigation">
        <div class="navbar-container">
            <table>
                <tbody>
                    <tr>
                        <td colspan="2">

                            <img class="logo-header" src="~/Content/logo_black_background.png" />

                        </td>

                        <td colspan="6">
                            <div>
                                @(Html.Kendo().Menu()
  .Name("Menu")
  .Items(items =>
  {
      items.Add()
          .Text("Home");
      items.Add()
          .Text("Classifieds")
          .Content(@<text>
                                <div class="classifieds-container">
                                    <div id="col1" class="col">
                                        <div id="col1-row1">
                                            <h2>Auto</h2>
                                        </div>
                                        <div class="row-splitter">
                                        </div>
                                        <div>
                                            @*@Html.ActionLink("Custom Builds", "Index", "ResultsList", new { TypeOfPart = gcaMusicExchange.StaticData.ItemType.Build }, new { @class = "classified-link" })*@
                                            <label id="Custom-Builds">Custom Builds</label>
                                            <div class="classified-link-descriptor">Modified vehicles ready to drive</div>
                                            @*@Html.ActionLink("Shells", "Index", "ResultsList", new { TypeOfPart = gcaMusicExchange.StaticData.ItemType.Shell }, new { @class = "classified-link" })*@
                                            <label id="Shells">Shells</label>
                                            <div class="classified-link-descriptor">Non-running vehicles for parts</div>
                                            @*@Html.ActionLink("Stockers", "Index", "ResultsList", new { TypeOfPart = gcaMusicExchange.StaticData.ItemType.Stock }, new { @class = "classified-link" })*@
                                            <label id="Stockers">Stockers</label>
                                            <div class="classified-link-descriptor">Stock vehicles ready to drive</div>
                                            @* @Html.ActionLink("All Types", "Index", "ResultsList", new { TypeOfPart = gcaMusicExchange.StaticData.ItemType.AllTypesOfVehicles }, new { @class = "classified-link" })*@
                                            <label id="All-Types">All Types</label>
                                            <div class="classified-link-descriptor">Browse all types of vehicles in one search</div>
                                            @* @Html.ActionLink("By Year, Make, & Model", "VehiclesByMake", "Browse", null, new { @class = "classified-link" })*@
                                            <label id="YearMakeModel">By Year, Make, & Model</label>
                                            <div class="classified-link-descriptor">Search by specific year, make, and model</div>
                                        </div>
                                    </div>
                                    <div id="col2" class="col">
                                        <div id="col2-row1">
                                            <h2>Parts</h2>
                                        </div>
                                        <div class="row-splitter">
                                        </div>
                                        <div class="auto-links">
                                            <label id="Browse-all-parts">Browse all parts</label>
                                            @*@Html.ActionLink("Browse all parts", "Index", "ResultsList", null, new { @class = "classified-link" })*@
                                            <div class="classified-link-descriptor">Browse all parts with no discrimination!</div>
                                            <label id="Browse-by-vehicle-application">Browse by vehicle application</label>
                                            @*@Html.ActionLink("Browse by vehicle application", "PerformancePartsByVehicle", "Browse", null, new { @class = "classified-link" })*@
                                            <div class="classified-link-descriptor">By year, make, and model</div>
                                            @*@Html.ActionLink("Browse by part category", "PerformancePartsByCategory", "Browse", null, new { @class = "classified-link" })*@
                                            <label id="Browse-by-part-category">Browse by part category</label>
                                            <div class="classified-link-descriptor">By category (e.g. turbos, intake, engine builds, etc.)</div>
                                            @*@Html.ActionLink("Browse by part manufacturer", "PerformancePartsByManufacturerLetter", "Browse", null, new { @class = "classified-link" })*@
                                            <label id="Browse-by-part-manufacturer">Browse by part manufacturer</label>
                                            <div class="classified-link-descriptor">By manufacturer (e.g. Blouch, Stance, K&N, AEM, etc.)</div>
                                        </div>
                                    </div>
                                    <div id="col3" class="col">
                                        <div id="col3-row1">
                                            <h2>Wheels</h2>
                                        </div>
                                        <div class="row-splitter">
                                        </div>
                                        <div class="auto-links">
                                            @*@Html.ActionLink("Browse all wheels", "Index", "ResultsList", null, new { @class = "classified-link" })*@
                                            <label id="Browse-all-wheels">Browse all wheels</label>
                                            <div class="classified-link-descriptor">Browse all wheels with no discrimination!</div>
                                            @*@Html.ActionLink("Browse by size", "PerformancePartsByVehicle", "Browse", null, new { @class = "classified-link" })*@
                                            <label id="Browse-by-size">Browse by size</label>
                                            <div class="classified-link-descriptor">15", 18" x 11.5", 19" x 12.5" etc.</div>
                                            @* @Html.ActionLink("Browse by manufacturer", "PerformancePartsByCategory", "Browse", null, new { @class = "classified-link" })*@
                                            <label id="Browse-by-manufacturer">Browse by manufacturer</label>
                                            <div class="classified-link-descriptor">By manufacturer (e.g. Volk, Ray's, Work, Enkei, etc.)</div>
                                            @*@Html.ActionLink("Tires only", "PerformancePartsByCategory", "Browse", null, new { @class = "classified-link" })*@
                                            <label id="Tires-only">Tires only</label>
                                            <div class="classified-link-descriptor">Tires only! No rims here!</div>
                                        </div>
                                    </div>
                                </div>
                                </text>);
      items.Add()
          .Text("Search")
          .Items(children =>
              {
                  children.Add().Text("Showroom");
                  children.Add().Text("JDM gear heads");
              });

      items.Add().Text("Discussions");

      //if (WebSecurity.IsAuthenticated)
      //{
      //    items.Add().Text("Account");
      //}
      //else
      //{
      //    items.Add().Text("Sign In");
      //    items.Add().Text("Register");
      //}
  }
))
                            </div>
                        </td>

                        <td colspan="2"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</nav>
<div>
    @RenderBody()
</div>

Upvotes: 1

Views: 2528

Answers (4)

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15807

body has default margins on all browsers

So you should have

body, html {
         margin:0;
         padding: 0;

    }

OR

body, html {
             margin:0;
             padding: 0;
              overflow-x:hidden;
        }

OR

* {
margin: 0;
padding: 0;
}

Upvotes: 1

cbayram
cbayram

Reputation: 2259

As others have already stated, setting a margin of 0 on the body will do the trick. I just wanted to explain little further.

The margin: 8px declaration is the default User Agent (in this case Chrome browser) styling. There is nothing stopping from another browser to implement another different default styling value. Best practice is often is to use a reset CSS which will reset the default browser CSS to the same values so you can start your development with a consistent base styling. NormalizeCSS is one of many good options. If you look into its contents it has among many other useful declarations: 

/**
* Remove default margin.
*/

body {
  margin: 0;
}

Upvotes: 1

Harshit Tailor
Harshit Tailor

Reputation: 3281

By default body take 8px margin so you have to give margin:0 in body

    body, html {
         margin:0;
    }

Upvotes: 1

Maulik patel
Maulik patel

Reputation: 1601

add below in css.

body, html {
    margin: 0;
    padding: 0;
}

Upvotes: 2

Related Questions