CODEWITHSUNDEEP
htmlcssmenu
Sampath Liyanage
Sampath Liyanage

Reputation: 4896

CSS top menu bar

I'm trying to create a top menu bar like in stackoverflow (but with fixed position).

JSFIDDLE Demo

There is a space on the left and at the top of the menu bar. How can I remove that space?

Thank you in advance...

Upvotes: 2

Views: 675

Answers (4)

NNS
NNS

Reputation: 195

body{
 margin:0;
 padding:0;
}

#nav{
margin:0
}

This will solve you problem without changing the menu postiton of menu items

Upvotes: 1

Michał Kutra
Michał Kutra

Reputation: 1202

By reseting margin & padding : http://jsfiddle.net/yw4e69qo/1/

Simply

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

But more comprehensively - dive deeper into this topic: http://meyerweb.com/eric/tools/css/reset/

It's very useful :)

Upvotes: 2

Chrillewoodz
Chrillewoodz

Reputation: 28328

ul elements always have a default padding on the left side because of the list-style property. If you inspect the element in the console you can see exactly what is creating the margins you see. So simply putting the following will fix the problem for you:

#nav {
    margin: 0;
    padding: 0;
}

Also you should look into using a reset.css file so you don't have to do the resetting like this yourself on every list on your page. Using global selectors in your css like so:

ul {
    margin: 0;
    padding: 0;
}

to reset all elements is considered bad practice since it will slow down the execution of the code since it always have to check if the selector is part of the global selector. Hope this answer helps.

Upvotes: 0

Shailesh Katarmal
Shailesh Katarmal

Reputation: 2785

#nav {
    padding:0;
    margin:0;

}

Upvotes: 0

Related Questions