SOLVED:
After re-reading the w3 spec for transforms, I realised the footer was being considered part of the 3d context due to DOM structure and was being affected by rotated elements. I simply put .cardsContainer inside of another element .cards3dContainer and the footer is now not considered part of the 3d context.
-webkit-perspective:1000px; seems to state that the 3d context begins at that point in the DOM.
Having a major problem with a container that is being rotated using css3 transforms and over-writing part of a buttons hit area in another div.
The transform visually works and the container is leaning back (using rotateX). However, the button in the footer, despite being of a higher z-index and naturally stacked to be above the container, is having its hit area ignored where the rotated container and the button visually overlap. The button still 'appears' to be on top of the rotated container, but acts like it is under it.
I should mention im using Less for the css (and all the Less code does work).
I've looked through lots of similar questions and the various solutions didn't work for me. Amongst those that didn't work (vendor prefixes omitted):
translate3d(0px, 0px, 0px);
transform-style: flat;
Here is the short version of the code:
html:
<div class="screen snap" style="display: block;">
<div class="container">**<!-- has perspective set to 1000 -->**
<div class="cardsContainer"> **<!-- is rotated on x using transform -->**
<div class="card" style="left: 130px; display: block;">
<div class="cardBack"></div>
<div class="cardFront" style="opacity: 0;">
<div class="cardContent">A piece of fruit.</div>
</div>
</div>
</div>
<footer>
**<!-- at certain screen sizes, when the container and footer overlap, top half of this buttons hit area is inactive-->**
<button class="checkButton">Start</button>
</footer>
</div>
</div>
Here are the full length files, look forward to any advice / tips:
.html file:
<div class="screen snap" style="display: block;">
<div class="container">
<div class="cardsContainer">
<div class="card" style="left: 130px; display: block;">
<div class="cardBack"></div>
<div class="cardFront" style="opacity: 0;">
<div class="cardContent">A piece of fruit.</div>
</div>
</div>
<div class="card" style="left: 420px; display: block;">
<div class="cardBack"></div>
<div class="cardFront" style="opacity: 0;">
<div class="cardContent">Paint</div>
</div>
</div>
<div class="card" style="left: 420px; display: none;">
<div class="cardBack"></div>
<div class="cardFront">
<div class="cardContent">Nail</div>
</div>
</div>
<div class="card" style="left: 420px; display: none;">
<div class="cardBack"></div>
<div class="cardFront">
<div class="cardContent">Apple</div>
</div>
</div>
<div class="card" style="left: 420px; display: none;">
<div class="cardBack"></div>
<div class="cardFront">
<div class="cardContent">House</div>
</div>
</div>
</div>
<footer>
<button class="checkButton">Start</button>
</footer>
</div>
</div>
.less file:
.screen.snap .container{
padding: 0;
margin: 0;
border: 0;
left: 0;
right: 0;
bottom: 0;
top: 0;
border-radius: 0;
box-shadow: none;
vertical-align: baseline;
background-color: #efe8b6;
-webkit-perspective:1000px;
.cardsContainer{
position:absolute;
width:800px;
height:350px;
top:100px;
text-align: center;
background-color: lighten(#efe8b6, 10%);
-webkit-transform: rotateX(20deg);
.card {
position: absolute;
width:250px;
height:350px;
border-radius: 10px;
.cardFront{
background-image: url('images/snap_card_front.png');
background-repeat: no-repeat;
width:250px;
height:350px;
position: absolute;
.cardContent{
width:200px;
height:300px;
font-size: 37px;
}
}
.cardBack{
background-image: url('images/snap_card_back.png');
background-repeat: no-repeat;
width:250px;
height:350px;
position: absolute;
}
}
}
}
footer{
z-index:999;
background-color: #f00;
position: relative;
.button{
position:absolute;
width:50px;
height:50px;
background-color: #ccc;
border-radius: 5px;
font-size: 25px;
cursor: pointer;
}
}
After re-reading the w3 spec for transforms, I realised what the problem was.
-webkit-perspective:1000px; seems to state that the 3d context begins at that point in the DOM. I was applying the perspective style to the container which both the footer and the cardsContainer were part of. The footer was then being considered part of the 3d context due to DOM structure and was being affected by rotated elements.
I simply put .cardsContainer inside of another element .cards3dContainer and the footer is now not considered part of the 3d context because it is now not inside the dom structure which has perspective style set.
The new structure is now this:
.screen.snap .container{
.cards3dContainer{
-webkit-perspective:1000px;
.cardsContainer{
}
}
.footer{
}
}
Apologies to anyone who may have been working on an answer at the moment.
Related
I am developing a project for school and I am pretty new to Bootstrap and I keep having some problems with scaling the website for different resolutions. When I change it to mobile the images go on top of the text. If anybody could help me I would appreciate it.
I have tried everything and still cant find a solution.
<body>
<div class="container">
<nav class="navbar-fixed-top sticky-top navbar" style="width: 100%; background-color: white; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);">
<div class="navbar-header">
<a class="navbar-brand"><img src="transferir.png" alt="" style="height: 65; width: 60px"></a>
</div>
<div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Features</li>
<li>Contacta-nos</li>
</ul>
</div>
</nav>
<div class="site-index">
<div id="home" class="block home-block">
<div class="container">
<div class="col-sm-6 left-block">
<div class="text-centered">
<h1>Texter</h1>
<p class="info-text">Send text messages, voice messages, video messages or video call with all your friends and family easily, quickly and securely.</p>
<p class="Medium-text">Download Em Breve</p>
<img src="playstore.png" alt="Playstore" class="d-img">
<img src="appstore.png" alt="Apple App Store" class="d-img">
</div>
</div>
<div class="col-sm-5 right-block">
<img src="phones.png" style="height: 350px; float: right; vertical-align: middle; width: auto !important; position: relative">
</div>
</div>
<hr class="sombra">
</div>
</div>
Css
html{
scroll-behavior: smooth;
}
body{
padding-top: 1%;
font-family: 'Lato', sans-serif;
}
.block{
padding: 35px;
}
.home-block{
min-height: calc(100vh - 90px);
}
#home .container{
height: 500px;
}
.left-block{
text-align: center;
top: 30%;
}
.right-block{
bottom: 35%;
margin-left: 25%;
}
.container{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Desktop
When i squish the page
First of all, you probably forgot to include <div class="row"></div> wrapper inside your <div class="container">...</div> element, just as it says here.
Secondly, I strongly recommend you to not play too much with CSS properties such as position: relative/absolute, top: ...; left: ...; right: ...; bottom: ..., because most of them break the CSS native document flow and they should be used only when other tools do not help much.
I suggest you reading this series of articles if you have enough time: CSS layout
I turned off most of the properties of that kind and it already looks much nicer:
This answer would be just be a massive advice if I wouldn't provide some code help, so here it is.
Start by disabling these properties in DevTools:
.home-block{
/* min-height: calc(100vh - 90px); */
}
#home .container{
/* height: 500px; */
}
.left-block{
/* text-align: center; */
/* top: 30%; */
}
.right-block{
/* bottom: 35%; */
/* margin-left: 25%; */
}
Fixing Bootstrap markup:
<div id="home" class="block home-block">
<div class="container">
<!-- Added this wrapper, changed .col-* classes to responsive -->
<div class="row">
<!-- Removed .left-block class -->
<div class="col-sm-12 col-lg-6 left-block">
<div class="text-centered">
<h1>Texter</h1>
<p class="info-text">Send text messages, voice messages, video messages or video call with all your friends and family easily, quickly and securely.</p>
<p class="Medium-text">Download Em Breve</p>
<img src="playstore.png" alt="Playstore" style="height: 40px;">
<img src="appstore.png" alt="Apple App Store" style="height: 40px">
</div>
</div>
<!-- Removed .right-block class, added .text-centered class -->
<div class="col-sm-12 col-lg-6 text-centered">
<!-- Removed inline styles (bad practice), changed "height" to be an attribute -->
<img src="phones.png" height="350">
</div>
</div>
</div>
</div>
Then you would get this picture (no interval between image and the button on the top):
This one is solved by applying margin-top: ...px; to the image block, wrapped in #media query at .col-md-* resolutions and lower. For the exact values see Bootstrap grid options. For more info on applying #media queries see MDN docs
As for navigation bar, I first suggest you disabling padding-left on ul#menu element:
#menu {
padding-left: 0;
}
Although it fixes it on sm resolutions, the navigation menu still wraps under the logo on resolutions less than about 520px. I suggest you imagine what to do with this occasion in your mind or in some markup service like https://app.diagrams.net/ and then develop what you decided to.
You can use
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
See this and this
NB
My Header:
<header>
<div style="float:left;margin-left:20px;">
<div style="float:left; margin-left:10px;margin-top:55px;background-color:#2BC3A7; height:3px; width:200px;"> </div>
<div style="clear:both;float:left;"></div>
<div style="float:left; margin-left:10px;margin-top:5px;font-family:DIN; font-size:12pt;color:#2BC3A7;">Services/Products</div>
</div>
</div>
</header>
I have 2 divs:
<div id="#content1">
<div id="divWelcome" style="margin-top:50px;">
<div id="headerimg" style="position: relative;">
<div style="position: absolute; bottom:255px; left: 20px; width: 550px; font-family:DIN; font-size:23pt; font-weight:600; color: white; letter-spacing:0.01em;">
We offer Cloud solutions for small businesses to help them manage their workflow requirements
</div>
<hr style="height:6px;position: absolute; bottom:210px; left: 20px; width: 490px;"/>
<div style="position: absolute; bottom:175px; left: 20px; width: 550px; font-family:DIN; font-size:14pt; font-weight:500; color: white; letter-spacing:0.01em;">
Our core sectors of expertise are professional services, data management and outsourcing.
</div>
</div>
<div id="divAboutContents" style="margin-top:50px; background-color:red;position: relative;display: none;">
</div>
</div>
</div>
So when the page loads the 1st div shows. The effect I want is when the user presses a button the divFirst gently fades away and the divSecond gently fades in. I have used this bit of jQuery but the affect does not look very pleasing.
<script type="text/javascript">
$(document).ready(function () {
$("#divAbout").click(function () {
$("#headerimg").fadeOut();
$("#divAboutContents").fadeIn();
});
});
</script>
What else can I try/read up on? Thanks
NB
This is part of my CSS
#content1 {
clear: both;
position: absolute;
}
Also I was fading the other one out. just forgot to put it in the question. The affect I get is 'clunky'
'Pleasing' is a very subjective term, however to improve it you could place both div elements within a parent container positioned absolutely so they overlap. You can then fadeToggle() between the two as needed. Something like this:
$('#container').click(function() {
$(this).find('div').fadeToggle();
})
#container > div {
position: absolute;
}
#divSecond {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
<div id="divFirst">some content with images</div>
<div id="divSecond">different content with images</div>
</div>
Click the text to see the fade transition in action.
Note: I am unable to edit the HTML, so I have to find a workaround.
HTML:
<div id="container">
<div id="breadcrumbAds">...</div>
<div id="breadcrumbWrapper">...</div>
<div id="containerTopParsys">...</div>
<div id="leftColWrapper" class="column663Wrapper">...</div>
<div id="rightColWrapper" class="rightColumn663Wrapper">...</div>
<div style="clear:both;"></div>
<div id="containerBottomParsys">...</div>
<div style="clear:both;"></div>
<div id="bgpromo">...</div>
<div style="clear:both;">...</div>
<div style="clear:both;"></div>
</div>
The issue is that all of the divs inside #container, EXCEPT for #leftColWrapper and #rightColWrapper, need to be 100% width of #container, but #leftColWrapper and #rightColWrapper need to be stacked next to each other and centered (together) within the 100% #container, with a max-width of 1224px.
I tried utilizing the following jQuery to add a wrapper div around #left... and #right..., but it ended up grabbing the ads in those containers and placing them in the component where the JS for the page is stored.
(function($) {
$("#leftColWrapper, #rightColWrapper").wrapAll("<div class=\"colWrapper\" />");
})(jQuery);
I either need another solution to wrap those two divs together, so that I can set a max-width of 1224px and center them, or I need to know why this jQuery is picking up those ads and duplicating them within the JS component.
#container{
text-align: center;
font-size: 0;
}
#container > div{
outline: 1px solid #333;
display: inline-block;
min-height: 10px;
text-align: left;
width: 100%;
font-size: 14px;
}
#container #leftColWrapper, #container #rightColWrapper{
width: 50%;
max-width: 612px;
}
<div id="container">
<div id="breadcrumbAds">...</div>
<div id="breadcrumbWrapper">...</div>
<div id="containerTopParsys">...</div>
<div id="leftColWrapper" class="column663Wrapper">width: 50%;<br>
max-width: 612px;</div><div id="rightColWrapper" class="rightColumn663Wrapper">width: 50%;<br>
max-width: 612px;</div>
<div style="clear:both;"></div>
<div id="containerBottomParsys">...</div>
<div style="clear:both;"></div>
<div id="bgpromo">...</div>
<div style="clear:both;">...</div>
<div style="clear:both;"></div>
</div>
So I am trying this for one day but I am still not able to do it. I have created a new index page for my website. I have copied code from my previous homepage.
If you see the sliders on the left(first homepage) and on the right(new homepage). You could see that on the new homepage the sliders are behaving abnormally. I can't figure out in my CSS why is this happening.
I have tried this:
<div id="testimonial">
<div id="black_title">
<h1>Bead X Testimonials</h1>
</div>
<div class="bx-wrapper" style="max-width: 100%;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 232px;">
<ul class="slide_left" style="width: 415%; position: relative; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-288px, 0px, 0px);">
<li style="float: left; list-style: none; position: relative; width: 248px;" class="bx-clone">
<iframe src="//player.vimeo.com/video/73331040" width="258" height="207" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> The Bead X Difference
</li>
<li style="float: left; list-style: none; position: relative; width: 248px;">
<img src="images/test_img.png"> The Bead X Difference
</li>
<li style="float: left; list-style: none; position: relative; width: 248px;">
<iframe src="//player.vimeo.com/video/73331040" width="258" height="207" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> The Bead X Difference
</li>
<li style="float: left; list-style: none; position: relative; width: 248px;" class="bx-clone">
<img src="images/test_img.png"> The Bead X Difference
</li>
</ul>
</div>
<div class="bx-controls bx-has-pager">
<div class="bx-pager bx-default-pager">
<div class="bx-pager-item">1
</div>
<div class="bx-pager-item">2
</div>
</div>
</div>
</div>
<div class="navigation">
<!-- <p><span id="left-prev"></span> <span id="left-next"></span></p> -->
<div id="left-prev">
<a class="bx-prev" href=""><img src="images/slider_prev.png" height="25" width="25"></a>
</div>
<div id="left-next">
<a class="bx-next" href=""><img src="images/slider_next.png" height="25" width="25"></a>
</div>
<div id="read_more"> View all
</div>
</div>
</div>
By abnormally I mean, that the text below the images in the slider is getting overflown and the controls of the slider are messed up.
But the result is still weird. How to resolve this?
Unfortunately there are quite a few issues going on here that you will have to deal with. First it looks like that "Wax Daddys Promise" pane is an image with at Width of 269px yet the column you are trying to align is 275px so it will not fill that area correctly to give you good lines.
The .testimonial class margins are all out of place.
#testimonial {
text-align: center;
width: 95%;
height: 310px;
background: white;
border: 4px solid rgb(209, 209, 209);
margin: 15px 2px 2px 17px;
}
You should use:
margin: 15px 0 0 0;
or better yet:
margin-top: 15px;
And that is just to give yourself a top buffer. If you give the same to each of the testimonial classes or just use class="testimonial" on all of those you'll get the top separation.
That should help a bit. In the future you may want to look into bootstrap, makes grid layout really easy without having to get deep with custom styling. Hope that helps.
You will still need to do a bit of formatting to clean up the layout, but this should help you resolve some of the issues:
Modified CSS:
#read_more { float: right; }
.bx-next, .bx-prev { padding: 0px; }
#left-next, #left-prev { float: left; }
.bx-pager { padding: 0px; position: relative; top: 0; }
Also, add a clear fix after your #read_more and after your .bx-controls DIVs:
<div style="clear: both;"></div>
I made a drag-and-drop engine in JavaScript, and I'm currently adding a "bounding" feature. My issue is that the bounding element's position changes depending on its parent's position: attribute.
In other words this html:
<div id="center" class="bound">
<h1>Hello World! <hr /></h1>
<div id="box" class="bound">
<p class="drag square" id="one"> One </p>
<p class="drag square" id="two"> Two </p>
</div>
</div>
and this html:
<div id="center"> <!-- Difference is here -->
<h1>Hello World! <hr /></h1>
<div id="box" class="bound">
<p class="drag square" id="one"> One </p>
<p class="drag square" id="two"> Two </p>
</div>
</div>
affect the engine in different ways, and they shouldn't. Only the <div id="box" class="bound"> should affect the drag object.
Here is the CSS:
#charset "utf-8";
/* CSS Document */
* {
padding: 0px;
margin: 0px;
}
.drag {
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.bound {
position: relative;
}
.square {
width: 100px;
height: 100px;
background: red;
cursor:move;
}
#center {
width: 500px;
height: 300px;
margin: auto;
margin-top: 50px;
background-color:#ccc;
text-align: center;
border-radius: 25px;
-moz-border-radius: 25px;
}
#box {
background-color: #FF3;
height: 278px;
border-radius: 0 0 25px 25px;
-moz-border-radius: 0 0 25px 25px;
opacity: 0.5;
}
If anyone asks for the JavaScript function which sets the bounding, I will be happy to post it in an edit!
To make the position attribute not affect my JavaScript would I need to translate everything into absolute coordinates? How would I do this? Will translating everything into absolute coordinates allow the JavaScript to treat the two html samples the same way?
AFAIK, to drag and drop, the element must have the position property as absolute or fixed.
And of course its position will change when you change the position property.