UPDATE
Here is a jsFiddle with the image and hover event.
I have a sprite image containing 4 "button" images each 30px x 60px - so the total image size is 60px x 120px. Each button is displayed using its proper background offset in the css as shown below.
I want to increase the clickable area of each button, but if I increase padding for the image, more of the image will show than contained in the defined width and height. Can I increase padding or use some other method where the image is still constrained to the amount in height and width?
I do have a containing a tag. I am able to increase the clicking area of the buttons by padding the a tag, but I still need to give feedback via the img hover that the mouse is in the clickable area.
img.prev{
background:url(../img/buttons.gif) no-repeat 0px 0px scroll;
width: 30px;
height: 60px;
}
img.prev:hover{
background-position: 0px -60px;
}
img.next{
background:url(../img/buttons.gif) no-repeat -30px 0px scroll;
width: 30px;
height: 60px;
}
img.next:hover{
background-position: -30px -60px;
}
OK - I think I've got an answer. It seems I can increase the padding of the containing a tag to increase the clicking area and then use the hover event of the a tag to set the background for the img. The following css is for the containing a tags.
Please let me know if there is a better or another solution.
#a-next{
padding-left: 30px;
padding-bottom: 200px;
}
#a-prev{
padding-right: 30px;
padding-bottom: 200px;
}
#a-next:hover > img{
background-position: -30px -60px;
}
#a-prev:hover > img{
background-position: 0px -60px;
}
the pseudo will do . https://jsfiddle.net/mgggf5vo/6/
catch hover from the link, so it includes the pseudo area.
Te correct attribute for links is title, not alt.
a {
display: inline-block;
position: relative;
vertical-align: middle;
cursor:pointer;/* href is missing */
}
a:before {/* give it any size */
content: '';
position: absolute;
height: 60px;
width: 50px;
margin-left: 29px;
}
a[title="next"]:before {
right: 29px;
}
img.prev {
background: url(http://www.waldorfteacherresources.com/img/slideshow-buttons-large.gif) no-repeat 0px 0px scroll;
width: 30px;
height: 60px;
padding: 0;
}
a:hover img.prev {
background-position: 0px -60px;
}
img.next {
background: url(http://www.waldorfteacherresources.com/img/slideshow-buttons-large.gif) no-repeat -30px 0px scroll;
width: 30px;
height: 60px;
padding: 0;
}
a:hover img.next {
background-position: -30px -60px;
}
<div>
<a title="prev">
<img src="http://www.waldorfteacherresources.com/img/blank.gif" alt="prev" class="prev">
</a>
Something Here
<a title="next">
<img src="http://www.waldorfteacherresources.com/img/blank.gif" alt="next" class="next">
</a>
</div>
Related
I have a popup that is moving slightly at different zoom levels on the browser. I would like it to be at the same spot irrespective of whether the user is on 100% zoom or 80% zoom.
Here is how it currently looks at 100% zoom
Here is how it looks at 80% zoom
The popup is moving further away from the Retirement Projection text on the right
Here is my code for the popup
.savings-tip {
background-color: #1a202c;
box-shadow: 0 2px 20px 8px rgba(0, 0, 0, 0.05);
margin-top: 445px;
width: 35%;
position: absolute;
margin-left: 515px;
height: 230px;
padding: 0%;
}
Here is a stackblitz example of the basic parent(popup-wrap) and popup
https://stackblitz.com/edit/angular-ivy-jhpbg3?file=src/app/app.component.html
You can go through this pen, you'll get better understanding on this:
https://codepen.io/prathameshkoshti/pen/ZEOmYLP
so basically I created this parent div with menu class and added a span where you can hover your mouse and by default popup will be hidden.
<div class="menu">
<span>Hover over me (positioned relatively)</span>
<div class="popup">
the content with absolute positioning
</div>
</div>
I kept the parent div with class menu relative and the div with class popup is set to absolute. This way the popup will never leave its position, in a nutshell it will always stick to the span(visually) or you can say the parent div (technically).
body {
margin: 0;
display: grid;
place-items: center;
height: 100vh;
}
.menu {
position: relative;
}
.menu:hover > .popup{
display: block;
}
.popup {
display: none;
position: absolute;
background: black;
color: #fff;
padding: 10px;
top: -10px;
left: 110%;
width: 200px
}
I have to fix a blue colored 'lock' image to the outside of the container like below:
So far I have achieved this below:
I am setting this image as background-image of the container and the CSS for the container I wrote is:
.container{
margin: 0 auto;
max-width: 620px;
background-color: $white;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
object-fit: contain;
margin-top: 30px;
padding: 40px;
min-height: 100px;
object-fit: contain;
overflow: hidden;
border-radius: 5px;
background-repeat: no-repeat;
background-image: url("../lock.svg");
}
<body>
<div class="container">
</div>
</body>
</html>
If I give background-position, the image is hiding behind the container, like this
Please advice how to achieve this? Is my approach correct?
If you want to set your lock button depending on the container, you have to set a relative position to the container and an absolute position to the button.
Then you set top and right property to the button depending on the container.
.container {
position: relative;
}
.button {
position: absolute;
top: some px;
right: some px;
}
I want to create an element in css and keep it at a constant right spacing from the main content.
for example:-
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
width: 924px;
height: 580px;
}
now I am creating an image that needs to be at a constant distance from the main content, and on its right hand side.
ie. say 100px from main content at all times, no matter the size of window:-
.NewElement {
width: 78px;
height: 70px;
position: fixed;
bottom: 550px;
right: .main.width() + 100px; <--- how do I represent this??
display: none;
text-indent: -9999px;
background: url('../xxx.png') no-repeat;
background-color: #000;
}
right: .main.width() + 100px; <--- how do I represent this correctly??
Place 'NewElement' within the 'main' DIV (assuming these are DIVs) and set the margin-left:100px, so it will always be relative to that main DIV.
<div class="main">
<div class="NewElement"></div>
</div>
Here's a fiddle.
You would have to use javascript or jquery to do this:
var width = $('.main').css('width');
$('.NewElement').css('width',width+100);
I'm trying to create a CSS button and add an icon to it using :after, but the image never shows up. If I replace the 'background' property with 'background-color:red' then a red box appears so I'm not sure what's wrong here.
HTML:
<a class="button green"> Click me </a>
CSS:
.button {
padding: 15px 50px 15px 15px;
color: #fff;
text-decoration: none;
display: inline-block;
position: relative;
}
.button:after {
content: "";
width: 30px;
height: 30px;
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px no-scroll;
background-color: red;
top: 10px;
right: 5px;
position: absolute;
display: inline-block;
}
.green {
background-color: #8ce267;
}
You can check this fiddle to see what I mean exactly.
Thanks for any tips.
A couple things
(a) you cant have both background-color and background, background will always win. in the example below, i combined them through shorthand, but this will produce the color only as a fallback method when the image does not show.
(b) no-scroll does not work, i don't believe it is a valid property of a background-image. try something like fixed:
.button:after {
content: "";
width: 30px;
height: 30px;
background:red url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px fixed;
top: 10px;
right: 5px;
position: absolute;
display: inline-block;
}
I updated your jsFiddle to this and it showed the image.
As AlienWebGuy said, you can use background-image. I'd suggest you use background, but it will need three more properties after the URL:
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") 0 0 no-repeat;
Explanation: the two zeros are x and y positioning for the image; if you want to adjust where the background image displays, play around with these (you can use both positive and negative values, e.g: 1px or -1px).
No-repeat says you don't want the image to repeat across the entire background. This can also be repeat-x and repeat-y.
I have a link, with which i want use plus, which will change color on hover.
But in the past hour i cant figure out how to do this trick with spites.
Here is a link, nothing special
Find Out More!
My css code
.block a.plus {
background: url("images/plus.png") no-repeat 0% 40%;
background-position: 10px , 0px;
font-size: 12px;
padding-left: 25px;
}
.block a.plus:hover{
/*Just for example*/
background-position: -15px -1px;
}
And also plus img
CSS sprites are often vertical arranged, since this will enable you to display only a specific line in your sprite file. In order to use the sprite technique on horizontal arranged images you have to create a second element with a non-transparent background:
<a href="detailed.html" class="plus">
<span>Find Out More!</span>
</a>
.block a.plus {
background: url("images/plus.png") no-repeat 0% 40%;
background-position: 10px , 0px;
font-size: 12px;
display: inline-block;
padding-left: 16px; /* actual width of one icon */
}
.block a.plus:hover{
/*Just for example*/
background-position: 0 -16px;
}
.block a.plus span{
background-color: #fff;
}
If you don't want to use a second element you should rearrange your icons.
You can achieve this with the :before selector.
Find Out More!
a.plus {
position: relative;
padding-left: 25px;
}
a.plus:before {
position: absolute;
left: 0;
content: " ";
width: 15px;
height: 15px;
background: red url("images/plus.png") 10px 0 no-repeat;
}
The color red is just for testing, you can leave that one out. -10px 0 is the location of the image in the sprite (x y).