Here is very simple way to open external links in new window or tab in WordPress using the jQuery library.
<script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $j(document).ready(function(){ $j("a[href^='http:']").not("[href*='thechoppr.com']").attr('target','_blank'); } </script>
photo via flickr (credit)
It won’t give you 100% freedom to design anything you like, but it can speed up your design process greatly and free up your hands to do the coding you really want.
Suggestions:
photo via flickr (credit)
BR generates a line-break and it is only a line-break. As this element has no content, there are only few styles that make sense to apply on it, like clear or position. You can set BR‘s border but you won’t see it as it has no visual dimension.
If you like to visually separate two sentences, then you probably want to use the horizontal ruler which is intended for this goal. Since you cannot change the markup, I’m afraid using only CSS you cannot achieve this.
It seems, it has been already discussed on other forums. Extract from Re: Setting the height of a BR element using CSS:
[T]his leads to a somewhat odd status for BR in that on the one hand it is not being treated as a normal element, but instead as an instance of A in generated content, but on the other hand it is being treated as a normal element in that (a limited subset of) CSS properties are being allowed on it.
I also found a clarification in the CSS 1 specification (no higher level spec mentions it):
The current CSS1 properties and values cannot describe the behavior of the ‘BR’ element. In HTML, the ‘BR’ element specifies a line break between words. In effect, the element is replaced by a line break. Future versions of CSS may handle added and replaced content, but CSS1-based formatters must treat ‘BR’ specially.
photo via flickr (credit)
In what situations is it more appropriate to use an HTML IMG tag to display an image, as opposed to a CSS background-image, and vice-versa?
Single-reason answers are welcome, but I’m hoping eventually to see a consolidated list of scenarios, rationales, etc. that can be used as a best-practice guide for making this kind of GUI design decision. Or rather, two lists: Pro and Con.
Factors may include accessibility, browser support, dynamic content, or any kind of technical limits or usability principles.
Pro and Con lists:
IMG plus alt attribute if the image is part of the content such as a logo or diagram or person (real person, not stock photo people).IMG if you intend to have people print your page and you want the image to be included by default.IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.IMG if you rely on browser scaling to render an image in proportion to text size.IMG for multiple overlay images in IE6.IMG with a z-index in order to stretch a background image to fill its entire window.img instead of background-image can dramatically improve performance of animations over a background.background-image if you intend to have people print your page and you do not want the image to be included by default.background-image if you need to improve download times, as with CSS sprites.background-image if you need for only a portion of the image to be visible, as with CSS sprites.
photo via flickr (credit)
Most popular:
Adobe Kuler is widely considered to be the best color palette selector out there, as it also lets you share color palettes other users have created. Sign in, click create, and you’ll have options including “complementary” that give you a good starting point if you have one color in mind.
Others in alphabetical order:
photo via flickr (credit)
Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), was shown to provide accurate, resizable text across all browsers in common use today. This is a technique you can put in your kit bag and use as a best practice for sizing text in CSS that satisfies both designers and readers.
via AListApart
%: Some browsers doesn’t handle percent for font-size but interprets 150% as 150px. (Some NN4 versions, for instance.) IE also has problems with percent on nested elements. It seems IE uses percent relative to viewport instead of relative to parent element. Yet another problem (though correct according to the W3C specs), in Moz/Ns6, you can’t use percent relative to elements with no specified height/width.
em: Sometimes browsers use the wrong reference size, but of the relative units it’s the one with least problems. You might find it interpreted as px sometimes though.
pt: Differs greatly between resolutions, and should not be used for display. It’s quite safe for print use tough.
px: The only reliable absolute unit on screen. It might be wrongly interpreted in print though, as one point usually consist of several pixels, and thus everything becomes ridiculously small.
display:none means that the the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags. Visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page.
As a general rule, PNG is never worse, and often better than GIF because of superior compression. There might be some edge cases where GIF is slightly better (because the PNG format may have a slightly larger overhead from metadata) but it’s really not worth the worry.
It may just be the tools I’m using, but GIF files usually seem to be a bit smaller than a comparible PNG
That may indeed be due to the encoding tool you use.
There’s nothing wrong with GIFs for images with few colours, and as you have noticed they tend to be smaller.
This is a typical encoding mistake and not inherent in the format. You can control the colour depth and make the PNG file as small. Please refer to the relevant section in the Wikipedia article.
If you need transparency and can get by with GIFs, then I’d recommend them because IE6 supports them. IE6 doesn’t do well with transparent PNGs.
That’s wrong. MSIE6 does support PNG transparency. It doesn’t support the alpha channel (without a few hacks), though but this is a different matter since GIFs don’t have it at all.
The only technical reason to use GIFs instead of PNGs is when use need animation and don’t want to rely on other formats.
The short answer is:
@import url("base.css");
Howerever, bare in mind that every @import statement is a new request to the server. This might not be a problem for you but when optimal performance is required you should avoid the @import. Think twice!!! Do you even need to have 5 stylesheet files.
You've arrived on the "Advanced CSS/HTML Explained" weblog. Here you will find how can you tackle the more difficult topics of Cascading Style Sheets: Floating theory, Forms, Tables, Navigation elements, CSS Positioning. Also you will find lots of Resources, Tutorials, Articles, and Tips, Tricks Tools, and Techniques on CSS.
