I would like to use these picture as a corner for a button. The buttons name is Test with background "#F1F2F2"
How should I create by using CSS?
Please remember that the css code need to adapt to older web browser.
Thanks!
Why not just use css? Border radius would be half the size of the parent element and is supported by IE 9 and above.
<span>hello</span>
span {
display: inline-block;
background: grey;
border-radius: 15px;
height: 30px;
line-height: 30px;
padding: 0 30px;
}
http://jsfiddle.net/dbwL117m/
Otherwise do something like the code below and apply the appropriate css styles.
<span>
<span class="left-image">image here</span>
<span>Text</span>
<span class="right-image>image here</span>
</span>
Related
I have code that makes popups (I recommended to do this by an accessibility consultant) based on focus using only CSS and tag attributes. It works great until the focused element is too near the right side or bottom of the window, and then I need specific markup to flip the tooltip to the other side of (or above) the focused element.
I'd like to have generic CSS that "just works" without knowing the placement of the focused element ahead of time (this is for a responsive layout that reflows for different window sizes)
I know I can solve this with Javascript, and there is already a question talking about that (Display a div on mouse enter, cannot be seen if mouse position is in the right-most) but I'd really like to do it using only CSS.
Fiddle: https://jsfiddle.net/e6g39Lvb/
HTML:
<div id="wrapper">
<p>
<input type="text" /> Place cursor here and hit "tab" key to move focus
</p>
example link 1
<div class="rightside">
example link 2
<br />
<a class="corrected" href="#" title="this only works if I already know it's on the right edge of the screen">example link 3</a>
</div>
</div>
CSS
#wrapper{
margin: 1em;
}
.rightside{
text-align: right;
}
*:not(:hover):focus{
position:relative;
border: 1px solid red;
}
*[title]:not(:hover):focus:after { /* show tooltip on focus but user default for hover */
text-align: left;
border: 1px solid #fc0;
padding: 3px 6px;
color: black;
background: #fffea1;
content: attr(title) !important;
position: absolute;
width: auto;
min-width: 5em;
max-width: 15em;
transform: translate(0.5em,-30%);
}
.corrected[title]:not(:hover):focus:after {
transform: translate(-100%,-30%);
left: -0.5em;
}
Just to be clear: I know to achieve this with JS, I'm looking for a CSS only answer (if it's possible)
I am inserting text into a class <span class="span4 offset4"> using templates. In the css, I used text-align: centre; but the text is not centering. It's pushed to the left side of the div. I can see this because I also color the background of the div when I put the text in it. I even tried to wrap the message in <p> tags but it's not doing anything. Can you tell me what I'm doing wrong?
<p>{{= message }}</p>
html
<div class="row">
<span class="span4 offset4"></span>
</div>
css
.span4.offset4
{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 15px;
font-weight: bold;
min-height: 25px;
text-align: centre;
}
It's center, not centre. Moreover, display: inline elements don't work with text-align. Make the span display: block or something.
Give text-align:center to your parent div inside row class.
try adding these lines to css
//to define size of div
.row
{
width:30%;
}
then add these lines to .span4.offset4
margin:auto auto;
I am having a problem, for a while I have been trying to figure out how to resolve this issue. I will describe it very well below...
I am trying to use an image as a sprite image for an UL list. It should show an icon with text next to it, both the icon and the text should link to somewhere.
My first example look how I want it to be. When the font-size is set to 10px it looks ok...
As soon as I change the font-size from 10px to 16px...
Here is the CSS and HTML
CSS
#post-meta-wrapper{
list-style: none;
margin:20px 0 20px 20px;
width:400px;
}
#post-meta-wrapper li {
width:100%;
color: #44495B;
border-top: 1px dotted #CCC;
color: #999;
font-size: 10px;
line-height: 28px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-indent: 0px;
}
#post-meta-wrapper li a{
background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
padding-left:15px;
}
#post-meta-wrapper .meta-img {
background:#fff;
width: 15px;
height: 10px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 8px;
overflow: hidden;
}
#post-meta-wrapper a:hover,
#post-meta-wrapper .active{
background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -195px;
width: 15px;
height: 10px;
}
The HTML
<ul id="post-meta-wrapper">
<li class="author">
<span class="meta-img">Test link
</li>
<li class="author">
<span class="meta-img">Test link
</li>
<li class="author">
<span class="meta-img">Test link
</li>
<li class="author">
<span class="meta-img">Test link
</li>
<li class="author">
<span class="meta-img">Test link
</li>
<li class="author">
<span class="meta-img">Test link
</li>
</ul>
JSFiddle Examples
This is the first one with the font-size: 10px http://jsfiddle.net/jasondavis/Mt87G/4/
This is the MESSED UP one with the font-size: 16px
http://jsfiddle.net/jasondavis/Mt87G/5/
Help me?
Ok I know I could just change the sprite image to have huge spaces around each object in the image and then you wouldn't notice this problem, but I would really like to resolve this issue the right way. I mean is it possible to do what I am trying to do with just CSS or does the image need to be spaced out? I have seen other sprite images where they are together close like mine and I have seen some where everything is like 100px apart.
Please help me if you know how to resolve this, I have tried eveything I can think of without any luck yet. I need to do this on a mass scale so I would like to get it done correctly now before I do that. Thank you for any help
I would suggest using the :before pseudo element. Add the class to your anchor link or the list item and style the pseduo element to hold the sprite image. This gives the same effect as being able to set a specific size on a span, without the need of extra markup.
<li class="icon">
<a href="#">Test Link<a/>
<li>
.icon:before{
content: '';
width: 10px;
height: 10px;
display: block;
background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
/* other css for positioning */
}
If you want the icon to be part of the link, the before should to be on the anchor. It will be underlined if the anchor is underlined.
If you put it on the li, the link can still be underlined without the icon being underlined, but to make it clickable you need to work some magic with padding on the anchors.
Note: As mentioned by jimplode, this will not work in IE <= 7 So if you need it to work there (sad for you) better to use the extra markup.
Close the span
Set width, height, float and margin-top of this span to align with base of line height
Try this:
http://jsfiddle.net/Mt87G/19/
CSS
#first a{
font-size: 10px;
padding-left: 5px;
line-height: 12px;
}
#second a{
font-size: 22px;
line-height: 25px;
padding-left: 5px;
}
.meta-img{
background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
width: 13px;
height: 12px;
float: left;
}
#first .meta-img{
margin-top: 4px
}
#second .meta-img{
margin-top: 7px
}
HTML
<p id="first">
<a href="#">
<span class="meta-img"></span>Test link
</a>
</p>
<p id="second">
<a href="#">
<span class="meta-img"></span>Test link
</a>
</p>
I think you can give more spaces between the images.
If you have individual images then you can use http://spritegen.website-performance.org/ to create sprite images and you can provide custom space between sprite images.
If you are changing the font-size dynamically then also you can use the sprite with more space and can only change the background-position.
Well written question! I simplified your two sample fiddles into one fiddle:
http://jsfiddle.net/Mt87G/6/
It seems in the 16px-variant the image is just showing a bit more as the line-height becomes bigger because of the larger font size.
Edited: apparently SO uses sprites as well, see for example this image. If I use firebug to increase the line-height for the "vote-up" button for example, at some point the next sprite starts showing up.
So, if you would follow their lead, it seems you could:
set a fixed height on your element
leave some space between sprites, just to be sure
Strict answer though to your question then seems "no, not necessary".
As you have your background image on an anchor, you could always put a span inside the anchor for the image, this way you can control the width and height of the span which in turn will only show the portion of the image you want it to use.
I generally leave a few pixels in between sprites due to rounding errors that I've seen on mobile Safari. If there is just 1 pixel in between the sprites, sometimes there is a hair-width sliver of the next sprite over at the edge of the element. Adding a little more buffer room avoids this problem. If you are using PNG files, there isn't really much additional file size (extremely small increase) with more spacing due to the way they compress.
I'm trying to created a pure css tooltip. I have the test code here: http://jsfiddle.net/RBdn4/
The only problem with this is that in Chrome, the text is underlining on the tooltip despite having the text-decoration: none; line in the css.
Any suggestions on how to get this to stop? The link should underline, but the .tooltip text should not.
Chrome applies the link's text-decoration to the <div> because it is a child of the <a>.
Add a wrapper element around the <a> and make the tooltip <div> a sibling instead of a child of the <a>. Show the tooltip when the wrapper is :hovered.
Oh, and make that CSS make sense!
HTML
<span class="wrap">
this is text
<div class="tooltip"> this is a tooltip</div>
</span>
CSS
.tooltip {
color: #000000;
display: none;
left: 50px;
padding: 10px;
position: absolute;
top: 40px;
width: 250px;
text-decoration: none;
z-index: 100;
}
span.wrap:hover .tooltip {
display: block;
}
Demo: http://jsfiddle.net/mattball/u66GT/
Fix'd. You can't override text-decoration from the child. Also, don't put <div>s in <a>s, as Matt Ball points out.
I wasn't able to prevent the underlining from happening in Chrome while the elements were nested, but I can solve the problem by making them siblings instead.
Simply remove the <div> from inside the <a> tag, and put it next to it instead, like so:
this is text
<div class="tooltip"> this is a tooltip</div>
and use the CSS + selector (adjacent sibling) to select the hovered tooltip, rather than the child selector.
.tooltip{
display: none;
}
a:hover+.tooltip{
color: #000000;
display: block;
left: 50px;
padding: 10px;
position: absolute;
top: 40px;
width: 250px;
text-decoration: none;
z-index: 100;
}
The only change to the CSS from your original is changing the space to a plus sign.
Note the + selector doesn't work in IE6. Hopefully you're not planning to support this crumbly old browser though, right?
Hi guys I am having some cross browser issues with my style sheets namely ie 8.
The css below works fine in my chrome/ff style sheet but it does not work at all for my ie stylesheet.
#threetwoBTN {
background-repeat: no-repeat;
background-image: url('../images/32Button_BG01.png');
}
a#threetwoBTN:hover {
background-repeat: no-repeat;
background-image: url('../images/32Button_BG02.png');
}
In IE, below is as far as I can get.
#threetwoBTN {
background-repeat: no-repeat;
background-image: url('../images/32Button_BG01.png');
}
I can apply my background image and thats about it, the hover effect I want that works above does not work at all IE8. Below is the structure of my tags:
<div class="ContentBody">
<div class="LeftContentBody">
<br/>
<!-- another div but ignored for example! -->
<br />
<a id="threetwoBTN">Download 32-Bit</a>
<p>
* ...
</p>
The id set to each 'a' tag allows me target and style each anchor the way want it to look as each tag has different backgrounds and effects and etc. Can someone please help me explain this IE related issue?
UPDATE:
The text is indented off the page, so the user doesn't see the text between the anchor tags. This means the button is made up of a background image that's all. For clarity I have pasted in below the css I am using to style the anchor tag.
.LeftContentBody a {
font-size: 10px;
text-indent: -1500px;
width: 124px;
height: 62px;
border: 2px solid #000000;
margin-left: 32px;
margin-bottom: 32px;
float: left;
clear: left;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
You should add the attribute href to your tag , try with #, it should work with that, at least it does for me.
Hope it helps.
#threetwoBTN
{
background: #CCC;
}
#threetwoBTN:hover {
background: #AAA;
}
<div class="ContentBody">
<div class="LeftContentBody">
<br/>
<!-- another div but ignored for example! -->
<br />
Download 32-Bit
<p>* ...</p>
</div>
</div>
Is this an image positioned next to the text, or is it to replace the text?
If it is meant to replace the text, have you given this a width/height and display block?