Thanks for your positive response bt the major problem is that my apdivs are moving up/down when i zoom in/out my web browser.my coding is
#apDiv7 {
position: absolute;
left: 723px;
top: 1510px;
width: 207px;
height: 283px;
z-index: 106;
}
#apDiv9 {
position: absolute;
left: 947px;
top: 1510px;
width: 207px;
height: 283px;
z-index: 108;
}
#apDiv10 {
position: absolute;
left: 478px;
top: 1510px;
width: 207px;
height: 283px;
z-index: 109;
}
#apDiv56 {
position: absolute;
left: 478px;
top: 1825px;
width: 670px;
height: 239px;
z-index: 112;
}
#apDiv57 {
position: absolute;
left: 262px;
top: 1825px;
width: 194px;
height: 239px;
z-index: 113;
}
#apDiv59 {
position: absolute;
left: 266px;
top: 487px;
width: 453px;
height: 28px;
z-index: 114;
}
#apDiv60 {
position: absolute;
left: 965px;
top: 2113px;
width: 125px;
height: 125px;
z-index: 115;
}
#apDiv61 {
position: absolute;
left: 478px;
top: 539px;
width: 670px;
height: 422px;
z-index: 116;
}
#apDiv62 {
position: absolute;
left: 478px;
top: 1003px;
width: 670px;
height: 422px;
z-index: 117;
}
my website is http://www.xstvshop.com/3in1_juicer.html
Your quick and effective response is highly appreciable thanks
Related
I have a nextjs Application
I'm using nprogress (https://www.npmjs.com/package/nprogress) to display a SVG icon when the page is loading.
I have added this code to my _app.js file.
Router.events.on('routeChangeStart', () => {
NProgress.start();
});
Router.events.on('routeChangeComplete', () => {
NProgress.done();
});
Router.events.on('routeChangeError', () => {
NProgress.done();
});
I have then customised the CSS for nprogress to display the Icon:
#nprogress .spinner {
background-color: white;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 1000;
}
#nprogress .spinner:before {
content: "";
display: inline-block;
content: url("../images/myIcon.svg");
background-color: transparent;
background-size: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
width: 250px;
height: 250px;
}
This is working, but what I want to do now is animate the SVG using vivus (https://maxwellito.github.io/vivus/) - How can be this be done?
this is the code for my nav
.nav {
z-index: 1;
width: 100%;
background-color: red;
display: block;
position: absolute;
top: 100%;
}
.nav ul {
display: none;
}
and this is the code for my menu
/* checkbox (for menu) */
.menu-icon-wrap {
/* background color of checkbox */
top: 5.5px;
left: 960px;
/* position of entire menu /w checkbox */
position: absolute;
/* ^ this allows checkbox to be positioned */
cursor: pointer;
z-index: 1;
}
/* (menu) */
.menu-icon {
padding: 15px 20px;
display: block;
float: right;
/* ^ makes the menu go beside(next to) the checkbox */
cursor: pointer;
overflow: hidden;
position: relative;
z-index: 1;
}
.menu-icon .navicon {
position: absolute;
top: 14px;
left: 10px;
width: 20px;
height: 2.5px;
background: black;
border-radius: 4px;
transition: 0.5s;
display: block;
z-index: 1;
}
.menu-icon .navicon:before,
.menu-icon .navicon:after {
content: '';
transform: translateY(-6px);
width: 15px;
height: 2.5px;
background: black;
display: block;
position: relative;
}
.menu-icon .navicon:after {
content: '';
transform: translateY(+4.5px);
height: 2.2px;
width: 10px;
display: block;
position: relative;
background: black;
}
.menu-btn:checked ~ .menu-icon .navicon
{
background: transparent;
}
.menu-btn:checked ~ .menu-icon .navicon:after {
width: 21px;
transform: translateY(0px) rotate(315deg);
transition-delay: 0.125s;
}
.menu-btn:checked ~ .menu-icon .navicon:before {
width: 25px;
transform: translateY(0px) rotate(45deg);
transition-delay: 0.125s;
}
.menu-btn {
display: none;
}
.menu-btn:checked ~ .sub-nav {
display: block;
position: absolute;
top: 100;
left: 920px;
z-index: 2;
width: 100px;
height: 100px;
}
ul {
padding-left: 10px;
padding-top: 35px;
}
li {
display: block;
padding-left: 25px;
padding-top: 2px;
}
--color-link-toc: #878787;
.sub-nav {
display: none;
}
.sub-nav-item {
pointer-events: none;
opacity: 0;
display: block;
margin: 0.35rem 0;
opacity: 0;
}
.sub-nav-title {
pointer-events: none;
color: var(--color-link-toc);
}
and this is the html
<div.navbar class="navbar">
<!-- ^ header -->
<h2 class="nav__chapter"> Home</h2>
<div class="menu-icon-wrap">
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon">
<span class="navicon"></span>
</label>
</div>
<nav class="nav">
<!-- ^ nav -->
<ul class="sub-nav">
<li>Home</li>
<li>About</li>
<li>Testimonials</li>
<li>Moodboard</li>
<li>Contact</li>
</ul>
</nav>
</div.navbar>
please help me. I've been banging my head against the table trying to figure this out. I've spent days on this and can't get it working. I should be able to click the menu (checkbox) and when checked it should open the sub-nav or (nav). what am I doing wrong?
I'm trying to use this Search Form code but I want to make it so that on Click the magnifying glass icon switches to a Search button. I haven't been able to figure it out. Any ideas?
https://codepen.io/CBeghin/pen/HeuiF
<div id="wrap">
<form action="" autocomplete="on">
<input id="search" name="search" type="text" placeholder="What're we looking for ?"><input id="search_submit" value="Rechercher" type="submit">
</form>
</div>
#import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700);
#import url(https://raw.github.com/FortAwesome/Font-Awesome/master/docs/assets/css/font-awesome.min.css);
body {
background: #DDD;
font-size: 15px;
}
#wrap {
margin: 50px 100px;
display: inline-block;
position: relative;
height: 60px;
float: right;
padding: 0;
position: relative;
}
input[type="text"] {
height: 60px;
font-size: 55px;
display: inline-block;
font-family: "Lato";
font-weight: 100;
border: none;
outline: none;
color: #555;
padding: 3px;
padding-right: 60px;
width: 0px;
position: absolute;
top: 0;
right: 0;
background: none;
z-index: 3;
transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
cursor: pointer;
}
input[type="text"]:focus:hover {
border-bottom: 1px solid #BBB;
}
input[type="text"]:focus {
width: 700px;
z-index: 1;
border-bottom: 1px solid #BBB;
cursor: text;
}
input[type="submit"] {
height: 67px;
width: 63px;
display: inline-block;
color:red;
float: right;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat;
text-indent: -10000px;
border: none;
position: absolute;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
opacity: 0.4;
cursor: pointer;
transition: opacity .4s ease;
}
input[type="submit"]:hover {
opacity: 0.8;
}
So I am trying to add a perspective transform on an element but it is cutting off the text in Safari. If you open the following CodePen in Chrome it displays normally, but in Safari the white text is cut off. I have searched other questions but none seemed to solve my problem.
-webkit-transform: perspective(26.08696em) rotateX(-30deg);
http://codepen.io/anon/pen/aOaNNX
I was facing the same problem today. I fixed the problem setting a transform: translateZ(10px); property to the text that was being cut. Change the value to something that makes sense to you.
.field--name-residential-status {
height: 70px;
width: 100px;
position: relative;
}
.property-status {
display: inline-block;
color: white;
letter-spacing: 0.09375em;
padding: 1.2em 2em;
position: relative;
z-index: 1000;
padding-top: 1em;
text-transform: uppercase;
}
.property-status span {
position: absolute;
z-index: 5000;
-webkit-transform: translateZ(5000px);
}
.field--name-residential-status:before {
display: block;
content: "";
background-color: #2F2F2F;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 2000;
-webkit-transform: perspective(26.08696em) rotateX(-30deg);
-moz-transform: perspective(26.08696em) rotateX(-30deg);
-ms-transform: perspective(26.08696em) rotateX(-30deg);
-o-transform: perspective(26.08696em) rotateX(-30deg);
transform: perspective(26.08696em) rotateX(-30deg);
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
<div id="bus"><img src="assets/img/bus.png" id="bus_inner"/></div>
<div id="parallax">
<div id="bgsun" class="depth-1"></div>
<div id="bg" class="depth-1"></div>
<div id="bag" class="depth-1"><img src="assets/img/bag.png" /></div>
</div>
#parallax { background: #5b3516; width: 17000px; height: 100%; position: relative; }
#bgsun { position: absolute; width: 17000px; top: 0; height: 100%; background: url("../img/bg_sun.jpg") no-repeat; z-index: 10; }
#bg.depth-1 { position: absolute; width: 17000px; top: 0; height: 100%; background: url("../img/bg.jpg") no-repeat; z-index: 20; }
#bus { position: fixed; top: 495px; left: 90px; z-index: 30; }
#bus_inner { position: absolute; top: 0; left: 0; z-index: 40; }
#bag {
position: absolute;
top: 55px;
left: 7320px;
z-index: 50;
}
#bag img {
position: absolute;
top: 0;
left: 0;
z-index: 60;
}
Trying to get the bus element behind the bag but no luck. fixed position doesnt work with z-index right? how would I layer these elements so the order was
bgsun
bg
bus
bag
is it to with their order in the page?