CSS from the Ground Up Introduction If you are frightened by the prospects of using Cascading Style Sheets, there's no need to be. Using a computer can be daunting for someone coming to it afresh but after a while, you think nothing of it. It all comes down to taking small steps to begin with and that's what I'm going to do in this series of tutorials. Whether you normally use a WYSIWYG editor and stay clear of that source stuff in the background or even if you have never created a Web page at all, this tutorial will set you off in the right direction. It assumes little or no knowledge of putting a Web page together. What will you need? Nothing special. Don't panic! A graphics editor is not essential because I won't be worrying too much about graphics to begin with. Oh, you will also need a browser, but that goes without saying. If you want to upload your pages to a Web server, you will need some kind of FTP program but don't worry about that for the minute, you will doing everything here on your own computer.
A List Apart: Articles: Faux Absolute Positioning There are two popular approaches to positioning with CSS: float and absolute positioning. Both approaches have their pros and cons. My teammates and I have developed a new positioning approach that gives us the best of both worlds. After quite a bit of experimenting and testing, it’s time to share the technique with the rest of the world and see how we can work together to improve it. I’m calling it “faux absolute positioning” after the faux columns technique that simulates the presence of a column. Why do we need another CSS layout technique? Article Continues Below Many website designs are based on a columnar layout with a header and footer. Our use case was even more complex: my team was developing a web-based WYSIWYG form generator that allows the user to drag items to arbitrary locations on a canvas. For example, let’s assume we want a form that puts the postal code and city fields on the same line because they are semantically connected. Next, we tried using absolute positioning.
Проверочный список для веб-стандартов - Инструменты Веб-стандарты - это большее, чем просто "бестабличная верстка" Для разных людей термин "веб-стандарты" означает разные вещи. Для некоторых это просто "страницы без таблиц", для других - "правильный код". Однако веб-стандарты это нечто намного большее. Сайт, простроенный по веб-стандартам, это сайт, который придерживается стандартов (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG и т.д.) и лучших отработанных решений (валидный код, доступный код, семантически правильный код, дружественные URL-ы) Другими словами сайт, построенный по стандартам в идеале должен быть легким, чистым, основанным на CSS, доступным, удобным и дружественным к поисковым серверам. О проверочном списке Этот проверочный список не претендует на звание "супер-пупер" полного проверочного списка. как обширный список всех имеющихся веб-стандартовкак удобный инструмент для разработчиков, которым они могут пользоваться при разработке сайтовкак пособие для тех разработчиков, которые решили двигаться в направление веб-стандартов
Practical CSS Layout Tips, Tricks, & Techniques The Web Standards Project’s (WaSP) Browser Upgrade Initiative (BUI), has spurred many a designer to move towards more standards compliant web design, using CSS rather than tables for layout to save user bandwidth while enhancing underlying semantics, accessibility, and reach. “Tables are dead…”#section1 Several designers have taken Jeffrey Zeldman’s lead in posting tutorials that have helped us get over the initial hump of table-less design. The first efforts have focused on creating two or more columns using CSS positioning instead of tables, thus allowing for a (complete) separation of structure from presentation. These broader techniques have been documented and archived at Eric Costello’s glish and Rob Chandanais’ Blue Robot. Others have chimed in, including Owen Briggs’ Box lesson and Tantek Çelik’s box model hack/workaround, detailed by Eric Costello, and explained by Tantek. “...Long live tables”#section2 The question#section3 One Step at a Time#section4 And the HTML: caption 1 caption 2
Centering List Items Horizontally (Slightly Trickier Than You Might Think) - CSS-Tricks The current standard in coding menus is unordered lists. It's not as semantic as a <nav> tag would be, but it's not that bad. Navigation is, after all, a list of sorts. If you want to make this navigational unordered list horizontal, you have basically two options: Now let's make a couple common decisions about how we want to display this menu: We want the menu to be centered. Wrap the list inside a table div If we wrap the menu in a "table" div, we can solve this. Now see the very simple CSS that makes it happen: It's the table div that get the job done. View Demo Download Files Share On
Advanced CSS Layouts: Step by Step Abstract The Challenge: Replicate WebRef's front page using CSS. The Solution: CSS and lots of iterations. Rogelio Lizaolo improves on Kwon Ekstrom's CSS version of WebRef's tabled home page. Months in the making, the final design successfully duplicates WebRef's layout without the use of tables. Numerous bugs were discovered in Netscape and Internet Explorer in how they handle CSS, and we found some elegant workarounds to these and other problems. Introduction In "Evolution of a Home Page" Andy King threw down the gauntlet, challenging readers to duplicate WebRef's tabled (and fabled) home page in CSS. The ultimate goal is to create a CSS layout that exactly resembles the WebReference.com layout made with tables and also behaves well with small window sizes and large fonts. The target browsers are all the generation five and greater browsers, for both Windows and Macintosh platforms. The Layout Challenge Can this complex layout be replicated using only CSS? 3 Column Layout: Step by Step
CSS Block & CSS Inline Elements HTML elements can be displayed either in block or inline style. The difference between these is one of the most basic things you need to know in order to use CSS effectively. If you’d like to master CSS, here are the books I’d recommend! <a href=" onclick="javascript:_gaq.push(['_trackEvent','outbound-article',' Widgets</a> The 3 ways that HTML elements can be displayed All HTML elements are naturally displayed in one of the following ways: Block example <p> tags and <div> tags are naturally displayed block-style. (I say “naturally” because you can override the display style by setting the CSS display property e.g. display:inline;.) Here I’ve started a paragraph and now I’m going to insert a <div> new div inside my paragraph and then continue the text here…
Tableless layout HOWTO Abstract and status It has been advocated many times that tables shouldn't be use in HTML for layout purposes. This page shows one way to create a 3 columns layout using CSS only. Please send comments and suggestions to Dominique Hazaël-Massieux. Translations of this article are available. Introduction HTML is a structural language, which means it is - or should be - used to add structure into a text through tags. But since the apparition of tables in HTML, it has been very often used for layout purpose, usually split a web page into columns. This document describes one way to create a 3 columns layout and links to other layout techniques. Layout description The technique described below is the one used in the page for new W3C users and allows to build a 3 columns layout, with the following features: It's ideal for homepages since it allows to have a complete text in the center and nice lists of links on the side. Implementation This layout uses CSS absolute positionning.
Equidistant Objects with CSS - CSS-Tricks Creating a horizontal row of objects that are equidistant from each other is another one of those things in web design that is much more difficult than it should be. This can be a very useful thing to do, especially in fluid width layouts when you are trying to make the most of whatever horizontal space you have. Here are the goals we are trying to achieve: The left-most object is left aligned with it's parent element.The right-most object is right aligned with it's parent element.Each object is equidistant from one another at all times.The objects will stop short of overlapping each other as the browser window narrows.The objects will not wrap down as the browser window narrows.The technique will work in a fluid width environment. Even one that is centered. I tried a number of different techniques to try and achieve this. FAIL: Give each object a percentage left position First I gave each image a unique class: Then I gave percentage-based left positioning to each of those classes: Demo:
Top 50 Best CSS Articles and Resources Top 50 Best CSS Articles and Resources January 11th, 2009 | Design | Modern web design is not possible without Cascading Style Sheets (CSS). This post features a collection of the best articles and resources dedicated to CSS techniques, tips, hacks, tools, and tutorials. CSS Tips and Techniques - Push Your Web Design Into The Future With CSS3 [Smashing Magazine] - CSS Typography: Contrast Techniques and Best Practices [Noupe] - Powerful CSS Techniques for Effective Coding [Smashing Magazine] - 4 Uber Cool CSS Techniques for Links [Css Globe] - 10 Principles of the CSS Masters [NETTUTS] - 12 Principles For Keeping Your Code Clean [Smashing Magazine] - 101 CSS Techniques Of All Time - Part 1 [Noupe] - Resetting Your Styles with CSS Reset [Six Revisions] - 53 CSS Techniques You Couldn’t Live Without [Smashing Magazine] - 101 CSS Techniques Of All Time - Part 2 [Noupe] - Structural Naming Convention in CSS [Six Revisions] - 10 Challenging but Awesome CSS Techniques [NETTUTS] CSS Templates and Layouts
Vertical Centering With CSS There are a few different ways to vertically centre objects with CSS, but it can be difficult to choose the right one. I’ll show you all the best ways I’ve seen and also how to create a nice little centered website. Vertical centering with CSS isn’t an easy thing to do. There are many different ways that may not work in some browsers. Let’s review 5 different ways to vertically centering objects, as well as the pros and cons of each method. (You can see my test page briefly explaining all of them.) Method 1 This method sets some <div>s to display like a table, so we can use the table’s vertical-align property (which works very differently for other elements). <div id="wrapper"><div id="cell"><div class="content"> Content goes here </div></div></div> The Goods The content can dynamically change height (doesn’t have to be defined in CSS)Content doesn’t get cut off when there isn’t enough room in the wrapper The Bads Method 2 Works in all browsersDoesn’t require nested tags Method 3 Method 4 Easy <!
A circular menu with circular sub menus Date : 10th November 2008 For all modern browsers Information A follow on from the simple single level circular menu, this one adds a sub menu level of smaller icons in a circular pattern within the top level circle. Tested in IE6, IE7, Firefox, Opera, Safari (PC) and Google Chrome. The icons are taken from the Milky set. If you want a zip file of this menu then please email me, but check the requirements in the copyright information below. Copyright Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright. Terms and Conditions This demonstration can be used subject to the following terms and conditions.
Learn CSS Positioning in Ten Steps: position static relative absolute float 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.