Son of Suckerfish Dropdowns Single-level Dropdowns Right. Let's not beat around the bush. <ul id="nav"><li><a href="#">Percoidei</a><ul><li><a href="#">Remoras</a></li><li><a href="#">Tilefishes</a></li><li><a href="#">Bluefishes</a></li><li><a href="#">Tigerfishes</a></li></ul></li><li><a href="#">Anabantoidei</a><ul><li><a href="#">Climbing perches</a></li><li><a href="#">Labyrinthfishes</a></li><li><a href="#">Kissing gouramis</a></li><li><a href="#">Pike-heads</a></li><li><a href="#">Giant gouramis</a></li></ul></li></ul> A good wholesome structured unordered list. To set things up we need some basic styling: Note that you need to specify a width in the #nav li selector or else Opera will chuck a wobbly. We obviously need to hide the lists that we want to 'drop down' but to make things as accessible as possible we need to avoid using display: none, which, as is commonly mentioned in image replacement write-ups, hides elements from some screen readers. And there you go. Multi-level Dropdowns Examples
What Does “width: 100%” Do in CSS? It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it’s simple — just add width: 100% in your CSS declaration for that element, and your problem is solved. Not so fast. It’s not quite that easy. I’m sure CSS developers of all skill levels have attempted something similar to what I’ve just described, with bizarre results ultimately leading to head scratching and shruggingly resorting to experimenting with absolute widths until we find just the right fit. First Things First: Blocks Don’t Need 100% Width When we understand the difference between block-level elements and inline elements, we’ll know that a block element (such as a <div>, <p>, or <ul>, to name a few) will, by default expand to fit the width of its containing, or parent, element (minus any margins it has or padding its parent has). What it Really Means Should it Ever Be Used? What do you think?
Equal Height Columns with Cross-Browser CSS and No Hacks by Matthew James Taylor on 17 October 2008 Creating equal height columns with CSS is not as easy as it may first seem. This tutorial highlights the display problems that occur with multiple column layouts, and then shows a simple solution that works in all common web browsers. The method shown here is 100% CSS hack-free, image-free and JavaScript-free so it can even be used on the most strictly coded websites. For those who want some action immediately check out my demo pages: 2 column, 3 column, 4 column and 5 column. Also see my Perfect multi-column CSS liquid layouts - these use the same equal height column CSS principles as discussed below. The problem with equal height columns In the example above we have three columns each with a different amount of content. Separating the column content from it's background colour The first step to solving the equal height problem is to break it into smaller pieces that can be solved separately. Three column HTML div structure Three column CSS
CSS Floats 101 The float property is a valuable and powerful asset to any web designer/developer working with HTML and CSS. Tragically, it can also cause frustration and confusion if you don’t fully understand how it works. Article Continues Below Also, in the past, it’s been linked to some pretty nasty browser bugs so it’s normal to get nervous about using the float property in your CSS rule sets. We see floats in the print world every time we pick up a magazine article with an image on the left or right with text flowing nicely around it. The definition#section1 Let’s start with the definition of a float. A float is a box that is shifted to the left or right on the current line. The float property has four values that we can apply to it: left, right, inherit, and none. Here is a simple example like the magazine reference above, Example A and the corresponding markup: How floats behave#section2 Nothing too complex, but still pretty cool right? Let’s look at a few more examples. In the clear#section3
CSS Positioning 101 If you’re a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. In what might be a refresher for some, or even an “a-ha!” for others, let’s look at the CSS position property to see how we can use it to create standards-compliant, table-free CSS layouts. Article Continues Below CSS positioning is often misunderstood. The CSS specification offers us five position properties: static, relative, absolute, fixed, and inherit. Get with the flow#section1 First, let’s take a step back to recognize the world we’re working in. Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Think of a “box,” as described by the spec as a wooden block—not unlike the ones you played with as a young whippersnapper. Static and relative—nothing new here#section2 The static and relative position properties behave like your childhood blocks—they stack as you would expect. Example D shows our new markup.
Understanding CSS Floats Using css floats effectively can be confusing and it’s probably one of the things that trips up most people when they’re first learning css. However once you learn to control floated elements it opens up a whole new world of possibilities in your design and makes developing layouts much simpler. And best of all floats really aren’t that hard to work with once you understand a few key points. What is a Float? A float is a box that is shifted to the left or right on the current line. The float property has 3 values; none, which is the default, left, and right. Floats sit as far left or as far right as possible within the immediate containing div. The Difference Between Floats and Positioning In css there are 3 types of positioning schemes. Relative positioning shifts elements relative to their position in the normal document flow. Note that floats are taken out of the normal document flow, but floats do affect the position of elements around them. How to Effectively Use Floats Column Layouts
2 Column CSS Layout: Fixed Width And Centered One of the more common css layout patterns you’ll come across is the fixed width 2 column layout. It’s relatively easy to code and understand, though it sometimes trips up developers new to css layouts. A few weeks ago I promised to offer boilerplate code for some common css layout patterns. This is the first of that boilerplate code and I’ll continue to offer more in the coming weeks. If you prefer to skip the explanation and get right to the code you can view the source of the demo. Note that I’ve added some extra css just to make the demo more presentable. The HTML The html for this layout is rather simple as you can see below. We have a single div for each of the 4 main areas of the layout — header, content, sidebar, and footer. One thing to note is the structure of the html above follows the structure of the page itself. Later in this post I’ll offer two ways to change the layout above so the sidebar is to the left of the content. The CSS The 20px top and bottom margin is arbitrary.
Fix Your Site With the Right DOCTYPE! You’ve done all the right stuff, but your site doesn’t look or work as it should in the latest browsers. Article Continues Below You’ve written valid XHTML and CSS. You’ve used the W3C standard Document Object Model (DOM) to manipulate dynamic page elements. Yet, in browsers designed to support these very standards, your site is failing. This little article will provide you with DOCTYPEs that work, and explain the practical, real–world effect of these seemingly abstract tags. WHY A DOCTYPE? Per HTML and XHTML standards, a DOCTYPE (short for “document type declaration”) informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page. As mentioned in previous ALA articles (and in other interesting places), DOCTYPES are also essential to the proper rendering and functioning of web documents in compliant browsers like Mozilla, IE5/Mac, and IE6/Win. Clearly, this is not what you want. WHERE HAVE ALL THE DOCTYPES GONE? DOCTYPES THAT WORK#section3
The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible. Download this layout (25kb zip file). Percentage dimensions of the holy grail layout All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Maximum column content widths To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. 800 x 600 Left & right columns: 162 pixels Center page: 357 pixels 1024 x 768 Left & right columns: 210 pixels Center page: 459 pixels The nested div structure I've colour coded each div so it's easy to see: The header, colmask and footer divs are 100% wide and stacked vertically one after the other. No CSS hacks The CSS used for this layout is 100% valid and hack free. SEO friendly 2-1-3 column ordering The higher up content is in your page code, the more important it is considered by search engine algorithms (see my article on link source ordering for more details on how this affects links). No Images No JavaScript Safari Mac
css - Why not use tables for layout in HTML CSS tips: how to use absolute position property? Element positioning is one of the toughest arguments regarding the CSS. In today’s article we will deal with the use of the “position” property which allows the positioning of an element inside our web page subtracting it from the normal flow of the document. In details we are going to see how to use the “absolute” value which can be assigned to this property for positioning graphic elements inside our layouts. What does the position property do? The “position” property serves to precisely position an element inside the web page shifting it from the normal flow of the document. What is the meaning of what we just said? The understanding and use of the “position” property is not always clear and immediate for everybody. An example to make it clear We are going to make a page which has got a title at the head of the document and which displays below a grey box containing a text paragraph. The HTML markup we are going to use will be the following: Any further elaboration on absolute positioning?
CSS Float border-radius and -moz-border-radius < CSS One of the most keenly-anticipated CSS3 properties is border-radius. Web designers will no longer have to resort to complex table structures using custom-made corner graphics or including arcane JavaScript files in order to produce designs with rounded corners. While Internet Explorer before IE9 doesn't support many (or any) advanced CSS properties, the Mozilla (Firefox and related browsers) and WebKit (Apple's web browser engine used in Safari and Chrome) and Opera have supported them for many years. The vendor prefixes (-moz, -webkit) are now no longer necessary for the latest browser releases as they have all adopted the official CSS3 syntax. 1. As with many CSS properties relating to margins, padding and borders, there are four individual properties - one for each corner of a box element - and one shorthand property. Here are the CSS and browser-specific attributes in question: Prior to IE9 these CSS3 properties do not work in Internet Explorer. 2. Example 1 -moz-border-radius: 1em; 3.