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!
Related
I'm trying to create a 90 deg rotated layout. But the problem is that none of the method I used to use works in this case. Since it is rotated, changing size, getting it responsive does not seem to work.
I'm trying to let the "My Project" title take half of the rotated screen and the other half will contain
images and containers.
Can anyone help me out with this? How do i make sure that it resizes and placement is always half:half layout without overflow during resize in different device size. Please provide me with a hint to complete my work. Thank you!
Link to the code in jsfiddle.
Here's a link to the think I'm doing:
https://jsfiddle.net/7tfy4gdh/1/
Here's what i want to build: https://prnt.sc/10wb1p7
One way to think of this is to design everything as though it was not rotated and with the container having width 100vh and height 100vw. Then when everything is in place, rotate container by 90 degrees and translate it so it exactly fits within the viewport.
To ensure it is all responsive, use relative units wherever possible. So have widths and heights as %s. Think about padding, possibly define it in terms of vmin and you may also want to define font size relatively so it grows on larger screens.
So, implement this first:
This snippet starts the process, defining a left side div and a right side div, centering the main component of each and rotating and translating the container. It isn't the full job, the logo side needs more work - and you may find defining everything in %s etc that it is better not to use flex but to control the use of the whole space yourself.
And remember that just because something is rotated it does not mean that its height becomes the vertical side...
Here's some code to start things off:
<head>
<style>
* {
box-sizing: border-box;
margin:0;
padding: 0;
overflow: visible;
}
body {
width: 100vw;
height: 100vh;
overflow: visible;
}
.container {
text-align: center;
width: 100vh;
height: 100vw;
transform: rotate(90deg) translateY(-100%);
transform-origin: 0% 0%;
overflow: hidden;
}
.container .left-side {
position: relative;
width: 50vh;
height: 100vw;
float: left;
}
.container .left-side .project-title {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.container .project-title span {
text-align: center;
}
.container .right-side {
position: relative;
top: 0;
width: 50vh;
height: 100vw;
float: left;
padding: 1vmin;
}
.container .right-side .control {
position: relative;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
rmax-width: 450px;
rmin-width: 350px;
height: 80%;
width: 80%;
background-color: red;
padding: 5%;
}
.control .logo {
height: 25%;
}
.control .logo img {
width:100px;
height: 100%;
width: auto;
}
.logo-container {
flex:1;
display:flex;
margin-top: 5%;
height: 30%;
}
.logo-maker{
flex:1;
padding:25px 10px;
background-color: #ccc;
color:#ffffff;
border-radius: 8px;
padding-top: 15px;
}
.logo-maker .maker-contain {
width:50px;
background-color: #ccc;
border-radius: 8px;
padding:5px;
padding-bottom: 0;
margin:auto;
}
.logo-maker .maker-contain img{
width:100%;
}
.logo-maker h3 {
margin-top: 15px;
}
.earn-coin {
flex:1;
text-align: center;
padding:25px 0;
padding-top: 15px;
margin-left: 5px;
border-radius: 8px;
background-color: #ccc;
box-shadow: 5px 4px 5px -5px rgba(0,0,0,0.76);
-webkit-box-shadow: 5px 4px 5px -5px rgba(0,0,0,0.76);
-moz-box-shadow: 5px 4px 5px -5px rgba(0,0,0,0.76);
}
.earn-coin img {
width:40px;
margin:auto;
}
.earn-coin h3{
margin-top: 15px;
}
.footer {
padding:20px 30px;
padding-left: 55px;
background-color: #ccc;
background-color: purple;
height: 25%;
color:#ffffff;
border-radius: 5px;
margin-top: 5%;
text-align: left;
}
.footer i{
font-size:35px;
}
.footer h3 {
display: inline;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="left-side">
<div class="project-title">
<h2>
My Project
</h2>
</div>
</div>
<div class="right-side">
<div class="control">
<div class="logo">
<img src="https://d1csarkz8obe9u.cloudfront.net/posterpreviews/lion-fire-logo-design-template-free-89daa14626ac403bd3cf6282036663ff_screen.jpg?ts=1572094154">
</div>
<section class="logo-container">
<div class="logo-maker">
<div class="maker-contain">
<img src="https://www.logaster.com/blog/wp-content/uploads/2018/05/LogoMakr.png" alt="">
</div>
<h3>Build Logo</h3>
</div>
<div class="earn-coin">
<div class="coin-img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEWIhIZ48jnuWwHjIZ9I_EpQbRsHrFtomThQ&usqp=CAU">
</div>
<h3>Earn Coins</h3>
</div>
</section>
<div class="footer">
<i class="fa fa-bell"></i>
<h3>
Build by Dave ___
</h3>
</div>
</div>
</div>
</div>
</body>
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.
So, I have a main container that shows like the following:
I want to be able to adapt the parent div to the number of child's it receives. Let's say we remove div2. The result should be something like this:
Instead, the parent div does not stretch to the width of the div child's
Here's my code:
HTML:
<div class="main-container">
<!-- Card container -->
<div class="card-container">
<div class="card">div1</div>
<div class="card">div2</div>
<div class="card">div3</div>
</div>
<!-- Footer container -->
<div class="footer">i am a footer</div>
</div>
CSS:
.main-container {
position: fixed;
margin: 0 auto;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 400px;
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align:center;
}
.card-container {
color: #3B3D3D;
height:105px;
float: left;
width: 100%;
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
float: left;
width: 100%;
}
.card {
width:100px;
float:left;
}
What am I doing wrong here? I've tried the display: inline-block; solutions out there but since the parent div must be fixed to the bottom, I am not seeing the desired result.
Any help will be precious.
Thanks in advance.
Try this https://jsfiddle.net/2Lzo9vfc/136/
You can try to remove one .card on click and see what hapens here https://jsfiddle.net/2Lzo9vfc/138/
CSS
.main-container {
position: fixed;
margin: 0 auto;
left: 50%;
bottom: 0;
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align:center;
display: inline-block;
transform: translateX(-50%);
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
width: 100%;
}
.card {
width:100px;
height:105px;
display: inline-block;
}
HTML
<div class="main-container">
<div class="card">div1</div>
<div class="card">div2</div>
<div class="card">div3</div>
<div class="footer">i am a footer</div>
</div>
Here you go: http://codepen.io/n3ptun3/pen/PPgWNb
You don't need to use display: inline-block.
I've left your HTML alone, and simplified some of your CSS: .card-container and .footer don't need float: left; and width: 100%;. They are both block-level elements so they will take up 100% of the width, and they don't need anything to wrap around them.
On the .main-container, you can't set margin: 0 auto; and position: fixed;. position: fixed; removes the ability for centering via margin. left: 0; and right: 0; were stretching the size of the main container, so those need to be removed. width: 100%; and max-width: 400px; were trying to fix the width issue, but that wouldn't allow resizing based on content.
Instead you need to set left: 50%; (places left edge of element at 50% of the parent's width, i.e. the viewport width, in this case) and then transform: translate(-50%); to bring the element back toward the left by 50% of its width. Thus bringing the element to the center of the window/viewport.
Now, if you remove one of the "cards," it will resize the "main-container," while keeping everything fixed to the bottom and centered.
.main-container {
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%);
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align: center;
}
.card-container {
color: #3B3D3D;
height: 105px;
}
.card {
width: 100px;
float: left;
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
}
EDIT: Based on your new information (re: the increased width or added "cards"), I've found that the issue lies with the left position on the .main-container. When you position the element by 50% and its width is more than 50% of the parent, it runs into the right side of the parent div, and you get the stacking. To fix this, you can instead remove the float: left; on .card and add display: flex; on .card-container. This will allow you to increase the width of the "cards" while keeping them from stacking.
I've updated the code here: http://codepen.io/n3ptun3/pen/PPgWNb
.main-container {
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%);
box-shadow: 0 0 15px #B3B3B3;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align: center;
}
.card-container {
color: #3B3D3D;
height: 105px;
display: flex;
}
.card {
width: 100px;
// float: left;
}
.footer {
color: #FFFFFF;
background: #0095D3;
height: 45px;
}
Here is my link http://jsfiddle.net/sanand29/7fh2em4f/
<div class="link1">
<div>
the css part corresponding to it
.link1
{
display: block;
margin-top: 15%;
width: 78%;
margin-left: 26%;
}
a.square1
{
width: 50%;
height: 50%;
border: 1px solid red;
padding: 9%;
margin-top: 0%;
background-color: #FAFAFA;
opacity: 0.5;
}
How will I put any text in the center of the square keeping it responsive.
Try this
<div class="link1">
<div class="square1">Text to be centred</div>
</div>
And the css
div.link1 {position: relative; width: 200px; height: 200px; border: 1px solid red;}
div.square1 {height: 20px; text-align: center; margin: auto; position: absolute; top: 0px; left:0px; bottom:0px; right:0px;}
This will keep the text in the middle of the box. In fact it keeps the div with class square1 centred - the text may overflow this div, depending on the size of font you choose. If you set the height of the div to the height of your font you can't go wrong.
I am currently creating a scrolling (long) page. I have encountered a problem with the footer though. Since the wrapper has an absolute position, the footer goes behind the wrapper, instead of sticking at the bottom of the page. How can I make it so that my footer will stick at the bottom of the page on all resolutions?
http://jsfiddle.net/Kzh7z/
You can see the little blue part of it sticking behind the wrapper.
HTML:
<div id="wrapper">
</div> <!-- end wrapper -->
<footer>
<div id="footer">
<div class="copyright">
<p>footer copyright blah etc</p>
</div>
</div>
</footer>
CSS:
#wrapper {
background: #CCC;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
width: 1000px;
height: 1200px;
position: absolute;
}
#footer {
background: #0A59C2;
border-top: 5px solid #06489E;
width: 100%;
height: 85px;
}
Thank you!
EDIT: Updated to reflect what was discussed in the comments.
This will keep #footer at the bottom and keep #wrapper above it. position: absolute is not necessary for #wrapper.
#wrapper {
background: #CCC;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
width: 1000px;
height: 1200px;
position: relative;
overflow: auto;
z-index: 1;
}
#photoContent {
border: 10px solid #F5F5F5;
box-shadow: 0 0 7px;
border-radius: 5px;
display: block;
margin-left: auto;
margin-right: auto;
width: 781px;
height: 231px;
background: #FFF;
margin-top: 12px;
}
#footer {
background: #0A59C2;
border-top: 5px solid #06489E;
width: 100%;
height: 85px;
z-index: 2;
}