I want to have a div in footer from side by side, but with this code it is leaving a white border.
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#bottomnav {
background-color: #333;
opacity: 1;
height: 100px;
left: 0;
right: 0;
bottom: 0;
overflow: visible;
}
</style>
</head>
<body>
<footer>
<div id="bottomnav">
Hello
</div>
</footer>
</body>
</html>
From your description, I can't tell quite what problem you have, but I'm guessing it's the margin on the body element. Try this:
body {
margin: 0;
}
You need to reset body margins to zero.
body {
margin: 0;
}
you need to clear the body margins
* {margin:0; padding:0;}
but universal selectors can affect you page load times
Have a look at css resets and what the various fixes can do for your browser
http://www.cssreset.com/
also this may explain a bunch of things for you http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/
Related
I'm a total HTML noob. Last time I used html must have been using Dreamweaver over 20 years ago.
I got an iframe that loads my application. This is working fine but above the iframe I would like to add a header with an image and background color. Probably a percentage instead of a fix size to make it look good on different resolutions?
Below the iframe I want to add a small space with a short text.
How would I add that to this code?
<!DOCTYPE html>
<html>
<style type="text/css">
html, body { margin: 0; padding 0; width: 100%; height: 100%;}
iframe { border: 0; width: 100%; height: 87%; }
</style>
<body>
<iframe src="myapplicationip"></iframe>
</body>
</html>
Check out CSS background-image, HTML5 header and footer tags.
Using HTML5 tags you can start like this:
<!DOCTYPE html>
<html>
<style type="text/css">
html, body { margin: 0; padding 0; width: 100%; height: 100%;}
header{ background-image: url("img_tree.png");}
iframe { border: 0; width: 100%; height: 87%; }
footer{color:blue;}
</style>
<body>
<header>
<h1>Your header</h1>
</header>
<iframe src="myapplicationip"></iframe>
<footer>
<p>Your footer</p>
</footer>
</body>
I don't know how else to describe it, not fullscreen, but fill up the whole viewport.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1001001</title>
<style id="style-tag"></style>
<script src="dist/app.js"></script>
</head>
<body spellcheck="false">
<div id="content">
<pre contenteditable id="style-text"></pre>
</div>
<div id="footer">
Skip
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
pre {
overflow: auto;
min-height: 100%;
width: 100%;
border-radius: 1px; /* Prevents bad clipping in Chrome. */
}
#content {
position: absolute;
top: 0; right: 0; left: 0; bottom: 20px;
}
#footer {
position: absolute;
bottom: 0;
height: 20px;
left: 0;
right: 0;
padding: 0 10px;
}
Expected outcome:
The coloured block fills the entire screen (I require this to be a as text is added afterwards).
Actual outcome:
Viewport is almost covered by the block, however, on the top and bottom, there is about 10px that are not coloured.
If you set the css min-height property as min-height:100vh; (rather than 100%) on the <pre> element, that should solve your issue, by forcing the height of the element to at least the full viewport height.
Edit - also add margin:0; to the style of the <pre> element. That seems to work for me.
Hope this helps! - James.
I've got CSS issue with footer on my webpage. I've used this article, but I've got empty space between footer and bottom of the page. Since there is no content in the body of my page the empty space is still here and there is an additional scrollbar when it's not needed. I really don't know why it's there. I've cleaned the CSS so there isn't any irrelevant code.
HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>My Page</title>
</head>
<body>
<div id="container">
<div id="header">
<p>
Header Content
</p>
<hr>
</div>
<div id="body">
Body Content
</div>
<div id="footer"><p id="copy">Copyright 2013</p></div>
</div>
</body>
And CSS:
html, body {height: 100%}
body {
margin: 0px;
padding: 0px;
}
#copy {vertical-align: bottom;text-align:center;font-family:Century Schoolbook;color:#8B0B04;font-size:14px;}
#footer {bottom: 0;width:100%;position: absolute;height: 60px}
#container {min-height: 100%;position: relative}
#body {padding-bottom: 60px}
My browser is Firefox, but in Chrome this doesn't work too. I will be so happy if you will give me any feedback and help. Thanks!
EDIT: I've posted something wrong imho. I will post the whole page next day. Again thanks for feedback.
Use overflow:hidden for container for removing the scroller
#container {
min-height: 100%;
position: relative;
overflow: hidden;
}
and padding-bottom for body div
#body{
padding-bottom:20px;
}
Demo and here is Demo with content
Maybe try this css instead of what you have up there:
html, body {
height: 100%
}
body {
margin: 0px;
padding: 0px;
}
#copy {
vertical-align: bottom;
text-align:center;
font-family:Century Schoolbook;
color:#8B0B04;
font-size:14px;
}
#footer {
bottom: 0;
width:100%;
position: absolute;
}
#container {
min-height: 100%;
position: relative
}
Please have a look at this jsfiddle
<!DOCTYPE html>
<html lang='en'>
<head>
<style>
body { height: 100%; margin: 0; padding: 0;}
div { height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background: black;}
img { height: 100%;}
</style>
</head>
<body>
<div><img src='https://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg'></div>
</body>
</html>
Even setting height 100% for both and , there still has little extra space in the bottom that causes the scrollbar. Does anyone know what causes that space?
I just want to know the behavior.
Thank you!
The img tag is an inline tag and the extra space you're seeing is due to this. Add display:block to the style of the image.
I have a pretty run-of-the-mill website: header, body and footer. The header and body are green, but the footer is black. The site looks fine when there's a large amount of content, but on pages with only a paragraph or two, the footer doesn't extend to the bottom of the page (especially on larger monitors), and the green background of the site extends beyond the footer - not the effect I'm going for.
Is there a way to set the footer height to extend all the way to the bottom of the page, regardless of content and monitor size? Ideally this would be done without using Javascript.
You are looking for a sticky footer. I have had good experiences with Ryan Fait's solution, but this new sticky footer manages to work without the extra tags.
From the exposition on the sticky footer:
In the head:
<style type="text/css">
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
And for your body:
<div id="wrap">
<div id="main">
<!-- Your content here -->
</div>
</div>
<div id="footer">
</div>
Edit
From your explanation, it seems that I misunderstood you. You are looking for an auto-expanding section, rather than a sticky footer. If this is the case, you can get that effect by using display: table (though it doesn't work in as many browsers as the sticky footers do - it fails in IE 7, for example).
I have created an example here.
The code, for reference:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
min-height: 100%;
padding: 0;
}
.Wrapper {
display: table;
min-height: 100%;
min-width: 100%;
height: 100%;
width: 100%;
}
.Contents {
background-color: #CCC;
display: table-row;
min-height: 100px;
}
.Footer {
background-color: #0C0;
display: table-row;
min-height: 100%;
}
.data {
display: table-cell;
}
.Wrapper .data {
height: 100px;
}
.Footer .data {
height: 100%;
min-height: 40px;
background-color: #0C0;
}
</style>
</head>
<body>
<div class="Wrapper">
<div class="Contents">
<p class="data"> </p>
</div>
<div class="Footer">
<p class="data"> </p>
</div>
</div>
</body>
</html>
You could add a dummy div and style that with CSS to match the height of your navigation pane, with your footer below this div, it'll always style the way you want.
It would be better if you did use some JavaScript, it wouldn't be complicated at all.
If I'm understanding your question correctly, you'll need to clear the footer, by applying clear:both; in css selector for the footer.
would suggest going for the js alternative..seems much easier..please tell us if there's any specific reason to avoid js based styling in your case...the only other alternative i could think of is hardcoding the body content div dimensions and setting the footer position fixed..not ideal