I am creating a basic landing page with HTML & CSS where the whole header background is an image.
Here's my CSS code:
body,html {
height: 100%;
background: honeydew;
}
header {
height: 100vh;
background-image: url(https://s3-us-west-2.amazonaws.com/myBucket/myBG.jpg);
background-size: cover;
background-position: center;
}
When I add an h1 or any form of text onto the header my webpage creates a large margin off the top of the browser. I also cannot edit my text at all.
Here is the html:
<!DOCTYPE html>
<html>
<head>
<title>myTitle</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />
<link href="main.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
</head>
<body>
<header>
<h1>Hello!</h1>
<h3>Welcome!</h3>
</header>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<!-- jQuery (necessary for Use of jQuery Syntax) -->
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
</body>
</html>
Here's my webpage prior to any addition of text:
Now here it is after text was added:
What seems to be the issue?
1. This css should take care of the margin/padding that you're seeing when you add an h1 element:
h1 {
padding:0;
margin:0;
}
To eliminate the spacing around your header background image you'll need to ensure that the html, body and header elements have no margin or padding:
html, body, header {
margin:0;
padding:0;
}
You could also use something like this to get rid of the default padding/margin on all elements:
* {
margin:0;
padding:0;
}
Many developers will override browser default styles with a css reset like normalize.css.
2. Your main.css should be loaded after the Bootstrap stylesheet.
You should ensure that you're loading your styles after Bootstrap.css. adjust your html to match this:
<!DOCTYPE html>
<html>
<head>
<title>Student Sanctuary</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Hello!</h1>
<h3>Welcome!</h3>
</header>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<!-- jQuery (necessary for Use of jQuery Syntax) -->
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
</body>
</html>
If you don't load your custom css styles after Bootstrap, then you'll have to add !important to you styles in order to override the Bootstrap stylesheet.
3. Here's a working solution in a jsfiddle with a cool cat photo
You need to override bootstrap's CSS like this.
header h1 {
margin: 0;
}
If you want to set all h1 with one rule, do like this
h1 {
margin: 0 !important;
}
If you make sure your CSS rules loads after bootstraps you can remove the !important
Snippet
html, body {
margin: 0;
height: 100vh;
background: honeydew;
}
header {
height: 100%;
background-image: url(https://s3-us-west-2.amazonaws.com/myBucket/myBG.jpg);
background-size: cover;
background-position: center;
}
header h1 {
margin: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<header>
<h1>Hello!</h1>
</header>
This is margin collapsing in effect and the CSS box model's default behaviour. In particular collapsing margins between parent and child elements where H1's margin is applied on the header element.
The common solution to overcome margin collapsing is to declare an overflow rule, a top padding, or a border on header. Since the header has a fixed height overflow: hidden would be the most fitting. See this answer for more details and further possible solutions.
Setting the top-margin to 0 on h1 has the same effect in this particular case but is not very useful if you actually want to apply a top-margin to it later on.
body,html {
height: 100%;
background: honeydew;
}
header {
height: 100vh;
background: #39C;
overflow: hidden; /* overcome margin collapsing */
}
header h1:first-child {
/* apply any margins - will not affect header anymore */
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
</head>
<body>
<header>
<h1>Hello!</h1>
<h3>Welcome!</h3>
</header>
</body>
Related
So this is a weird one, I'm getting a small margin at the very top of my page even though I've applied the standard CSS reset. If I open the inspector in Chrome / Firefox / or even gasp IE, I see that the body is reading my margin:0 reset, but still adding a gap regardless.
Gap:
Chrome Web Inspector that shows margin:0 is being honord:
So, the super duper weird part here is that if throw an important like margin: 0 !important; , the gap goes away. I've used this exact template set up many many times without issue. Hopefully someone sees something that is eluding me right now.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="/Content/css/Reset.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap-theme.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/css/Site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-1.9.0.js"></script>
<link href='//fonts.googleapis.com/css?family=Ubuntu:300,400,500' rel='stylesheet' type='text/css'>
<script type="text/javascript">var base_url = 'http://localhost:64789/';</script>
</head>
<body>
<div id="wrap">
<h2>Index</h2>
</div>
</body>
</html>
CSS
Note: Site.css is an empty file at this point, as I just started this project.
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form {
margin:0;
padding:0;
border:0;
border-collapse:separate;
border-spacing:0;
}
a {
text-decoration: none;
}
* {
font-family: 'Ubuntu', sans-serif;
}
body {
background: #f0f6e8 url(../images/gradbackground.jpg) repeat-x 0 top;
}
#wrap {
width: 100%;
background: transparent url(../images/leaves.jpg) no-repeat center top;
}
The margin is on the <h2>, not the <body>. There must be some other selector for h2 that is adding the additional top margin. In your own Site.css styles, include margin-top: 0 for the h2
Bootstrap is probably overriding it from another element. Check the elements it is nested in for margin being set in main.css.
How can I override the CSS of body using below custom style if the page require linked with the
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<style>
body {
background-color: red;
}
</style>
I tried to save the custom style in custom.css and declare it like
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="custom.css" />
but it doesn't work.
Check to see if it's not loading a more specific rule like body.someclassname, or use the important rule: body{background:red !important;}
Hard to tell without seeing the rest of your page, but have you tried:
body {
background-color: red !important;
}
I am cleaning up my web portfolio directory by placing CSS, images etc into respective folders.
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/contact.css">
However, I can't seem to load certain DIV elements from my CSS file if it's inside a directory.
The DIV is below:
#contact-form-wrap {
width: 1024px;
margin: 0 auto;
background: url('img/form-bg.png') no-repeat;
min-height: 768px;
}
Is there a way of solving this? Everything else seems to load except for the div above.
Try this...
#contact-form-wrap {
width: 1024px;
margin: 0 auto;
background: url(../img/form-bg.png) no-repeat;
min-height: 768px;
}
Make sure that you're using the ID and not a class when using #contact-form-wrap. That is the only thing I can really think of.
Example:
Incorrect:
<div class="contact-form-wrap"></div>
Correct:
<div id="contact-form-wrap"></div>
don't forget to add type="text/css" to your css declaration like this :
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/contact.css">
I have been doing web design for a little over a year now, but still have strange things happen on the front end sometimes. I am creating a simple template for personal use using the following code:
<!DOCTYPE html>
<html>
<head>
<title>Matt's Template</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css" type="text/css" />
<link rel="stylesheet" href="CSS/general.css" type="text/css" />
</head>
<body>
<section class="container">
<h1>Matt's Template</h1>
</section>
<!-- Javascript Libraries -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js" ></script>
<!-- My Javscript -->
</body>
</html>
If I view this code in my Chrome browser, it appears that the body is shifted about 15px down from the html tag. However, my css explicitly tells the html and body tags to have no padding or margin. So why is there this space?? This has happened before and I am not really sure how I solved it. There must be some obvious answer. Here is my css too.
html, body {
height:100%;
width:100%;
padding:0;
margin:0;
}
.container {
height:100%;
width:960px;
position:relative;
margin:0 auto;
padding:0;
background:#E0E0E0;
}
The problem is that your <h1> still has its default margin, you have only taken off the default <body> margin of 8px, but not the other elements which have default UA styles. You should look into using a reset so you can 'start from scratch' for each element.
http://jsfiddle.net/qfSZ5/3/
Try adding
h1 {margin:0}
or
h1 {display:inline-block}
if you want to keep its margins inside the parent.
jsfiddle
That's because h1 has a default margin assigned by the browser; that could be kinda messy.
Some people just do this in order to prevent default margins and padding:
* {
margin: 0;
padding: 0;
}
And that literally means:
"Hi browser, please nullify all the defaults margins and padding on all the existing elements. Thanks!"
I'm building a web app and unfortunately I have a white border around the top and left of the page. I have set the html and body padding and margin to 0px but it doesn't seem to be having any effect on it. Inside of the body is a single iframe and when I preview the site and I go on inspect element it shows that the padding is on the body...
Here is the code - if anyone could take a look that would be great!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
<title>index</title>
<style>
html {
height:100%;
}
body {
background-color: #FFFFFF;
margin: 0px !important;
padding: 0px !important;
height:100%;
}
</style>
<!-- copy these lines to your document head: -->
<meta name="viewport" content="user-scalable=yes, width=320" />
<!-- end copy -->
</head>
<body>
<!-- copy these lines to your document: -->
<div id="index_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;" aria-live="polite">
<script type="text/javascript" charset="utf-8" src="index.hyperesources/index_hype_generated_script.js?4823"></script>
</div>
<!-- end copy -->
</body>
</html>
JSFiddle
Try setting the margins of the #my-iframe to a negative number, e.g. -10px:
#my-iframe {
width: 100vw;
height: 100vh;
border: 0;
padding: 0;
margin: -10px;
}
This may cut a small section of the iframed site off, but judging by the look of the site a few pixels off the edge won't do much damage.