.htaccess Tutorial Introduction In this tutorial you will find out about the .htaccess file and the power it has to improve your website. Although .htaccess is only a file, it can change settings on the servers and allow you to do many different things, the most popular being able to have your own custom 404 error pages. .htaccess isn't difficult to use and is really just made up of a few simple instructions in a text file. Will My Host Support It? This is probably the hardest question to give a simple answer to. A good sign of whether your host allows .htaccess files is if they support password protection of folders. What Can I Do? You may be wondering what .htaccess can do, or you may have read about some of its uses but don't realise how many things you can actually do with it. Creating A .htaccess File Creating a .htaccess file may cause you a few problems. Warning Before beginning using .htaccess, I should give you one warning. Custom Error Pages Part 2 © 1999 - 2001 David Gowans
Mastering CSS Coding: Getting Started Advertisement CSS has become the standard for building websites in today’s industry. Whether you are a hardcore developer or designer, you should be familiar with it. Overview: What We Will Cover Today We’ll start with what you could call the fundamental properties and capabilities of CSS, ones that we commonly use to build CSS-based websites: Once you are comfortable with the basics, we will kick it up a notch with some neat tricks to build your CSS website from scratch and make some enhancements to it. 1. Most beginners get padding11 and margins12 mixed up and use them incorrectly. What Is Padding and Margin? Padding is the inner space of an element, and margin is the outer space of an element. The difference becomes clear once you apply backgrounds and borders to an element. Take a look at the visual below: Margin and padding values are set clockwise, starting from the top. Practical example: Here is an <h2>heading between two paragraphs. Margin and Padding Values Quick Tip 2. 3. 4. 5. 6. 7.
Wildly useful free Web development programs | C82: Words of Nicholas Rougeux There are probably tens if not hundreds of thousands of programs out there for almost anything you can imagine and a small portion of those are geared solely toward Web development but they're not all top notch. Now, when I refer to Web development, I mean all sides of it including graphics, coding, and everything else. Sure, there are the usual players like the Adobe/Macromedia products but what I enjoy the most are the small free programs that someone made in their free time and decided to release to the world in case anyone else might need them. These sometimes require some hunting down to find and can be well worth it. I've been involved in Web development since 2000 but not seriously and professionally until a little over a year ago. I should mention that most of the programs I'll be covering here will, as far as I know, work on machines running Windows. Firefox Before the groaning starts, anyone who's a Web developer knows that this is an essential tool. Web developer toolbar
Border CSS Border, our personal favorite CSS attribute, allow you to completely customize the borders that appear around HTML elements. With HTML, it used to be impossible to place a border around an element, except for the table. CSS Borders let you create crisp, customized border styles with very little work, compared to the antiquated methods of HTML. There are numerous types of border styles at your disposal. CSS Code: Display: This is a solid border This is a double border This is a grooved border This is a dotted border This is a dashed border This is an inset border This is an outset border This is a ridged border This is a hidden border This is probably obvious, but the default border-style setting for an element is hidden. To alter the thickness of your border use the border-width attribute. This paragraph has a solid border with a "thick" width. Now for the creative aspect of CSS Borders! This paragraph has a solid border with a color of "blue". This only has a bottom border Try it out!
Mike Davidson - Make Your Site Mobile-Friendly in Two Minutes After checking out B. Adam Howell’s excellent IYHY.com site a couple of weeks ago, I thought it might be a good idea to write a little tutorial about how to make your entire site more mobile-friendly without even touching your pages. You may think that since you write valid code and separate structure from presentation at all times, your site already works great on mobile devices. You may also think bad things don’t happen to good people. In both cases, you’d be wrong. The fact of the matter is that the state of HTML rendering in the wireless world is all over the map right now. What’s really needed until HTML/CSS/JS support is improved in mobile devices is a little server-side filtering. And you know what? Four easy steps Outlined below are the four steps to get this done in a matter of minutes, provided you are in an Apache environment and can run PHP. Step 1: Set up a domain mirror Step 2: Create global_prepend file Changes all URLs to “mobile”-ized URLs. <br /> <? A look at the results
Readable CSS - Web developer guide Go to Previous Section:SelectorsThis is the 6th section of the CSS Getting Started tutorial; it discusses the style and grammar of the CSS language itself. You change the way your sample CSS file looks, to make it more readable. Information: Readable CSS You can add white space and comments to your stylesheets to make them more readable. White space White space means actual spaces, tabs and new lines. In the context of page layout and composition, white space is the portion of a page that is left unmarked: margins, gutters, and space between columns and lines of type. Your sample CSS file currently has one rule per line, and almost the minimum of white space. The layout you choose is usually a personal preference, but if your stylesheets are part of shared projects, those projects might have their own conventions. Examples Some people like the compact layout that we have been using, only splitting a line when it becomes very long: Some people prefer one property-value per line: Example
HowTo: Drupal 7 Sub-Theme Creation, Step-by-Step | Open Source CMS Pro Sub-themes rock. Learn how to use this theming technique and your life — at least your Drupal theme related life — will improve markedly. Sub-themes make it possible for you to customize existing Drupal themes without hacking the code of the original theme, and they make the creation of new themes simpler by letting you start with a base theme and build on it, thereby saving you valuable time and avoiding the need to re-invent the wheel. But perhaps I am getting ahead of myself — for those of you who are new the Drupal, the concept of sub-themes may not be familiar, so, let’s take one step back and start at the beginning: A sub-theme is simply a theme that is based on another theme. For two reasons: First, sub-themes inherit properties from the original theme (commonly known as the “base theme”). If that’s not immediately clear to you, think of it this way: The steps involved in creating a new sub-theme go like this: Make a copy of the base theme directory & its contents Update the file
Dive into Flexbox Introduction Flexbox is a new layout mode in CSS3 that is designed for the more sophisticated needs of the modern web. This article will describe the newly-stablized Flexbox syntax in technical detail. Browser support is going to grow quickly, so you’ll be ahead of the game when support is wide enough for Flexbox to be practical. Read on if you want to know what it does and how it works! Why is Flexbox needed? Authors have long been using tables, floats, inline-blocks, and other CSS properties to lay out their site content. Specification Status and Browser Support The Flexbox specification has been a work in progress for over 3 years. Flexbox Specification Timeline: July 2009 Working Draft (display: box;)March 2011 Working Draft (display: flexbox;)November 2011 Working Draft (display: flexbox;)March 2012 Working Draft (display: flexbox;)June 2012 Working Draft (display: flex;)September 2012 Candidate Recommendation (display: flex;) Browsers are adopting Flexbox quickly. gistfile1.css order
Write a well structured CSS file without becoming crazy Big CSS files can be complex to manage but a good structured code can help you to make your life simpler. This is a descriptive post about how to write a well structured CSS file. I already spoken about code readability in CSS files, but after several most specific requests about this argument (mainly about the difficult of some readers to manage CSS file with a big quantity of layout elements), I decided to illustrate the process I use in these cases. I experienced, proceeding without "order" or a clear vision about what you want to realize can be harmful and you risk to add, change, remove classes and properties, with the only result to have untidy code with a lot of unused elements on your final product. Before you start writing directly CSS code, I suggest you to prepare a "draft" with all sections your site will have. 1. Be simple Avoid everyting is not strictly necessary. Don't write a "book" about a div ID called #column-left. Let's go. body, h1, h2, h3, p, ul, li, form - Yahoo!
"Old" Flexbox and "New" Flexbox Just so everyone is clear on this: "Flexbox" (more specifically: CSS Flexible Box Layout Module) has undergone a lot of changes in the last three years. Changes both to the spec and what browsers have implemented. How To Tell If you Google around about Flexbox, you will find lots of outdated information. Here's how you can quickly tell: If you are looking at a blog post (or whatever) about Flexbox and you see display: box; or a property that is box-{*}, you are looking at the old 2009 version of Flexbox. If you are looking at a blog post (or whatever) about Flexbox and you see display: flexbox; or the flex() function, you are looking at an awkward tweener phase in 2011. If you are looking at a blog post (or whatever) about Flexbox and you see display: flex; and flex-{*} properties, you are looking at the current (as of this writing) specification. Examples of Outdated Stuff All this stuff was fantastic at the time it was created, but now is outdated: Support Demo Example of OLD syntax Share On
Hover.css - A collection of CSS3 powered hover effects All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours. Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place. Licenses Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. Personal/Open Source For personal/open source use, Hover.css is made available under a MIT license: Use in unlimited personal applications Your application can't be sold Your modifications remain open-source Free updates Read full license Commercial For commercial use, Hover.css is made available under Commercial, Extended Commercial, and OEM Commercial licenses. Commercial License Purchase | Read full license Extended Commercial License