I have a CSS generated section of an HTML page. It is currently positioned to be in the main content region of the page, which is right of a navigation bar. I have a graph that needs to be centered to the whole HTML page, which includes being under the navigation bar.
How would I use CSS positioning to overlay a block of HTML code (which has some CSS too) to be centered over the whole page.
I have a hunch as to how to do this:
I think that I need overlapping CSS section to go under the navigation bar.
.layout #mainContent h6 {
position:absolute;
left:-1000px;
top:-10px;
z-index:5
}
The HTML to be overlayed will go under h6.
The HTML will be written like this
<h6>
All the HTML code to be overlaid
</h6>
I more or less want a way to center all the code in a section of my html, but it has to be centered relative to the whole HTML page, not just the CSS boxed section.
We centre things often using css and this is how we'd do it:
.layout #mainContent h6 {
position:absolute;
left:50%;
margin-left:-1000px; /* half the element's width */
top:50%;
margin-top:-10px; /* half the element's height */
z-index:5
}
But of course to centre the height in all browsers & screen resolutions you have to add the following conditions to body tag, otherwise the browser will assume the body is only as high as it's content (ie. 20px in your case).
body {
margin-top:0px;
margin-left:0px;
margin-bottom:0px;
margin-right:0px;
top:0;
bottom:0;
left:0;
right:0;
height:100% !important;
width:100%;
}
You can do this by setting a fixed width and height to the overlay content. eg:
.layout #mainContent h6 {
width:200px;
height:20px;
position:absolute;
top: 50%;
left: 50%;
margin-top:-10px; /* half element's height */
margin-left:-100px; /* half element's width */
z-index:1000
}
Demo: http://jsfiddle.net/P95Bz/1/
Related
In the wordpress-theme Avada (A demo site) I can see that they're using some background-effect for overlapping both backgrounds and text-elements at the same time. The first heading is overlapped by the "Who we are" section. How do they do this?
Look for the div with the class tfs-slider flexslider main-flex
<div class="tfs-slider flexslider main-flex" ...>
You will notice that it has the attribute position: fixed. This means that it does not scroll with the content. In addition, they have changed the z-index properties of various elements so that it stays beneath the menu at the top and the content that flows up over it.
Basically this resumes down to this CSS property:
background-attachment: fixed;
Here I have a basic example for you: http://jsfiddle.net/1j3w8ru6/
Here is a really simple working example
What we are doing here is setting the position of the first heading to "fixed", pushing the content just below the screen with "margin-top", and setting the content's z-index to a higher value than that of the first heading.
Here is the CSS:
html,
body {
width:100%;
height:100%;
}
#heading {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background:#000000;
z-index:2;
}
#content {
width:100%;
position:relative;
z-index:3;
background:#FFFFFF;
margin-top:100%;
}
I'm actually designing my website, it's going to be a one HTML page using javascript to switch between divisions.
I'm using a wrap division where my banner/header, text container and my footer are relative positioned.
I want my footer to be at least to the bottom of the window when there is not enough content, so I'm trying to put a min-height to my text container.
Like this the website would occupy at least all the windows in it's height.
My HTML code (a part ^^)
<div id="wrap">
<div id="banner"></div>
<div>
<div id="whoami" class="corpus"></div>
<div id="etc" class="corpus">There is different divisions like these, I'm switching through thoose using jQuery, but that's not important there. I'm trying to put a min-height to get the footer at the bottom of the windows if there not enough content. I can't pass the footer in absolute position</div>
</div>
<div id="footer"></div>
</div>
The CSS that goes with this
html, body {
margin:0;
padding:0;
background:#fff;
height:100%;
}
#wrap {
background-color:#ff0;
min-height:100%;
width:1000px;
left:50%;
margin-left:-500px;
position:absolute;
}
#banner {
background-color:blue;
height:150px;
width:1000px;
position:relative;
}
.corpus {
width:800px;
min-height:100%; //I tried this : min-height : calc(100% - 260px); it didn't work.
margin-left:100px;
background-color:grey;
position:relative;
height:auto;
margin-top:5px;
}
#footer {
height:100px;
width:1000px;
background-color:purple;
position:relative;
z-index:1;
bottom:0;
margin-top:5px;
}
A little Fiddle for the road :http://jsfiddle.net/yoshino78/bn455/1/
Since #wrap is a positioned element and you've already applied bottom:0 for the footer, all you've to do is
Simply apply position:absolute to the footer, so that it'll stay at the bottom of #wrap regardless of the content inside it.
Demo
Side note: you also might want to apply padding-bottom to #wrap equal to the height of footer so that content won't get hidden behind the footer
I'm trying to implement a div, that looks like a tall and narrow page, like a notebook paper.
I have my content in <div id='centerframe'/> and I thought that a good solution was to use an absolute positioned div for the "paper".
So I wrote the css rules as follows:
div#center_background
{
z-index:-1;
position:absolute;
top:0;
left:130px;
width:900px;
height:100%;
background:rgba(255,255,255,0.9);
}
However, when I add a background image to body, it disappears under the background. I tried setting a positive z-index, than it renders on top of everything in the page, like centerframe, topbar etc. See the picture:
A solution could be setting z-index for all the elements, which I really don't want to do, since I want to use position:absolute;'s as little as possible.
So how can I define this kind of background div without changing other elements' positions and z-indices?
I made a fiddle, but it runs as expected. The strange thing in my real code is, when I load the page, the center_background div appears on top of background of body for a glance, then it disappears.
I don't change anything with JavaScript.
I came across this in my own code a few days back, and setting containing elements to position: relative solved the issue.
When i see your picture, i think that absolute positioning is unnecessary.
You could use fixed for the header, and let main content slides under it :
http://jsfiddle.net/jgYXr/
body {
background:url(http://lorempixel.com/100/100/abstract/10);
}
nav {
position:fixed;
top:0;
left:0;
right:0;
line-height:3em;
background:tomato;
box-shadow:0 0 1em 0.5em;
text-align:right;
}
a {
display:inline-block;
margin:0 0.5em;
padding:0 0.25em;
}
main {
width:80%;
background:rgba(255, 255, 255, 0.75);
box-shadow:0 0 1em 0.3em;
margin:2em auto;
min-height:800px;
}
<nav>
Nav link
Nav link
Nav link
</nav>
<main>
</main>
Search for position: fixed and how to size an element in absolute or fixed via coordinates. See as well to set height of 1 element that has only 1 line of text.
put the z-index value in high range
div#center_background
{
z-index:100;
position:absolute;
top:0;
left:130px;
width:900px;
height:100%;
}
I made this:
HTML:
<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>
CSS:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
margin:0 auto;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/2/
But as you can see, the main div doesn't have a height.
Then I replaced my css by that:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
position:absolute;
margin:0 auto;
bottom:60px;
top:80px;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/1/
But then, the horizontal center doesn't work.
How can I do this design (div centered and that takes all the page in height between the header and footer with a 20 px magin) ?
I'm not sure what you're trying to do, but I'll give my explaination of what's going to happen with your code:
Your #main div doesn't have a height because it doesn't have a height CSS property, nor does it have any content.
You should add either a height: 100px or just add some content and you will see it gets a height.
The reason why I ask what you want to do is because you're not very clear as to what you want your final product to look like.
You're going to have another problem with the footer. If you use position absolute it sticks to the bottom at the moment. Set the height of the #main div to something ridiculously high and you'll see that when you have to scroll down the page the footer stays where it is. See http://jsfiddle.net/VpwQQ/3/
You should use position: fixed but this will keep it on the bottom of the WINDOW and not the DOCUMENT. So then you get into the problem of having to use Javascript in order to measure the document height and setting positions appropriately. Not sure what you're trying to do, but if you're just trying to lay out a website then use standard relative positioning to push the footer down naturally below the #main div.
Edit:
See http://jsfiddle.net/VpwQQ/4/ if you're just trying to set up a normal website layout.
If you want the footer to "stick" to the bottom of the page all the time then you will need to use position: fixed but I don't think this works across all browsers. See http://jsfiddle.net/VpwQQ/6/
Lastly, to get both footer and header to "stick" see http://jsfiddle.net/VpwQQ/8/
I added a div inside #main.
Main now has a 100% width.
Inside, put a div of 300px, with no absolute position.
I forked your fiddle: http://jsfiddle.net/8U9P6/
Personnally I prefer the javascript solution and not using the absolute position. But this solution seems to work.
Add and overflow to contain the content in the inside div: http://jsfiddle.net/M2nZc/
Note that the page will not grow as it is absolute position.
You can't use automatic margins on an absolutely positioned element, as it's not in the document flow any more.
Use width: 100% on the #main div, then put another element inside it that you center using automatic margins.
Demo: http://jsfiddle.net/Guffa/VpwQQ/9/
Note: You may need to use height: 100% on the body and html elements for the bottom sizing to work on the #main element.
Once you fill your #main div with content, it will automatically gain height according to the content. You can simply fill it with a few paragraphs of lorem ispum to simulate content. You can now remove the absolute position and positioning CSS.
Centering a div using the "0 auto" shorthand only works when the parent element (which, for the #main div, is the body element) has a defined width. To do this, try giving your body element a width of 100%. Doing this is something that you might want to make a habit of in you CSS.
To have your #main div always be 20px below the #header div, simply add 20px of margin-bottom to your #header div. Do the same below the #main div to space the footer.
Summed up (without the footer at the bottom, for now) your CSS might read something like this:
body {
width: 100%
margin: 0px;
}
#header {
width: 100%;
height: 60px;
margin-bottom: 20px; /*here we space the header 20px from the next element*/
background-color: black;
}
#main {
width: 300px;
margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
border:1px dotted black;
}
#footer {
width:100%;
height:40px;
background-color:black;
}
Example: http://jsfiddle.net/WEx3j/
If you want the footer to be 'sticky' (always be at the very bottom of your website), I advise you to employ this method.
I hope this clarified a few things.
I use the below piece of code to align a div at the browser bottom
CSS:
/* using the child selector to hide the
following body css from IE6 and earlier */
html>body {
background-color: yellow;
}
#footer {
position:absolute;
right:0;
bottom:0;
background-color:Yellow;
}
HTML:
<div id="footer">
CCC
</div>
This works well when the page fits the page:
But when the page length exceeds then if I scroll the page the div also getting scrolled top:
I have placed the footer div at the top top user control. There are some other controls after the footer div. Will that cause the issue?
#footer {
position: fixed;
right:0;
bottom:0;
background-color:Yellow;
}
absolute is absolute relative to html body, and fixed is with respect to the frame
Difference and other values for position tag are here.
Use the sticky footer CSS: http://www.cssstickyfooter.com/
You should use fixed position instead of absolute.
Use this code:
/* using the child selector to hide the
following body css from IE6 and earlier */
html>body {
background-color: yellow;
}
#footer {
position:fixed;
right:0;
bottom:0;
background-color:Yellow;
}
Are you maybe looking for this http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page ?