I downloaded a symbol from Fontastic and I've added it in my html with
SHOW MORE NEWS <span aria-hidden="true" data-icon="a"></span>
The problem is the symbol is 18px x 20px. It adds unwanted space in the <a> element, and I can't add padding or align it with the text.
How can I do it?
The easiest way would probably be to position your icon absolute, so it gets lifted out of the flow and doesn't affect the parent a anymore. Something like this should do the trick:
[data-icon="a"] {
position: absolute;
left: 100%;
bottom: 0;
}
a {
position: relative;
}
You may want to use some different selectors, but you get the idea...
I've set up a small fiddle to demonstrate: https://jsfiddle.net/1wsuc7ns/
update:
You commented that you only see part of the symbol. That is somewhat strange since the above code should not affect the size of the symbol in any way. Perhaps there is some other css at play here. The first thing that comes to mind is an overflow:hidden; on the a. Give the following code a try:
[data-icon="a"] {
position: absolute;
right: 0;
bottom: 0;
}
a {
position: relative;
padding-right: 20px;
}
So I added some extra space for the icon inside the a tag (you may have to play with the number a bit) and changed the positioning to keep the symbol inside the a.
Another problem could be that there is something covering up the symbol. You could try adding a reasonably high z-index to the symbol to see if that solves it.
Not much more I can tell without looking at the actual rendered page...
Related
This might be a totally silly question. Here is my problem - I have a message box displayed in HTML (using Bootstrap) to show various user alerts. It has an information icon (using bootstrap glyphicons) and associated message. Everything looks fine unless the message is too long. Then the second line will wrap under the icon. I want the multiple lines to wrap starting where the first line starts.
So this would be wrong:
(i) This is an incorrect
format of the message
And this would be right:
(i) This is the correct
format I want
My HTML/CSS is very simple:
<div class='alert alert-info'>
<span class='glyphicon glyphicon-information'></span>
  my message comes here.
