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;
}
Related
The yellow box at the top works like it should. The one at the bottom does not. The scrolling should stop at the end of the footer, here as black line (and also not extend to the right).
Of course, there could be a way to to this with graphics.
Is there a solution with CSS?
#mainwrapper {
max-width: 1000px;
margin: auto;
padding-top: 100px;
position: relative;
}
.top-ci-colorbox {
position: absolute;
top: -135px;
right: 0;
height: 200px;
width: 2000px;
background-color: yellow;
transform: rotate(-3.5deg);
}
.bottom-ci-colorbox {
position: absolute;
bottom: -135px;
left: 0;
height: 200px;
width: 2000px;
background-color: yellow;
transform: rotate(-3.5deg);
}
header {
position: fixed;
max-width: 1000px;
top: 0;
}
footer {
position: relative;
z-index: 10;
border-bottom: 1px solid black;
}
<div id="mainwrapper">
<div class="top-ci-colorbox"></div>
<header>Navigation Here</header>
<main>
...
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</main>
<footer>Footer Here. Scrolling should stop at black line</footer>
<div class="bottom-ci-colorbox"></div>
</div>
View on JSFiddle
Please check this code. hope it will help you
#mainwrapper {
max-width: 100%;
margin: auto;
padding-top: 100px;
position: relative;
overflow-y: hidden;
}
#mainwrapper:before,
#mainwrapper:after{
content : "";
transform: rotate(-3.5deg);
position: absolute;
top: -60px;
left: 0;
height: 100px;
right: 0;
width: 100%;
background-color: yellow;
transform: rotate(-3.5deg);
}
#mainwrapper:after{
top: auto;
bottom: -60px;
}
header {
position: fixed;
max-width: 1000px;
top: 0;
}
footer {
position: relative;
z-index: 10;
border-bottom: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="mainwrapper">
<div class="top-ci-colorbox"></div>
<header>Navigation Here</header>
<main>
Is it possible to let the bottom box behave like the top one, so that the scrolling ends after reaching the footer and most part of the box is not beeing displayed. The same with the right scrolling, which is extended by the bottom box (and left scrolling not by the top one).
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</main>
<footer>Footer Here. Scrolling should stop at black line</footer>
<div class="bottom-ci-colorbox"></div>
</div>
</body>
</html>
html,body,#mainwrapper{
height:100%;
}
body{
margin-bottom:0;
}
#mainwrapper {
max-width: 1000px;
margin: auto;
padding-top: 100px;
position: relative;
overflow:hidden;
box-sizing:border-box;
}
main{
height: calc( 100% - 19px );
}
.top-ci-colorbox {
position: absolute;
top: -135px;
right: 0;
height: 200px;
width: 2000px;
background-color: yellow;
transform: rotate(-3.5deg);
}
.bottom-ci-colorbox {
position: absolute;
bottom: -135px;
left: 0;
height: 200px;
width: 2000px;
background-color: yellow;
transform: rotate(-3.5deg);
}
header {
position: fixed;
max-width: 1000px;
top: 0;
}
footer {
position: relative;
z-index: 10;
border-bottom: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="mainwrapper">
<div class="top-ci-colorbox"></div>
<header>Navigation Here</header>
<main>
Is it possible to let the bottom box behave like the top one, so that the scrolling ends after reaching the footer and most part of the box is not beeing displayed. The same with the right scrolling, which is extended by the bottom box (and left scrolling not by the top one).
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</main>
<footer>Footer Here. Scrolling should stop at black line</footer>
<div class="bottom-ci-colorbox"></div>
</div>
</body>
</html>
Check in Fiddle https://jsfiddle.net/h25d5b8z/28/
First up all you must need to set height 100% to html,body and the main element.If we absolute any item ,we must need to add property overflow:hidden to it's parent element.In this case we need to add overflow:hidden to #main-wrapper.We also need to set height to main tag element
After reading several topics about css overflow problems here on stackoverflow, I found the solution by myself. It is difficult to use overflow on only one axis because of unexpected behaviour.
Insted the #mainwrapper div needs to be wrapped in another div. This div comes with overflow: hidden.
<div style="overflow:hidden;">
<div id="mainwrapper">
...
</div>
</div>
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.
There is a parent container of relative width (50%) so that it responds to the size of the screen.
Now, I want a button at the bottom right corner of this parent container which stays fixed vertically. It works with position: fixed but then when i view it on different devices, i cannot get it to be positioned horizontally.
This is my html and CSS
<div class="container">
<div class="button"></div>
</div>
.container {
position: relative;
height: 2000px;
width: 40%;
margin: 0 auto;
background: yellow;
}
.button {
height: 50px;
width: 50px;
background: red;
position: fixed;
bottom: 20px;
right: calc(50% - 190px);
}
Here is the link to codepen http://codepen.io/anon/pen/VmggdO
This looks fine but when you resize the screen horizontally, the button should stay just 30px inside of the yellow container horizontally - How do i achieve that? REMEMBER - THE BUTTON NEEDS TO STAY FIXED VERTICALLY WHEN YOU SCROLL!
Using position absolute worked for me
.button {
height: 50px;
width: 50px;
background: red;
position: absolute;
bottom: 20px;
right: 30px;
}
EDIT:
With the new requirements of "THE BUTTON NEEDS TO STAY FIXED VERTICALLY WHEN YOU SCROLL", this can be achieved by changing the html to this:
<div class="container">
</div>
<div class="button-container">
<div class="button"></div>
</div>
and the CSS to this:
.container {
position: relative;
height: 2000px;
width: 40%;
margin: 0 auto;
background: yellow;
}
.button {
height: 50px;
width: 50px;
background: red;
margin-bottom: 20px;
float: right;
margin-right: 30px;
z-index: 100;
}
.button-container{
position: fixed;
bottom: 0px;
width: 40%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
See the updated code pen: http://codepen.io/anon/pen/mOvvgJ
I'm trying to create something in JQuery Mobile, however I need to be able to position a button from the center. Right now, the button is positioned from the top-left corner, and as such if I resize the window, everything is horribly off-center.
<body>
<button>Button</button>
<div />
</body>
div {
position: absolute;
width: 200px;
height: 200px;
background-color: black;
}
button {
position: absolute;
top: 200px;
left: 200px;
}
Fiddle: http://jsfiddle.net/chpt3x1v/4/
I couldn't get JQM working in JSFiddle (didn't know how without it showing loads of errors), so I just used a regular button, but the same premise applies.
TWO IMAGES:
As you can see, it is completely off-center.
UPDATED ANSWER:
You need to give the button a set width and height, and then set the top margin to negative one half the height, and the left margin to negative half the width:
Updated DEMO
<div class="thediv"></div>
<button data-role="none" class="theButton">Button</button>
.thediv {
position: absolute;
width: 200px;
height: 200px;
background-color: black;
}
.theButton {
position: fixed; /* or absolute */
top: 200px;
left: 200px;
width: 80px;
height: 80px;
margin-top: -40px;
margin-left: -40px;
}
ORIGINAL ANSWER:
You can use fixed positioning and a negative margin to keep it centered:
<div data-role="page" id="page1">
<div role="main" class="ui-content">
<div class="centered"><button>Button</button></div>
</div>
</div>
.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
background-color: black;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
}
.centered button {
margin: 0 !important;
height: 100%;
}
Updated FIDDLE
Firstly your code doesn't have an opening tag. Secondly, you need to have the parent element, i.e. the div, positioned as relative.
Third, you've positioned your button to the very edge of the div by using the same dimensions. Try:
<body>
<div>
<button>Button</button>
<div />
</body>
div {
position: relative;
width: 200px;
height: 200px;
background-color: black;
}
button {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
}
The z-index property will allow the button to overlay the div.
This question already has answers here:
Make footer stick to bottom of page correctly [duplicate]
(10 answers)
Closed 9 years ago.
At the beginning everything is working fine. I have the middle element and the footer. And it is the way I want it. But when I resize the window, the footer gets behind the main element. Here is the code. How would I work about to make the footer stick (it is not a fixed positioning) at the bottom?
body{
height: 100%;
width: 100%;
}
.mainContent{
width: 200px;
height: 100px;
border: 1px solid #222;
margin-top: -50px;
margin-left: -100px;
position: absolute;
top: 50%;
left: 50%;
}
.footer{
height: 20px;
background: #444;
position: absolute;
bottom: 0;
width: 100%;
left: 0;
}
HTML
<html>
<head></head>
<body>
<div class="mainContent"></div>
<div class="footer"></div>
</body>
</html>
I would suggest setting the Zindex of the footer to some really high value, and the main content to something around 1. This should fix your problems.
<style>
*{
margin:0px;
padding:0px;
}
.wrapper {
height:100%;
position:relative;
}
.mainContent{
width: 200px;
height: 100px;
border: 1px solid #222;
margin-top: -50px;
margin-left: -100px;
position: absolute;
top: 50%;
left: 50%;
}
.footer{
height: 20px;
background: #444;
position: absolute;
bottom: 0;
width: 100%;
left: 0;
}
</style>
<html>
<head>
</head> <body>
<div class="wrapper">
<div class="mainContent"></div>
<div class="footer"></div>
</div>
</body> </html>
I'm not seeing the problem you're describing. For me the footer remains on top of everything else, at the bottom of the window. My guess is it is a browser issue or your description wasn't clear.