This is driving me crazy I cannot work out why my footer appearing at different heights even though it is defined in the _Layout view. I have the following css:
.footer {
position: absolute;
bottom: 0;
background-color: #ffd800;
width: 100%;
text-align: center;
left: 0;
background-image: url(/Content/SiteImages/logosmall.png);
background-repeat: no-repeat;
height: 110px;
border-top: 3px solid #082603;
}
.footer p {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
color: #082603;
font-size: 150%;
font-family: 'Baskerville Old Face'
}
HTML:(_Layout)
<div class="container body-content">
#RenderBody()
<div class="footer"><p>Quote</p> </div>
</div>
How can I get the div to stay at the very bottom of the page. I want it to be under below all content. not covering any so if I add another div the foot will always be a footer. Example of my problem:
What I want:
Please help me get this consistent across my multiple pages. I have looked at lots of questions on stackoverflow but none or resolving the issue.
You would need to position your footer fixed, then offset its height (110px) from the bottom of the body or containing element (since it is taken out of the normal document flow), e.g: .container.body-content {padding-bottom: 110px;}
.container.body-content {
padding-bottom: 110px;
height: 1000px; /* Force height on body */
}
.footer {
position: fixed;
bottom: 0;
background-color: #ffd800;
text-align: center;
right: 0;
left: 0;
background-image: url(/Content/SiteImages/logosmall.png);
background-repeat: no-repeat;
height: 110px;
border-top: 3px solid #082603;
}
.footer p {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
color: #082603;
font-size: 150%;
font-family: 'Baskerville Old Face'
}
<div class="container body-content">
<div class="footer">
<p>Quote</p>
</div>
</div>
Varying Footer Height (Responsive Concern)
If the footer height varies based on the width of the screen, refer to this answer: Keeping footer at bottom of responsive website
And the solution demonstrated in this CodePen: https://codepen.io/anon/pen/BoNBZX
No Fixed Footer
But if you need an absolute positioned footer, add position: relative to the containing element (.container.body-content), so that the bottom: 0 value of .footer is always relative to .container.body-content.
.container.body-content {
height: 1000px; /* Force height on body */
position: relative;
}
.footer {
position: absolute;
bottom: 0;
background-color: #ffd800;
text-align: center;
right: 0;
left: 0;
background-image: url(/Content/SiteImages/logosmall.png);
background-repeat: no-repeat;
height: 110px;
border-top: 3px solid #082603;
}
.footer p {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
color: #082603;
font-size: 150%;
font-family: 'Baskerville Old Face'
}
<div class="container body-content">
<div class="footer">
<p>Quote</p>
</div>
</div>
Edit: position: absolute alternative version included
Another way is to give the main wrapper a minimum height, which will push the footer down. That minimum height should be the height of the screen minus other heights (footer's, nav's etc. heights). Fiddle here.
HTML:
<body>
<div id="header">Nav area</div>
<div id="main">Main content to be here</div>
<div id="footer">Footer be here</div>
</body>
CSS:
#header{
height:30px
}
#main{
min-height:calc(100vh - 60px);
}
#footer{
height:30px;
}
use position: fixed instead of position: absolute for the .footer css
change the position to
.footer {
position: relative;
bottom: 0;
background-color: #ffd800;
width: 100%;
text-align: center;
left: 0;
background-image: url(/Content/SiteImages/logosmall.png);
background-repeat: no-repeat;
height: 110px;
border-top: 3px solid #082603;
}
The best thing to do is to put your header,main content and your footer in a div tag as a place for your elements in a web page than put them in a it's normal flow like working on footer tag at end of the page.
Related
I am new to CSS and HTML, and I am working on my final project for school.
I am trying to absolutely position some text "Welcome" to a div I've made. For some reason it won't position in relation to the div, I've looked it over 10 times and can't figure out why.
I want the "Welcome" text to sit at the bottom of the welcome div, however when I put bottom:0px; into the CSS, it doesn't position according to its parent container and instead goes 0px from the top of the whole screen.
Here's the code:
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
}
#header {
height: 150px;
position: relative;
background-color: red;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
height: 150px;
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav"></nav>
</header>
</div>
You are very close. Take the height away from the .w p tag and remove its margin as well:
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
}
#header {
height: 150px;
position: relative;
background-color: red;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
/*height: 150px;*/
margin: 0;
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav"></nav>
</header>
</div>
The problem, as CalvinNunes pointed out, is that you have a height set on .w div. And, p elements have margin and line-height values by default. You need to remove the margin and set the line-height to 1 or less (.5 makes the text touch the bottom of the green box).
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
position: relative;
}
#header {
height: 150px;
background-color: red;
position: absolute;
width: 100%;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
margin: 0;
line-height: 1;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav">
</nav>
</header>
</div>
<!-- End of wrapper-->
If you use absolute on something, related dom element should be relative, absolute or fixed, depending on your needs.
Also check if your absolute element doesn't have some unneeded margins etc.
But in your usage case i don't think that there is absolute needed. you can use bigger paddings for parent element top. Also this can be achieved using flex-end, which will allow dynamic text input.
Look, I know that there are many threads with many solutions, but none of them have worked for me. I'm a begginer and I'm just starting making websites in HTML. I've tried to make a website before, but I've had the same problem. I've deleted the previous one and made a new one and I still can't solve this.
What I've tried and doesn't really work:
setting height to 100% / 100vh (method one)
setting div min-height to 100%, giving it position absolute and doing this:
top: 0px
bottom: 0px
(method two)
When I do the method 1 my div isn't stretched to the bottom of the page when you can scroll the page, it is stretched to the 100% height of the browser window instead.
And when I do the method 2 the divs just disappear. I didn't forced the border to stretch so you can still see it but if I would do this it'd disappear.
And by the way, I'm just a begginer and I still don't even know basics of JavaScript, jQuery etc. so I'd like to just use pure HTML and CSS and not JavaScript and other stuff until I learn them.
EDIT:
The DIVs need to stretch when the text is added too, actually that's one of my main problems.
Try this… You can monkey with the styles to make it the way you want. I put your border inside .Main and changed html, body to height: 100%
Note: The positioning looks funky because of your use of absolute positioning for the margins of Main. I would change that. But if you copy the code to your page it might be what you're aiming for.
html, body {
height: 100%;
}
.page {
background: linear-gradient(#2d5aa4, #03637c);
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
}
.NavigationBar {
background: linear-gradient(to right, #636363, #4e4e4e);
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
width: 220px;
min-height: 100%;
z-index: 2;
font-family: BloggerSans;
font-size: 1.5em;
}
.NavigationBarBorder {
background: linear-gradient(to right, #292929, #171617);
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 10px;
min-height: 100%;
z-index: 3;
}
.MainParent {
position: relative;
min-height: 100%;
}
.NavigationTop {
background: linear-gradient(#636363, #4e4e4e);
position: absolute;
left: 220px;
width: calc(100vw - 220px);
height: 75px;
z-index: 1;
font-family: Jaapokki;
font-size: 2em;
}
.Main {
background: linear-gradient(#ffffff, #e8e8e8);
position: absolute;
top: 20vh;
bottom: 0px;
width: calc(100vw - 440px); /* set your width */
left: 220px;
margin-left: 90px; /*set your margin here */
min-height: 100%;
z-index: 4;
padding-left: 40px;
}
.MainBorder {
background: linear-gradient(#f79104, #e9720d);
position: absolute;
top: -10px;
left: 0;
width: 40px;
min-height: 100%;
}
h1 {
font-family: 'Jaapokki';
text-align: center;
font-size: 3em;
}
.Text {
font-family: 'BloggerSans';
font-size: 2em;
}
<body class="page">
<div class="MainParent">
<nav class="NavigationBar">
<div class="NavigationBarBorder"></div>
Table of content
</nav>
<header class="NavigationTop">
Navigation
</header>
<div class="Main">
<h1>Title</h1>
<div class="Text">
Text </br>
</div>
<div class="MainBorder"></div>
</div>
</div>
</body>
I am building this website and created a nice layout for what I need. However on a smaller (laptop) screens the content is higher than the screen, and it does not allow one to scroll up and down. Instead it keeps showing the exact center of my content.
How would I add a scroll-bar to the entire page, so people are not fixed to the center of the page only ?
My current css:
<style>
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#maincanvas{
position:fixed;
top: 50%;
left: 50%;
width:700px;
height:800px;
/* background: background="static/bg02.png";*/
/*border: 15px solid #cc0000;*/
padding: 25px;
transform: translate(-50%, -50%);
}
#logobox{
position:absolute;
top: 0px;
left: 50px;
width:600px;
height:50px;
/*border: 10px solid #cc0000;*/
padding: 25px;
}
#contentbox{
position:absolute;
top: 200px;
left: 50px;
width:600px;
height:400px;
background: #f5f5dc;
border: 10px solid #cc0000;
padding: 25px;
}
#footerbox{
position:absolute;
bottom: 10px;
left: 50px;
width:600px;
height:30px;
background: #f5f5dc;
border: 10px solid #cc0000;
padding: 25px;
}
#footerlogo{
overflow:hidden;
position:fixed;
bottom: 30px;
right: 5px;
background: #f5f5dc;
border: 10px solid #cc0000;
overflow: hide;
width:250px;
height:30px;
padding: 25px;
}
/*input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}*/
input[type=text]:focus {
border: 3px solid #555;
}
.widthSet {
max-width: 150px;
position:fixed;
bottom: 35px;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
</style>
The site content:
<body background="static/bg.png">
<div id="maincanvas">
<div id="logobox">
</div>
<div id="contentbox">
$:content
</div>
<div id="footerbox">
</div>
</div>
</body>
I have tried playing with different overflow settings, however so far, didn't manage the result I am after. With overflow I can only scroll the content of the boxes, however what I need is to scroll the site (canvas?)
Hoping this is not a duplicate, as I did search, but maybe lack the exact keyword to search for.
The issue you're running into is the use of position: fixed;.
From MDN regaurding fixed positioning.
Fixed Positioning: Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.
So adding scroll to an overflow property won't do anything. The element with fixed positioning isn't taking up any space and will always be positioned relative to the viewport in some way.
What you want is position: absolute; and a modification to your top attribute for smaller screens.
#maincanvas {
/* Note: we could use margin: 0 auto; to center but on larger screens we need left and top set to center inside viewport */
position: absolute;
left: 50%;
width: 700px;
height: 800px;
padding: 25px;
transform: translateX(-50% );
}
#logobox {
position: absolute;
top: 0px;
left: 50px;
width: 600px;
height: 50px;
border: 10px solid #cc0000;
padding: 25px;
}
#contentbox {
position: absolute;
top: 200px;
left: 50px;
width: 600px;
height: 400px;
background: #f5f5dc;
border: 10px solid #cc0000;
padding: 25px;
}
#footerbox {
position: absolute;
bottom: 10px;
left: 50px;
width: 600px;
height: 30px;
background: #f5f5dc;
border: 10px solid #cc0000;
padding: 25px;
}
#footerlogo {
overflow: hidden;
position: fixed;
bottom: 30px;
right: 5px;
background: #f5f5dc;
border: 10px solid #cc0000;
overflow: hide;
width: 250px;
height: 30px;
padding: 25px;
}
/* When viewport is large enough to start centering #main */
#media (min-height: 800px) {
#maincanvas {
top: 50%;
transform: translate( -50%, -50% );
}
}
<div id="maincanvas">
<div id="logobox">
</div>
<div id="contentbox">
$:content
</div>
<div id="footerbox">
</div>
</div>
For what it's worth, there's a lot to be desired in your markup. You don't need all the absolute positioning you're using. Try and re-use styles if you can. Here is one way you could simplify things.
Note: I replicated your margins on the DIVs inside #main which will create a horizontal scrollbar on narrower viewports. Not sure what is intended here. Perhaps some styling on #main that was not provided in post?
#main {
position: absolute;
left: 50%;
width: 700px;
height: 800px;
padding: 25px;
transform: translateX(-50%);
}
#main > div {
margin: 0 50px 50px;
padding: 25px;
background: #f5f5dc;
border: 10px solid #C00;
}
#main > div:last-child {
margin-bottom: 0;
}
#logo {
height: 50px;
}
#content {
height: 400px;
}
#footer {
height: 30px;
}
/* When you know the viewport is large enought to try and center ALL of #main */
#media (min-height: 800px) {
#main {
top: 50%;
transform: translate(-50%, -50%);
}
}
<div id="main">
<div id="logo"></div>
<div id="content">
<p>
Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
</p>
</div>
<div id="footer"></div>
</div>
This is the code you want to have in your css. Try this and it will look a lot better. You can move the div's itself with the margin-top.
#maincanvas{
margin-top: 15%;
margin-left: 50%;
width:700px;
height:800px;
padding: 25px;
transform: translate(-50%, -50%);
}
Try it!
how to make absolute center horizontal and vertical a div with fluid width and height using css?
Thanks in advance for helping.
#div_parent{
background:#ccc;
position:relative;
}
.div_child{
background-color:#338BC7;
position: absolute;
left: 50%;
width: auto;
height: auto;
padding: 20px;
top:25%;
background: blue;
color: white;
text-align: center;
border:1px solid #ccc;
}
<div id="div_parent">
<div class="div_child">
<p>Centered In The Middle Of The Page.</p>
</div>
</div>
A couple of problems with your code:
You do not have a width and height specified on your html and body, without which any of descendent elements wouldn't have a reference to set their positions and/or dimensions in percent units.
You do not have dimensions (width/height) specified on your #div_parent, without which you cannot position its absolutely positioned child (which is relative to it) to the vertical center. Moreover, as you want to position your .div_child to the center of the page, why do you have a parent wrapped around it anyway.
Apart from fixing the above, a trick which is usually used to align elements both horizontally and vertically is to use transform: translate to shift it back by 50%.
Like this:
.div_child {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
...
}
Fiddle: http://jsfiddle.net/abhitalks/Lnqvqnkn/
Snippet:
* { box-sizing: border-box; paddin:0; margin: 0; }
html, body { height: 100%; width: 100%; }
#div_parent{ height: 100%; width: 100%; background: #ccc; position: relative;}
.div_child {
background-color: #338BC7;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: auto; height: auto;
padding: 20px; color: white; text-align: center; border: 1px solid #ccc;
}
<div id="div_parent">
<div class="div_child">
<p>Centered In The Middle Of The Page.</p>
</div>
</div>
When I need fluid width, I prefer using this method:
CSS
.background { display: table; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.background > div { display: table-cell; vertical-align: middle; text-align: center; }
HTML
<div>
<div>
<p>Centered In The Middle Of The Page.</p>
</div>
</div>
Demo on jsfiddle.
Hope it works for you.
I am a CSS beginner.
I want a half transparent centered div with the main content. Below it should be a fixed div containing the table of contents.
Below is my attempt on this. This works with a certain browser size. But when the size of the browser window changes, the table of content moves.
I want the table of contents to stay at a fixed distance to the main div.
jsFiddle link
With this window size everything looks ok:
Decreasing the window size moves toc under content div:
html
<html>
<head>
<title>Testpage</title>
<link rel='stylesheet' href='css/testpage.css'>
</head>
<body>
<div id="contenttable">
<h1>Contents</h1>
Content 01<br>
</div>
<div id="content">
some text
</div>
</body>
</html>
css:
#content{
height: 1000px;
width: 320px;
position: relative;
top: 50px;
left: 50%;
margin-left: -160px;
background-color: cyan;
}
#contenttable{
padding: 12px;
width:100%;
height:200px;
position: fixed;
background-color: yellow;
top: 125px;
left: 6%;
}
#contenttable a{
position: relative;
top: 0px;
left: 66%;
}
#contenttable h1{
position: relative;
top: 0px;
left: 66%;
}
You can use an inner div absolutely positioned inside the fixed TOC, and set its position.
Use CSS3 Calc to elaborate the right position for your main content.
Use opacity for transparency, and avoid setting the height of the main content div for automatic overflow handing.
Demo: http://jsfiddle.net/vMAQz/1/
CSS
#contenttable {
padding: 12px;
width:100%;
height:200px;
position: fixed;
background-color: yellow;
top: 125px;
}
#innerContent {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 100px;
padding: 30px;
}
#content {
padding: 10px;
opacity: 0.8;
width: 320px;
position: relative;
top: 50px;
left: calc(100% - 480px);
background-color: cyan;
}
HTML
<div id="contenttable">
<div id="innerContent">
<h1>Contents</h1>
Content 01
<br/>
</div>
</div>
<div id="content">
some text
</div>
all you need to do is change the width of the content div
#content{
height: 1000px;
width: 30%;
position: relative;
top: 50px;
left: 50%;
margin-left: -160px;
background-color: cyan;
}