</div>
But I looked at couple of sites including css-tricks and all the solutions seemed really complicated. So I am posting here to see if there is a quick and easy way to do this.
You can play with CSS positioning, what you need to do is, push the entire element to the left using margin-left: 30px; and than, assign position: relative; to the container element so that we make sure that the absolute positioned element doesn't flow out in the wild.
Now we use position: absolute; for your glyph icon and use negative left value and a positive top value to set the icon correct, please tweak these values according to your requirements, rest stays the same
.alert {
margin-left: 30px;
width: 50px;
position: relative;
}
.alert .glyphicon {
position: absolute;
left: -15px;
top: 2px;
}
Demo
what about wrapping your message inside it's own span and styling it to have a margin-left of 15px or whatever width the information icon is? are you unable to do that? if so, you can set the style on the
.alert .alert-info {
margin-left:15px;
}
and subsequently set the margin on the span to 0
div .glyphicon glypicon-information{
margin: 0;
}
Just like the Title says, "How to use text as a background instead of an image?"
I'm making a little application, that I personally think is cool but will probably be a waste of peoples time, and am altering the button in the drop down button to an upside down triangle using this html code ▼ . I'm not talking about setting the z-index or anything just simply placing a character for the little arrow. I thought about leaving it blank but I don't think users would understand that they are supposed to use the menu if I did so. Therefore I'm going to use the upside down triangle.
My CSS for the drop-down list is set up like this
select {
border: none;
overflow: hidden;
background: no-repeat right #ffffff;
-moz-appearance: none;
-webkit-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Put the text inside an HTML tag with class .text-background, set CSS styles to
.text-background {
position: absolute;
z-index: 1;
}
and set z-index to the elements you want to be on top of the text with z-index higher than 1.
edit:
If you know what the size of the select element is, you probably want to position that text over the dropdown. This however will block the button.
JSFiddle
If you want better looks and functionality you can use a 3rd party libraries such as this or this.
edit 2:
I just found this CSS only solution given by Danield that's probably going to suite your needs better.
https://stackoverflow.com/a/13968900/1419575
Try This, as suggested by Paulo Bergantino:
JS Fiddle
Click Here
HTML
<div id="container">
<div id="background">
Text to have as background
</div>
Normal contents
</div>
CSS
#container{
position: relative;
}
#background{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
overflow: hidden;
}
I have a control that I am trying to highlight when it is selected. I'm achieving this using padding on a div and some positioning so that it surrounds the control. The problem I'm encountering is that the padding on the highlighter div renders differently in chrome and in firefox. Everything I've read says that they render the same so this shouldn't be a problem.
Chrome:
Firefox:
Here's a fiddle that has the problem on it:
http://jsfiddle.net/5fuGB/1/
.control{
position: absolute;
width: 100px;
height: 20px;
top: 30px;
left: 300px;
z-index: 1;
}
.highlighter{
background-color: orange;
position: absolute;
width: 100%;
height:100%;
left: -2px;
top: -2px;
padding-right: 8px;
padding-bottom: 10px;
z-index: -1;
}
input{
width: 100%;
height: 100%;
}
My Chrome Version:
Version 31.0.1650.63 m on Windows 7
My Firefox Version:
25.0 on Windows 7
Thanks for any help you guys can offer.
I believe the difference you are seeing is a difference which comes from the user agent stylesheet, browsers have their own default stylesheets which they use to render things like input elements. In your case it is probably a difference in the padding applied to the input element. You should specifically set eg: padding: 0px; or padding: 1px; on the input element, and then work out how to get it to look right for an input with the specified fixed padding. This will then override the styles set by the user agent style sheet.
Update
I moved to my Windows PC to have a go at fixing it. One way to fix this using one of the vendor specific prefixes from the answer linked in the comments is to add -moz-padding-end: 6px; to .highlighter to compensate for the differences in padding between browsers.
Here's a jsFiddle which fixes your issue, a footnote tho, I can already tell you that this probably won't fix it on Chrome for OSX, which was also rendering things the Firefox way.
Another way to fix this is by adding -moz-padding-start: 1px; -moz-padding-end: 1px; to input, but doing so somehow changes the bottom padding as well, which makes things look not as pretty in Firefox as with the other fix.
I'd go about it differently. Instead of using an extra div, I'd recommend using a combination of border-color and box-shadow on the input's :focus state to achieve the effect you're going for.
Check out this modified fiddle: http://jsfiddle.net/5fuGB/2/
Just experienced the same issue with my code, and fixed it too. The trick is if you use display: inline-block then line-height makes sense. Try it when debugging your code.
You're doing a little more than what's necessary. To get a highlight around that input you can use :focus
So it would be something like this:
CSS
input {
border: 1px solid white;
}
input:focus {
border: 1px solid orange;
}
That will give the input a white "invisible" border so it doesn't move the input when you click into it. It will simply change the border color to orange to get that highlight effect you're looking for.
EDIT
Just saw your comment. I dont have the rep to comment so I'll just add on to this.
If you aren't using the inputs as actual inputs, then I would just make them divs. Inputs render differently by default so that would mess with consistency across browsers.
I'd also recommend experimenting with those divs within one another and making the most outside div relative.
Outside Div <------ position:relative;
Middle Div <------- position: absolute;
Inner div <-------- position: absolute;
Also, if you need a selected state but don't want or are hindered by inputs then I'd recommend jQuery for modifying the css based on user interaction.
Question
Can I style just a part of a single character?
Meaning
CSS attributes cannot be assigned to parts of characters. But if you want to style only a certain section of a character, there is no standardized way to do that.
Example
Is it possible to style an "X" which is half-way red and then black?
Not working code
<div class="content">
X
</div>
.content {
position: relative;
font-size: 50px;
color: black;
}
.content:after {
content: 'X';
color: red;
width: 50%;
position: absolute;
overflow: hidden;
}
Demo on jsFiddle
Purpose
My intention is styling the Font Awesome icon-star symbol. If I have an overlay with dynamic width, shouldn't it be possible to create an exact visualization of scores?
While playing around with a demo fiddle, i figured it out myself and wanted to share my solution. It's quite simple.
First things first: The DEMO
To partly style a single character, you need extra markup for your content. Basically, you need to duplicate it:
<div class="content">
<span class="overlay">X</span>
X
</div>
Using pseudo-elements like :after or :before would be nicer, but i didn't found a way to do that.
The overlay needs to be positioned absolutely to the content element:
.content {
display: inline-block;
position: relative;
color: black;
}
.overlay {
width: 50%;
position: absolute;
color: red;
overflow: hidden;
}
Do not forget overflow: hidden; in order to cut off the remaing part of the "X".
You can use any width instead of 50% which makes this approach very flexible. You can even use a custom height, other CSS attributes or a combination of multiple attributes.
Extended DEMO
Great work on your solution. I’ve got a version that uses :after (instead of duplicating the content in the HTML) working in Chrome 19.
http://jsfiddle.net/v5xzJ/4/
Basically:
Set position:relative on .content
Position :after absolutely
Set :after to overflow:hidden
Adjust the width, height, text-indent and line-height of :after to hide bits of it.
I’m not sure if it’ll work well cross-browser though — the em values will probably work out a bit differently. (Obviously it definitely won’t work in IE 7 or below.)
In addition, you end up having to duplicate the content in your CSS file instead of the HTML, which might not be optimal depending on the situation.
I display a few images of varying width and height, and I'd like to be able to add a class or two, say new or hot that would add small overlay star or something.
Normally this would be solved by making a div with the intended image being the background, but having my images all of unknown size, I'm getting stuck trying to figure out how to achieve this. Current HTML is of structure: <a><img></a>
I'm looking for a CSS feature that doesn't exist:
img.new { foreground:transparent url('/images/new.png') no-repeat bottom right }
I'm really hoping to solve this without databasing my image sizes, and without using javascript. But if you have a JS/jquery approach that's elegant, I'm all ears.
I'm not sure how well this would work for you, but if you can add the class to your <a> element instead of your <img>:
<a class="new" href="..."><img src="..." alt="alt text"></a>
Then you can try adding an a:after pseudo-element positioned absolutely over your <img> and giving it the overlay icon as a background image:
a.new {
display: inline-block;
position: relative;
}
a.new:after {
display: block;
position: absolute;
content: '';
width: /* width of overlay image or anything you choose */;
height: /* height of overlay image or anything you choose */;
right: 0;
bottom: 0;
background: transparent url('/images/new.png') no-repeat;
}
There's a bit of an issue with the positioning of the overlay image as the <a> is made an inline block for positioning to work, but you can always give it a little bottom offset to make up for it. Here's a fiddle to show you what I mean.
Without knowing more details about your setup, there are a few things that come to mind that you can do:
Use img.new:after (Some Quirksmode info on it.). It does have some browser support limitations, though. If you don't mind that some of the older browsers don't support this, then I recommend this one. I've used it before with nice results (and you could also fall back to JavaScript wrapped in IE conditional comments if you really need to, since IE appears to be the only browser out after the feature that doesn't support it).
If you're not using overflow:hidden, you might be able to set it as the background of either your image, its anchor tag, or even the next parent up. This, of course, depends on your exact design.
Use an absolutely positioned div or span within your anchor tag and display only on anchors with the .new class. So, something like this:
<a class="new">
<span class="newBanner">
<img/>
</a>
<style>
.newBanner {
display: none;
position: absolute;
top: 0;
right: 0;
}
.new .newBanner {
display: block;
}
</style>
This last one's kind of rough and will likely need tweaked, but the point is in the styling, specifically the .new .newBanner { display: block; } part. Again, it depends largely on your exact design, so the more information you can give us, the better help we'll be able to give you.