#page-container {
position: absolute;
margin: 0px;
padding: 0px;
border: 0px;
}
#header {
background-color: #f9f8e5;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-top: -10px;
padding: 0px;
border: 0px;
width: 100%;
height: 200px;
}
<div id="container">
<div id="header">
<center>
<br>
<a href="index.html">
<img src="images/logo.png">
</a>
</center>
</div>
</div>
Just a quick one, and the solution is probably somewhat obvious and is eluding me, essentially there is a border around my container div for my website, margins, padding and borders are all set to 0 so why the border is still there i have no idea. The background colour fill is on the 'header' div, and from this I can see the evident white lines either side of the div. Any help is appreciated, code below.
CSS:
#page-container
{
position:absolute;
margin: 0px;
padding: 0px;
border: 0px;
}
#header
{
background-color: #f9f8e5;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-top: -10px;
padding: 0px;
border: 0px;
width: 100%;
height: 200px;
}
HTML:
<div id="container">
<div id="header">
<center>
<br>
<img src="images/logo.png">
</center>
</div>
<REST OF WEBPAGE>
</div>
The <body> element has margin set by default in browsers. Set body { margin:0; } and you shouldn't have margins anymore.
css
body {
margin: 0px;
}
#page-container
{
position:absolute;
margin: 0px;
padding: 0px;
border: 0px;
}
#header
{
background-color: #f9f8e5;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-top: -10px;
padding: 0px;
border: 0px;
width: 100%;
height: 200px;
}
https://jsfiddle.net/ozbkr3sL/
of course you didn't provide full code to the page, but this css should help.
You should set the color and properties you want for the body itself and not just the container. Put in a different color in the background to test it out. From the snippet you posted this is the best I can see. If you had a full link that would've helped.
body{
margin:0;
}
body{
margin: 0px;
padding: 0px;
border: 0px;
color: yellow;
}
Related
Here's a JSfiddle of my problem https://jsfiddle.net/d20fo54o/
The space below the h3 tag will not go away. I've tried making padding 0, margin 0, and looking it up.
It's not the div under it either, because if you delete the other div and replace it with anything else the space is still there.
div {
background-color: #1D62F0;
border-radius: 20px;
text-align: center;
width: 600px;
margin: 0 auto;
}
div #list {
background-color: white;
width: 100%;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
div #title {
color: white;
}
<div>
<h3 id='title'>Hello</h3>
<div id='list'>
<p>hello</p>
</div>
</div>
Adding h3, p { margin: 0 }. Working just fine, see fiddle
https://jsfiddle.net/d20fo54o/1/
add margin:0; for both p and h3
div {
background-color: #1D62F0;
border-radius: 20px;
text-align: center;
width: 600px;
margin: 0 auto;
}
div #list {
background-color: white;
width: 100%;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
div #title {
color: white;
}
h3, p{
margin:0;
}
<div>
<h3 id='title'>Hello</h3>
<div id='list'>
<p>hello</p>
</div>
</div>
In chrome dev tools you can see how margins (the peach coloured bits) affect the overall page.
In this picture, we can see h3#title has a margin-bottom (because it's a margin at the bottom) that is going over the blue bit, so we can say.
h3#title {
margin-bottom: 0px;
}
That will remove the bit below the title Hello, but there is another margin (margin-top this time, because it's a margin on top) that looks to affect that area, this time it's p that is causing the issue so again we can do something like.
p {
margin-top: 0px;
}
Putting it all together
Now let's put these little bits of code we've worked out into your CSS.
div {
background-color: #1D62F0;
border-radius: 20px;
text-align: center;
width: 600px;
margin: 0 auto;
}
div #list {
background-color: white;
width: 100%;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
div #title {
color: white;
}
/* our new code */
h3#title {
margin-bottom: 0px;
}
p {
margin-top: 0px;
}
<div>
<h3 id='title'>Hello</h3>
<div id='list'>
<p>hello</p>
</div>
</div>
And there we go, the pesky margins are gone and so is the extra spacing.
Hope this helps.
How can I remove the white border on bottom of the browser (google chrome)?
This is the code I have used:
footer {
color: white;
width: 101%;
margin-left: -8px;
background-color: #343434;
margin-left: -16px;
width: 101.5%;
margin-top: -8px;
height: 40px;
z-index: 100;
}
footer > div {
width: 1000px;
margin: 0 auto;
}
<main>
<!--main things-->
</main>
<footer>
<div>
<p>FastCycle werdt gecreëerd door HP-programming vzw. Copyright © 2015</p>
</div>
</footer>
I have try to place the margin-button to set on zero but it didn't help. Also I have place the margin-left to -16px and width to 101.5%? Why?
Can anyone help me?Thanks
You can try adding the following to the <body> tag:
<body style="padding: 0; margin: 0;">
or alternatively, create a new CSS class:
body {
padding: 0;
margin: 0;
}
If that doesn't work, in Chrome, if you press F12, it will bring up a panel that allows you to view the styles of elements. Hover over the elements until you find the one that's creating the whitespace, and remove the padding/margin from it.
Try to add to your css
body{
margin:0;
}
And some cleaning for your css footer
footer {
color: white;
width: 100%;
background-color: #343434;
height: 40px;
z-index: 100;
bottom:0;
}
footer > div {
width: 1000px;
margin: 0 auto;
}
Use this HTML:
<body>
<div id="footer">
<div id="inner">
FastCycle werdt gecreerd door HP-programming vzw. Copyright © 2015
</div>
</div>
</body>
Use this CSS:
body {
margin: 0px;
padding: 0px;
}
#footer {
background-color: #343434;
color: #ffffff;
height: 40px;
margin: 0px;
padding: 0px;
width: 100%;
}
#inner {
margin: 0px 0px 0px -500px;
padding: 0px;
position: relative;
left: 50%;
top: 0px;
width: 1000px;
}
Also, you've set the Width and the Left Margin twice with 2 different values so you might want to clean that up. Regardless my code gives the same result except without the white space. Feel free to add back some of the stuff I've taken out if other elements depend on it.
I'm trying to add a h1 tag into my header div tag, but a background color keeps appearing when I did not set it in the css and I cannot figure out why and how to remove it.
<div id="header_top">
<h1>Some Text</h1>
</div>
<div id="navbar_top"></div>
<div id="wrapper">
<div id="main_content"></div>
<div id="side_bar"></div>
<div id="footer"></div>
</div>
* {
margin: 0px;
padding: 0px;
background-color: #0F1012;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
height: 700px;
padding-top: 0px;
padding-bottom: 0px;
border: 2px solid red;
}
#header_top {
background-color: #222325;
height: 60px;
border-bottom:1px solid #0F1012;
}
#header_top h1 {
color: white;
}
#navbar_top {
background-color: #222325;
height: 55px;
border-bottom: 1px solid green;
}
Fiddle
You have this code :
* {
margin: 0px;
padding: 0px;
background-color: #0F1012;
}
That basically sets the background to each element on the page. Including your h1 tag.
Remove the background-color and you should be fine.
I'm not quite sure what do you mean. But probably you have to switch this:
* {
margin: 0px;
padding: 0px;
background-color: #0F1012;
}
to this:
body {
margin: 0px;
padding: 0px;
background-color: #0F1012;
}
Here is the jsfiddle link.
I'm almost sure this is going to be a clear: both answer, but the trouble I'm having is where to put it, or how to wrap my head around understanding it.
I have divs within divs, and this particular one (sectioncut) is taking into consideration the height of its cousin ul (subnav). I've tried encapsulating the ul in its own div, but I must not understand how position and clear works yet.
This is my first time posting on Stackoverflow, so any feedback is welcome =D
http://jsfiddle.net/JustJinxed/d62eLh4o/
HTML
<div id="pagecut">
<div id="pagebg">
<div id="nav">
<ul id="subnav">
<li>Home</li>
<li>About</li>
</ul>
<div id="sectioncut">
This is a test.
</div>
</div>
</div>
</div>
CSS:
body,html {
border: 0px;
margin: 0px;
height: 100%;
background-color: #2200FF;
}
#pagecut {
width: 95%;
height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 0;
margin-bottom: 0;
background-color: #2200FF;
outline-style: solid;
outline-color:#FF0004;
}
#pagebg {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
background:url(Img/bg1.png);
background-size: 100% auto;
background-repeat:no-repeat;
}
#nav {
width: 98%;
height: 100%;
margin-right: auto;
margin-left: auto;
outline-style: solid;
outline-color:#00FF00;
}
#subnav {
margin: 0px;
padding: 0px;
}
#subnav li {
display:inline;
background-color: #7DA5EB;
border-color: #7DA5EB;
color: #FFF;
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-style: solid solid none;
padding-right: 7px;
padding-left: 7px;
margin-left: 2px;
margin-right: 2px;
font-size: x-large;
}
#sectioncut {
height: 100%;
background-color: #7DA5EB;
}
If I understand correctly, your problem is that #sectioncut is overflowing its container because it is taking the whole container's height and being pushed down by the other div (#subnav) inside the container.
If that's the problem and you want to fill only the space left by the subnav div, I think How can I make a DIV take up the rest of the height of a container div? will help you.
It's my first time answering aswell so I hope I did it right and this was helpful to you.
I have hardly written any HTML/CSS and am already encountering a problem. My header element is not automatically expanding it's height to wrap it's children. I've done a bunch of research and fooled around in the Developer Tools, but can't seem to put my finger on it. I'm sure it's really simple, but what is it I'm overlooking here?
<!DOCYTPE html>
<head>
<title>Page Title</title>
<style>
header {
width: 96%;
height: auto;
position: relative;
margin: 1em auto;
border: 1px solid gray;
border-radius: 5px;
padding: 1em;
}
section {
width: 96%;
position: relative;
margin: 1em auto;
border: 1px solid gray;
border-radius: 5px;
padding: 1em;
}
footer {
width: 96%;
position: relative;
margin: 1em auto;
border: 1px solid gray;
border-radius: 5px;
padding: 1em;
}
h1 {
font-size: 2em;
margin: 1em auto;
}
img {
max-width: 100%;
/* This tells the browser to set the image to the full-width of it's containing element. */
}
.group-icon {
width: 10%;
position: relative;
float: left;
margin: 0 1% 0 0;
}
.group-name {
position: relative;
float: left;
}
</style>
</head>
<body>
<header>
<div class="group-icon">
<img src="images/sailing-icon.png">
</div>
<div class="group-name">
<h1>Pirates in the Bay</h1>
</div>
</header>
<section>
<h2>TEST</h2>
</section>
<section>
<h2>TEST</h2>
</section>
<footer></footer>
</body>
</html>
It's because you've floated elements inside the header (group-name and group-icon).
Try adding overflow: hidden to the header styles. The will 'clear' the floated elements effectively.
See the demo here.
http://jsbin.com/EPelEMA/1/edit
Some more information about the overflow property here: http://css-tricks.com/the-css-overflow-property/