I am trying to set a fixed height for when the vertical scrollbar begins to be visible on the browser. My container is only 500px high. I set the body to 500px high. But I also have a footer that is about 30px high below the container. So my entire page is about 530px. However I don't want the page to start scrolling when it detects the bottom of the footer, but rather at the bottom of the container. Is there any way to ignore my footer so the page doesn't begin to scroll until 500px??
My markup:
<body>
<div id="veritcal"></div>
<div id="container"></div>
<div id="row1">
<div id="box1">content</div>
<div id="box1">content</div>
<div id="box1">content</div>
<div id="box1">content</div>
<div id="box1">content</div>
</div>
</div>
<div id="footer">Some Footer Content</div>
</body>
My css:
html,body{
height: 100%;
margin: 0;
padding: 0;
}
body{
font-family: "Lucida Console", Monaco, monospace;
font-size: 1em;
font-style: normal;
color: #FFFFFF;
text-align: center;
min-width: 800px;
min-height: 500px;
}
#vertical{
position: relative;
height: 50%;
margin-top: -250px;
margin-left: 0px;
margin-right: 0px;
width: 100%;
}
#container{
position: relative;
width: 800px;
height: 500px;
padding: 0px;
margin-left: auto;
margin-right: auto;
text-align: center;
z-index: 0;
}
#footer{
margin-left:auto;
margin-top: 5px;
margin-right: auto;
padding: 10px 10px 0 10px;
width: 550px;
height: 30px;
background-color: #000000;
color: rgba(0, 166, 172, 0.3);
line-height: 2.0em;
font-size: 0.7em;
font-weight: bold;
text-align: center;
border-radius: 5px;
opacity: 0;
}
#footer:hover{
opacity: 1;
}
So again, my page begins scrolling at 530px at the bottom of the footer. I have the container horizontally centered and my #vertical div makes the container center vertically. When I resize the browser, the top of the container stops at the top of the browser perfectly, but then the browser vertical scrollbar appears at 530px instead of 500px, which I set for the min-height of the body. Not sure why it still appears at 530px.
if I propably understood what you want, i think that you need to use in #footer in css
display: none;
instead of
opacity: 0;
I hope that will help you ...
if you want to use #footer:hover , may this code help you
in #footer , try this
#footer {
margin-left: auto;
margin-top: 5px;
margin-right: auto;
padding: 10px 10px 0 10px;
width: 550px;
height: 30px;
background-color: #000000;
color: rgba(0, 166, 172, 0.3);
line-height: 2.0em;
font-size: 0.7em;
font-weight: bold;
text-align: center;
border-radius: 5px;
opacity: 0;
/*add this code*/
position: fixed;
bottom: 0;
right: 50%;
margin-right: -285px;
}
you can also use
position: absolute;
instead of
position: fixed;
maybe this will solve your problem ...
Related
My banner is meant to be directly under the navigation bar but as of now, there is a space between it. I tried to use top for css and it doesn't move.
The css for the banner is:
/*Index CSS*/
* {
margin:0px; padding: 0px;
}
body {
position: absolute;
width: 1250px;
height: auto;
margin-left: auto;
margin-right: auto;
}
#wrapper {
background-color: rgb(161, 193, 217);
position: absolute;
width: 1250px;
height: auto;
margin-left: 5px;
margin-right: 5px;
}
#welcome {
background: url(../Resources/Header/CUiZMwBXAAAQy1M.jpg);
width: 1250px;
height: 480px;
}
#WelcomeTo {
color: white;
font-size: 55px;
text-align: center;
font-family: Bebas;
margin-top: 100px;
}
#LittleChef {
color: white;
font-size: 60px;
text-align: center;
font-family: Candy Shop Personal Use;
}
<div id="welcome" name="banner">
<div id="WelcomeTo" name="WelcomeTo">
<h1>WELCOME<br>TO</h1>
</div>
<div id="LittleChef" name="LittleChef">
<h1>Little Chef</h1>
</div>
</div>
I've had this problem for a very long time. Here is a screenshot to what it looks like as of now.
it is because the margin of your h1 element.
the solution is set the margin-top of h1 to 0.
Or you can set the padding of the wrapper
I have the following HTML & CSS:
body {
font-size: 16px;
overflow: scroll;
}
html {
position: absolute;
min-height: 100%;
}
.mainContainer {
position: absolute;
padding-top: 40px;
margin: 0px auto;
width: 1200px;
}
.mainpagetitleContainer {
position: absolute;
padding-top: 20px;
}
.mainpagetitle {
font-size: 4em;
font-weight: 300;
margin: 0px auto;
}
.mainpagetitleContainer > .subtitle {
color: #333;
width: 400px;
margin: 0px auto;
font-size: 1.2em;
font-weight: 300;
}
<div class="mainContainer">
<div class="mainpagetitleContainer">
<div class="mainpagetitle">
Text.
</div>
<div class="subtitle">
Text.
</div>
</div>
</div>
I am attempting to centre my divs as outlined in this answer to Horizontally center a div in a div, however my divs seem intent on being stuck to the left-hand side of the page rather than the centre.
The idea is to have a background and a central column to the page, like so:
I tried messing with margin: 0px auto; to no effect.
What am I doing wrong, and how can I fix this?
To center divs horizontally using margin: 0 auto, you should use position relative on container and on inner divs.
Try something like this:
body {
font-size: 16px;
overflow: scroll;
}
html {
position: relative;
min-height: 100%;
}
.mainContainer {
position: relative;
padding-top: 40px;
margin: 0px auto;
width: 1200px;
}
.mainpagetitleContainer {
position: relative;
padding-top: 20px;
}
.mainpagetitle {
font-size: 4em;
font-weight: 300;
margin: 0px auto;
}
.mainpagetitleContainer > .subtitle {
color: #333;
width: 400px;
margin: 0px auto;
font-size: 1.2em;
font-weight: 300;
}
To understand more about layout in CSS, I recommend reading this site: http://learnlayout.com/toc.html
Just get rid of absolute positioning.
Using position: absolute on html makes it shrink-to-fit. Since .maincontainer is out-of-flow, body will be 0px wide. Then centering makes no sense.
And just adding auto margins won't center an absolutely positioned element. You would also need left: 0 and right: 0.
body {
font-size: 16px;
overflow: scroll;
}
html {
min-height: 100%;
}
.mainContainer {
padding-top: 40px;
margin: 0px auto;
width: 500px;
background: yellow;
}
.mainpagetitleContainer {
padding-top: 20px;
}
.mainpagetitle {
font-size: 4em;
font-weight: 300;
margin: 0px auto;
}
.mainpagetitleContainer > .subtitle {
color: #333;
width: 400px;
margin: 0px auto;
font-size: 1.2em;
font-weight: 300;
}
<div class="mainContainer">
<div class="mainpagetitleContainer">
<div class="mainpagetitle">
Text.
</div>
<div class="subtitle">
Text.
</div>
</div>
</div>
I am trying to add a div to the side of my wrapper. It will be a link / button.
I want it to be able to slide up and down, fixed to the right hand side border when scrolling.
The button is:
#booknow {
position: absolute;
right: 0;
margin-left:25px;
text-align:center;
font-family: 'Raleway',sans-serif;
font-size:22px;
color:#ffffff!important;
font-weight:700;
line-height:26px!important;
text-transform:uppercase;
}
And the inner wrapper (Where the border is), is:
.wrapper_inner{
position:relative;
z-index:10!important;
padding:30px!important;
background:#fff!important;
border:1px solid #D4D4D4!important; }
HTML:
<div class="wrapper">
<div class="wrapper_inner">
<div id="booknow">
Book <br> Now
</div>
</div>
</div>
At the minute I have this:
If I set it to fixed it slides up and down but it won't position perfectly to the outside of .wrapper_inner.
The HTML wasn't that helpful, so I just threw something together. The color scheme is to display the elements. I removed .inner_wrapper and added the surrounding layout so it would be possible to demonstrate that #booknow floats. If you click the #booknow it'll scroll down to a faux form at the bottom.
Demo: https://plnkr.co/edit/qACqW4O4rJn7YHoPRWLy?p=preview
Full screen: https://run.plnkr.co/njw73AIIIuHXEooM/
Relevant CSS
body {
position: relative;
overflow-y: scroll;
overflow-x:hidden;
font: 500 16px/1.4 'Arial';
min-height: 100vh;
}
.spacer {
position: absolute;
bottom: -200px;
height: 60%;
}
#booknow {
position: fixed;
top: 30px;
right: 0;
float: right;
margin-left: 25px;
text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 22px;
color: #ffffff;
font-weight: 700;
line-height: 26px;
font-variant: small-caps;
z-index: 10;
background: #fc3;
padding: 10px;
width: 50px;
}
.wrapper {
position: absolute;
top: -110px;
margin: 25px;
padding: 5px 10px;
width: 100%;
border: 3px double grey;
min-height: 70px;
background: #eff999;
}
As part of my HTML5/CSS3 app, I need to implement zoomable image popup. When the user clicks on a small image, a full-screen popup appears containing that image in the middle with a title above it and a button to close the popup below it. Clicking on the image then removes any scaling and puts it full-size inside a box in the middle to allow scrolling - with title and "close" button staying above and below.
I'm using flex (for several reasons, including vertical centering content). The overall popup works and looks fine. Clicking on the image does increase it in size, but it resizes the box so that the "done" button is pushed below the overall popup.
Here's the jsfiddle demonstrating the issue
I don't mind the fact that the box resizes - the more room to view/scroll the larger image - but I need to ensure that the button at the bottom stays put relative to the bottom edge of the popup.
My HTML looks like this (I used a random image for demonstration):
<div id="overlay" class="hidden">
<div id="alsg">
<div class="intro">Assist with ALS</div>
<div class="box scrollable">
<img src="http://upload.wikimedia.org/wikipedia/commons/8/8c/Male_monarch_butterfly.JPG" class="fit" />
</div>
<div class="popup-buttons">
<div id="button-alsg-done" class="button button-state-action button-green right">Done</div>
<div class="clear"></div>
</div>
</div> <!-- alsg -->
</div>
With the javascript being
$('img', '#alsg').on('click', function(e) {
$(this).toggleClass('fit');
});
There's a lot of CSS, unfortunately. You'll note that there's a pretty bad mix of flex and old-school positioning. This is because the app initially didn't use flex at all and I'm in a slow process of migrating/cleaning up now.
div#overlay {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 104;
display: flex;
align-items: center;
justify-content: center;
}
div#overlay > div {
position: relative;
width: calc(100% - 40px);
margin: 10px auto;
background-color: #A9A9A9;
border-radius: 8px;
text-align: center;
padding: 10px;
display: flex;
flex-direction: column;
}
div#alsg {
max-height: calc(100% - 40px) !important;
}
div#overlay div.intro {
color: #FFF !important;
font-size: 12pt;
margin-bottom: 10px;
}
div#overlay div.box, div.template div.box {
padding: 3px 5px;
overflow: hidden;
font-weight: bold;
position: relative;
flex-grow: 1;
}
div#alsg div.box {
text-align: center;
position: relative;
overflow: auto !important;
margin: 10px 0px 0px !important;
}
div.box {
background-color: #FFF;
color: #27374A;
border-radius: 8px;
border: 3px solid #FBE96E;
position: relative;
margin: auto;
flex-shrink: 1;
}
.fit {
max-width: calc(100% - 4px) !important;
max-height: calc(100% - 4px) !important;
}
div.popup-buttons {
margin-top: 10px;
}
#overlay .button.right {
margin-left: 10px;
}
#button-alsg-done {
margin-top: 10px;
flex-basis: 25px;
}
div.button-green {
background-color: #2CC55D;
color: #FFF;
font-weight: bold;
}
div.button-state-action {
height: 25px;
padding: 0px 5px;
line-height: 25px;
text-align: center;
border-radius: 4px;
font-size: 10pt;
font-weight: normal !important;
width: 60px;
cursor: pointer;
margin-bottom: 5px;
}
div.button {
height: 22px;
padding: 0px 2px;
line-height: 22px;
text-align: center;
border-radius: 4px;
font-size: 9pt;
width: 42px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
}
.right {
float: right;
}
.clear {
clear: both;
}
http://samnorris.co.nz/backup/test/
In the section with the Pythagoras quote "There is geometry in the humming of the strings,
there is music in the spacing of the spheres" is a little experiment from Codepen I've tweaked a bit and have been playing around with (the rotating animated circles)
...not sure if my mind is just working a bit slow tonight or what but I'm having a great amount of difficulty positioning and centering the div that contains these elements underneath the div's that contain the quote and without overlaying the background...
any help would be appreciated :)
edit: updated code, I figured out why it was being pushed down (padding on the wrapper was causing it, so I've changed the background div to fixed height instead) now I just need to figure out why I am having to use left: 32% (roughly) to try and center it. Margin: 0 auto is failing me, and setting #spheres-block to width 100% messes up the bg.
Relevant CSS:
.spacesuit-bg {
background: transparent url("../img/spacesuit-bg.jpg") no-repeat 0 0;
color: #fff;
padding: 15% 0;
text-align: center;
text-transform: uppercase;
-webkit-transform: translate3d(0,0,0);
}
.quote-wrapper {
width: 100%;
display: block;
padding-top: 300px;
}
.quote-one {
font: 18px/1em "proxima_nova_rgbold", sans-serif;
font-weight: 700;
text-shadow: 0px 3px 3px rgba(0,0,0,0.3);
letter-spacing: 1px;
word-spacing: .06em;
width: 100%;
line-height: 1.25em;
}
.quote-two {
font: 36px/1em "proxima_nova_rgbold", sans-serif;
font-weight: 700;
text-shadow: 0px 3px 3px rgba(0,0,0,0.3);
letter-spacing: 1px;
word-spacing: .06em;
width: 90%;
line-height: 1.25em;
padding-top: 25px;
margin: 0 auto;
}
.spacesuit-wrapper:before, .missiongo, .golaunch {
display: inline-block;
vertical-align: middle;
}
#spheres-block {
overflow: hidden;
position: absolute;
display: block;
width: 600px;
height: 600px;
left: 32%;
}
.spheres {
width: 600px;
height: 600px;
margin: 0 auto;
position:absolute;
}
.rings {
border-radius: 50%;
border: 2px solid rgba(255,255,255, .5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
opacity: 0.6
}
Relevant HTML:
<div id="spacesuit-bg" class="section spacesuit-bg">
<div id="spheres-block">
<div class="spheres">
<div class="rings"></div>
<div class="rings"></div>
<div class="rings"></div>
<div class="rings"></div>
<div class="rings"></div>
<div class="rings"></div>
</div>
</div>
<div class="quote-wrapper">
<div class="quote-one wow flipInX">"There is geometry in the humming of the strings,</div>
<div class="quote-two wow flipInX">there is music in the spacing of the spheres."</div>
</div>
</div>
I am not a CSS expert (trying to learn, that's why I spend time here :)), so I may have missed other issues with my suggestion, but anyway I was able to achieve the desired effect by positioning the speres-block relatively, and positioning the quote-wrapper absolutely with a top offset of 0:
#spheres-block {
position: relative;
width: 650px;
height: 650px;
margin: 0 auto;
margin-top: 15px;
}
.quote-wrapper {
width: 100%;
display: block;
padding-top: 300px;
position: absolute;
top: 0px;
}
I hope I understood correctly.