I have created a barebones parallax demo. This works fine, as you can see if you run the snippet below. However, it stops working if I remove the following CSS rule:
main {
overflow-y: auto;
}
Why is it necessary to include a rule for a vertical scrollbar, when there is no need to scroll vertically?
body {
margin: 0;
}
main {
width:100vw;
height:100vh;
perspective: 2px;
/* overflow-y MUST be set to a certain value for parallax to work
* WORKS:
* + auto
* + hidden
* + overlay
* + scroll
* FAILS:
* - clip
* - inherit
* - initial
* - revert
* - unset
* - visible
*/
overflow-y: auto;
}
div {
position: absolute;
top: 0;
width: 99vw;
height: 100%;
}
div:nth-child(1) {
left: 0;
background-color: #900;
}
div:nth-child(2) {
left: 49.5vw;
background: rgba(0,192,0,0.5);
height: 80%;
top: 10%;
transform: translateZ(1px) scale(0.5);
z-index: 1;
}
div:nth-child(3) {
left: 99vw;
background-color: #009;
}
<body>
<main>
<div></div
><div></div
><div></div>
</main>
</body>
Why is it necessary to include a rule for a vertical scrollbar, when there is no need to scroll vertically?
You need to scroll vertically but you need to scroll the main and no the sceen. There is a small trap here because removing the scroll of the main will make the default scroll of the screen to appear and you think both are the same but no. We need to scroll the main because the perspective is defined there.
Reduce the width/height slightly and you will better understand. now if you remove/add overflow you will see that it's different
body {
margin: 0;
}
main {
width: 90vw;
height: 90vh;
perspective: 2px;
overflow-y: auto;
}
div {
position: absolute;
top: 0;
width: 99vw;
height: 100%;
}
div:nth-child(1) {
left: 0;
background-color: #900;
}
div:nth-child(2) {
left: 49.5vw;
background: rgba(0, 192, 0, 0.5);
height: 80%;
top: 10%;
transform: translateZ(1px) scale(0.5);
z-index: 1;
}
div:nth-child(3) {
left: 99vw;
background-color: #009;
}
<main>
<div></div>
<div></div>
<div></div>
</main>
Basically, the element having the perspective need to have its content scrolling to see the effect.
Related
I've looked into this a fair bit but can't seem to find a good, solid answer to find how to make a responsive circle around a div element of variable height.
It's easy to make a simple responsive circle using vw units.
<div style="height:20vw; width:20vw"></div>
However, I'm looking to use a min-height of an element and have a circle around this div.
Another way to create a responsive circle is using something like the snippet below, but again I can't adapt this to work for a variable height (again, I can't use vh units as the div will change in height.
.square {
position: relative;
width: 10%;
background: gray;
border-radius: 50%;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
}
<div class="square">
<div class="content">
</div>
</div>
I am trying to create something like the below, where the circle will never cut into the corners of the div (with around a 10px padding). I personally was trying to avoid javascript and would have preferred a css only approach, but it seems it's unavoidable. Maybe the only solution is to use a jquery to calculate the height of the element in order to apply this to a wrapper element?
I was playing around with this:
.square {
position: absolute;
top: 50%;
display: inline-block;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100px;
border-radius: 50%;
background: url('https://i.imgur.com/2dxaFs9_d.webp?maxwidth=640&shape=thumb&fidelity=medium');
background-size: 100% 100%;
padding: 20px;
}
.content {
width: 300px;
min-height: 100px;
background: tomato;
}
<div class="square">
<div class="content">
Hello!<br>
<br><br><br>This has a variable height but fixed width<br><br><br>Hello
</div>
</div>
Clip-path can easily do this if you consider solid coloration.
Resize the element and the circle will follow:
.box {
width: 200px;
height: 200px;
overflow: hidden;
resize: both;
background: blue;
box-shadow: 0 0 0 200vmax red;
clip-path: circle(71%);
margin: 100px auto;
}
<div class="box"></div>
Related question to understand the magic number 71%: clip-path:circle() radius doesn't seem to be calculated correctly
To use an image we can consider pseudo elements. You can also rely on calc() to add the offset:
.box {
width: 200px;=
resize: both;
clip-path: circle(calc(71% + 10px));
margin: 100px auto;
position: relative;
font-size:35px;
color:#fff;
}
/* the background layer */
.box::before {
content:"";
position: absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background:blue;
}
/* the image layer */
.box::after {
content:"";
position: fixed; /* to make sure the image cover all the screen */
z-index:-2;
top:0;
bottom:0;
left:0;
right:0;
background:url(https://picsum.photos/id/1015/1000/1000) center/cover no-repeat;
}
<div class="box" contenteditable="true"> Edit this<br>text </div>
I tried my hardest to figure this out with pure css. Though the problem with css I could not figure out how to calculate the diameter of the circle based on the content div size; the length from top left corner to bottom right corner of the variable height div.
I'm not sure if can be done using the calc() css function.
But I did manage to do it with a little jquery (which could easily be changed to pure javascript if you are not using jquery).
See working resizable example below (follow my comments in code)
Note: If you are using internet explorer the resizable demo content div will not resize.
// circumscriber for variable size divs
function circumscriber() {
// for each variable size div on page
$(".variable-size").each(function() {
// get the variable size div content width and height
let width = $(this).outerWidth();
let height = $(this).outerHeight();
// get the diameter for our pefect circle based on content size
let diameter = Math.sqrt(width ** 2 + height ** 2);
// extra 15 pixel circle edge around variable size div
let edge = 15;
// add current circle size width css
$('.circle', this).css({
'width': (diameter + (edge * 2)) + 'px'
})
});
}
// run the circumscriber (you might wana do this on ready)
circumscriber();
// if the window is resized responsively
$(window).on('resize', function() {
circumscriber();
});
// for demo purpose to fire circumscriber when resizing content
// not needed for real thing
$('.content').on('input', function() {
this.style.height = "";
this.style.height = ( this.scrollHeight - 30 ) + "px";
circumscriber();
}).on('mouseup', function() {
circumscriber();
});
/* variable size container to be circumscribed by circle */
/* none of these styles are required, this just to center the variable size div in the window for demo purposes */
.variable-size {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* resizable text area for demo */
/* again not needed */
.variable-size .content {
padding: 15px;
background: #fff;
resize: both;
overflow: auto;
color: #000;
border: none;
width: 200px;
font-weight: bold;
}
.variable-size .content:focus {
outline: 0;
}
/* child circle div css */
.variable-size .circle {
position: absolute;
background-image: url('https://i.imgur.com/2dxaFs9_d.webp?maxwidth=640&shape=thumb&fidelity=medium');
background-position: center center;
z-index: -1;
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s ease;
width: 0;
}
/* fast way to make circle height the same as current width */
.variable-size .circle:before {
display: block;
content: '';
width: 100%;
padding-top: 100%;
}
/* demo window css */
HTML,
BODY {
height: 100%;
min-height: 100%;
background: black;
position: relative;
font-family: "Lucida Console", Courier, monospace;
}
<div class="variable-size">
<textarea class="content" rows="1" placeholder="TYPE TEXT OR RESIZE ME ↘"></textarea>
<div class="circle"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
See jsfiddle here... https://jsfiddle.net/joshmoto/6d0zs7uq/
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
Source: https://www.w3schools.com/
You could use flex display and insert empty flex-items around the inner div and use flex-basis to fix their width.
Try this
.square {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100px;
border-radius: 50%;
background: black;
background-size: 100% 100%;
padding: 20px;
}
.content {
width: 300px;
min-height: 100px;
background: tomato;
}
.emptyDiv {
flex-basis: 120px
}
<div class="square">
<div class="emptyDiv"></div>
<div class="content">
Hello!<br>
<br><br><br>This has a variable height but fixed width<br><br><br>Hello
</div>
<div class="emptyDiv"></div>
</div>
Can someone help me regarding this http://www.alerto24.com/
Why is there a wide space to the right and the horizontal scrollbar is visible?
Both your footer and content section have a right margin of -100% which causes the scrollbar. Disable that CSS property for both elements and the scrollbar is gone.
please change below css
#content::before {
background: rgba(0, 0, 0, 0) url("../images/site-bg-b.jpg") no-repeat scroll 50% 0;
content: " ";
/*left: -100%;
position: absolute;
right: -100%;
top: 0;
bottom: 0;
z-index: -1;*/
}
#footer::before {
background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
border-top: 1px solid #032d34;
content: " ";
/*left: -100%;
position: absolute;
right: -100%;
top: 0;
bottom: 0;
z-index: -1;*/
}
I think there is a structure problem in your #footer and #content.
For example. You put background properties to apply a 100% background in :before and a max-width: 920px combined with width: 100% in footer element, which appears like a contradiction.
I suggest you these modifications :
You remove #content:before and #footer:before properties. You can create a container div in your #content element which contains the width of the website like this :
#content .container {
width: 920px;
margin: 0 auto;
}
And you apply background properties on #content which has width: 100%;
#content {
width: 100%;
background: blue; /* you put your background properties on it */
}
Also, you do the same for footer :
#footer {
position: relative;
z-index: 1;
width: 100%;
/* max-width: 920px; remove this line */
background: blue; /* you put your background properties on it */
margin: 0 auto;
padding: 30px 0 15px;
color: #fff;
}
#footer .wrap {
position: relative;
margin: auto; /* you use this property to center this container as it is on the website */
padding: 0 0 50px;
font-size: 0;
width: 920px; /* you apply width on this container instead of the #footer container */
letter-spacing: -5px;
}
EDIT : I've made a JSFiddle to explain my thoughts
See it here
img.imgdemo {
background: white;
width: 65%;
margin: auto;
}
<a class=imagelink href=periodictable.htm>
<img class=imgdemo src=ptabledemo.png>
</a>
I'm trying to center an image that also acts as a link, but when it has a style of display: block, it acts as a block element, making everything in it's width a link as well. Is there any way to fix this?
Images are inline just like text so:
.imagelink {
text-align:center;
}
One option you could use is the transform: translate() property and give the a.imagelink display: inline-block. This will let you set the size of the image to whatever you want and make sure the link is the same size and stays centered at all times:
JS Fiddle
a.imagelink {
display: inline-block;
background: blue;
position: relative;
left: 50%;
transform: translateX(-50%);
}
img {
width: 50%;
display: block;
}
If your image is 200px
img {
width: 200px;
margin-left: calc(50% - 200px / 2);
}
If your image is 65%
img {
width: 65%;
margin-left: calc(50% - 65% / 2);
}
I have been created simple webpage using html5,css and js.
I have header,menu,slide show,main-content and footer. and also using sticky side-bar
After all coding, slideshow display at the middle of main content and main-content also hidden.
css code for slideshow,main-content and footer:
#wowslider-container1 {
position: absolute !important;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
left: 50%;
top: 60%;
opacity: 1;
}
/* clearfix */
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
/* Main ................ */
main {
margin: 20px auto;
max-width: 940px;
}
/* aside */
aside {
float: left;
max-width: 220px;
}
.inside {
background-color: #000;
padding: 10px;
}
#sidebar.sticky {
float: none;
position: fixed;
top: 20px;
z-index: 6;
left: auto;
}
/* main content */
.main_content {
float: right;
max-width: 700px;
color:#fff;
}
/* Footer .............. */
footer {
background-color: #999;
height: 300px;
width: 100%;
}
My page look like this: http://s14.postimg.org/jw2uimt9t/Untitled_1_copy.png
I have lots of file, how to fix my problem, there anyone help me to fix this.
Any help would be highly appreciated. Thanks in advance.
I guess i understood what you need,
most of the div containers that you use don't have css size properties like width and height, but most importantly they don't have a position values in order to fit a html layout structure.
try using position:relative; first on the css for the most important elements of the page.
start first with this default css parameters:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
then add to your slideshow css main class this
*your_slideshow_class_name_here {
position: relative;
}
after that, things become easier to solve
I have a fixed div setup using this:
.box {
position: fixed;
width: 600px;
bottom: 20px;
left: 50%;
max-height: 400;
overflow:auto;
}
The problem I have is that on internet explorer it ignores the max-height, the div just expands upwards and out of view with no scroll bars, even if I set overflow: scroll;.
BTW I am using the hack to do fixed absolute position boxes so they stay on the screen reguardless of scrolling, if that matters:
* { margin: 0; }
* html .box { position: absolute; }
try this:
* html .box{
height: expression( this.scrollHeight > 399 ? "400px" : "auto" ); /* fix for ie 5+ */
}
.box {
max-height: 400px;
position: fixed;
width: 600px;
bottom: 20px;
left: 50%;
overflow:auto;
}