MyPage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Color Flash Cards</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div id="header">
<div id="title">
<h1>Color Flash Cards</h1>
</div>
</div>
</body>
</html>
index.css
body{
background-color: #31859C;
margin-left: 0px;
margin-top: 0px;
overflow-x: hidden;
}
#header{
margin-top: 0px;
height: 120px;
background: #9838CE;
}
#title{
margin-top: 0px;
}
result:
Where is the margin that is at the top (above the purple) coming from? And what do I need to do to get rid of it? I could use negative values for margin-top to do it but is that the "real" solution here?
All headings have a default margin that can be canceled out with:
h1 {
margin: 0;
}
Demo:
I would recommend using a css reset code like this one if you want to avoid these quirks and style them yourself.
One of two things might be causing this:
Padding in the body? Add padding: 0; to body.
The top margin on the H1. To combat this add overflow-hidden; to #header
Adding overflow: hidden to the #header will cause the header DIV to contain it's contents (including the margin on the H1).
Set the margin of h1 tag to 0:
h1 { margin: 0; }
See jsFiddle demo.
Try setting the margins of html to 0 as well.
html {
margin:0;
padding:0;
}
Two things:
You might want to add
body{
padding:0;
}
but that's not the real issue, its the H1 tag that is spoiling the layout
add this to your css
h1{
margin-top:0;
}
here is a little fiddle
use reset css for default browser setting will be reset.
http://meyerweb.com/eric/tools/css/reset/
enter code here
Related
I have made a simple web page. I can see no blank space when I open the website on safari, but on firefox, there is a gap that is probably 30px tall.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div style="background-color: blue;">
<h1>hello</h1>
</div>
</body>
</html>
CSS:
body {
margin: 0;
}
You need to remove the margin on the heading as well. For example:
body, h1 {
margin: 0;
}
body, h1 {
margin: 0;
}
<div style="background-color: blue;">
<h1>hello</h1>
</div>
You could make it easy for yourself and reset all margins/paddings in your CSS (won't affect elements);
* {
margin:0;
padding:0;
}
Certain browsers will put margin around header tags. It's always a good idea to include a reset.css file on your site so that things appear how you want them to cross browsers.
Here's a simple reset.css file for you to include.
I have a quick question, I'm making a simple html document, with an image that I want to fill the entire page.
For some reason, it wants to create a border around the image. I've tried border="0"; and padding 0px 0px 0px 0px;
Here is the code in which I have: (You can also check it out live if you prefer www.kidbomb.com/chefwannabe)
<!DOCTYPE html>
<html>
<head>
<title>Pre-Order Now!</title>
</head>
<body>
<img style="width: 100%; overflow:hidden;" src="http://www.kidbomb.com/chefwannabe/chefwannabepreview.png" />
</body>
</html>
Add the following CSS in your code. Default body will give some margin and padding. So better whenever you start new work, add this style in your css for getting the proper result.
body
{
padding:0;
margin:0;
}
Instead of using the img tag, set the background-image property of the body tag so it encompasses the entirety of the page.
body {
background-image: url("path/to/image.jpg");
height: 100%;
width: 100%;
}
So I've finally decided to try and code my own website after doing a basic GFX from my understandings. First off, I'd like to position everything obviously, but for some reason I just CAN'T seem to get the hang of it, it's so frustrating.
The main error I keep getting is that it does not seem like it will fit ANY resolution which irritates me. I've heard to use %, but that does not seem to solve the issue.
The most current error I am running into is that my image does not even show up when I have my code like the following:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="refresh" content="30">
<meta name="keywords" content="Voyage, Voyage Community, Website">
<meta name="description" content="Voyage Community">
<title>The Voyage</title>
<link href="site.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<body background="images/Background.png">
<div id="header">
<div class=".headerImage1">
</div>
This is my css stylesheet:
#header
{
width:100%;
height:auto;
}
.headerImage1
{
background-image:url('images/Header.png');
position: absolute;
width: 100%;
height:120px;
}
Any help?
EDIT: This is the latest update:
body
{
margin: 0px;
padding: 0px;
background: url("images/Background.png")
}
#header
{
position: absolute;
top: -160;
left: 420;
right: 0px;
}
.headerImage1
{
margin: 0px;
padding: 0px;
position: absolute;
width:100%;
height:100%;
background-repeat:no-repeat;
}
Now do I do the positioning in HTML instead of CSS?
(Here is an IMG to how it looks currently: http://puu.sh/6Rg11.jpg)
(Just took another SS to show what it looks like on a different resolution: http://puu.sh/6RgHg.jpg - Why is it showing different?
Regarding images not showing up:
First, remove the dot in <div class=".headerImage1">
Classes only have a dot in front of them in CSS style definitions, not in HTML.
The dot itself means, "this is a class" in CSS.
Similarly, if you had id="words" in HTML that'd be #words in CSS.
Second, in your CSS use this, and remove background= from your HTML:
body {
background: url("images/Background.png")
}
For both situations, make sure your images actually exist at the URI you are using. If they are off the root directory, start the URI with / ( i.e. /images/ rather than images/ )
Regarding the resolution/positioning issue:
First, remove extra spacing. Make sure to include something like this to remove extra space added automatically, which you don't want if you expect 100% coverage for anything:
#header {
margin: 0px;
padding: 0px;
/* the above remove extra space around and inside #header */
width:100%;
height:auto;
}
/* add this to your body tag in CSS */
body {
margin: 0px;
padding: 0px;
}
Second, set a location for your #header when you use position: absolute, like this:
#header {
position: absolute;
top: 0;
left: 0;
right: 0px;
}
Incidentally, when you do that second thing, the first is likely not needed, and you don't need to use width: 100% either.
Last, the way you seem to be intending it to work, you want to use an <img> tag for headerImg1 and set your sizing as I showed for #header above, instead of sizing the image directly. Otherwise, you need to move your top, left, right attributes to the class as you have it now, rather than #header as I did.
Hello expert i am trying to build a welcome page like facebook. I want a header with different color with fixed width with browser just like facebook welcome page. I have created a div id with 100 width. But the width is not fitting with the browser. it showing in the body. Please tell me how to do this. I am absolutely new in all of this.
Index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="welcome.css"/>
<title>Welcome To The Thinkers</title>
</head>
<body>
<div class="header"><h1>Welcome To Thinkers</h1></div>
</body>
</html>
CSS
body{
background-color:yellow;
width:100%;
}
p{
font-size:23px;
color:#930
}
.header{width:100%;
height:72px;
background-color:green;
}
If I understand you correctly I think your problem is with default margin/padding on certain elements.
If you add
body, h1
{
margin:0;
padding:0;
}
It should sort that out.
Demo
Try this code:
//these code is for fixed header
.header{
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #0683c9;
}
I've setup a simple webpage, and there is a weird gap at the top which I don't know how to fix. Other sites I've developed haven't had this issue at all..?
Here's my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>sitename</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="wrapper">
lorem ipsum
</div>
</body>
</html>
And the CSS:
body {
background-color:#323232;
}
#wrapper {
width:960px;
margin:0pt auto;
background-color:#272727;
}
And here's a pic of the weird gap:
Is this just my version of FireFox acting up temporarily or am I doing something obviously wrong?
I think by default browsers do tend to add margin or padding to either the <html> or <body> element, I can never remember which.
Edit: as per other answers and comments (e.g. Rahool’s), looks like it’s margin on <body>.
So this should sort out your issue:
body {
margin: 0;
}
For every page, each web browser uses a set of default styles before any other css styles are applied.
Mozilla default style sheet
Internet Explorer User Agent Style Sheets
You will need to reset the styles applied by these default css.
Firefox applies default 8px margin to body element. To reset it,
body {
margin: 0;
}
Because the body tag default margin, and you need to reset it, such as:
body {
margin: 0;
}
Try adding
*{
margin: 0px;
padding: 0px;
}