Here's a shrunken version of a webpage. The black is the background color for a header div I made. My question is how do I eliminate the blue area above and to the sides of it? I would like it to look more like the second image. I tried margin: 0px; for top, left, and right, but nothing changed. Any suggestions?
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Calendar</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="calendar.css">
</head>
<body>
<div id="header">
</div>
</body>
</html>
Here is the CSS:
body {
background-color: #00FFFF;
font-family: Verdana, Tahoma, sans-serif;
}
#header {
background-color: black;
height: 40px;
width: 100%;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
add margin:0 to the body tag
body {
background-color: #00FFFF;
font-family: Verdana, Tahoma, sans-serif;
margin:0;
}
The problem is not that your DIV has a margin, but rather that the BODY has a margin. Most browsers add this by default, but you can eliminate it with
body{ margin: 0; }
in your CSS. Some people like to get rid of these things that browsers add with something called a cssreset. This would give you more of a blank slate to begin with.
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>
I've created an utterly simple page with only a few elements. I have a white border around my 'content div' and can't figure out what is causing it. It is appearing only top and left of my content. I've tried removing it with .body { border: 0; }, but that did not help. Also a few other things with regard to my CSS, but solved it.
Here is my HTML code:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<title>Olivera Miletic graphic desig</title>
<link rel='stylesheet' href='style.css' />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="mainText">
<p> OLI<span class="secondColor">APPARENTLY </p>
<p class="stayTuned"> SOON. STAY TUNED. </p>
</div>
<div>
<p class="meanWhile"> meanwhile WORK / BE / TW / <a href="mailto:miletic.olivera#gmail.com" > MAIL </a>
</p>
</div>
</div>
</body>
</html>
Here is my CSS:
.container {
position: absolute;
width: 100%;
height: 100%;
overflow:hidden;
background-color: #6600cc;
padding: 20px 0px 0px 50px;
display: box;
}
.body {
margin: 0;
}
.mainText {
font-family: 'Open Sans', sans-serif;
font-size: 64px;
color: #FF0066;
font-weight: bolder;
line-height: 0%;
margin-bottom: 70px;
}
.secondColor {
color: #00ccff;
}
.stayTuned {
font-family: 'Open Sans', sans-serif;
font-size: 25px;
color: #ffffff;
font-weight: bolder;
}
.meanWhile {
font-family: 'Open Sans', sans-serif;
color: #ffffff;
font-weight: lighter;
}
a {
color: #ffffff;
text-decoration: none;
}
Here is the JSFiddle https://jsfiddle.net/1yL1ta5x/ and the code:
Also, would appreciate advice how to optimize it for, at least, mobile and desktop views of the webpage and/or any other optimization to my code is welcome. I am an absolute beginner, so bear with me. Thanks.
Regards,
Some browsers/frameworks/environments add default margin, padding values to either the body or the html.
You have to override the margins/padding to the html or body for the white space to disappear.
Just add the following:
html, body {
margin: 0;
padding: 0;
}
EDIT
To answer your second question as to why there is scroll on your container div, this happens because the div occupies 100% width and height of its parent and also occupies the 20px padding-top and 50px padding-left.
Hence the container div overflows its parent thus producing a scroll.
A general fix would be to apply box-sizing: border-box to container so that the padding is included in the width and height.
.container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #6600cc;
padding: 20px 0px 0px 50px;
box-sizing: border-box;
}
Check updated fiddle: https://jsfiddle.net/1yL1ta5x/1/
I would suggest you to read more about box-sizing, and the css box model as a whole.
Remove the .body and replace it to body.
.body is applied to the class named body, while you want to select the tag, which would be just body.
Alternatively, add class="body" to your body tag.
I am making a website and I am trying something new, except when I try to create a background for my H1 element I have no way of making sure the background color borders fit to the top of the screen, left and right.
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="site.css"
<body>
<title>Test Tab</title>
<div class="main">
<h1>Website Heading</h1>
</div>
</body>
</html>
.main {
font-family: Arial, Verdana, sans-serif;
text-align: center;
font-size: 20px;
background-color: #00ff00;
background-position: 10px;
}
You need to change your CSS to this:
html,body {
margin:0;
padding:0;
}
.main {
font-family: Arial, Verdana, sans-serif;
text-align: center;
font-size: 20px;
background-color: #00ff00;
background-position: 10px;
}
.main h1 {
margin:0;
}
JSFiddle
You need to make sure you set your body to have no padding or margins and also make sure your h1 doesn't have any margin either. That way it will happily sit at the top of your page.
Alright, so I've tried a lot of different things here but I just can't seem to get my menu bar to stretch all the way across the page. There's a small gap on the left side. Am I just missing something here?
Also so far this is the only way I've been able to get my footer somewhat centered at the bottom of the page. Every time I set the left and right margins to auto it puts the footer in line with the menu bar. Is there a better way to do this as well?
Thank You.
<!DOCTYPE html>
<html>
<head>
<title>Connor Lepert: Homepage</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<link rel="icon" href="logo.png">
<style>
#font-face {
font-family: Vanadine;
src: url(vanadine.ttf);
}
body {
background-image: url(bckgrnd.jpg);
background-size: 100%;
background-repeat: no-repeat;
font-family: sans-serif;
color: white;
}
a {
color: white;
font-family: Vanadine;
text-decoration: none;
}
a:hover {
color: yellow;
}
p {
color: white;
font-family: Vanadine;
}
footer {
position: fixed;
display: block;
margin-left: 45%;
margin-right: 45%;
text-align: center;
margin-top: 320px;
}
#siteid {
margin-left: auto;
margin-top: auto
}
#menubar {
background-color: #ABADB0;
width: 100%;
height: 20px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
text-align: center;
word-spacing: 20px;
position: fixed;
}
#header {
display: block;
margin-left:auto;
margin-right: auto;
text-align: center;
margin-top: 330px;
}
</style>
</head>
<body>
<div id="siteid"><img src="logowhite.png" width="50px" alt="Personal logo"/></div>
<div id="header"><img src="header.png" width="400" alt="Lepert"/></div>
<div id="menubar">
Home
About
<a href=mailto:clepert13#gmail.com>Contact</a>
Portfolio
ScrapYard
</div>
<footer>©<a href=> 2015 by Connor Lepert </a> <br> <p></p> </footer>
</body>
</html>
You must just add a margin:0 to your body
I create a wrapper class and wrap the code that needs to be centered within it. Here's an example:
.wrapper {
margin: 0 auto;
width: 960px;
}
<html>
<div class="navbar">
<div class="wrapper">
<p>Content goes here</p>
</div><!--wrapper-->
</div><!--navbar-->
</html>
You just need to make sure that you place the wrapper class before the content, but after the background that needs to repeat. That is shown in my example. Otherwise, you'll have everything centered like it needs to be, but your background will cut off because it's being contained in a 960px area.
Like Artefact already said, adding margin:0 to your body will remove the gap beneath your menubar.
Just a little explaining:
This gap is caused by your browser, in fact every browser has some presets for some elements (i.e. the size of a h1 and how links are displayed) and those presets differ from browser to browser.
For this reason most people will use css resets to have a clean starting point for their own css.
There are several resources for resets out there like the one from meyerweb that you can use or you can simply write your own.
I'm trying to get my header and image to line up exactly on the same line but am having difficulties. Can anyone see why/suggest a fix?
<!DOCTYPE html>
<html>
<head>
<style>
#header img {
position: relative;
width: 75px;
height: 75px;
}
#header h1 {
color: white;
float: left;
background-color:#006890;
font: 75px arial, sans-serif;
}
</style>
</head>
<body>
<div id="header">
<h1>Header</h1>
<img src="2000px-Smiley.svg.png" alt="Smiley Face" >
</div>
</body>
</html>
it's because of the h1 default margin, you see? elements comes with default styling and you need to custom it to your needs, generally for what you want you need to remove the margin-top from h1 but you can also set it to margin: 0; if you dont need the margin-bottom.
#header h1
{
color: white;
float: left;
background-color:#006890;
font: 75px arial, sans-serif;
margin: 0;
}
example: http://jsfiddle.net/L2e1rL6L/
In addition to #header h1 css you should do
#header h1 {
margin:0;
}
thats it.
Wouldn't you need to have the image inside the <h1><img > </h1> tags?