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.
Related
I know there are similar questions, all of them are old, and I was wondering maybe there are newer techniques.
I have the following HTML:
<figure class="main-slider__slide">
<img class="main-slider__image" src="http://smth.com/a.jpg" alt="test">
</figure>
What I need is the figure container keeping the room for the img while it's not loaded yet. Without the container keeping the space I end up with twitching content which feels awful.
So far I've came up with the following SASS mixin:
#mixin image-placeholder($x,$y, $image-wrapper-class,$image-class) {
.#{$image-wrapper-class} {
position: relative;
padding-bottom: percentage($y/$x);
}
.#{$image-class} {
position: absolute;
}
}
Being applied like #include image-placeholder(1170, 405, main-slider__slide, main-slider__image); it generates CSS like
.main-slider__slide {
position: relative;
padding-bottom: 34.61538%;
}
.main-slider__image {
position: absolute;
}
The problem is that I have to hardcore the size of my images in the styles and have a separate class for every image of with certain dimensions. Do you guys know better solutions where one general placeholder class would resolve the problem?
As I wrote into comment above - I doubt that there is general solution that will allow you to obtain information about not-yet-loaded element.
However it may be possible to mimic such behavior.
One thing that came in mind is to have tiny resized version of the image to be loaded to be inlined into document and then replaced by actual image upon page load. E.g. your 1170x405 image can be squeezed by 20x factor to 50x20 that will give you ~1kb of image size in jpeg. This image may be stored as <img src="data:" class="image-placeholder"> directly into document and act as a temporary replacement for your actual image. You can scale it to original size using CSS and load original image either by JavaScript or by allowing browser to load it without displaying or by putting it immediately over placeholder. It can be also useful to apply filter: blur(10px) or something like this to image placeholder so it will not look ugly. Actually you can even animate this filter value to provide pleasant visual transition from scaled down placeholder towards original image.
I've used such approach into one of my projects and it was working well.
Hope it will help you.
tldr: I want to create simple theme, based on 2 columns with just pictures, that fill the whole screen, like this - http://half-way.precrafted.com/
Hello.
I started learning html/css yesterday, because i want to create rather simple theme that would fit my needs.
However, it turned out to be harder than i thought, unfortunately.
I post only pictures, without any captions or tags. All i want is theme based on 2 grids, where whole screen is occupied with pictures (except header on top). This is the best, almost exact example of what i want - http://half-way.precrafted.com/
However, the issue is that tumblr allows photoset with maximum width of 700px. This may be overriden with javascript - and i found such scripts, but it uses fixed values, so it won't really fit to any screen - just mine.
Set the photosetrow class to:
<div class="photoset_row photoset_row_2">
The CSS for this:
width: 400px;
white-space: nowrap;
overflow: hidden;
margin-top: 10px;
.photoset .photoset_row .photoset_photo:first-child {
margin-left: 0 !important;
}
.photoset .photoset_row .photoset_photo {
display: inline-block;
vertical-align: top;
margin-left: 10px;
}
I literally pulled that CSS from looking at the source code of that page you posted.
It seems the most important one is the photoset_row_2
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
What is the best way to go about displaying an html table with text in the background of each cell? I am making a calendar and I would like to have grey dates in the background of actual text.
The only thing I can think of at this point is to have the date and the cell content in separate divs that float over one another but even that isn't implementing well within a table.
By the way using an image to display the date is not really an option IMHO.
Use relative positioning in the content span:
<tr>
<td>
<span class="day">6</span>
<span class="contents">Contents go here</span>
</td>
</tr>
And in CSS:
span.day {
line-height: 20px; /* just to give it a height */
display: block;
color: #aaa;
}
span.contents {
position: relative;
top: -20px;
}
Now the spans are overlapping, with contents over day number. You might want to adjust the position but this should work.
Even though this would work, I would advise you to use images. You can embed all the required dates in one image file (the CSS sprite technique), it gives you greater control with less browser specific issues.
Hmm... if I understood correctly, the way I would do it is probably something like the following in each cell:
<div class="cell_container" style="position:relative;">
<div class="cell_bg" style="position:absolute; width:100%;
height:100%; z-index:0; color: gray;">29/12/2009</div>
<div class="cell_fg" style="position:absolute; width:100%;
height:100%; z-index:1;">Jim's birthday</div>
</div>
Naturally, you can move the styles into a seperate css file. You might also be able to do away with the container div and just apply the "position:relative;" style to the containing cell. The major downside to this method is that you will lose the ability to vertically align in IE, without some trickily implemented workaround.
I realize you said that using an image is "not an option IMHO", but may I suggest that using images would give you a lot more flexibility in the appearance of the date. You could use any font available to your image editor, rather than the limited set of fonts you can count on in a browser. And all sorts of image tweaking tricks could be aplied that would be immpossible in the browser.
It often works out great that the CSS backgrounds don't print, however, sometimes I use them to convey contextual information. What is the best way for getting around CSS backgrounds that don't print but you really want to display. The example, I'm currently working on is a table that displays financial information. Different background colors are used to indicate how "good" a number is (e.g. very profitable, profitable, neutral, negative, very negative).
I've used borders to simulate backgrounds when I really need a background color. Something like this will work (but I apologize for not having tested this):
div.must-have-background-for-print {
position: relative;
width: 400px;
}
div.must-have-background-for-print div.background {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-left: 400px solid #999;
}
In response to #Steve Quezadas' comment, the idea is that rather than using a background, you insert an element into the element that needs the background and apply an extremely wide border to it so that it fills the outer element. This will most likely require that the contents of that element also are inside of another wrapper so that they appear above the new background element...
If you started with this:
<div class="has-background">Some stuff in here</div>
You might use this:
<div class="has-background">
<div class="background" />
<div class="content">Some stuff in here</div>
</div>
This is extremely ugly, but I've used it in the past and it does solve the issue of background colors not printing. And, before you ask, you'll have to adapt the css to your specific case. I'm simply describing the concept of using borders to replace backgrounds. Your implementation will depend on how your page is structured and this is extremely difficult to do if you don't have either fixed widths or heights on your elements.
Two suggestions:
Color-code text in the table rows
Add color-coded icons to the beginning or end of the table rows
You could even incorporate these into the normal view with your background colors.
I ran into the same problem color coding tabular data in html, eventually I just switched to pdf generation for color printouts and only made black and white available in html
It's a browser setting. Turn on background printing in IE. So, you can either change the browser settings (possible if on an intranet) OR just export your report to Excel or some other format for printing.
You could make the font bigger and/or bold and/or italic and/or colorful.