CODEWITHSUNDEEP
htmlcssbrowsermargindefault
AWAE
AWAE

Reputation: 1

CSS for top navigation bar with no margin and browser default margin in area below it

The fundamental ideas for this idea for a simple web page format are

a) let the user decide what he wants text to look like

b) make the code as short and simple as possible

In his browser settings (if the application allows it), the reader chooses the typeface, size of text, size of headings (H1, H2, etc.), background color and other defaults. So far, the sole line in the external CSS file: body { max-width: 30em; font-family: Sans-Serif }.

But, a very familiar (and practical) convention is a top bar (title/masthead and/or navigation) with no margin-- it bleeds to the edges of the browser/device, filling the space entirely. The problem is that all browsers have a margin by default.

So, how is the no-margin bar achieved-- while letting the browser default margin work for the rest of the HTML page?

The inherit, reset and unset css keywords seem to get close. And, obviously, one thing that repeatedly appears when researching this notion is { margin: 0; padding: 0; }.

What is the solution for a top navigation bar with no margin and a margin in the main content area below it controlled by the browser default?

Is it even possible?

Upvotes: 0

Views: 4089

Answers (4)

Josepch
Josepch

Reputation: 55

You could do a css reset by placing the following at the top of your css file:

* {
    margin: 0;
    padding: 0;
    border: 0;
}

Upvotes: 0

DarkGuy10
DarkGuy10

Reputation: 55

Put the rest of code between <div class = "rest"> </div> and include the following css. 

body {
  margin: 0, padding:0;
}

.rest {
  margin: 5px
}

Upvotes: 0

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11096

read the body margin and assign negative margin to header:

<div id="header">Some text to test</div>

<script>
var defaultmargin=$("body").css("margin").replace("px","");
$("#header").css("margin",-defaultmargin+"px");
</script>

Upvotes: 1

Bladepianist
Bladepianist

Reputation: 490

You can make whatever changes you want with JavaScript (JQuery is my prefered framework).

For web design, man, you really need to look by yourself. Google is your friend !

What you are asking right is the basic and you certainly won't get a complete course here. I can however advise you to look for HTML/CSS MOOC or so (OpenClassrooms might offer free english course, unless you prefer french ?).

You might also like Bootstrap, if you give it some thought : Bootstrap Website

By all means, Happy Easter !

Upvotes: 0

Related Questions