I am making a website for some work and I have successfully made the background for the headers and all. But the problem is, I want to join it to the top of my webpage but it refuses to do that. How do I prevent it? (Not a duplicate of where the answer was adding !Important to the code)
Here is my code:
HTML:
<!DOCTYPE html>
<html class="html">
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>LMUN - Home</title>
<div class="header"></div>
</head>
</html>
CSS:
.html
{
background-color: #FFFFFF;
}
.header
{
background-color: #70A5DA;
height: 4.5%;
width: 90%;
box-sizing: content-box;
position:absolute;
margin-left:5%;
margin-right:5%;
margin-top:0 !important;
padding:0 !important;
}
Note: I want to keep position absolute as it allows me to set everything in percentage values which is very essential for me.
Try this
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>LMUN - Home</title>
</head>
<body>
<div class="header"></div>
</body>
</html>
CSS
body {
margin:0;
}
.html
{
background-color: #FFFFFF;
}
.header
{
background-color: #70A5DA;
height: 4.5%;
width: 90%;
box-sizing: content-box;
position:absolute;
margin-left:5%;
margin-right:5%;
margin-top:0 !important;
padding:0 !important;
}
Yes for this you need to set the margin for body and also you can add same for html as 0.Then it will reduce unnecessary spaces. Like for example.
html{margin:0;}
body{margin:0}
Related
I'm trying to create a hero image for a website, and I'm receiving a random white bar the bottom of my website.
This is the HTML
* {
margin: 0;
padding: 0;
box-sizing: padding-box;
}
img {
width: 100%;
overflow: hidden;
}
body {
margin: 0px 0px;
}
<img src='https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg' />
img element is by default display:inline-block; vertical-align:baseline;
That baseline alignment is what you see.
So either display:block; or vertical-align:top;:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel='stylesheet' type="text/css" href="styles.css"/>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<img style="display:block" src='https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg'/>
</body>
</html
Another option - to set your image to background:
body {
background: no-repeat url(https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg);
background-size:cover;
}
<body>test</body>
Pretty noob question I'm sure. I ran into this problem when attempting to change the background color in a more complex webpage, so I started from scratch and still can't figure it out. Here's the simplified page
My goal is to set the background color of the site, but doing so with body had no effect, even when I had it filled with content. So I tried setting the background color and instead ran into a whole new problem. The header is not at the top of the site, since there's an unwanted space above the body element itself. I've tried setting everything to margin 0 and padding 0 to no effect. Here is my code:
html {
background-color: green;
}
.body {
padding: 0;
margin: 0;
}
#logo {
font-size: 2rem;
border-right: 1px solid grey;
color: green;
}
header {
border-bottom: 1px solid grey;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="css/style.css">
<meta name="description" content="blah">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<p id="logo">Path</p>
</header>
<section class="hero">
</section>
<section class="content">
<p>hi</p>
</section>
</body>
</html>
have you tried "body" instead of ".body"?
Try :
#logo {
margin-top: 0px ;
}
body {
padding: 0px;
margin: 0px;
}
Try add This in your CSS:
html,body,header,section,p{
padding:0;
margin:0;
border:0;
}
it Works, No unwanted space.
here the fiddle :https://jsfiddle.net/osrrwrqn/
Use
html,body{
padding:0;
margin:0;
}
The HTML div for the navigation bar design in CSS will not work.
CSS
/* CSS Document */
*{
margin: 0px;
padding: 0px;
}
.clear {
clear:both;
height:0px;
}
body {
background:url(../images/bg.jpg) no-repeat scroll center top #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg {
background: url('../images/navigation.png') no-repeat center top;
height: 198px;
width: 737px;
}
This is just a short example.
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="robots" content="index, follow"/>
<meta name="keywords" content="bla"/>
<meta name="description" content="bla"/>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<link rel="shortcut icon" href="favicon.png"/>
</head>
<body>
<div id="header_menu_bg">
Any help will be much appreciated!
Make sure the URL to your image is correct.
Place the URL in between ' or " tags (url("../images/navigation.png"))
Add a width to your div, f.e. width: 200px;
EDIT: When looking at your full HTML, you also need to close your <body> and <html> tags.
Your full code will look like this:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="robots" content="index, follow"/>
<meta name="keywords" content="bla"/>
<meta name="description" content="bla"/>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<link rel="shortcut icon" href="favicon.png"/>
</head>
<body>
<div id="header_menu_bg"></div>
</body>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
.clear {
clear:both;
height:0px;
}
body {
background-color: #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg {
background: url('http://placehold.it/737x198') no-repeat center top;
height: 198px;
width: 737px;
}
DEMO: JSBin (JSFiddle doesn't seem to work at the moment)
You need to assign it a width attribute.
#header_menu_bg {
background: url(../images/navigation.png) no-repeat center top;
height: 280px;
width: 200px; }
EDIT
Check in the console log, to see if there are issues with the browser finding your image. Perhaps you have the wrong path.
EDIT 2
Close your <body> and <div> tags.
Assuming you have referenced the css file correctly and no error in your html coding structure I suggest clearing your browser cache.
background: url(../images/navigation.png) no-repeat center top;
you need "" or '' like this:
background: url('../images/navigation.png') no-repeat center top;
probably this helps you
The following css works and puts an image in the DIV. Fiddle is not working at the moment and I can't put a link for it now.
#header_menu_bg
{
background-image: url('fnordware.com/superpng/pngtest16rgba.png');
height: 32px;
width: 32px;
}
You either have a wrong url or something else is wrong if this css doesn't work for you.
Try this :
Download the sample image from Here and save it as bg.jpg.
Create a new folder and put the 2 below files & a image in same folder.
HTML (index.html)
<!DOCTYPE html>
<head>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div id="header_menu_bg">
</body>
</html>
CSS (main.css)
body
{
background-color: #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg
{
background: url('bg.jpg') no-repeat center top;
width: 280px;
height: 500px;
}
RESULT:
I am unable to remove default top margin after many attempts. Below is my html and css code. Please suggest where I am lacking?
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Sample</title>
</head>
<body>
<div id="maincontainer">
<div id="header">
<h1>Sample</h1>
</div>
</div>
<div id="contents">
Body of page
</div>
</body>
</html>
CSS File
html, body
{
margin:0 auto;
padding:0;
border:0;
background:#fff;
font-family:Times New Roman;
font-size: 16px;
width:1024px;
}
#maincontainer
{
margin:0;
padding:5px;
}
#header
{
margin:0;
padding:0;
height:100px;
background:#8A0808;
text-align:left;
}
h1
{
margin:0;
padding:0 0 0 10px;
font-size: 60px;
font-weight:normal;
color:#fff;
}
padding: 5px; on the #maincontainer might be your issue. There's going to be 5px of white surrounding anything inside of the #maincontainer div.
I need my banner to sit tight against the top of the browser. Problem is that there is a small white gap btween the div that the image sits in and the top...Ive tried setting padding to 0 for div and body and it doesnt work :-(
<!DOCTYPE html>
<html>
<head>
<title>Welcome Home</title>
<link type="text/css" rel="stylesheet" href="/Shared/Css/Style.css" />
<link type="text/css" rel="stylesheet" href="/Shared/Css/Navigation.css" />
<script language="javascript" type="text/javascript" src="../../Shared/Scripts/jquery-1.6.2.min.js"></script>
</head>
<body>
<div style="padding-top:0px;">
<div id="header-image">
<img alt="Header" src="../../Security/FileFetcher.aspx?RelativePathToFile=App/images/topnav.jpg&mimetype=image/jpeg" />
</div>
</div>
</body>
</html>
body
{
background: url("/Security/FileFetcher.aspx?RelativePathToFile=App/images/background.jpg&mimetype=image/jpeg") repeat-x scroll 0 0 transparent;
padding:0px 0px 0px 0px;
}
#main-content-container
{
margin-left:auto;
margin-right:auto;
width:930px;
border-left:2px solid Gray;
border-right:2px solid Gray;
}
#header-image
{
width:960px;
margin-left:auto;
margin-right:auto;
padding-top:0px;
}
You need to set the <body>'s margin:
body {
margin: 0px;
}
Try adding this above the body options in your stylesheet
* {margin:0;padding:0;}
You could also look at one of the many CSS reset options