I am having some issues with absolute objects on a website. Z-index essentially won't work correctly. I may be being a little dumb?
Here is the website: http://www.mascots.ds-demo.co.uk/
The blue and yellow characters need to be behind the hero cta buttons 'learn more' and 'get a quote' however i cant get them to work with z-index.
CSS on characters:
.character-blue-float {
position: absolute;
float: right;
top: 7%;
left: -20%;
z-index: 1000;
-ms-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
transform: rotate(7deg);
}
.character-blue-float img {
width: auto;
max-width: 800px;
height: auto;
}
CSS on Buttons:
.home-hero-cta {
margin-top: 30px;
z-index: 2000;
}
.btn-outer-lrg {
padding: 10px 20px;
color: #08788c;
border: 2px solid #08788c;
border-radius: 5px;
font-size: 22px;
background-color: transparent;
margin-right: 10px;
font-family: 'Fredoka One', cursive;
}
apply below css to hero-home and check
.hero-home {
z-index: 1001;
position: relative;
}
it should work
Related
I am working on a website. It has a page to show in which I show several Images . I have come across a problem that the pictures that I have taken with my dslr at vertical angle () are rotating automatically when opened in my mobile phone.
This is my html:
<div class="product-img container" style="width: 95% !important; margin-bottom:10px;">
<img src="{{product.disimage.url}}" alt=""> </div>
and this is the css that is linked to class product-img:
.latest-product-area .single-product .product-img {
margin-bottom: 30px;
position: relative;
}
.latest-product-area .single-product .product-img img {
width: 100%;
}
.latest-product-area .single-product .product-img .new-product {
position: absolute;
top: 25px;
left: 23px;
}
.latest-product-area .single-product .product-img .new-product span {
background: #ff003c;
padding: 3px 16px;
border-radius: 30px;
color: #fff;
}
.single-product .product-img {
position: relative;
overflow: hidden;
}
.single-product .product-img .p_icon {
width: 90%;
padding: 7px 30px;
position: absolute;
bottom: -100px;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
background: rgba(37, 119, 253, 0.4);
transition: all 400ms ease;
}
.single-product .product-img .p_icon a {
display: inline-block;
height: 36px;
line-height: 40px;
width: 36px;
text-align: center;
background: #fff;
border-radius: 30px;
color: #415094;
margin-right: 25px;
}
.single-product .product-img .p_icon a:last-child {
margin-right: 0px;
}
.single-product .product-img .p_icon a:hover {
color: #fff;
background: #2577fd;
}
.single-product:hover .product-img .p_icon {
bottom: 0px;
}
.new_product .product-img {
padding: 90px 0px;
}
When I open it on desktop there is no problem. But when I tested in several devices in two devices the vertical images auto rotated while in one it was normal. I have attached two pics to show the problem. Please help me fix it.Also I am working this on a django website so the images are being uploaded in the admin(database) then shown here.
The image above was taken horizontally (landscape) and is showed correctly. While the Image below(names UTt) WAS TAKEN vertically (potrait) but it is autorotating which I dont want it to be.
Maybe this can help you? https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation
Browser seems to read the Metadata of your Image and choose appropriate orientation automagically. Using this CSS you should be able to force it the way you want, though I'm not so certain about Browser Cross-compatibility with this. You might have to check on that.
Im trying to create this <a> element that pins left of the screen. Its position is absolute but I cannot get it as in image:
HTML:
<a class="feedback__btn">Feedback</a>
CSS:
.feedback__btn {
position: absolute;
top: 11.5%;
left: 0;
background: green;
width: 150px;
height: 45px;
color: red;
z-index: 9;
display: inline-block;
transform: rotate(270deg);
font-size: 24px;
font-weight: 900;
text-align: center;
line-height: 45px;
border-radius: 0px 0px 4px 4px;
}
Two things that cause the tag from not pinning to the left: transform and the width/height. How to to get it pinned to either sides of screen (left in this case) with the same transformation?
If you move the center-point of the button, with transform:translateX(-50%) you will have a much easier way to figure out how much you need to move the button to place it correctly:
.feedback__btn {
position: fixed;
top: 11.5%;
left: 23px;
background: green;
width: 150px;
height: 46px;
color: red;
z-index: 9;
display: inline-block;
transform: translateX(-50%) rotate(270deg);
font-size: 24px;
font-weight: 900;
text-align: center;
line-height: 45px;
border-radius: 0px 0px 4px 4px;
}
I have added transform: translateX(-50%) rotate(270deg); and left: 23px; to your code and changed the heigh of the button to an even number, as that is easier to halve (half of 46 is 23, while half of 45 is 22.5, and you can't have half pixels).
I have also changed the position to fixed, so it follows the user down the site when scrolling.
When browser get resized absolutely positioned after pseudo-element overflows and causes problems. I am looking for a way to fix this. Just resize the browser until you reach header text.
Here is a demo of the problem: http://codepen.io/anon/pen/grKNoJ
.section {
font-family: 'Quantico';
font-weight: bold;
font-size: 36px;
color: white;
border-top: solid 1px black;
text-transform: uppercase;
margin-bottom: 28px;
}
.section-title {
background-color: black;
display: inline-block;
padding: 8px 18px;
position: relative;
}
.section-title:after {
content: " ";
position: absolute;
display: block;
right: 0;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: #000;
transform-origin: bottom left;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}
You can fix it by adding text-overflow: ellipsis; and white-space: nowrap; to .section-title.
You could also set a max-width to that element, and set it to different values according to your media queries, and have it serve your needs on different devices.
Here is the updated result: http://codepen.io/johnnykb/pen/mPKZLg
I tried to implement this CSS code:
.camera_caption {
left: 0;
margin-top: 263px;
padding-left: 365px;
display: inline-block;
position: relative;
width: 717px;
/*padding: 10px 20% 10px 10px;*/
padding: 0px 10% 10px 20%;
color: white;
text-decoration: none;
overflow: hidden;
font: normal 14px/24px 'Roboto';
color: #fff;
right: -119px;
}
.camera_caption:before,
.camera_caption:after {
position: absolute;
content: '';
height: 50%;
width: 100%;
left: -15%;
z-index: -1;
/*background: #164185;*/
background-color: rgba(22, 65, 133, 0.9);
}
.camera_caption:before {
top: 0px;
transform: skew(45deg);
}
.camera_caption:after {
bottom: 0px;
transform: skew(-45deg);
}
But I get transparent line here
Can you give me some advice how I can remove this transparent line? For example how I can add new code for fix?
Try:
.camera_caption::before, .camera_caption::after {
height: 50.04%;
}
Try using media queries.
#media only screen and (max-width: 1182px) {
/* Write new positioning css for elements here */
}
Looks like you have problem below 1183px width.
Take it as a break point and rewrite positioning CSS.
I'm trying to get a trapezoidal perspective shape to have the whole area be clickable. I've gotten it to work in Firefox and even IE, but Chrome isn't cooperating too well.
Here's a fiddle with the shape and a link: http://jsfiddle.net/9n9uh6f6/1/
As you can tell, the link doesn't become active until you hover over the 'area' part of the text. In other browsers, the whole height of the shape is clickable.
I read that Chrome renders a perspective image differently and perhaps that's why it's not doing what it's supposed to.
Here's my CSS:
.prodcaptions {
width:136px;
height: 85px;
position:relative;
left:10%;
text-transform:uppercase;
text-align:center;
letter-spacing: 1.6px;
color: #000;
}
.prodcaptions:before {
content:"";
position:absolute;
border-radius:1px;
box-shadow:0 0 0 3px #27628e;
top:-5%;
bottom:-11%;
left:-1%;
right:-5%;
-webkit-transform:perspective(40em) rotateX(-45deg);
transform:perspective(40em) rotateX(-45deg);
}
.prodcaptions a {
z-index:999;
position:relative;
height: 85px;
display: block;
padding-top: 25px;
}
Please have look at this code:
.prodcaptions {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding: 10px;
perspective: 150px;
perspective-origin: 50% 0;
}
a{
padding: 50px;
position: absolute;
border: 1px solid black;
transform: rotateX(-15deg);
}
Seems to work the way you want it. fiddle
Try this shape for link trapazoid shape - jsFiddle
Advantage - you can change skew property to change angle of shape! Easy and effective! Reverse value for reverse shape!
html
Click Here!
css
a {
display: block;
z-index: 1;
position: relative;
/* custom sizes */
width: 136px;
height: 85px;
/* demo-only decoration */
margin: 100px auto;
font: 16px/50px Arial, sans-serif;
text-transform: uppercase;
text-align: center;
background-color: orange;
}
a:before, a:after {
content:'';
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
z-index: -1;
/* demo-only decoration */
border-radius: 4px;
background-color: orange;
}
a:before {
transform: skew(-20deg);
left: 25px;
}
a:after {
transform: skew(20deg);
right: 25px;
left: auto;
}