I am currently learning HTML & CSS and wrapping my head around positioning i.e fixed, relative and absolute. I understand the concepts of each pretty well , at least I thought I did until my footer tag completely disappeared within itself when I set it's position to absolute. I know your asking what does disappeared within itself mean ? It means I had to adjust the left position value from 1024 to 850 just to be able to see the footer again. Which makes me ask why the did the position value jump so high after setting the footer the absolute?Essentially that's the question I am asking. I hope I explained well enough. I tried to include a picture but Stackoverflow wouldn't let me since this my first post. Also i had three other 3 other divs on the page with the footer, div and header elements positions are set to relative.......code below.
main, header, footer{
display: block;
}
.page-container{
width: 95%;
margin: 0 auto;
background-color: #050111;
position:relative;
}
header{
width: 100%;
height: 60px;
margin: 0px auto;
background-color: blue;
text-align: center;
position: relative;
}
h1{
color: white;
line-height: 50px;
margin: auto;
}
main{
width: 100%;
height: 500px;
margin: 10px auto;
background-color: rgb(24, 223, 223);
text-align: center;
}
footer{
widows: 100%;;
height: 120px;
margin: 0 auto;
background-color: blueviolet;
text-align: center;
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="main.css">
<title>Layout practice</title>
</head>
<body>
<div class="page-container">
<header>
<h1>This is the header of the page</h1>
</header>
<main>
<h1>Main Content</h1>
</main>
<footer>
<h1>Footer</h1>
</footer>
</div>
</body>
</html>
position:absolute; will place an element relative to its ancestor element. So if you positioned your footer as absolute it will start from where the body of the page starts.
footer{
position:absolute;
bottom:0;
}
Adding bottom:0; will place your element at the very bottom of the body.
Related
I have the following code in HTML for footer.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" type="text/css" href="style_testfooter.css">
</head>
<body>
<div class="footer">
<p>hello</p>
</div>
<div class="footerdark">
<p> hello</p>
</div>
</body>
</html>
And similarly CSS code is as follows :
.footer {
position: relative;
left: 0;
bottom: 110px;
width: 100%;
background-color: #303740;
color: white;
text-align: center;
padding: 160px 0px;
}
.footerdark {
position: relative;
left: 0;
bottom: 0;
width: 100%;
background-color: #272d35;
color: white;
text-align: center;
padding: 30px 0px;
}
When i try to remove the para tags from the html code the UI changes for the footer.what is the reason/error ?
Before removal of p tags
After removal of p tags
Your .footer class has a bottom value set. At the moment, with the p tag in place, it is changing the lower footer height enough to cover that white space. I'd recommend removing bottom: 110px.
Note: p tags are block-level elements and so they span the full width of their parent and have a set height, which effects the height of it's parent.
position: fixed is a quirky little fellow especially when it comes to mobile.
When attempting to use a fixed element with another element that has a width greater than the device's height, it breaks Mobile Safari.
I would like to keep the header on top while the content is scrollable. Is there a way around this issue without losing the experience?
Thanks in advance!
EXAMPLE:
http://debug.studiotate.com/mobile-safari-position-fixed (this is the issue i'm seeing - the header goes away when you scroll down and/or right)
EXPECTED:
http://debug.studiotate.com/mobile-safari-position-fixed/expected (this is what it should look like - the header stays put)
CODE:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width" />
<style type="text/css">
body {
margin: 0px;
}
header {
background-color: #00FF00;
left: 0px;
position: fixed;
top: 0px;
}
div {
background-color: #FF0000;
height: 1500px;
width: 1000px;
}
</style>
</head>
<body>
<header>Header</header>
<div></div>
</body>
</html>
I think that div must be remove and set background to body
<body>
<header>Header</header>
</body>
And CSS:
body {
margin: 0px;
background-color: #FF0000;
}
header {
background-color: #00FF00;
left: 0px;
position: fixed;
top: 0px;
}
I'm a total novice in HTML/CSS, but I'm having trouble with centering a fixed h1 element. It refuses to center itself and sticks to the left side of the page. I've tried setting the margin to auto, but it doesn't do a thing. Here's the code:
h1 {
color: #580101;
font-family: RobotoRegular;
position: fixed;
text-align: center;
}
* {
background-color: #ecebe9;
}
#navbar {
color: #000653;
background-color: #00001a;
height: 40px;
border-radius: 3px;
}
.sidebar {
background-color: black;
width: 90px;
height: 500px;
float: left;
margin: 30px 0px 0px 0px;
}
And the HTML:
<!DOCTYPE html>
<html>
<head>
<link href="Fonts/stylesheet.css" rel="stylesheet" type="text/css">
<title>Webpage</title>
</head>
<body>
<div id="navbar"></div>
<div class="sidebar"></div>
<h1>Hello World!</h1>
</body>
</html>
So, what should I do?
if you want to use fixed position then add width: 100%; css rule for h1 css style.
other just remove position that will work.
DEMO
Change <h1> position:fixed to position:relative
the reason its sticking to the side of the page is because hence the name its fixed for example. you cannot tell it to freely float in the center if you have 'basically' demanded the element to be fixed, if that makes sense
you could do this
<style>
.test{
position:fixed;
right:0;
left:0;
text-align:center;
background:#EEEEEE;
</style>
<h1 class="test">test</h1>
When using position, specify it's position...left, top, or right, bottom.
I'm trying to make a really simple webpage. It should be a 1000px wide green, centered rectangle stretching all the way from the top to the bottom of the webpage on a red background, no matter how much content there is.
I can't get this working though. If I use min-height (like below), the green area doesn't stretch all the way to the bottom of the page if there's not enough content. If I replace it by height, the content overflows the green area if there's much content.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="container">
content here.
</div>
</body>
</html>
Here's the CSS:
html {
height: 100%;
}
body {
background-color: #F00;
margin: 0;
min-height: 100%;
}
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
height: 100%;
}
I know this is feasible with more divs, but it really should work without changing the HTML. How can I solve this?
By the way, I'm on Safari. I don't care about compatibility with browsers not respecting standards.
Here is a working sample:
<!doctype html>
<html>
<head>
<title>Container sample</title>
<style>
html, body
{
margin: 0;
padding: 0;
height: 100%;
background: red;
}
#container
{
background: green;
width: 1000px;
min-height: 100%;
margin: 0 auto 0 auto;
}
</style>
</head>
<body>
<div id="container">
Container sample
</div>
</body>
</html>
For more information take a look at my answer to a similar question.
you can use property position absolute for your requirement. It may help you
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
position:absolute;
top:0;
bottom:0;
left:50%;
margin-left:-500px;
}
Give your #container a position:absolute; with top and bottom set to 0.
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
position:absolute;
top:0;
bottom:0;
}
http://jsfiddle.net/jasongennaro/4ZLcD/
I want is this:
the blue area resizes with when the browser window resizes.
The header is visible.
the blue area starts where the header finishes (not behind the header or above).
the blue area ends before the footer.
between the blue area and the footer exist 5 yellow pixels.
Is this possible only with CSS and HTML ( without any javascript ) ?
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<style>
*{
margin:0px;
padding:0px;
}
header, nav, article, footer, address {
display: block;
}
header{
position:relative; height: 50px; background-color:#2b2b2b;
}
footer{
height: 50px;
width:100%;
bottom: 0px;
position: fixed;
background: red;
}
#explorer{
position:relative; bottom:55px;
}
#sections{
width: 100%; height: 100%; bottom: 55px; position:fixed; background: blue;
}
</style>
</head>
<body style="background-color:yellow">
<header >
<h1>Test</h1>
</header>
<div id="explorer" >
<div id="sections" >
</div>
</div>
<footer>
/* Footer Content */
</footer>
</body>
</html>
I think Kit's code needs just one adjustment & that is we have to remove the height:100% from the sections div & it will work just fine. Also while testing the following code, i noticed that if we reduce the height beyond a limit the footer actually comes above the header. Although, practically the height would never be so less, but still you might want to add z-index:5000 to header tag
Like this?
<html>
<head>
<meta charset="utf-8"/>
<title>Test</title>
<style type="text/css">
html, body, h1 {
margin:0px;
padding:0px;
}
header, nav, article, section, footer, address {
display: block;
}
header {
position:relative;
height: 50px;
width: 100%;
background-color:#2b2b2b;
}
footer{
height: 50px;
width:100%;
bottom: 0px;
position: fixed;
background: red;
border-top: 5px solid yellow;
}
#explorer{
position:relative; bottom:55px;
}
#sections{
width: 100%;
height: 100%;
bottom: 55px;
position:fixed;
top: 50px;
background: rgba(0,0,256,.5);
}
</style>
</head>
<body>
<header >
<h1>Test</h1>
</header>
<div id="explorer" >
<div id="sections" >
</div>
</div>
<footer>
/* Footer Content */
</footer>
</body>