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/
Related
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>
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.
Here's the HTML I'm trying to use:
<h1>Order Not Paid<span class="not-paid"></span></h1>
Of course if there is a better way please say so.
Currently since there is no text inside of the span, it seems the browsers are ignoring this tag. Firebug shows up grayed out when inspecting.
When I place text in the span, the icon shows correctly.
What CSS rule can I apply for this effect? Here's what I have so far (It's SASS, but easy to grasp):
h1 {
font-size: 24px;
span.not-paid {
background-image: url('/Public/images/remove.png');
background-repeat: no-repeat;
}
}
I'd like the icon to appear where the span is.
Alternatively, is it kosher to do something like this? If so, I can settle with this as it looks good on IE8 and modern browsers.
<h1>Order Not Paid <img src="#Url.Content("~/Public/images/remove.png")" alt="" /></h1>
If the icon is small and not reused anywhere else just set it as part of the h1.
HTML:
<h1 class="not-paid">Order Not Paid</h1>
CSS:
h1.not-paid {
font-size: 24px;
padding:0 16px 0 0; /* whatever the dimensions the image needs */
background-image: url('/Public/images/remove.png') no-repeat right center; /* Position left/right/whatever */
}
A little cleaner this way.
the background image is not showing up because the span has no width, and therefore is not showing any of the background.
also, the snippet you gave is not valid css.
try something like this, assuming the image is 16px by 16px:
h1 {
font-size: 24px;
}
span.not-paid {
display: inline-block;
vertical-align: middle;
height: 16px;
width: 16px;
background-image: url('/Public/images/remove.png');
background-repeat: no-repeat;
}
The display: inline-block; is to make it so the width will apply. The vertical-align is to center the image on the middle of the line.
All of that said, the <img> tag solution would work too, but it doesn't scale well to a lot of similar images. The css-based solution makes it easier to switch to something like css spriting later.
In either case, you'll probably want to change your direct image urls to relative urls before expecting this page to work in a production environment.
I'm pretty sure that you need to give the span some width. By default it has none, so of course no background image will be seen.
First, if you are not using sass and less, your stylesheet is wrong. Next, give inner-block to span and the image height and width.
h1 {
font- size: 24px;
}
h1 span.not-paid {
width: 50px;
height: 50px;
display: inline-block;
background-image: url('/Public/images/remove.png');
background-repeat: no-repeat;
}
I have looked around for this and it seems simple but i cant seem to work it out.
I have a div with a background.
I want the background to start 20px down and then repeat-y, as in repeat the rest of the way down.
<div class="main_col"></div>
.main_col {
width: 680px;
float: left;
background:#fff;
background-position:50% 50%;
}
This is what im trying but it is filling the whole div?
this is what i have tried....http://jsfiddle.net/uzi002/gqqTM/4/
You cannot do this with one class definition in current CSS2 standards.
Use a separate div for the background.
If you want to fiddle with some CSS3, you can check out
background-origin
at
http://www.css3.info/preview/background-origin-and-background-clip/
Be aware of browser support.
You might try to add padding-top: 20px to .main_col and inside it create additional div with this background.
.main_col {
width: 680px;
float: left;
background: url("your image") 0px 20px;
}
Update
this is using giker s example
try something like this
There are 3 CSS properties relevant to achieving this:
background-image { url(/myBackground.png) } // To select the image
background-repeat { no-repeat } // To choose how or if it repeats
background-position { 1px 1px } // To choose the X, Y coordinates of the top left corner of the background image in relation to the top left corner of the element.
Now, that's all quite verbose but it can be condensed into a single rule, as follows:
background { url(myBackground.png) no-repeat 1px 1px }
It is possible to use relative values (such as the % which your code shows) for the background-position, but you will need to use px.
Try using a margin padding.
i.e.
.main_col {
width: 680px;
float: left;
background:#fff;
background-position:50% 50%;
padding-top:20px;
}
How can I get an image to stretch the height of a DIV class?
Currently it looks like this:
However, I would like the DIV to be stretched so the image fits properly, but I do not want to resize the `image.
Here is the CSS for the DIV (the grey box):
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
}
The CSS being applied on the image:
.product{
display: inline;
float: left;
}
So, how can I fix this?
Add overflow:auto; to .product1
In the markup after the image, insert something like <div style="clear:left"/>. A bit messy, but it's the easiest way I've found.
And while you're at it, put a bit of margin on that image so the text doesn't butt up against it.
Assuming #John Millikin is correct, the code
.product + * { clear: left; }
would suffice to do the same thing without forcing you to manually adjust the code after the div.
One trick you can use is to set the <div>'s overflow property to hidden. This forces browsers to calculate the physical size of the box, and fixes the weird overlap problem with the floated image. It will save you from adding in any extra HTML markup.
Here's how the class should look:
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
overflow: hidden;
}
This looks like a job for clearfix to me ...
Try the following:
.Strech
{
background:url(image.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
width:500px;
height:500px;
}
display:inline
float:left
is your problem
Floating makes the parents width not be stretched by the child, try placing the image without the float. If you take the float off, it should give you the desired effect.
Another approach would be to make sure you are clearing your floats at the end of the parent element so that they don't scope creep.
Update: After viewing your link Your height issue as displayed, is because the floats are not being cleared.