Zoom
Trash
Related:
Free CSS Template Code Generator - Maker for 3 Column Layout (tableless) This HTML - CSS template generator yields a three column layout without using any Tables. This HTML & CSS Style Sheet template generator outputs a full featured 3 column template. Resulting in an instant web page with a customized template that can be used to control the look n feel of an entire site. The resulting CSS web template is not just a static template because the visitor can modify setting until he/she is happy with the design. Therefore, the template generator serves as a full function HTML - CSS editor for the popular 3 column layout. This is the perfect startup page for webmasters that are ready to move to a CSS column layout instead of the older (outdated) table layout. In this template generator, the user enters colors, size, width, banner, etc into a form that generates a complete template. Basic Settings: Font Size, Font Style, Font Color and Border Color Banner: Height, Color, Header Image and Border.
Nifty Corners Update This is the original article. The technique has been improved with better browser support and a lot of new features. Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of articles on them. Stripe it to get it rounded The basic idea of Nifty Corners is to get some coulored lines to get the rounded effect. And here's it the basic CSS: You can see the final effect on this simple example. The technique works even on floated, absolute positioned or percentage-width elements. Known bugs are: text-indent won't work on the element that has been rounded in Opera, and IE (both Mac & version 6 PC) would mess up on floated elements without specific width. The support should be extended to all modern browsers: the technique has been tested with success in Internet Explorer 6, Opera 7.6, FireFox 1.0, Safari 1.1 Mac IE. Easy, isn't it? Looking forward with DOM In the example we saw how to get rounded corners without images, sparing about 6-8Kb of page weight.
Putting Flickr on Rails - NetBeans IDE 6.0 Tutorial The page you requested was not found. Please use the navigation tabs at the top, or try searching. It looks like you arrived here by following a link on a netbeans.org page - please notify the NetBeans webmasters so they can fix this. If you were looking for an article about an older release of NetBeans, it may have been archived - check the list of archived documentation. <ul><li>If you arrived here by following a link on a netbeans.org page, <a href=" If you wanted to download NetBeans IDE and it failed, please try to clear your browser's cache and try again. SiteTimer About SiteTimer For more generic/non technical information about OctaGate SiteTimer, please see this version of the page. Technical Details About SiteTimer (it uses AJAX!) Unless you're familiar with AJAX , you might want to read this page about AJAX first. There are currenly one SiteTimer server, located in Stockholm (Sweden) that performs the actual page downloads. As the user clicks the "Start Monitor" button, an AJAX request is sent to the SiteTimer server, requesting a new monitor. Referrer Checkup As you enter the OctaGate SiteTimer page, the page actually makes an AJAX call to determine if you came from a AJAX page that mentions AJAX or not. If this page determines that you came from an AJAX page, a link appears under the search box suggesting that you might want more information about AJAX. You can try it for yourself, here are two pages that both link to OctaGate SiteTimer, one mentions AJAX and the other doesn't:
CSS Design: Taming Lists As early as July of 1999 I was pontificating on email lists about the virtues of style sheets. Some things never change. Article Continues Below What has changed is how I think about CSS, and the underlying structure of (X)HTML to which it is applied. Of course the reason that we don’t mark them up in that way is that we don’t want a bullet in front of every link in our navigation area. In this article, I’ll demonstrate how to use CSS to bring unwieldy lists under control. Setting the stage#section2 For purposes of this article, I am using unordered lists. <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5 we'll make a bit longer so that it will wrap</li></ul> Each list is simply placed inside a different DIV, and the CSS is written so that the list’s behavior is determined by the DIV it is in. Without any additional styles applied, the list is rendered in this way in the base DIV: Item 1Item 2Item 3Item 4Item 5 we’ll make a bit longer so that it will wrap
Spritebox - Create CSS from Sprite Images CSS Design: Creating Custom Corners & Bo We’ve all heard the rap: Article Continues Below “Sites designed with CSS tend to be boxy and hard-edged. Where are the rounded corners?” Answer: the rounded corners are right here. In this article, we’ll show how customized borders and corners can be applied to fully fluid and flexible layouts with dynamic content, using sound and semantically logical markup. The markup#section2 In the example markup below, XHTML line breaks have been inserted to pad out dummy paragraphs: <h2>Article header</h2><p> A few paragraphs of article text. If we examine the markup, we’ll see that we have given ourselves at least five hooks, which is all we need to place customized graphics in each of the four corners (and left side) of our article. See Step 1 — primary markup. The design#section3 First let’s decide on some basic layout parameters. “I want the borders and corners to look something like this,” he said. “Could you leave that open, or make it so that it’s easy to change?” The process#section4
Heroku Data Tables and Cascading Style Sheets Gallery What is this about? The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results. Every once in a while there are emails on discussion lists asking for nicely designed tables and they are prone to go off-topic and ending in a holy war why tables are bad and why you shouldn't use them. Basically the thread/email that gave me the idea was this request on the evolt list. Well, there are legitimate uses for tables, for tabular data they are the best solution, as - properly marked up - they structure the data for the visual user and make it easy to follow for blind visitors or those using user agents without table rendering. There are some good tutorials on styling tables on the web already, but a showcase site was missing, so here you go. Table and CSS tutorials May the following off-site resources give you wisdom and inspiration: Most blatantly stolen from Laura L.
Most used CSS tricks Earlier before I have written an article about current best CSS hacks which you can see here And now here’s the list of today’s most used CSS tricks – tips. I have added image examples for most of them because of critics on CSS hacks article. If you think I have missed any please let me know 1. Rounded corners without images 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12.
Sky CSS Tool Tools : Spanky Corners -- The SitePoint Corners Store Generator To use the generator select your preferred foreground color (hex), background color (hex), corner radius (pixels: 5-60) and hit 'Spank Me!'. The generator will reload 'wearing' your selection while providing you 4 corner GIFs, the basic CSS and the HTML to obtain the effect. Or if you're lazy, try these preset values. Spanky Corners What? 'Spanky Corners' is an experimental technique for using only CSS to produce 'round-cornered content boxes' with semantically pure markup. Why? SpankyCorners has a number of advantages over alternative rounded corners methods. Spanky requires no extra HTML markup to act as 'CSS hooks'. News We're always happy to hear any feedback/suggestions for Spanky via this blog entry. Update: 8 May, 2006: Fixed a Firefox 1.0 render bug which was making the site look wacky. Update: 3 May, 2006: Solved the IE6 scaling problem. Update: 28 April, 2006: A few changes. Update: 15 April, 2006: Updated the way the images are generated and the code algorithms.
10 Useful Web Application Interface Techniques - Smashing Magazi Advertisement Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now! More and more applications these days are migrating to the Web. In the past we didn’t cover web applications the way we should and now it’s time to take a closer look at some useful techniques and design solutions that make web-applications more user-friendly and more beautiful. You may want to take a look at the following related articles: 1. Simplicity is important in user interface design. When you click on the search link in Kontain’s search box, a similar drop-down menu appears. One way of making things simpler is to hide or conceal advanced functionality. When you click on the search link in CollabFinder, you aren’t taken to a different page. 2. Another good example of this are sliders. 3. 4. 5. 6. 7. 9. 10. (al)
Starting with HTML + CSS This short tutorial is meant for people who want to start using CSS and have never written a CSS style sheet before. It does not explain much of CSS. It just explains how to create an HTML file, a CSS file and how to make them work together. After that, you can read any of a number of other tutorials to add more features to the HTML and CSS files. Or you can switch to using a dedicated HTML or CSS editor, that helps you set up complex sites. At the end of the tutorial, you will have made an HTML file that looks like this: The resulting HTML page, with colors and layout, all done with CSS. Note that I don't claim that this is beautiful ☺ Sections that look like this are optional. Step 1: writing the HTML For this tutorial, I suggest you use only the very simplest of tools. Don't use a wordprocessor, such as Microsoft Word or OpenOffice. Step 1 is to open your text editor (Notepad, TextEdit, KEdit, or whatever is your favorite), start with an empty window and type the following: <! <!