I am working on making a navigation bar, and I am running into a problem. This is what my navigation bar looks like:
It has like a 8px white border around it, and this is what I want it to look like:
Without the 8px white border around it.
I am using this code for it:
.header
{
width: 100%;
height: 80px;
background : #464646;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
border-top:1px solid #939393;
position: relative;
margin-bottom: 30px;
}
I can using this:
margin-left:-8px;
margin-right:-8px;
margin-top:-8px;
And put width to 102%, but then it gives me scrollbars on the bottom.
This may be confusing, but I am a beginner, and I need help.
If you can help me, I will appreciate it a lot!
Thanks.
You have to set the margin on your body to 0 like this:
body
{
margin:0;
}
Your body tag comes with margins. That is your problem.
Do:
body { margin: 0px; }
I believe it's because the browser has some default styling, one of which is a margin of 8px surrounding the content, look into "css reset" or if you just want to remove that one thing try
body
{
margin: 0px;
}
Hope that helps
set your html and body to:
body, html {padding: 0; margin: 0;}
This will reset all browsers and remove the border.
This will declare on the entire page not just to the Body.
* {
padding: 0;
margin: 0;
}
http://jsfiddle.net/cornelas/gwM4X/2/
User Agents apply default styles to your web page, which you need to override, in this case it's margin so either you can reset the margin like
body {
margin: 0;
}
Else you can also use a * universal selector like
* {
margin: 0;
padding: 0;
}
DEMO HERE
For a proper stylesheet reset, use CSS RESET STYLESHEET
Related
I'm having issues with my nav bar, I'm wondering how I can make the set closer to the left most edge.
CSS:
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
}
#nav li
{
display: inline-block;
list-style-type: none; /* removes bullets */
padding: 10px;
margin: 0px; /* removes margins */
background: grey;
}
#nav li:hover
{
background: green;
user-select: green;
}
Fiddle: https://jsfiddle.net/yumyum0/cgx61w0q/2/
Also, I'm not sure if the background and user select in the #nav li:hover is redundant. I'm modeling it off of the tutorial on https://html.com/css/#example-nav, and I started to add things to try and style it the way I wanted. I'm still a long ways away from knowing what all of the declarations do. It used to be flush so I think I probably added something that has a conflict, or I removed it without knowing.
I also had a question that wasn't really related to this, is this formatting okay? I wasn't sure if there was a agreed upon way with brackets and everything else.
Placing this ruleset at the start of your code will remove the margins at the top of your navbar.
* {
position: relative;
margin: 0 0;
}
Your formatting is slightly off; place the opening bracket on the same line as the CSS selector, and make sure there is a gap between rulesets, for greater readability.
A good thing to do is set the styles for the HTML and Body tags. This is what I would do:
html, body {
margin: 0; // Removes space on the sides
box-sizing: border-box;
width: 100%;
height: 100%;
}
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
box-sizing: border-box; // Add this to take 100% width without overflowing
margin: 0; // Remove space above nav bar
}
...rest of your CSS
You can position absolute and declare it must be at the left most point of the page.
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
position: absolute;
left: 0;
}
Styling your code is up to you! I like keeping the name in the same line as the curly bracket like #nav {
Navigation spacing: One thing to research is a solution called "CSS Reset". Browsers like Chrome and Firefox have different "base values" for HTML selectors. A reset stylesheet ensures that all of your elements will have the same "base" styles. There are 1000 different reset sheets out there that different people have attempted. They all roughly do the same thing in my opinion.The <body> tag has margin assigned to it by default. A reset sheet would normally assign these to 0 amongst other things.
Kind of the same thing as above, the <ul> tag also has margin on it by default. You should add in the following CSS:
html, body {
margin: 0;
}
#nav
{
background: grey;
width: 100%;
margin: 0;
}
Let's discuss the user-select property. This property is what you would use in order to target a "highlight" or "text select" for a copy/paste situation on a webpage. I do not think this is what you should be using for a "hover" effect. You should be just fine with using the background property.
In this template by Colorlib: https://colorlib.com/demo?theme=pemodule
I'm trying to remove the purple borders around the outside of the website. I can't seem to figure out in the CSS how this border is achieved and how I can remove it.
Just wondering if anyone has any ideas.
Your help is much appreciated.
The border is the background of the body and the rest of the website has a margin which creates the space between it and the edges of the viewport.
in main.css, line 1927:
body {
background: #4b379a;
}
in main.css, line 1931:
.main-wrapper-first {
width: 68.75%;
margin: 0 auto;
margin-top: 6rem;
}
the body tag has the following:
body {
background: #4b379a;
}
change that to:
body {
background: white;
}
Set these things in your CSS (I don't know if you need the !importants), but here:
.main-wrapper, .main-wrapper-first {
width: 100% !important;
margin-top: 0 !important;
}
If you are adding this to the CSS, place this at the bottom.
I need to set a 4px space between all html internal components (in any direction top bottom left right). I am using an external css file for this. I tried this:
body {
padding: 2px;
border: 0px;
margin: 0px;
}
But this sets a space of 4px for all body not between it's components.
Also,
{
display: inline-block;
padding: 4px;
}
is not working either.
Can you please help. I am not allowed to change the html page.
You can use
body * {
margin: 2px;
}
Which will set that margin to every element inside of the body tag.
Looks like you need to set for the elements used on HTML , if you are
using Css preprocessor , then you can declare the values at the top
and later it will be used by all the elements like shown below :-
$standard-padding :2px;
$standard-border:0px;
$standard-margin:0px;
body,p,h1,h2,div,span{
padding: $standard-padding;
border: $standard-border;
margin: $standard-margin;
}
Maybe you can try padding like this:
body *{
padding:4px;
}
Site: http://stagingsite16.info/
Screenshot below:
Problem:
As you see on the screenshot, there is a gap at the bottom of the page. (I applied red background so that it can be seen immediately.)
I tried applying this code:
html {
margin: 0;
padding: 0;
overflow: hidden;
}
but still it doesn't solve my issue. Any help is really appreciated! :)
You have to place the div of the footer outside all the other divs , and then add:
div#builder-module-537dadf9ae69e-background-wrapper
{
background: #2c2c2c;
color: #fff !important;
padding-top: 0px;
margin-bottom: 0px;
}
you had this before:
div#builder-module-537dadf9ae69e-background-wrapper
{
background: #2c2c2c;
color: #fff !important;
padding-top: 20px;
}
But you have to move the div outside the other divs!!
I've used this in a user style sheet locally and it seems to fix the problem:
.builder-container-outer-wrapper {
margin-bottom: 0px;
}
div#builder-module-537dadf9ae69e-background-wrapper.builder-module-background-wrapper.builder-module-footer-background-wrapper.builder-module-6-background-wrapper.builder-module-footer-1-background-wrapper.builder-module-bottom-background-wrapper.builder-module-last-background-wrapper.builder-module-footer-last-background-wrapper.builder-module-after-widget-bar-background-wrapper.default-module-style-background-wrapper {
margin-bottom: 0px;
padding-bottom: 1.5em;
}
Another thing to consider: CSS applies the style which is most specific to the element. The html { ... } element is the one for the whole page (including the tag), so it will be the least specific rule for the element you want to apply your style to. It is likely that a more specific style (such as div.builder-container-outer-wrapper) is applying the margin somewhere else in your CSS, and you'll have to fix it there. (See http://css-tricks.com/specifics-on-css-specificity/ for an explanation of how the specificity rules are applied.)
Anyway, hope that helps.
.builder-container-outer-wrapper {
margin-bottom: 0;
width: 100%;
}
This is the container which has the margin-bottom.
If I only add a 1px padding to a div around a heading, then this makes apparently a huge difference (http://jsfiddle.net/68LgP/).
html:
<div class="pad0">
<h1>Text</h1>
</div>
<div class="pad1">
<h1>Text</h1>
</div>
css:
.pad0 {
background-color: #E9E9E9;
padding: 0px;
}
.pad1 {
background-color: #E9E9E9;
padding: 1px;
}
Why is that so? I really would like to achieve a similar effect to the 1px padding but with no extra padding added.
This is due to the margin collapsing
Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.
You can find further information also on w3c site.
Two margins are adjoining if and only if [...] no line boxes, no clearance, no padding and no border separate them [...]
So if you apply a padding-top (1px is enough), as in your second example, the margins are no longer collapsed. An easy solution, as already suggested, is to remove the default margin of your heading elements and apply a padding instead.
It's to do with the default CSS applied to Heading1 element. It already has a padding/margin applied to it.
If you reset it, you can see the result you're after: http://jsfiddle.net/68LgP/8/.
h1 { padding: 0; margin: 0; }
.pad0 {
background-color: #E9E9E9;
padding: 0px;
}
.pad1 {
background-color: #E9E9E9;
padding: 1px;
}
Please see the updated CSS here
.pad0 {
background-color: #E9E9E9;
padding: 0px;
margin: 0px;
}
.pad1 {
background-color: #E9E9E9;
padding: 1px;
margin: 0px;
}
h1
{
padding: 0px;
margin: 0px;
}
set h1 margin to 0
h1 {
margin: 0;
}
It is now keeping the margin of the h1 within the DIV. The h1 has default top and bottom margin of around 21px, so when you add 1px padding to the DIV, it now looks like 22px
<div> is a block element, which means that it both starts and ends with a line break. I beleive that this is contributing to your problem - you may want to swap to <span> tags, although I'm not sure if this will solve the problem.
You could use CSS Reset which resets all CSS settings, including this kind of problems. Recommended for any site.
How can CSS Reset file solve your problem? As you can see, in the first paragraph, h1 is included, and it's given margin:0 which is needed for reducing the difference in problems like yours.