I'm trying to get an input to load a CSS sprite, and put the icon I want out of it, right at the END of the input. Here is what I have so far:
#test2 {
width: 140px;
outline:0;
background: url(http://www.chambresdhotes.org/new_design/sprites-all.png) -87px -97px no-repeat;
}
Here is some code I have that works fine, but it uses an individual image (this is what is currently live, but we want to convert it into a sprite for SEO);
#test1 {
width: 140px;
background-image:url(http://www.chambresdhotes.org//new_design/bookings/images/calendar1.png);
background-repeat:no-repeat;
background-position:95% center;
outline:0;
}
Here is a JSFiddle to see the 2 running alongside each other:
https://jsfiddle.net/vr5emuar/
Can anyone explain where I'm going wrong? I've even tried using :after on the input (but it seems that doesn't work, as you can't use :before or :after on inputs)
Thanks!
::after and ::before are pseudo-elements and an input can't have element inside it.
There are multiple solutions :
If you use css sprite, your sprite should be vertical and icons must be separated with some transparents pixel to avoid others icons to be visible in the input.
Use a span or i element around the input, it generate icon with pseudo-element (:after) and put it over the input with absolute positionning on :after and relative position on the span.
You can do it like below only change needed is your sprite should be vertical.
.input {border:none; float:left;padding:1px; outline: 0;}
.calander{
border:1px solid #efefef;
display:inline-block;
float:left;
background: url(http://www.chambresdhotes.org/new_design/sprites-all.png) no-repeat scroll 85px -94px #fff;
width:190px;
padding: 4px 4px 6px 0px
}
<div class="calander"><input type="text" class="input" /></div>
Related
I have the folowing HTML:
Wardrobe
Wine
Coffee
This is the relevant CSS:
.home-block {
background-color: #c2b89c; display: block; height: 180px; line-height:180px;
text-align: center; font-size: 70px; color:#e2e2e2;
text-shadow: 2px 2px 0 #444; margin-bottom: 20px; background-size: cover;
background-position: center center; box-shadow: 1px 1px 4px #111;
}
My result now looks something like this:
That's OK, but what I really want is the blocks to have a solid color, and only show the image on hover. Like so:
Please keep in mind that I'm using a responsive design, so the blocks will have a different size and aspect ratio on different screen sizes. That is why I'm using background-size: cover. Also this is for a CMS system, so I want the images and colors to be set inline in the HTML, so it will be easily editable and more blocks can be added.
So I basically need a clean solution without absolute positioned elements (because they tend to break if there's no fixed width) to achieve this.
What I have tried is this:
.home-block { background: none; }
.home-block:hover { background: inherit }
but with no success. I was just about to fix all of this with some lines of jQuery, but I just quickly wanted to check if there is no pure CSS way to achieve this.
It's a little bit tricky if you need to have background-image set inline in HTML. You can't overwrite it easily. What I would try to do is to change background-position on hover:
.home-block {
...
background-position: 1000px 1000px; // background-image is there but not visible
}
.home-block:hover {
background-position: center center !important; // make it visible
}
http://jsfiddle.net/h2Jbg/
So for normal state you will not see background image but will see backgroud color. On hover you move image back.
Unfortunately it's not possible to use the :hover pseudo-class inline, which makes it hard to accomplish this inline on a single element.
It is often a bit ugly to use an additional element for the purpose of styling, but at least it is a possible solution to the problem at hand.
<div style="background-image: url(http://lorempixel.com/400/200);">
<div class="home-block">Foo</div>
</div>
You could then use something like this in your CSS:
.home-block:hover {
background: transparent;
}
Demo
This way, you will be able to add new blocks with individual background-images, without updating the stylesheet.
Currently my menu is working with div's as links. Needless to say this isn't good practice. Now I'm changing it to working with link tags but I've stumped upon a problem.
When a link is 'active', eg you're on that page, a background image is applied. This background image is centered to the right, one pixel further than the div so it overlaps a border of the div. Here's the css for the div:
background-image: url('triangle.png');
background-position: center right;
background-repeat: no-repeat;
margin-right:-1px;
z-index:100;
position:relative;
Now, applying this method to a link tag doesn't seem to work. I have got the image to move 1 pixel to the right, but even with a z-index set, the image is under the border. Here's the css for the link:
background:url('triangle.png') no-repeat center right -1px;
z-index:100;
position:relative;
Any thoughts about how come this doesn't work? I've also tried with margin-right:-1px; but this doesn't change anything.
I just noticed that when I set eg -5px in the background css, the rest of the image that should stick out of the border doesn't stick out, it just dissapears.
EDIT: Here's a jsfiddle: http://jsfiddle.net/UkYmJ/
The image isn't transparant but white, so the border should be 'gone' inside the triangle.
As far as I know, there's no such thing as "... center right "AND" -1px;" to the background properties. You either use "right" or a number value. What you can do that could work is using a percentage value higher than 100%, but that would be non precise in some cases, and I think it would not solve your problem.
If you're using, an anchor tag with a background and you want this background to overlap a border to the right, this border needs to be on a parent container and you'll shift your anchor tag (not its background) a -1px to the right (right: -1px; if you're using position: absolute on "a" tag an position: relative; on the parent).
Edit: using this css on your Fiddle, it works for me:
#menu{
width:149px;
border:1px solid red;
}
#menu a{
display:block;
padding:10px;
width:109px;
text-decoration:none;
font-family:Comic Sans MS;
font-size:large;
color:black;
}
#menu a:hover, #menu a.active{
color:#99182c;
}
#menu a.active{
background:url('http://i48.tinypic.com/1p7yg9.png') center right no-repeat;
position: relative;
right: -21px;
}
​Will still try to improve it because it's a bit messy...
I don't think that background: someColor url(something) no-repeat center right -1px; is a valid syntax. background: someColor url(something) center right no-repeat; is.
why do you need to use z-index?
try making your links display as blocks while still on a single line with a {display: inline-block}
edit: you could use calc(100%-1px) but this is only supported by IE9+ Saf6+ and still not Opera: http://caniuse.com/#search=calc (and needs a vendor prefix for some browsers).
Though you can achieve what you want to do with plain CSS2.1 ;)
I believe I have read your question properly.
I think what the problem here is that backgrounds will be clipped at the edge of the element for which it is declared. It won't shift beyond the boundaries of the A element.
You could try to add padding to your A:active to give you a little breathing room.
Your new CSS would be like so:
A:active{
background:url(24d2535.jpeg); no-repeat center right -1px;
z-index:100;
padding-right: 5px;
position:relative;
}
Let me know if that works for you.
Here is an example: http://jsfiddle.net/7zhLm/5/
The image inside is larger than the div supports.
Therefore it is cropping the rest (overflow-x: hidden).
I am trying to create a white border around the image, but it doesn't seem to work.
After checking what's going on there with dev tool I saw that the lower part overlays the white border.
How to I fix that?
I see you're using both overflow-x and overflow-y. You can just use overflow:hidden; as it works on any browser while -x and -y are not supported by older ones.
Anyway, to avoid it you can add another <div>. Check the live demo, and here is the updated code:
<div id="fixed_event_1" class="splashTabLogout" >
<div>
<img src="http://www.twospy.com/galleriffic/demo/Sample%202.jpg" width="300" />
</div>
</div>
.splashTabLogout {
width: 300px;
height: 100px;
cursor: pointer;
background: #fff;
padding: 10px;
/* border-radius and box-shadow stuff */
}
.splashTabLogout > div {
max-width:100%;
max-height:100%;
overflow:hidden;
}
JSFiddle
You tried to set a border with a padding. Change it to a 10px white border.
The HTML you have is fine. It's semantic, simple -- don't change it. Change the details about it, and fix the CSS, and you'll be rockin': http://jsfiddle.net/7zhLm/9/
CSS
.splashTabLogout {
border: white solid 10px;
border-radius: 3px;
box-shadow: rgba(0,0,0,.22) 0 2px 6px;
overflow: hidden;
}
.splashTabLogout img { width:300px }
HTML
<div id="fixed_event_1" class="splashTabLogout" >
<img src="your-pic.jpg" />
</div>
Note: Including width/height inside an img tag is valid. Period. In a gallery of images, or anywhere else, where you may have multiple images with the same dimensions, it's often easier, and less code to declare the width/height from the CSS file. FYI
I'm having problems getting my icon to line up with the text, tried every combination i can think of, still aligned at top
http://jsfiddle.net/gkC32/1/
Any help would be great?
Have you tried setting the vertical-align property on the img element?
.bluebutton img {
vertical-align: middle;
}
Alternatively, since you're using the image purely as decoration, you might want to use background-image to set the icon instead:
.bluebutton {
background: #336699 url('http://cdn1.iconfinder.com/data/icons/fatcow/16x16_0460/group_add.png') no-repeat 10px center;
padding: 3px 10px 4px 28px;
}
See: http://jsfiddle.net/gkC32/8/
It's the image that's throwing it out I think. Adding something like:
.bluebutton img {
vertical-align:middle;
}
Should do the trick. If you arranged it differently as well, you could improve the alignment slightly further. e.g. http://jsfiddle.net/gkC32/32/
I have a two sprite images. One image contains the body of a rounded button as well as other states (hover, clicked, ect) while the other contains the left most curve of the image.
I am using these so I don't have to have multiple button images on my webpage, these buttons are can be scaled to any size.
<div id="search_tips"><span>Search Tips</span></div>
and CSS
#advanced_search_button, #search_tips{
background: url("graphics/doc_button_left.png") no-repeat scroll 0 0 transparent !important;
color:#666666 !important;
display:block !important;
float: right !important;
padding-left: 5px;
padding-right: 6px;
padding-top: 0px;
margin-right: 16px;
height: 22px;
overflow: hidden !important;
}
#advanced_search_button span, #search_tips span{
background: url("graphics/doc_button.png") no-repeat scroll 100% 0 transparent !important;
padding: 2px 9px 5px 0 !important;
line-height: 19px;
display:block !important;
float: left;
}
#search_tips:hover, #advanced_search_button:hover {
background-position: 0 -22px !important;
}
#search_tips span:hover, #advanced_search_button span:hover{
background-position: 100% -22px !important;
}
When I hover over the part of the div which contains the , (the majority of the icon) then both parts of my sprite have the "hover" style applied to it. However, if I hover over the part of the image before the " I only see a chuck of the image have the "hover" style applied to it.
What I would like to be able to do is to activate the "hover" style for the span whenever the parent div has it's hover style applied to it.
Any advice?
Thanks
Have you tried #search_tips:hover span?
For starters, when you hover over an item, only that item gets the hover css event, not anything behind it.
However you can hide the element on hover, which triggers hover for the element behind it.
Not 100% sure whether it answers your question, but :hover can be a parent selector too:
#search_tips:hover span.classname1
{
......
}
#search_tips:hover span.classname1
{
.......
}
those rules will both apply the moment search_tips is hovered over.
Make sure you use the :hover pseudo-class before the span element to make the hover work correctly:
#search_tips:hover span, #advanced_search_button:hover span
I also think you'll need to use your doc_button_left.png as the background of the span if you're using the standard sliding doors technique. I'm not 100% sure about this, but if you keep having problems, you might want to make that switch.