So I've setup Compass for creating automatic sprites with SCSS. All goes well, it generates some nice CSS for me :-
.icons-sprite, .actions-new, .actions-edit, .actions-save, .actions-delete, .actions-refresh {
background: url('/content/themes/admin/images/icons-s0336d5eb89.png') no-repeat;
}
.actions-new {
background-position: 0 -48px;
}
... ... ...
Now I am creating a table, and in that table there is a "Action column" where you can perform functions on rows (delete or edit).
What is the generally accepted way (in html 5) for showing these buttons using sprites?
I've explored a few options and ran into a few problems
span I can't get this to show unless I place it in display: block mode and if I do that it inserts new lines after the item, and I don't want to have to float everything
div for some reason this one doesn't even show
img The biggest issue I am seeing with this one is the requirement for a src field, this means that I need to duplictate the url over and over again.
What do other people use for sprites inside links?
Use span and display: inline-block. This will make the span behave like an image, so you can apply vertical-align: middle. Support goes all the way back to IE6 if you use it on an inline element.
Related
I'm doing a website and I would like to use one of the font awesome icons to go across the whole screen to use it as a section separator.
I could just copy multiple for full width of the page, but it's not going to be very responsive when the screen resolution changes... not sure if it's even possible, any ideas?
You can use this site to convert icon to png and then use that img as background and set background-repeat: repeat-x
div {
background: url('http://i.imgur.com/qkXOkZZ.png');
background-size: contain;
background-repeat: repeat-x;
height: 50px;
}
<div></div>
I could just copy multiple for full width of the page, but it's not going to be very responsive when the screen resolution changes...
Well it doesn't have to be, if you just one element, full width and with the overflow cut off.
In fact, I would recommend to not copy the default HTML snippet for the icon multiple times into the document - but rather use a single one, and "extend" that via an additional class, so that the generated content character is repeated multiple times:
<i class="fa fa-pied-piper fullwidth" aria-hidden="true"></i>
.fa-pied-piper.fullwidth {
display: block;
width: 100%;
white-space: pre;
overflow: hidden;
}
.fa-pied-piper.fullwidth:before {
content: "\f2ae\f2ae\f2ae\f2ae\f2ae\f2ae\f2ae\f2ae...";
/* repeat as many times as you consider necessary
to fill "a whole page's width" */
}
https://jsfiddle.net/g8hefymq/1/
This is a simple solution for a single specific icon, assuming you need only one (or maybe two, three ...) - if however you would want this to work for "just any" icon fontawesome offers, a different solution might be needed. If multiple specific icons that are going to be needed could be picked in advance, you'd might want to use a CSS pre-processor like LESS or SASS to at least create the above, repetitive CSS for the icons' content properties via a loop or something like that.
I wish to make the blue circles float left for odd numbers and right for even numbers. I've tried floating the elements but it doesn't seem to work.
I've used table and table-cells to achieve the centered text and logos but cannot seem to get them to inverse unless i switched the positioning of the elements
enter code here
Here is a current demo:
https://jsfiddle.net/7g7medn1/
Result Demo (re positioned dom elements to achieve result, need to do it without re positioning them):
https://jsfiddle.net/wcttx9vm/
you might need to a add class for the even columns and change floating and display properties as follows:
.even .content {
display: block;
}
.even .circle {
float: right;
}
.even .content {
display: inline;
}
https://jsfiddle.net/zxhbbwdm/4/
what I don't understand: When you want a table, why you don't use ? A table can be used to display table-content, but not for pure layouting.
In your case I would do it like this: Take a php-file and do the "layouting" there. That means that you will do the even-odd-placement in a for-loop and switch the odd layout there. I guess it would be the easiest way.
And your current demo code can't work, since your bubble is always first in code. That is ok for the left positioning, but for right positioning it needs to be after the text. Otherwise you will screw it up.
Having seen advice seemingly change over the years regarding use of empty DIVs (ie. <DIV CLASS="somediv"></DIV>) I'm confused as to the current thinking over whether or not to use when a DIV will have no inner HTML.
I can find no definitive confirmation over whether we can rely on all modern browsers to display background color and image correctly at the specified width & height when there is no inner HTML, so I'm thinking maybe we can't rely on it - yet it's such a seemingly basic area.
I have even seen suggestions that empty DIVs should never be used - but do specs really state it is 'wrong' to have empty DIVs, or is it just unreliable? (I've tried finding reference to them, but maybe I'm using the wrong terms).
To illustrate, here are 5 areas where I would normally use an empty DIV, in the absence of any recommended alternative:
as a placeholder for content which will subsequently be fetched by XHR calls
as a way to manually create space in a layout
where an image is defined in CSS (as a background image, but will effectively be foreground)
where the text will come from the CSS using .somediv:after{content:SOMETEXT}
where CSS is used to display graph bars etc using solid background color
Maybe there are different answers for each of these, which might explain the complexity over this issue.
I have, of course, tried discovering already, but for example the SO question Is necessary to show an empty <div>? suggests to me there is a huge amount of "IMHO", "probably", "seems to work" in this area. I would expect that by now that some official consensus has been reached on best practice.
So.. should I use and if so should I set font-size to the same as the smaller of DIV width/height to ensure that space is filled in all browsers? Are there any other CSS tricks to ensure this will work in all browsers?
The browser is not going to discard or forget your container just because it does not have any contents (yet).
If you want the container to have a specific placeholder shape, then you might give it min-height, min-width, height and width and make sure it's display: block;.
If you are still unsure, you can fill it with a spacer.gif/png without padding and margin.
http://jsfiddle.net/APxNF/1/
Short answer. Yes, browsers will render the div even if there is no content.
Long answer, That might now always be the case. I have worked in the web for 8 years now and never had to use these, but here they are anyway.
jsFiddle demo
HTML
<div class="empty1"></div>
<div class="empty2"></div>
<div class="empty3"></div>
CSS
.empty1 {
background: #FBB829;
height: 100px;
width: 100px;
}
.empty2:before {
content: "\00a0";
}
.empty2 {
background: #FF0066;
height: 100px;
width: 100px;
}
.empty3 {
background: #F02311;
min-height: 1px;
height: 100px;
width: 100px;
}
Sources:
Experience
Empty div with 2px width and background color doesnt show with height as 100%
http://csscreator.com/node/36023
I have a small image that i need to repeat along the x direction, a specific number of times.
The 'row' of images should be scrollable, and i want to avoid tables if possible.
Is this possible to do with Html + Css? The html code will be dynamic generated using PHP.
Any extra-ideas?
Thanks!
I wonder if ajax has the best looking solutions for you, but you haven't really explained your scenario too well, why are you repeating the same image and making it scrollable? That doesn't sound like valid functionality for anything. Are you trying to scale a background image or something? IF so, what's with the scroll bar???
Anyways here you go:
http://wowslider.com/rq/ajax-image-scroller/
Garry's answer is good. If you just want regular scrollbars, however, wrap the dynamic area (into which you will be loading your images) with a div (or canvas, probably works the same way), and add a class to it. Then you can target all of the images with CSS and have them float, which will line them up, regardless of how many you load dynamically. (Just don't forget to put a width on the container.)
It would look something like this (short-hand, but you get the idea):
div.image-container {
width: 400px;
overflow: scroll;
}
div.image-loader img {
float: left;
}
<div class="image-loader">
<img/>
<img/>
</div>
I am using the following HTML:
<p>← Back</p>
To create the following:
← Back
Problem is, the left arrow is not vertically aligned in the middle. It appears to be at the lower 3rd.
Question: how do I get the left arrow to be aligned vertically in the middle (of the letter "B") using CSS?
UPDATE:
Is it possible for me to vertically adjust/align this:
Without modifying my HTML, and
Without using an image?
The arrow is a simple character, so it's aligned like the others (it is in the "middle", the creator of the font wants it to be where it is... maybe that's the middle of lower-case character). Maybe it looks different using another font, maybe not. If you have a fixed font and that one looks messy, you could try to use the :first-letter selector (or wrap the arrow in a span or something) to move it up 1 or 2 px (position:relative: top:-2px;).
Another solution would be to use an image for this, like most websites do (and there are many free icon sets out there — my favourite is famfamfam)
You can wrap your arrow in SPAN tag and then play with line-height and vertical-align CSS properties.
Generally you should not do this, you should let it as the font was conceived by its author.
But it you want to change it you can do it like this:
<p><a href="http://www.example.com/">
<span style="position:relative;top:-3px;">←</span>
Back
</a></p>
Note: Use what you need instead of -3px, I used that just to illustrate how the position can be changed.
I think you have to use a image for the left arrow than &larr.
It IS possible to have the &larr in a separate span, have some specific padding to bring the arrow to the right position, or use a specific font that has the arrow at the center, but this will have side effects.
I suggest you use an image.
There are two possible answers to this.
The way you're writing it, this is not a graphical element (arrow) followed by a label ("Back"), but a line of text (inside a paragraph) containing a single character followed by a letter string. So alignment is a purely typographical problem and determined by the font you're choosing. Choose a different font and see if it's more typographically pleasing.
What you want is really not a line of text but two independently placeable graphical elements. Put each inside its own span, give it display: inline-block and position: relative and play with vertical paddings, margins and line-heights until you're satisfied.
You have some options:
1. Put the arrow between span tags before the word Back, add an id to this span object and then assign the style in the css file playing with: padding-top or bottom and also vertical-align or position relative.
2. The second option is using the image as background and then you have to create the style for this link:
li a#link,#link_conten{
background-image: url(../../../img/arrow.gif);
background-position: left top;
background-repeat: no-repeat;
}
In addition, it is not common (from the semantic point of view) to put just the link (tag a) inside a paragraph (tag p). Then you have to deal with the default css rules for tag a and p but of course depends of your design
You could use CSS generated content. This will mean editing your HTML - to remove the arrow. Essentially you're creating a pseudo-element that sits in front of the link, and you can style it however you like, e.g.
a.back:before {
content: "\2190 "; /* Unicode equivalent of ← */
display: inline-block;
padding: 5px;
background-color: aqua;
}
On the downside this won't work in IE 6 or 7. You might be able to work around that with some targeted javascript.
If you don't want to edit your HTML, you could give :first-letter a try. It only works on block-level elements, so you'll need to work accordingly, e.g.
a.back {
display: inline-block;
}
a.back:first-letter {
background-color: aqua;
padding: 5px;
}
I've had trouble getting this to display consistently cross-browser though. IE8 and FF3.6 do rather different things with the code.