CSS Floats
Tuesday, November 18th, 2008What Floats?
You can’t float every element on a Web page. To get technical, you can only float block-level elements. These are the elements that take up a block of space on the page, like images (), paragraphs (
), divisions (
), and lists (
). Other elements that affect text, but don’t create a box on the page are called inline elements and can’t be floated. These are elements like span (), line breaks (
), strong emphasis (), or italics ().
Where Do They Float?
You can float elements to the right or the left. Any element that follows the floated element will flow around the floated element on the other side.
For example, if I float an image to the left, any text or other elements following it will flow around it to the right. See the example. And if I float an image to the right, any text or other elements following it will flow around it to the left. See the example. An image that is placed in a block of text without any float style applied to it will display as the browser is set to display images. This is usually with the first line of following text displayed at the bottom of the image. See the example.
How Far Will They Float?
An element that has been floated will move as far to the left or right of the container element as it can. This results in several different situations depending upon how your code is written. For these examples, I will be floating a small
* If the floated element does not have a pre-defined width, it will take up as much horizontal space as required and available, regardless of the float. Note: some browsers attempt to place elements beside floated elements when the width isn’t defined - usually giving the non-floated element only a small amount of space. So you should always define a width on floated elements.
* If the container element is the HTML
* If the container element is itself contained by something else, the floated div will sit on the left margin of the container.
* You can nest floated elements, and that can result in the float ending up in a surprising place. For example, this float is a left floated div inside a right floated div.
* Floated elements will sit next to each other if there is room in the container. For example, this container has 3 100px wide divs floated in a 400px wide container.
You can even use floats to create a photo gallery layout. You put each thumbnail (it works best when they are all the same size) in a DIV with the caption and the float the divs in the container. No matter how wide the browser window is, the thumbnails will line up uniformly.
Turning Off the Float
Once you know how to get an element to float, it’s important to know how to turn off the float. You turn off the float with the CSS clear property. You can clear left floats, right floats or both:
clear: left;
clear: right;
clear: both;
Any element that you set the clear property for will appear below an element that is floated that direction. For example, in this example the first two paragraphs of text are not cleared, but the third is.
Play with the clear value of different elements in your documents to get different layout effects. One of the most interesting floated layouts is a series of images down the right or left column next to paragraphs of text. Even if the text is not long enough to scroll past the image, you can use the clear on all the images to make sure that they appear in the column rather than next to the previous image.
Images floated to the left and to the right.
The HTML (repeat this paragraph):
Duis aute irure dolor sed do eiusmod tempor incididunt in reprehenderit in voluptate. Cupidatat non proident, ut labore et dolore magna aliqua.
The CSS (to float the images to the left):
img.float { float:left;clear:left; margin:5px;}
And to the right:
img.float { float:right;clear:right; margin:5px;}
Using Floats for Layout
Once you understand how the float property works, you can start using it to lay out your Web pages. These are the steps I take to create a floated Web page:
* Design the layout (on paper or in a graphics tool or in my head).
* Determine where the site divisions are going to be.
* Determine the widths of the various containers and the elements within them.
* Float everything. Even the outermost container element is floated to the left so that I know where it will be in relation to the browser view port.
Starting to Position with CSS
Tuesday, November 18th, 2008Once you have a series of
1. Set a width on your body
You don’t have to do this, but most pages are easier to read if you don’t assume that everyone will have their browser set to the same settings as your browser. I like to design for 1024×768 resolution, with a typical width of around 800px. However, I also have done fluid widths using percentages. It’s all up to you.
2. Float everything
Once you have your maximum width, then you can float everything on the page, and have it line up. For example, if you want your navigation
But if you wanted it to be on the right side, you’d make it a width of less than 100% and float right.
Then, anything that comes after it would be floated left, and as long as those elements had a smaller width than 600px (800 - 200), they would slide right in to the left of the navigation.
3. Use floats to create margins
One of the great things about floats is that you can use them to create margins without using CSS. For example, if my navigation is on the right and 200px wide and my body content is floated left and 580px wide, there will be a 20px margin between the two elements, without any margin tags at all.
4. Get multiple columns by nesting
If you want three columns, you create two divs that float left and right, and then in the wider div, you create a second set of two columns that float left and right inside it. HTML
CSS (note that the inner divs have a width of 50% because they are half of the outer container, which is the “leftside” div:
5. Test in multiple browsers
While this technique works most of the time, some browsers react strangely to floats. You may have to play with the widths to get your elements to show up correctly.
Grid Designs Don’t Have to Equal Boring
Tuesday, November 18th, 2008The problem is, most beginning designers feel that designing on a grid is boring. And it definitely can be. This is especially true if you use the grid as a mandate to fill in every square of the grid with something. The point of a grid is not as a way to fill up space, but to help you organize the space you have.
The trick to using grids in your layout is two-fold:
* Create the grid, with as many sub-divisions as you need, and then stick with it. Don’t add random lines after you’ve created your grid. The benefit to a grid is the uniformity of it.
* Place your elements on the grid lines, and make sure they fit the width and height of your grid lines. The most effective designs use the grid in balanced but not 100% symmetrical layouts.
Once you understand how to set up your pages using a grid system, then you can start moving away from the rigid grids to create more elegant websites that work even if you can’t see the grid at first glance.
Many Designs Use Grids
Tuesday, November 18th, 2008Interior designers design rooms with grids. City planners design metropolitan areas on grids. And print designers design print layouts on grids. If you use a grid to design your Web page layout, you’ll create designs that look right and feel comfortable to most people.
How can you fight spam on your blog?
Saturday, November 15th, 2008MT 3.3 offers a built-in spam protection plugin called SpamLookup. In addition to this plugin, there are several other options you can implement to help stem the tide of spam. Note that the spammers are constantly improving their methods to game the system, requiring constant vigilance on the part of the MT community to keep coming up with new ways to block them.
* SpamLookup
SpamLookup is a Movable Type plugin, developed by Brad Choate, that uses several techniques to identify spam, and then uses user-supplied choices to either moderate or block it. SpamLookup is an integrated part of MT 3.3, so if you have installed the latest version of MT, there is nothing more you need to install. SpamLookup utilizes several blacklist services to check incoming comments and trackbacks against known spammers. It allows you to either “junk” or moderate comments and trackbacks based on different settings for links and keywords. You can even “white list” domains or IP addresses. To adjust the settings on SpamLookup, simply open up your Plugins menu from the System Overview of your Movable Type editing window. Scroll to the bottom and select “Show Settings” from any of the SpamLookup modules. See Neil Turner’s suggestions on Making the Most of SpamLookup and David Philip’s SpamLookup’s Keyword Filter Explained for more information on how to best use this plugin.
* Akismet
Akismet is a distributed spam filtering service developed by the Wordpress community. According to the Akismet FAQ, the way it works is “When a new comment, trackback, or pingback comes to your blog it is submitted to the Akismet web service which runs hundreds of tests on the comment and returns a thumbs up or thumbs down.” MT developer Tim Appnel has created an MT plugin for Akismet (MT-Akismet) which can be downloaded from the Akismet website. Many have found Akismet to be more effective at catching spam than SpamLookup.
* Comment Challenge
Jay Allen’s Comment Challenge plugin requires a commenter to type a keyword into a separate field from the comment field in order for the comment cgi script to run. This plugin effectively halts automatic computer generated spam comments.
* Use a “Captcha”
A captcha is a security code that a commenter must enter in order for her comment to load. The benefit is that it screens out automated comment spam bots. The downside is that it keeps visually disabled people from easily contributing a comment. Arvind has released an SCode plugin to work with MT 3.2 - MT-SCode 1.0.
* Require approval before a comment posts
One way to ensure that your readers never have to see a spam message is that you personally approve comments before they are posted. MT3 has the comment moderation features built-in. (See Settings > Feedback > check “Immediate publish comments from No one”.)
Close old comments.
One way to cut down on blog spam is to reduce the opportunities by closing the ability to comment on blog posts older than X number of days. Mark Carey’s BlogJanitor plugin lets you do just that, and all automatically.
Types of Blog Spam
Saturday, November 15th, 20081. Basic comment spam. The spammer leaves a short uneventful message in a comment field in one of your entries. The spam comes from the URL placed in the comments URL field. These URLs link back to every conceivable scam.
2. Comment spam flooding. The spammer uses an automated computer bot to flood your blog with comment spam messages, up to hundreds in an hour. The spammer doesn’t necessarily leave a URL, but can leave garbage messages, almost like a graffiti artist. The comment spam can put a severe load on the server hosting your blog software to the point that it crashes.
3. Trackback Spam. Spammers have discovered how to take advantage of Trackback. TrackBack spam is very similar to comment spam. The spammer sends TrackBack pings to your site that direct viewers to a totally unrelated URL.
4. Referral spam. The spammer links to your site from their site, and then pings your site through their link, thus creating a reference and link to their site on the statistics referral log of your website. When you are reviewing your stats and see the reference to an odd site (ex. Paris Hilton), clicking on the link takes you to their site. Many people list “referrals” on their site publicly, so by spamming referral logs, not only does the spammer get a link on your referral log (which is picked up by Google) but may even get a link on your main page.
Introducing Firefox
Saturday, November 15th, 2008Firefox is a browser that belongs in the Mozilla family. It has been gaining increasing popularity and has a large user base due to its ease of use and speed. Below I have outlined some of the features that Firefox has that Internet Explorer does not.
Feature List and explanations:
* Tabbed Browsing - This feature allows you to open up new web sites or web pages in the same browser window that you are currently viewing.
* Pop-up Blocker - Firefox comes with a built in pop-up blocker. If you enable this feature then by default Firefox will block all pop-ups that may occur. If you would like to allow popups from certain sites, then you can configure the pop-up blocker to allow them from that site.
* Extensions- These are pieces of software that you can install that extend the functionality of the program. Extension range from a Google toolbar to a myriad of card games. They are similar in function to ActiveX controls for Internet Explorer.
* Profile Manager - This will allow you to create different profiles, each with their own bookmarks, cookies, and settings, for users who use Firefox from the same account.
What are the advantages of using Firefox?
Saturday, November 15th, 2008Security
While no browser is 100% secure Mozilla Firefox has much better security than Internet Explorer. Firefox does not support Activex which is a tool that can be used with good and bad intentions. Activex allows web sites to have more access to Windows. As a result of this, cyber criminals have taken advantage of it. This means that viruses and spyware (and sometimes other types of malware as well such as adaware) can take advantage of it, resulting in these programs ending up on the visitors computer (if using Windows at the time). Spyware is any piece of software that silently gathers information about a user while he/she navigates the Internet and transmits the information to an individual or company that uses it for marketing or other purposes.
Spyware and other types of Malware usually do not target Firefox, but there is some out there that will also get Firefox, but it is rather unlikely that a Firefox user would get it. Unless for example they install loads of extensions from all kinds of web sites.
If a Firefox user has the cache turned on a Trojan can end up in it. A cache is an amount of space in which Firefox uses to temporarily store images and other files from sites so you can load the page up quicker if you chose to go back and view the page again. You can turn it off by going to “Tools” then “options” click on the “privacy” tag and then the “cache” tag set the amount of MB’s it’s allowed to use to “0″. However a Trojan just sit their in the catch and will not do anything unless the user actually opens it. If you have a virus scaner (like AVG) it will be able to remove trojans and worms from your computer.
Spyware, viruses, and other things like this are usually only a Windows issue. In fact viruses aren’t really an issue with other operating systems such as Linux. Linux is known to be very secure and virus free. However some viruses were made for Linux, but they were never distributed out of the lab. Ubuntu is a popular and rather good Linux distribution for beginners. It is worth checking out and especially if you have had enough of Windows and it’s many problems such as it’s very bad security. Linux is very stable and does not just crash like Windows does for some users. (Personally my PC never crashes, but I’ve had some problems before.)
With popular free open source programs such as Firefox, or Linux distributions. Any security issues are fixed very quickly. Unlike for example a software company like Microsoft were it can take years before a security issue has been fixed. That is of course if it ever gets fixed!
Speed
Simply put, Firefox uses less resources, loads pages faster, and can be tweaked to make best use of your computer. There are guides and tools that can help you get the most out of it. Also note that the Gecko Rendering Engine engine is always being updated as new versions of Firefox come out.
Customizations
Because of the Extension/Theme compatibility that is programmed into Firefox you can just about make it able to do or http://www.seo.tryangled.com/aboutus.php, provided someone has made an Extension/Theme to match your tastes.
You can get very nice Mozilla Firefox and Mozilla Thunderbird themes from http://www.spuler.us
Compatibility
It is, because of Internet Explorer’s huge market share and lack of web standards support that it holds the whole web back from becoming a lot better. Yes lack of web standards support as in lack of being able to support web page coding that standards compliant browsers such as Firefox, and others that also use the Gecko Rendering Engine Rendering Engine to display web pages with can support. There are also some other standards compliant browsers that do not use the Gecko Rendering Engine Rendering Engine to display web pages with.
Finding Your CSS Styles in wordpress
Tuesday, November 11th, 2008Designing any website, as well as WordPress Themes, the smallest detail in the layout and design can send even the most expert web page designer into fits. Since you probably aren’t a top-notch CSS and HTML expert, how about I show you the tricks they use for finding their CSS styles and tweaking those little bits and pieces into shape.
A web page is generated using a combination of HTML tags which basically hold the structural frame work of the web page, and a style sheet which provides instructions to those tags on how to look and where to put themselves. Going through a style sheet to find the solution to your problem isn’t as easy as it looks. But tracking down the style sheet reference inside of the web page and HTML tags is actually easier than you think. It’s a matter of tracking down the culprit by narrowing the suspects.
View Source of Web Page CodeView the trouble causing page in your browser. Look closely where the trouble maker is and note any text near the problem area. From the browser menu, choose View > Page Source. This will bring up a new window with the code behind your web page. Now, using your “find” (CTRL+F), search for the key text you spotted nearest your problem.
Two Different Ways To Use WordPress
Monday, November 10th, 2008Photoblog
Monotone Photolog Theme for WordPressBecause it is very simple to upload images with WordPress soon users started to regularly post photos, using WordPress as a photoblog. Until the release of WP2.5 photobloggers had to use the custom fields to upload thumbnails for the archive or to create a filmstrip in the footer. With the new media uploader in WP2.5 this is not longer needed. WP now automatically generates a medium sized and a small thumbnail. Thumbnail sizes can be specified in the settings and used for the archives display or a filmstrip.
There aren’t many photolog themes for Wp and even less generate the photolog feeling with only one picture on the mainpage and a click on the picture goes to the previous entry. With the arrival of the Monotone Photolog Theme for WordPress theming in this area soon make become more popular. AFAIK Monotone officially is only released for WordPress.com, but can be retrieved from the SVN Directory.
Tumblelog
T1 Tumbletheme for WordPressTumblr is a popular platform, perfect for quick blogging items people stumble upon. I mentioned in my previous entry that Chyrp a great self-hosted platform is for your own tumblog (?!), but also WordPress can be used as tumble-engine.
Using WordPress as a tumblelog is not difficult: there are several themes to make your Wp blog more tumblr-alike and there’s even a Quick Post plugin for WordPress, providing the blogger with bookmarklets to easily submit content to their WordPress powered tumblelog.
-
Blog Tryangled Solutions
URL: blog.tryangled.com
Site-Rank: 0.50100
Yahoo backlinks: 178
Alexa rank: 1429691
All the Web links: 548 (+93)
Altavista links: 543 (+88)
Pages in Google: 2870 (+320)