I have the following image with dimensions of 200px w x 100px h. Basically, I need the link to look like this
* link
where * is the image. The hover state should kick in when both the image and link are hovered on. My html & css is as follows, but it doesn't seem to work:
Us this location
.current-location {
background-position: 0 0px;
background: url(images/current-location.png) left top no-repeat;
background-size: 48px 24px;
height: 24px;
width: 24px;
text-decoration: none;
}
.current-location:hover {
background-position: -24px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
}
I think a better solution would be not to use images at all:
add a span in the <a>:
<span>*</span> Us this location
Style it to show on hover:
.current-location {
background-size: 48px 24px;
height: 24px;
width: 24px;
text-decoration: none;
position: relative;
padding-left: 20px;
}
.current-location span {
display: none;
color: red;
position: absolute;
left: 0;
}
.current-location:hover span {
display: inline-block;
background-position: -24px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
}
SEE FIDDLE
Maybe you should try to set display: block to the .current-location class. Also I don't think that Us this location will be nicely put in 24px by width.
Related
I have a background image that's about 1200 (w) x 800 (h) but i just want to use the whole 100% resolution for it. I have a button inside this div container but it's not displaying correctly. The background image won't expand to it's full resolution. It seems like it's only showing enough to allow the button to show.
.endFoot {
background-image: url('https://via.placeholder.com/900x900');
background-size: cover;
width: 100%;
height: 100%;
}
.customButton {
position: relative;
bottom: 0;
left: 41%;
padding: 25px 35px;
font-size: 16px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
<div class="endFoot">
<button class="customButton">TEXT</button>
</div>
here's a little picture demonstrating what's going wrong vs what i want:
This has nothing to do with background image not expanding. Your div is simply not tall enough to show more of the image. Going off of your diagram, you want to add some padding to .endFoot.
background-size: cover; is a good choice, but you may also want to consider centering the position with background-position: 50% 50%;.
.endFoot {
background-image: url('https://via.placeholder.com/900x900');
background-size: cover;
background-position: 50% 50%;
width: 100%;
background-repeat: no-repeat;
padding: 400px 0 0 0;
height: 100%;
}
.customButton {
position: relative;
bottom: 0;
left: 41%;
padding: 25px 35px;
font-size: 16px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
<div class="endFoot">
<button class="customButton">TEXT</button>
</div>
If you would like the endFoot div to have the same height as the background, just set the height to 800px, because 100% doesn't change anything in this case.
Also set the endFoot position to relative in order to put the botton to the correct position.
If you are trying to achieve full screen background try :
.endFoot {
width: 100vw;
height: 100vh;
}
For browser support informations of vh and vw units check : https://caniuse.com/#feat=viewport-units
Just add text-align:center to .endFoot class to make center button and add some margin to .customButton class for leave some space to bottom.
.endFoot {
background-image: url('https://via.placeholder.com/900x900');
background-size: cover;
background-position: 50% 50%;
width: 100%;
background-repeat: no-repeat;
padding: 400px 0 0 0px;
height: 100%;
position: relative;
text-align: center;
}
.customButton {
padding: 25px 35px;
font-size: 16px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
margin-bottom: 10px;
}
<div class="endFoot">
<button class="customButton">TEXT</button>
</div>
I'm trying to get this Sprite done, but i'm stuck and can't figure out a solution.
FIDDLE HERE
I have a simple button:
<a href="#" class="ui-button sub-beta-button">
<span class="button-content">Beta Sign-Up</span>
</a>
and the css:
.sub-beta-button {
height: 78px;
background: transparent url("http://i.imgur.com/PSpIGLA.png") 100% -160px no-repeat;
padding-right: 50px;
margin-left: 30px;
bottom: 18px;
z-index: 1;
position: relative;
}
.ui-button {
background: 0;
border: 0;
cursor: pointer;
display: inline-block;
height: auto;
overflow: visible;
padding: 0;
margin: 0;
vertical-align: middle;
outline: 0;
text-align: center;
white-space: nowrap;
cursor: pointer;
}
.sub-beta-button .button-content {
background-image: url("http://i.imgur.com/PSpIGLA.png");
padding-left: 50px;
color: #fff;
font: normal normal 18px/86px "Bliz Quadrata", Times New Roman;
text-transform: uppercase;
text-shadow: 0 0 4px #000, 0 0 8px #000;
overflow: hidden;
min-width: 110px;
margin-left: -30px;
height: 76px;
z-index: 2;
}
.ui-button span {
outline: 0;
display: inline-block;
background-repeat: no-repeat;
}
but i'm getting only this result:
That's the Sprite:
FIDDLE HERE
your .ui-button class removes the background (background: 0).
You can better first get the button working without the ui-button class, and then rule by rule fill up the ui-button class. That way you are sure you are using minimal and correct css.
I've made an edit and removed all the junk code.
If you want the text to the center, edit padding-left and add text align:center
padding-left
and change it to
text-align:center
http://jsfiddle.net/va854
Encountering a CSS push down problem, been searching for fix but not able to find out what exactly is the problem. All the icons are displayed in a stairs-like layout. Need your help in fixing this.
HTML
<div style="/*float: left; width:153.6px;" */ class="footerStyles">
<h4 style=" margin: 0; font-size: 100%;">CONNECT</h4>
<br/>
<br/>
<br/>
<div class="clear"></div>
</div>
CSS
.connectWith{
/*background-position: left center;
background-repeat: no-repeat;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 40px;*/
margin-right: 0;
padding: 0;
float: left;
}
/* email ---------- */
.email{
width: 50px;
height: 50px;
text-decoration: none;
display: block;
text-indent: -9999px;
background-image: url("http://www.browsealoud.com/images/browsealoud/plus/uk/firefox.jpg");
background-position: 0 0;
}
.email:hover{
background-position: 0 50px;
}
/* twitter ---------- */
.twitter{
width: 50px;
height: 50px;
text-decoration: none;
display: block;
text-indent: -9999px;
background-image: url("http://www.browsealoud.com/images/browsealoud/plus/uk/firefox.jpg");
background-position: 0 0;
}
.twitter:hover{
background-position: 0 50px;
}
/* facebook ---------- */
.facebook{
width: 50px;
height: 50px;
text-decoration: none;
display: block;
text-decoration: -9999px;
background-image: url("http://www.browsealoud.com/images/browsealoud/plus/uk/firefox.jpg");
background-position: 0 0;
}
.facebook:hover{
background-position: 0 50px;
}
/* google+ ---------- */
.googleplus{
width: 50px;
height: 50px;
text-decoration: none;
display: block;
text-decoration: -9999px;
background-image: url("http://www.browsealoud.com/images/browsealoud/plus/uk/firefox.jpg");
background-position: 0 0;
}
.googleplus:hover{
background-position: 0 50px;
}
JSFiddle
If you want them side-by-side, then you should remove the <br />s you have. That's what's causing the stair effect.
http://jsfiddle.net/HZ4UU/1/
If you want them to display one underneath the other, then you shouldn't have it floated at all.
You just need to include property clear:both (or left, right).
Take out <br> element after each <a> tag and your problem will vanish. You are floating a elements left, but they are also separated with <br> tags that have some default margin and padding.
I have an image 200px x 100px which acts as a background image to a link.
On hovering, the bg image changes.
Fiddle here: http://jsfiddle.net/EnsFK/
As you can see from the image, the text is not aligned with the image and appears at the bottom. Is there a way to align the text so it is in the middle (Aligned with the small dot?) I've tried vertical-align and
line-height but to no avail.
.current-location {
line-height: 24px;
background-size: 48px 24px;
height: 24px;
width: 24px;
text-decoration: none;
position: relative;
line-height: 24px;
vertical-align: middle;
}
.current-location span {
background: url(images/mobile/current-location.gif) left top no-repeat;
display: inline-block;
background-position: 0px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
margin-right: 10px;
}
.current-location:hover span {
display: inline-block;
background-position: -24px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
}
Rather than using an empty span in your markup, you could use pseudo elements.
Something like this:
.current-location:before {
content: '';
/* image here */
margin-right: x px; /* however much you need */
vertical-align: middle;
}
FIDDLE
Markup:
Use this location
CSS
.current-location {
line-height: 24px;
background-size: 48px 24px;
height: 24px;
width: 24px;
text-decoration: none;
position: relative;
}
.current-location:before {
content: '';
background: url(http://i39.tinypic.com/2lk5lci.png) left top no-repeat;
display: inline-block;
background-position: 0px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
margin-right: 10px;
vertical-align: middle;
}
.current-location:hover:before {
background-position: -24px 0px;
}
You can either change the line-height of the text to fit the image's location, or play with background-position property for the image's position to fit it to the text.
Working jsFiddle - also removed some of the unnecessary code.
.current-location {
line-height: 24px;
height: 24px;
text-decoration: none;
position: relative;
line-height: 26px;
display:inline-block;
}
.current-location span {
background: url(http://i39.tinypic.com/2lk5lci.png) left top no-repeat;
display: inline-block;
background-position: 0px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
margin-right: 10px;
vertical-align:top;
}
.current-location:hover span {
background-position: -24px 0px;
}
Note: this is usually done without the <span> element using background on the anchor itself. However you method will work just as fine with the new CSS..
I like to use this css snippet for vertical centering
#text{
position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* negative half of the height */
}
#container {
position: relative;
height: 400px;
}
<div id="container">
<div id="text"><span>Text.....</span></div>
</div>
Your link is aligned properly look at your image instead
background: url(images/mobile/current-location.gif) left top no-repeat;
If you want it to be center aligned you should consider doing...
background: url(images/mobile/current-location.gif) center center no-repeat;
Also give the true width and height of the image for this method to work.
display: inline-block;
has problems with ie6 you will need to use:
display:inline-block;
*zoom: 1;
*display: inline;
try and stay away from vertical alignment.
How about a version with no images and no extra markup? http://jsfiddle.net/6aaZX/
For this HTML:
Use this location
This CSS:
a {
display: inline-block;
color: #333;
text-decoration: none;
font-family: sans-serif;
padding-left: 4em;
line-height: 2;
}
a:before {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #81B995;
content: '';
display: inline-block;
width: 0.7em;
height: 0.7em;
border: 0.4em solid #B7E2C8;
margin-right: 1em;
vertical-align: -0.3em;
}
It requires support for border-radius, but that's it - nothing fancy otherwise. If you did need to use an image, you could apply it to the :before pseudo element, as suggested by Danield
How do I align an icon right next to "Click here"?
I was able to use the below CSS to accomplish it but on a PC when using firefox, chrome, and safari the icons are not aligned.
<div class="link_container">
Click here
<a class="sprite_image action_image"></a>
</div>
.link_container {
margin-top: -10px;
padding-bottom: 10px;
}
.click_action {
color: #999;
font-size: 12px;
text-decoration:none;
}
.sprite_image {
background: url('sprite.png');
}
.action_image {
background-repeat: no-repeat;
background-position: -116px -12px;
width: 10px;
height: 10px;
position: absolute;
margin-left: 3px;
margin-top: 4px;
}
You could add this to the .click_action and .sprite_image css:
float: left;
Allot of browsers hate - positioning, now everything looks good, but my thought is, make it part of click here, not a separate piece. Just add this CSS and your entire ahref and icon are clickable. See Fiddle
.click_action {
background: url("http://www.icondeposit.com/local--files/imageid:105/Preview-blue-set-icons.jpg") no-repeat scroll -6% 29% transparent;
color: #999999;
display: block;
font-size: 12px;
height: 42px;
padding: 15px 0 0;
text-decoration: none;
width: 87px;
}