I need a div-header like the blue facebook header which has no free space on top and on the left/right side.
My actually code looks like this:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div#header {
height: 100px;
background-color: #3B5998;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
</style>
</head>
<body>
<div id="header">
</div>
</body>
</html>
I add extra no marigin and no padding, but i still have some free space on all 4 sides of my header...
html, body { margin: 0; padding: 0; }
Try this
html, body {
padding: 0;
margin: 0;
}
#header {
float: none;
width: 100%;
height: 100px;
background-color: #3B5998;
}
By default every browsers puts some amount of margin/padding around the body of the document.
To remove it you can add a css style in your html
html, body {
margin: 0;
padding: 0;
}
Also, it is worth noticing that browsers attach insert various kinds of styles to elements, and these styles can be very different in different browsers. There are some style sheet files out there that can fix it, one of them could be found here
http://www.cssreset.com/
Related
I was trying to add color to the heading but the design was horrible.
I tryed to watch videos on youtube but they dont help me with the position and the horizontal line bugs.
https://imgur.com/a/c7eDeHi
I was expectating something like this
Paint model.
https://imgur.com/lGGPoZE
But I'm very bad at positions
https://imgur.com/a/c7eDeHi
<html>
<head>
<style>
h1 {
text-align: left;
color: #595959;
background: #80ff80;
width: 5000px;
height: 60px;
}
</style>
</head>
<body bgcolor="#ffb84d">
<h1>Test</h1>
</body>
</html>
Fixing the position,and horizontal line.
To remove paddings and margins around the page, you can use:
html, body{
padding: 0;
margin: 0;
}
To add a background color to body, you have to assign it in the styles ass well. You can select it with body:
body{
background: #ffb84d;
}
If you further want a buttom border for the headline, you can add the following rules to h1:
h1 {
text-align:left;
color:#595959;
background: #80ff80;
width:100%;
height:60px;
/* Specify a bottom border like this: */
border-bottom: 1px solid grey;
}
You need to set the margin of the body and of the heading to 0 to remove the border
body {
margin: 0px;
background-color: #ffb84d;
}
h1 {
margin: 0px;
text-align:left;
color:#595959;
background-color: #80ff80;
}
<html>
<body>
<h1>Test</h1>
</body>
</html>
My header does not fully covers my page making the background color overlaps them both together.
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color: black;
background-size: 100% auto;
margin-left: 0;
margin-top: 0;
}
</style>
</head>
<body style="background-color: blue;">
<div id="header">
<p>hi</p>
</div>
</body>
</html>
This is because browsers have a default margin / padding.
//edit HTML default body margin
Add this to your css
html,body{
padding:0;
margin:0;
}
p{
padding:0;
margin:0;
}
You need to set both html and body height, then #header height, like so
html, body, #header {
height: 100%;
margin: 0;
padding: 0;
}
#header {
background-color: blue;
}
p{
margin: 0;
padding: 0;
}
<div id="header">
<p>
Hi!
</p>
</div>
If you inspect the html and check the CSS applied to body tag, you will see that it has a default margin: 8px. You will have to make it 0.
Use margin: 0px to set the new margin to body tag.
Firefox (for example) indicates that there is a "border" of 8. Adding border: 0 to body's style made the thin blue borders to the left and right disappear. Is that what you wanted?
I am trying to make a footer, but the left and right sides show some white space. How to remove the white space?
Here is my code:
<html>
<head>
<style>
footer {
background: none repeat scroll 0% 0% #DFDFDE;
padding: 120px 0px;
text-align: center;
position: relative;
}
.divider {
background: url('http://evablackdesign.com/wp-content/themes/ebd/images/footer-border.png')
repeat-x scroll center center transparent;
height: 7px;
width: 100%;
position: absolute;
top: -6px;
}
.container {
width: 930px;
margin: 0px auto;
}
</style>
</head>
<body>
<footer>
<div class="divider"></div>
<div class="container">
<h1>hiiiiiiiii</h1>
<br>
<h2>buyyyyyyyyyyyy</h2>
</div>
</footer>
</body>
</html>
image of footer
The tag defines a footer for a document or section.
A element should contain information about its containing element.
A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
The body has a default margin. Remove it via:
html,body {
margin:0;
padding:0;
}
Most Web browsers have different default settings for the base margins and padding. This means that if you don't set a margin and padding on your body and html tags, you could get inconsistent results on the page depending upon which browser you're using to view the page.
The best way to solve this is to set all the margins and paddings on the html and body tags to 0:
html, body {
margin: 0px;
padding: 0px;
}
*{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
Try out this code:
html, body {
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
Your body has a default margin and padding and you need to override it.
At the beginning of your style type.
body{
padding: 0;
margin: 0;
box-sizing: border-box
}
Add this to your style tag...
body {
margin: 0;
}
Just make sure to add this class to your CSS style.
.container-fluid {
width: 100%;
margin: 0px;
padding: 0px;
}
Try this; it is the simplest one, add it to your body selector.
body {
margin: 0px;
padding: 0px;
width: 100%;
}
For me, It's working
html, body {
overflow-x: hidden;
margin:0px;
padding:0px;
}
if ur having unwanted white space in right side of ur screen its because of overflow so to remove it go to ur css then in body write
in css:
(body{
width:100%;
overflow-x: hidden;
})
this is before
this is after
this is my first help i am new to stackoverflow hope this helps
Even when I'm using this simple code, the browser shows a little offset on left and top. How to fix this. Code is below:
<html>
<head>
<style="text/css">
#container{
width: 100px;
height: 100px;
background-color:orange;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
It's because most browsers use a standard CSS stylesheet (see http://www.w3.org/TR/CSS21/sample.html).
One of the rules sets the margin of the body to 8 pixels:
body {
margin: 8px;
}
You can disable it by setting the margin to 0 pixels:
body {
margin: 0;
}
See this JSFiddle for more details.
Try to add this css:
* {
margin: 0;
padding: 0;
}
even better:
*{
margin: 0 auto;
padding: 0;
}
This worked for me all the time:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
Make the margin-top and margin-left of html and body 0.
html, body{
margin-top: 0;
margin-left:0;
}
I have a custom PHP CMS which uses templates. I have a layout.tpl in which I set the overall look of the site including a class called boxmain which is the central content of the layout. In that, I have defined my style.css file, which contains the boxmain class.
.boxmain {
background-color:#F5F5F5;
width:1025px;
height:auto;
margin:0 auto;
font-size:11px;
overflow: hidden;
padding-top: 15px;
padding-left: 5px;
padding-bottom: 15px;
}
Above it, I have a class for an image banner. This also contains a margin to create a space between the content and the banner.
div#banner {
background: url("../images/banners/banner1.jpg") repeat scroll center center rgb(0, 0, 0);
width: 100%;
height: 270px;
z-index: 1;
margin-bottom: 25px;
-webkit-box-shadow: 0px 2px 15px 2px ;
box-shadow: 0px 2px 15px 2px ;
}
What I want to do, is to be able to remove all of the padding and margins on the banner and on the boxmain without having to modify the stylesheet, but instead including it in the template. For some reason, it doesn't work when I do this in the template, it just breaks Cufon.
<style type="text/css">
div.boxmain { margin: 0; padding; 0; }
div#banner { margin: 0; padding: 0; }
</style>
I was therefore thinking, maybe position the child elements (basically all of the content from the template) out of the parent element (boxmain defined in layout.tpl) and this would clear the margins and the paddings, but how can I do this and would it work?
The content in the template is basically a few div tags and a few images.
Here is a working JSFiddle.
<style type="text/css">
div.boxmain { margin: 0; padding; 0; }
div#banner { margin: 0; padding: 0; }
</style>
<div id="banner">Banner content</div>
<div class="boxmain">Main content</div>
Since the inline style easily overrides the main stylesheet, I would say, this is an ordering issue. You probably include the main stylesheet after the inline style, which would explain why it is not working.
Moving the inline <style> into boxmain works too
<div id="banner">Banner content</div>
<div class="boxmain">
<style type="text/css">
div.boxmain { margin: 0; padding; 0; }
div#banner { margin: 0; padding: 0; }
</style>
Main content
</div>
So, prefixing $page_content with the overriding style should do as well.
See JSFiddle
Disclaimer: this is tested with Firefox 16 only.