The nav buttons sit on top of the image title div. Both drop down on hover. When going to the next image, the nav buttons are at the correct location, but when you click on the previous, the whole nav screen shifts to the bottom right!
nav {
position: absolute;
width: 100%
height: 20px;
padding-bottom: 2px;
z-index: 1;
float: right;
margin-top: -20px;
transition: margin-top 200ms ease-in;
background: black;
opacity: 0.4;
right: 1px;
}
.title {
position: absolute;
width: 85%;
height: 20px;
padding-bottom: 2px;
margin-top: -25px;
transition: margin-top 200ms ease-in;
background: black;
color: white;
opacity: 0.6;
}
.title-text {
float: left;
padding-left: 5px;
}
.slides:hover .title {
margin-top: 0px;
}
Here is link to a fiddle.
I fixed this part but code itself is clumsy
anyway still here is example : jsfiddle
first of all you forgot ";" in .nav { between height and width
secondly dont use position: absolute and float it exclude each other
try to connect similiar classes like your buttons
.btn-prev,
.btn-next{
color: black;
background:white;
border: 2px solid white;
margin: 0px 5px 0px 0px;
cursor: pointer;
padding: 0px 5px 0px 5px;
display: inline-block;
}
Quick explain, I set text-align on .nav element so buttons would be set on right side inside .nav and .btn-* for display: inline-block; (default
display: block; so it would behave similiar like text.
Related
I can't figure out how to change the icon on the li in this url.
I tried to change the content but that just gave an extra figure over the green v.
https://codepen.io/gnevin/pen/axNVex
.check-list {
margin: 0;
padding-left: 1.2rem;
}
.check-list li {
position: relative;
list-style-type: none;
padding-left: 2.5rem;
margin-bottom: 0.5rem;
}
.check-list li:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: -2px;
width: 5px;
height: 11px;
border-width: 0 2px 2px 0;
border-style: solid;
border-color: #00a8a8;
transform-origin: bottom left;
transform: rotate(45deg);
}
Here use border and transform used for rotation. If you want to change there are a few more ways. First of all, remove the border and put what you want in the content.And use List style for default styling
k.imgur.com/gwikL.png
I want to draw a line below a link and apply animation on it, so I use pseudo element. It produces the line as expected, but if there is a large padding around the link, the line appears far away. Is there a way to ignore the padding and draw the line right below text?
a {
position: absolute;
padding: 20px 0;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
line-height: 20px;
}
a:after {
position: absolute;
bottom: 0;
left: 0;
width: 0;
content: '';
transition: width .3s;
display: block;
}
a:hover:after {
width: 100%;
border-top: 1px solid #333;
}
<a>Link Text</a>
You can just remove the absolute position since the pseudo is set on :after so that it's placed right after the text.
a {
position: absolute;
padding: 20px 0;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
line-height: 20px;
border: 1px solid aqua;
}
a:after {
content: "";
display: block;
border-top: 1px solid #333;
width: 0;
transition: width .3s;
}
a:hover:after {
width: 100%;
}
<a>Link Text</a>
Side note, you might encounter the double tap behavior for the kind of hover effects on touch devices such as phones, tablets. Add this to fix that:
#media (hover: none) {
a:hover:after {
display: none;
}
}
In addition, the effects can also be done with linear-gradient(), example:
a {
display: inline-block;
text-decoration: none;
border: 1px solid aqua;
font-size: 16px;
padding: 20px 0;
background-image: linear-gradient(to bottom, blue, blue);
background-position: 0 38px; /*adjust this based on font-size and padding*/
background-size: 0 1px;
background-repeat: no-repeat;
transition: background-size .3s;
}
a:hover {
background-size: 100% 1px;
}
Link text
I'm having trouble making a div button responsive in a webpage. I have changed all pixel values to percentages and the problem still exists.
.wrapper {
display: block;
position: absolute;
left: 30%;
transform: translate(-50%, -50%);
}
.testing {
padding: 10% 10%;
text-align: center;
text-decoration: none;
color: #ffffff;
background-color: #009ac9;
border: 2px solid transparent;
font-size: 90%;
display: inline-block;
border-radius: 0.1em;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
}
.testing:hover {
background-color: #ffffff;
color: #009ac9;
border-color: #009ac9;
}
<div class="wrapper">
LOG IN
</div>
Another problem is, I have a fullscreen overlay menu and I'd like to disable this button when the overlay is present. As of now, the button is still clickable when the overlay is present. I'd like to disable it:
Image
Try this, I think this will be helpful.
.wrapper {
display: block;
position: absolute;
left: 0;
top: 0;
right:0;
bottom:0;
z-index:9;
}
.testing {
padding: 10% 10%;
text-align: center;
text-decoration: none;
color: #ffffff;
background-color: #009ac9;
border: 2px solid transparent;
font-size: 15px;
display: inline-block;
border-radius: 0.1em;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
position:relative;
left:50%;
top:50%;
width:20%;
min-width:50px;
transform: translate(-50%, -50%);
}
.testing:hover {
background-color: #ffffff;
color: #009ac9;
border-color: #009ac9;
}
<div class="wrapper">
LOG IN
</div>
And for the menu give z-index:999; to the .overlay in your Fullscreen Overlay menu style.I think it will work for you.
Try vh in place of percentages, Hope it will Work and use media query also in responsive screen.
https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery
I am new in css sprites, i can't understand how to make my image changes in hover. I want my only one image to be change which is "Scroll To Top" website. I am trying this coding but it was not working. Images links are given below:
http://imgur.com/TM6kIqm
#toTop {
background:url(img/scroll-to-top-2.png)no-repeat;
background-position:0px -50px;
width:50px;
height:50px;
padding: 5px 3px;
overflow:hidden;
position: fixed;
bottom: 20px;
right: 20px;
display: none;
cursor:pointer;
z-index:600;
text-decoration:none;
border:medium none;
}
#toTop:hover {
background:url(img/scroll-to-top-2.png)no-repeat left -29px;
width:50px;
height:50px;
padding: 5px 3px;
overflow:hidden;
position: fixed;
display: none;
}
There are a few problems here.
First, you have #toTop set to display: none, so it will never be shown, with any background.
Second, you seem to be trying to move the background image to the left on hover, rather than up/down, the way the image is built.
Third, with padding, in most browsers your height/width will be thrown off unless you use box-sizing: border-box; (which includes padding and borders in the height and width).
So (eliminating redundant properties):
#toTop {
background: url(http://i.imgur.com/TM6kIqm.png) no-repeat;
background-position: 0px -50px;
width: 50px;
height: 50px;
padding: 5px 3px;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
position: fixed;
bottom: 20px;
right: 20px;
cursor: pointer;
z-index: 600;
text-decoration: none;
border: none;
}
#toTop:hover {
background-position: 0 0;
}
example: http://codepen.io/paulroub/pen/vDBaA
I don't understand why my menu is not centering. I tried everything from inline elements to margin: 0 auto; to align="center" and I can not get the menu to center. You can see it here http://jeremyspence.net78.net you have to scroll down all the way to see it, t only appears when it goes past the main menu. Here is some css
.scrollmenu {
display:none;
position: fixed;
top: 0;
text-align:center;
margin: 0px auto;
width: 1020px;
z-index: 10000;
padding:0;
}
.scrollmenu li{
width: 200px;
height: 75px;
overflow: hidden;
position: relative;
float:left;
background: #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-right: 4px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.scrollmenu li:last-child{
margin-right: 0px;
}
.scrollmenu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #000;
position: relative;
}
.scroll-icon{
font-family: 'Symbols';
font-size: 60px;
color: #333;
text-shadow: 0px 0px 1px #333;
line-height: 80px;
position: absolute;
width: 100%;
height: 50%;
left: 0px;
top: 0px;
text-align: center;
}
.scroll-home{
font-size: 30px;
opacity: 0.8;
text-align: center;
position: absolute;
left: 0px;
width: 100%;
height: 50%;
top: 30%;
}
.scrollmenu li:nth-child(2):hover{
background-color: #CEFECE;
}
.scrollmenu li:nth-child(3):hover{
background-color: #CEFEFE;
}
.scrollmenu li:nth-child(4):hover{
background-color: #CECEFE;
}
.scrollmenu li:last-child:hover{
background-color: #FECEFE;
}
Just add this on your <ul class="scrollmenu"></ul> :
left: 50%;
margin-left: -510px;
or :
left: 0;
right: 0;
Looks like you're centering a div? <div> is a block element, by default. They're centered by using margins. You were close -- you need to make both the left AND right margin auto. margin-left:auto;margin-right:auto;. That will center it inside its parent element, which needs to be 100% width (block elements will expand to maximum width of parent by default). If it's an inline element, you can use text-align:center; on its parent (parent still needs to be 100% width), and that will do the trick.
In the HTML for your link, it looks like you need to set the position:fixed in the div above the ul menu. It looks like you're setting both position:fixed and trying to center at the same time. Get the parent div positioned in the fixed location, and then its child ul should be able to be centered via margin-left: auto; margin-right: auto;.
Have you tried giving a width to the content div?
.content {
position: relative;
width: 1024px;
margin: 0 auto;
}
That seems to solve the issue in Chrome.
By setting position: fixed; without a size for the enclosing container, the menu uses the window border for the container, then with all the items floating left... well they all are on the left.