I am creating a web page. Even though i have added margin:0px and padding:0px still some blank space is present at the top of my web page. here is my css code for body section.Any solutions?Thanx in advance..
<html >
<head>
<style>
html {
margin: 0;
padding: 0;
}
#navR
{float:right;
margin-right:0px;
}
#mR{
float: right;
}
.bodyl{
height: 100%;
background-color: #F8FADE;
font-family: Arial;
font-size:15px;
margin:0px;
top: -22px;
clear: both;
}
.local{
background-color:#DEB887;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
padding:0px;
width:100%;
vertical-align: baseline;
}
.heading{
font-size: 250%;
color:#5B3205;
margin-top:10px;
font-style: oblique;
}
</style>
</head>
<body>
<div class="local">
<p id="mR"><strong>My name</strong></p>
<h3 id="navR"> <a>logout</a> </h3>
<h1 class="heading">My space</h1>
</div> </br>
</body>
</html>
You are using a <h1> tag. This text has a default margin set by the browser. You can set a margin-top: 0px in your .heading class. That will fix the problem.
edit: In your case you should replace margin-top: 10px with margin-top: 0px
Please also set margin to 0 on your html attribute
body, html {
margin: 0;
padding: 0;
}
Then it should work perfectly for you, as it does for me. It could also be possible that you have a child attribute that has a certain margin and so it could lead to that white space.
Related
I seem to be having an issue with my Science project.
For some reason in Safari and Firefox (Haven't tested Chrome), There seems to be a padding/margin on the top menu, the iframe seems to be working fine, I'll replace it with a div for now and links to nowhere, yet the top of the document doesn't and has what I guess would be a top border, I don't recall adding it though. I honestly can't see whats wrong.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Science Project</title>
<style>
html, body {
margin: 0 0 0 0;
padding: 0;
width: 100%;
height: 100%;
background-color:#000;
}
div.header {
background-image: linear-gradient(to bottom, #FFFFFF 0%, #E0E0E0 100%);
height: 100px;
width: 100%;
font-family:Arial, Helvetica, sans-serif;
color: #000;
border-bottom:20px solid #09F;
border-top-left-radius:12px;
}
p.title {
padding-top: 20px;
padding-left:20px;
}
div.menu {
width:100%;
height:80px;
border-bottom-left-radius:12px;
background-color:#fff;
border-bottom: 1px solid #000;
}
a.button {
display:table-cell;
width:120px;
height:80px;
border-bottom-left-radius: 10px;
background-color:#999;
text-decoration:none;
color:#FFF;
text-align:center;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.content {
height:calc(100% - 221px);
width:100%;
}
</style>
</head>
<body>
<div class='header'>
<p class='title'>The Big Bang Theory Explained.</p>
</div>
<div class='menu'>
<a class='button' target='content'><div class="centertext"><p>What is the big bang?</p></div></a>
</div>
<div class="content"></div>
</body>
</html>
If you could let me know what exactly I'm doing wrong here, I was able to get this to work last time. I'm just finding this rather odd.
jsfiddle: http://jsfiddle.net/ny4fH/
Thanks!
Josh
You are experiencing margin-collapse.
<p class='title'>The Big Bang Theory Explained.</p>
Paragraphs, by default have a top and bottom margin. This is the problem. You can prevent margin collapse with:
.header { overflow: hidden }
Or other fancy tricks described here. (Fiddle)
your code is ok.
Just remember to reset values of the tags you use. In this case it was the paragraph tag.
p { margin: 0; }
You can as well avoid paragraphs margins by hiding the parent (.header) overflow
.header { overflow: hidden; }
I'm trying to make a horizontal nav bar on my website and I want to use CSS to position it closely under my websites name header and a portion of the background of the nav bar behind the icon to the left. Here is my code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Oldnut.com</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
var currPic=1;
var totPics=2;
var keepTime;
function setupPicChange()
{keepTime=setTimeout("changePic()", 5000);}
function changePic()
{currPic++; if(currPic>totPic)currPic=1;
document.getElementByld("image").src="image"+currPic+".jpg";
setupPicChange();}
</script>
</head>
<body onLoad="setupPicChange();">
<div id="wrapper">
<div id="content">
<div id="banner">
<div id="img"><img src="images/Walnut.png" class="nut-image"></div>
<div id="top">Oldnut.com</div>
</div>
Home
Preassmbled
CPU
GPU
<div>
<img id="image" src="images/image1.jpg" alt="picture">
</div>
<div id="deals">
</div>
</div>
<div id="foot"
</div>
</div>
</body>
</html>
Not much to see here I guess it's obvious what I am doing, and my CSS
#charset "UTF-8";
body{background-image:url(../images/bg_bodytakeover.png);
}
#wrapper{
margin-left:auto;
margin-right:auto;
width:1000px;
}
.nut-image {
z-index: 1000;
position: relative;
}
#content{
margin-left:10px;
margin-right:10px;
padding-bottom:20px;
box-shadow:0px 0px 20px 3px;
border-radius:4px;
background-color:#FFFFFF;
height:600px;
position: relative;
}
#banner{
margin:auto;
position: relative;
}
#img{
float:left;
}
#top{
float: left;
color: #FF6600;
text-align: left;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: bold;
font-size: 75pt;
text-shadow: 2px 2px #FFFFFF;
text-transform: uppercase;
}
nav {
position: absolute;
width: 100%;
background: #FF6600;
top: 110px;
}
#list-nav{
list-style-type:none;
margin:0;
padding:0;
width:calc(100% - 192px);
float:right;
top: 125px;
}
#list-nav li{
float:left;
width: 25%;
padding: 0;
margin: 0;
}
#list-nav li a{
text-decoration:none;
width:100%;
background:#FF6600;
color:#eee;
float:left;
text-align:center;
display:block;
}
#list-nav li a:hover{
background:#1d8ed0;
color:#000;
}
Now I want to have my nav bar very closely under the giant header text and the orange line background to go under the icon to the end of the white content border. I've tried all sorts of padding and margin mixing but its really just making a mess. I have looked around extensively but nothing seems to be working for me what works for others. Or I can't get all of what I'm looking to do. Anyone got any tips?
EDIT:I've tried a lot of padding to get the nav bar to stretch the screen but it keeps breaking the even separation of the buttons and their hover effects, is there another way to sort them evenly?
*SECOND EDIT NEW QUESTION*
I am trying to have my images change back and forth between the two after 5 seconds. I have seen code from other sites and don't see why it isn't working. Anyone notice what is wrong?
Update for comment:
I've updated the fiddle here to have exactly what you want. If you can't use calc on the list items and since you have a set width of 1000px, you can hardcode the widths in by doing this: width: (1000px - 192px) / 2, which would be width: 202px
Original answer:
If you will always have 4 menu items, set width: 25% (100% / 4) on each #list-nav li. Here's an updated fiddle
I also set the margin and padding on the li elements to 0.
Is this what you are looking for?
I want to delete the margin top of my page. I will show you what I mean with a screenshot
You can see in my pic there are a red arrow that indicate my problem. How I can delete this margin?
I post here my css:
div#header {
background-color: #6495ED;
background: -moz-linear-gradient(100% 100% 90deg, black, gray);
background: -webkit-gradient(linear, center top, center bottom, from(gray), to(black));
margin: 0px;
width: 100%;
}
body {
background-color: #000000;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
h1 {
text-align: center;
color: #FFFFFF;
font-family: sans-serif;
font-size: 26px;
font-weight: bold;
padding: 5px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
color: #FFFFFF;
font-family: sans-serif;
}
p {
color: #FFFFFF;
font-family: sans-serif;
padding: 5px;
}
a {
text-decoration: none;
color: #FFFFFF;
}
So any suggestion about how I can delete this margin just above my header?
Here you can see my html:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<title>Lista coupon</title>
<script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../js/memoria.js" type="text/javascript"></script>
<style src="../css/style.css" type="text/css"></style>
</head>
<body onload="loadJson();">
<div id="header">
<h1>Lista coupon salvati</h1>
</div>
<div id="content">
<p>Di seguito trovi tutte le promozioni salvate</p>
<div id="list">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
Set margin: 0; to <h1> element
Demo: http://jsfiddle.net/5w6Es/
Same problem as with the margin-left of <ul> elements, or margin-top / margin-bottom of <p> elements, etc.
You need to reset their default styles when using them at the borders of your page.
Try removing padding and margin also for the html element, (not only the body)
Try also to remove the default margin (differently) applied by every browser to the h1 element that you didn't redefined/reset and which is probably collapsing over the #header element
html {
margin: 0;
padding: 0;
}
h1 {
...
margin: 0;
}
You need to add margin:0px; to this CSS: http://jsfiddle.net/vv6DL/
h1 {
text-align: center;
color: #FFFFFF;
font-family: sans-serif;
font-size: 26px;
font-weight: bold;
padding: 5px;
margin:0px;
}
You don't say what browsers its occuring in.
If you use Firebug and its tools you should be able to see what is causing the spacing and then set that to zero, however, a "cheat" would be to use a reset css script such as Meyers http://meyerweb.com/eric/tools/css/reset/ to clean up all those browser inconsistencies.
Try This
h1
{
margin:0px;
}
The best way I've found to do this is by adding the :first-child pseudo-element in your css to your first element such as <h1> or <ul> etc etc within your body-element.
So an example using your mark up above would be
h1:first-child { margin-top: 0; }
This eliminates interfering with all further <h1> elements in your code and also without needless css classes added to your html mark-up.
I hope this helps as I was having the sam problem with little luck with the answers provided.
Sorry to ask the same question many before me have asked... I have read lots of these and they all say change
margin: 0;
There is a gap between the two divs (div class ="heady" and div class="menus") I just can't seem to get rid of the white space, hopefully it is clear enough, let me know if its not.
Thanks James.
html
<?xml version="1.0" encoding="UTF-8"?>
<!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">
<head>
<title>website</title>
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<link rel="stylesheet" type="text/css" href="CSS/style1.css" />
<body>
<div class="heady">
<br></br>
<h1><a class="header" href="index.html">website</a></h1>
</div>
<div class="menus">
<ul>
<il><a class="list" href="x.html">About</a></il>
<t> | </>
<il><a class="list" href="y.html">Beginners</a></il>
<t> | </>
<il><a class="list" href="z.html">Advanced</a></il>
<t> | </>
<il><a class="list" href="contact.html">Contact</a></il>
</ul>
</div>
</body>
</html>
CSS
/*general rules*/
html,body {
font-size:11pt;
font-family: 'Lucida Grande', 'Lucida Sans', Geneva, Arial, Helvetica, sans-serif;
color: black;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
background-color: white;
padding-top: 0px;
margin-top: 0px;
}
h1 {
font-size: 25pt;
margin-left:10px;
margin-bottom:0;
padding-bottom: 0;
}
a:link, a:visited {
color: white;
}
a:hover, a:active {
color: grey;
}
/*header section rules*/
div.heady {
height: 200px;
width: 760px;
padding: 0;
background-color: grey;
background-repeat:no-repeat;
margin: 0;
}
a.header {
text-decoration: none;
}
a.header:link, a.header:visited, a.header:active,a.header:hover {
color: red;
margin:0;
}
div.menus {
padding: 0;
margin:0;
background-color:black;
width: 760px;
text-align: center;
font-size:12pt;
}
a.list {
margin:0;
}
Here is a link to a jsFiddle.
Browsers apply default styles to ceratin elements. In this case it's ul that gets some margin. Note that this margin separates the divs even though the divs themselves have no margins.
Use
ul { margin: 0; }
or include a reset stylesheet
Are you using the Firebug plugin for Firefox? Even if you don't already use firefox, you should download it along with the firebug plugin. With Firebug you can look at an element in your source code and see the styles that are being applied, the layout (width/height, padding, margin), and even manipulate the styles to view what a change in your CSS would do.
I HIGHLY recommend it!
Download Firefox
Download Firebug
.heady { display:block; }
.heady { margin:0; padding:0; }
.heady { line-height:100%; /* or even 0 (if no text present) */ }
the content can fool here, but 1 or all 3 of those should tame the beast across browsers.
google for a "css reset" too
I'm very new to html and css so feel free to critique any bad practices you see in the code below...
I am trying to create a centered column that's 800 pixels across and the banner will be resized to 800 pixels. When view this page in chrome or firefox it looks great. When I view it in IE8 the font is huge, there is a giant empty spot on the right side of the banner all the way down to the bottom, and the size of the "container" will not change no matter what I do in the css file.
CSS:
body {
font-family: Arial;
font-size: small;
background-color: #FFFFFF;
background-image: url(../images/victorianBackground.jpg);
background-position: top;
background-repeat: repeat;
color: #000000;
}
#container {
margin: -10 auto;
background-color: #D3CDBA;
text-align: left;
}
html>body #container {
width: 800px;
min-height:800px;
padding: 0 0px;
}
#banner {
width:800px;
}
#banner img {
width:800px;
padding:45 0px;
}
#content {
width:500px;
padding: 15px;
background-color: transparent;
}
/* Navigation */
#navigation ul {
list-style-type: none;
width: 800px;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
background-color: #D3CDBA;
}
#navigation li:hover {
float: left;
color: #4676A4;
background-color: #D3CDBA;
}
#navigation a {
font-weight: bold;
text-decoration: none;
color: #000000;
display: block;
padding: 5px;
}
#navigation a:hover {
font-weight: bold;
text-decoration: none;
color: #992332;
}
#content a {
color:teal;
}
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Park Avenue Neighborhood Association</title>
<meta name="keywords" content="Park Avenue Neighborhood Association Syracuse New York"/>
<link rel="stylesheet" type="text/css" href="../styles/style1.css">
</head>
<body>
<div id="container">
<div id="banner">
<img src="../images/banner.jpg" id="banner">
<br/>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>History</li>
<li>Houses</li>
<li>Local Business</li>
<li>Events</li>
<li>Contacts</li>
</ul>
</div>
<div id="content">
<h2>Content Header 1 </h2>
<p>Awesome Content </p>
<h2>Content Header 2 </h2>
<p>Awesome Content </p>
</div>
</body>
</div>
</html>
There are multiple issues I see with your source. Non-exhaustive list:
1) You need a doctype. Otherwise, browsers will render items in a non-standard way.
Example:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2) You have a <div> ending after the </body> tag. This is invalid.
Fix:
<p>Awesome Content </p>
</div>
</div>
</body>
</html>
3) You don't need the extra <br> in <div id="banner">.
Fix:
<div id="banner">
<img src="../images/banner.jpg" id="banner">
</div>
4) Now, if you want <div id="container"> to be centered and have a width of 800px, try the following.
Centering code that goes in your css (replaces existing):
body { text-align: center; }
#container {
text-align: left;
width: 800px;
margin: auto;
}
5) For your font-size declaration, you're using small. This will behave unpredictably. Instead, consider using either em or px for font size.
Font size with em:
body { font-size: 100%; line-height: 1.125em; }
#container { font-size: 0.875em; }
Font size with px:
body { font-size: 16px; line-height: 1.125em; }
#container { font-size: 12px; }
First thing I saw, you need to add this to the very first line of your HTML to force IE to render in standards mode, instead of quirks mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
In regard to centering the banner, try adding the following:
in body selector:
text-align: center;
in banner:
margin-right: auto;
margin-left: auto;
In regard to font size try using em or % sizing.
Other than that just tackle the problems one at a time, fine tune the details incrementally. Throwing in everything all at once will only create confusion - chances are it wont work as expected, but will frustrate you.