HTML Kit for more than editing HTML CSS Tinderbox WordPress Tinder A small collection of very simple WordPress template frames that can be easily customized and adpated to suit your needs. They’re built for WordPress 3.8 or later and set up to use widgets in multiple locations. CSST Simple Orange Another three column design but with the “heavy” column to the left and the other two narrow columns on the right. Screenshot / Download Zip CSST Simple Red To be totally honest, this one looks a hell of a lot like Simple Orange but with a cherry flavor though. Screenshot / Download Zip Installing A Template To install one of these WordPress templates: 1. 2. 3. As with any WordPress template, you’ll more than likely need to adjust the styles a bit to mesh with your current settings. (NOTE: Web geek tested and approved in Firefox 3.0 (Win), Firefox 2.0 (Mac), IE7 (Win), Opera 9.6 (Win), Safari 3.2 (Mac). Fixed-Width Templates Centered Box 1-Column 1-Column (2) 3-Over-4 Columns Do you want to display a fistfull of content all on the same page? 3-Column
Web colors Web colors are colors used in displaying web pages, and the methods for describing and specifying those colors. Colors may be specified as an RGB triplet or in hexadecimal format (a hex triplet). They may also be specified according to their common English names in some cases. Hex triplet[edit] A hex triplet is a six-digit, three-byte hexadecimal number used in HTML, CSS, SVG, and other computing applications, to represent colors. Byte 1: red value (color type red) Byte 2: green value (color type green) Byte 3: blue value (color type blue) For example, consider the color where the red/green/blue values are decimal numbers: red=36, green=104, blue=160 (a greyish-blue color). Note that if any one of the three color values is less than 16 (decimal) or 10 (hex), it must be represented with a leading zero so that the triplet always has exactly six digits. The number of colors that can be represented by this system is 2563 or 224 = 16,777,216. Shorthand hexadecimal form[edit] X11 color names[edit]
ie7-js - A JavaScript library to make MSIE behave like a standards-compliant browser. IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6. Current version: 2.1 beta4. IE7.js Upgrade MSIE5.5-6 to be compatible with MSIE7. IE8.js Upgrade MSIE5.5-7 to be compatible with MSIE8. You do not need to include IE7.js if you are using IE8.js IE9.js Upgrade MSIE5.5-8 to be compatible with modern browsers. You do not need to include IE7/IE8.js if you are using IE9.js The script only fixes images named: *-trans.png If you want the fix to apply to all PNG images then set a global variable as follows: var IE7_PNG_SUFFIX = ".png"; You must set this variable before including the IE7.js script. <script src="IE8.js">IE7_PNG_SUFFIX=".png";</script> The suffix will ignore query string parameters. var IE7_PNG_SUFFIX = ":"; By default, the PNG will be stretched (this simulates tiling). You may link directly to these files if you wish:
Learn CSS Positioning in Ten Steps: position static relative abs 1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Let's move div-1 down 20 pixels, and to the left 40 pixels: Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. It appears that position:relative is not very useful, but it will perform an important task later in this tutorial. 3. position:absolute When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. Let's move div-1a to the top right of the page: What I really want is to position div-1a relative to div-1. Footnotes 10.
The Float Model Problem Float model? What's that? Okay, here is a simple test concerning how static elements interact with floats. According to the W3C specifications, when a floated element is directly followed by a static element (one that is normally flowed), then first, the float will be displayed against the left edge of the containing element (in this case the 'body' element), and then the static element will also display against that same edge, and at the same vertical height as the float. The float should overlay the static element, unless the static element has a left margin that moves it out to the right, and out from behind the float. The static element might also be 'cleared' (clear:left or clear:both), which would put it below the level of the float. Details of the test The green bordered box (div#left) is floated left in the 'body', and is followed by div#static (purple box). But, because div#static is width defined, browser variance is fully evident. Why this matters IE6 is not IE5.5 Last thoughts
css Zen Garden: The Beauty in CSS Design Font family (HTML) In HTML and XHTML, a font face or font family is the typeface that will be applied by a web browser to some text. The font is relevant for the display of text on the screen, on a printer or another device. A font family and other presentation attributes of a font may be applied in HTML code in either cascading style sheets (CSS) or the deprecated HTML font element. <p class="text"> Sample text formatted with CSS in a separate stylesheet. When using CSS to apply a font whose name has whitespace in it, use quotes or single quotes to delimit the name. In CSS, a font-family (or face in HTML) consists of a set of related fonts, grouped as font families. The web browser will only be able to apply a font if it is available on the system on which it operates, which is not always the case. The font-family can use a specific named font (like Heisei Mincho W9), but the result depends on the fonts installed on the user machine.
Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8 Category - CSS Literature - Artypapers For some time I've been thinking of adding a books section to the help pile, but that always seemed sort of useless since so many books I would have posted pretty much would have been by the same person: Eric Meyer. Now, there's absolutely no reason for me to go through and attempt to re-create his biography (which for some reason I'm tempted to do) but certainly take a look at his site and pay particular attention to the section on CSS that links to many of the great resources he's made available. You can also check out the recent Web Standards Group interview: Ten Questions for Eric Meyer. (note: Obviously many, many people are aware of Eric Meyer already, so I wasn't sure if it was even necessary to mention him on the pile, but not mentioning him created this gapping hole.) Update: I added the category after all: CSS Literature
Most Practical CSS Cheat Sheet Yet - Pxleyes.com Blog There’s an abundance of CSS cheat sheets on the web, but most of them gloss over the properties designers use in day-to-day work, preferring instead the kitchen-sink approach of showing all properties. This cheat sheet was designed with a more practical philosophy, so that designers who need a quick description of a property don’t need to open a browser. Included are the following sections: selectors, the box model, positioning, text and fonts, borders and lists, and a bit of miscellany that comes in handy every once in a while. Horizontal Download PDF (486Kb): Vertical Download PDF (489Kb): Author: Ivan M Ivan M is a graphics pro.
CSS Full Screen DIV Creating a full-screen div is easy with CSS. You may also want to check out my other articles on div positioning: center screen , top right corner , bottom left corner , and bottom right corner . You can click the following link to preview this CSS in action: Click here to preview full-screen div The CSS Put this code inside the head tag: /*give the body height:100% so that its child elements can have percentage heights*/ div . fullscreen { display : block ; /*set the div in the top-left corner of the screen*/ position : absolute ; top : 0 ; left : 0 ; /*set the width and height to 100% of the screen*/ width : 100 %; height : 100 %; } </ style > This CSS sets the div at the top-left corner, and makes it fill the screen. Now, just grab the XHTML for the actual div . The HTML Place this code inside the body tag: < p > Here is my div content!! CSS Walkthrough This CSS is not too hard, but let's do a walk-through. This line doesn't change the look of the page in any way. display : block ; position : absolute ;
ie7nomore.com, just another CSS playground