I tried to recreate the problem I'm having in my current design. First of all, here is the link:
http://cssdeck.com/labs/tohtb9gx
HTML:
<head><title>test</title></head>
<html>
<body>
<div id="container">
Test what is going on?
</div>
</body>
</html>
and css:
body {
margin: 0;
background-color: black;
font-size: 2em;
color: white;
}
#container {
margin: 100px;
}
the problem is margin. When there is this big margin, no matter how little the content is, IE always renders the page with scroll. The page is fine in Chrome and FireFox, but even with no content, the magical mighty IE is always hungry for the mysterious scroll.
Why is this happening?
How can I solve this?
Here is the Solution for your problem.
Give float for body.
body {
margin: 0;
background-color: black;
font-size: 2em;
color: white;
height: 100%;
width: 100%;
float: left;
}
#container {
margin: 100px;
}
<html>
<head>
<title>test</title>
</head>
<body>
<div id="container">
Test what is going on?
</div>
</body>
</html>
Related
I have created a sticky footer, a footer that hugs the bottom of the window whether or not there is enough content to fill the page. My implementation works well except for one minor issue when rendering in Internet Explorer. If the content fills the page and any of my content divs have an unspecified height, a crack appears beneath the footer. This also happens if the content contains a span with or without a fixed height.
Below is my implementation. If I give Div 2 a fixed height the footer tightly hugs the bottom of the window, but by not setting a height the crack appears. I have been unable to resolve this. Any suggestions on how to prevent it would be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Sticky Footer</title>
<style type="text/css">
Html, body {
margin: 0;
height: 100%;
background-color: lightgreen;
}
header {
height: 40px;
background-color: green;
}
footer {
bottom: 0;
position: absolute;
width: 100%;
height: 40px;
background-color: gray;
}
.fixedHeightDiv {
border: 2px;
border-style: solid;
height: 500px;
}
.container {
min-height: 100%;
position: relative;
}
.content {
padding-bottom: 40px;
}
</style>
</head>
<body>
<div class="container">
<header>Header</header>
<div class="content">
<div class="fixedHeightDiv">
Div 1
</div>
<div>
Div 2
</div>
<div class="fixedHeightDiv">
Div 3
</div>
</div>
<footer>Footer</footer>
</div>
</body>
</html>
I'm attempting to learn HTML and CSS, but have run into a tiny stumbling block.
I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>Testing My HTML and CSS</title>
<style>
* {
padding: 0;
margin: 0;
}
.header {
background-color: black;
height: 100px;
width: 100%;
}
.header h1 {
margin-top: 0;
text-align: center;
color: white;
height: 100px;
width: 100%;
}
.sidebar {
background-color: #ebebeb;
position: absolute;
width: 200px;
height: 100%;
}
</style>
</head>
<body>
<div class="header">
<h1>Hello, World!</h1>
<div class="sidebar">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</body>
</html>
which can be ran here.
I want to have the <h1>Hello, World!</h1> in the center of the .header. I've tried playing with the margin-top in .header h1, but it moves the entire .header.
Sorry for such a simple question -- I'm a complete newbie.
If your're not planning to add more elements to the header, you can just add line-height: 100px; to the .header h1 ruleset. That's it...
Vertical align can be tricky, if you don't want to mess around with a lot of code, this is the shortest way to accomplish it. As a general rule, to center text vertically into an element, just make its line-height equals to the element's height (unless you have some padding or margin changing stuff).
Use line-height instead as following:
.header {
background-color: black;
height: 100px;
width: 100%;
line-height:2;
}
Please try this demo
or you can try this using
.header{
line-height:3;
}
I am working on a small project just for my own fun. I have made a navbar at the top of the html page and I used some css to make it look nicer.
Here is the html
<html>
<head>
<title> Website </title>
<style type="text/css">
body {
margin: 0;
background: #F2F2F2;
}
.navbar {
margin: 0;
padding: 0;
width: 100%;
height: 45px;
background: #12B0CD;
position:fixed;
}
#navbar-logo {
font-family:'Lato', Arial;
font-size: 35px;
color: white;
border: none;
background: #12B0CD;
}
.content {
top: 50px;
margin: none;
width: 100%;
height: 50%;
z-index: -1;
}
</style>
</head>
<body>
<div class="navbar">
<div id="navbar-logo">
<button id="navbar-logo">Fancy Name </button>
</div>
</div>
<div class="content">
<div id="content-box">
</div>
</div>
</body>
</html>
If you pop this into notepad and open it in a browser you will see that the class content does not show and I don't know why. I need help. In the normal code I use stylsheets I don't know if that would change anything.
Since your content box is empty, and you are using percentages, the box needs it's parent (body) to have a height. If you set, width:100%;height:100%; on your body you should see the box.
Have a problem trying to have a header tab strip occupy the entire width of the browser. Below is the code. When the page is viewed in a browser, I see a horizaontal scroll bar for the browser, so, when you scroll over to the right, the bluish tab cuts out, revealing the white background.
How can I have this header tab expand when scrolled over too?
THanks.
<html>
<head>
<style type="text/css">
html, body, div { margin: 0; padding: 0; }
html, body,form, #wrapper, #left, #right { height: 100%; min-height: 100%; }
#wrapper { margin-left: 10px;overflow: hidden; width: 100%; }
#left { background: yellow; float: left; width: 360px; }
#right { background: grey; margin-left: 360px; }
</style>
<title>Example</title>
</head>
<body>
<div id="tabstrip" style="height: 25px; background-color: #63a3c7; color: White;">
</div>
<form id="form1" runat="server">
<div id="wrapper">
<div id="left">
Left
</div>
<div id="right"></div>
</div>
</form>
</body>
</html>
It's coming from the margin-left: 10px; on your #wrapper. Remove it and the problem goes away.
jsFiddle example
If for some reason you need that bit of margin there, put it on the form instead.
See this. I removed the wrapper width 100%.
#wrapper { margin-left: 10px;overflow: hidden; }
Hope this helps!
My footer if quite high so I'm wondering if it is possible to get the content to overlap it slightly whilst still remaining in the content flow?
I suppose the alternative is to make the footer a few thousand pixels high and position it at the bottom. It's not an elegant solution though, anyone have a better idea?
http://www.digiflipconcepts.com/temporary-images/footer-overlap.jpg http://www.digiflipconcepts.com/temporary-images/footer-overlap.jpg
That seems a nice idea. If you need overlapping, then some absolute position must be done.
Set your footer absolutely to the bottom of the page and z-index:0. Then your content z-index:1 and padding-bottom: (footer height - desired overlap).
You can use sticky footer which I found a while ago in this question
I made this which works in Firefox, but I can't get it to play nice with IE 7. Anybody's help would be awesome.
EDIT: Made it work
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>A CSS Sticky Footer with Overlap</title>
<style type="text/css">
body {
text-align: center;
}
.wrapper {
margin: 0 auto -142px;
position: relative;
text-align: left;
width: 700px;
}
.header {
/*Go download the header yourself from http://ryanfait.com/sticky-footer/header.png
Please don't steal the guy's bandwidth*/
background: transparent url(header.png) no-repeat scroll 0 0;
height: 160px;
}
.footer_bg {
/*Go download the header yourself from http://ryanfait.com/sticky-footer/footer.jpg
Please don't steal the guy's bandwidth*/
background: transparent url(footer.jpg) no-repeat scroll 0 0;
border: 1px solid blue;
height: 100%;
margin: 0 auto;
width: 700px;
}
.footer {
clear:both;
border: 1px solid red;
margin: 0 auto;
position: relative;
width: 100%;
}
.footer_bg p {
bottom: 4px;
color: #FFFFFF;
left: 0;
position: absolute;
text-align: center;
width: 100%;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
height: auto !important;
min-height: 100%;
}
.push {
height: 142px;
position: absolute;
}
.footer {
height: 142px;
z-index: -1;
}
#content {
z-index: 10;
}
</style>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>CSS Sticky Footer</h1>
</div>
<div id="content">
<h2>A CSS sticky footer that just works</h2>
<p>We've all tried to use a <strong>sticky footer</strong> one time or another, but they never seem to come out right, do they? Well, the days of a hard to understand CSS-based <strong>sticky footer</strong> are thankfully over. In just a few simple CSS classes with minimal extra HTML markup, I've fashioned a <strong>sticky footer</strong> that even beginners can get a handle on. It's been tested in IE 5 and up, Firefox, Safari and Opera.</p>
<h2>Usage of the CSS</h2>
<p><q>Great! this is exactly what I'm looking for! Can I use it?</q></p>
<p>Absolutely. There are no terms, licenses, fees or requirements. Use it as you will. If you find the kindness to link to me on your site, I'd appreciate it, but it's by no means necessary. Have fun, and don't be afraid to ask me any questions or send me your thoughts.</p>
<p class="download">View the CSS or learn about using it</p>
</div>
<div class="push"></div>
</div>
<div class="footer">
<div class="footer_bg">
<p>Copyright © 2006-2008 Ryan Fait</p>
</div>
</div>
</body>
</html>