• http://icant.co.uk/csstablegallery/
• http://www.designshack.co.uk/tutorials/10-css-table-examples

This one has a little wizard to help you remember the styling options, but requires you to have a design in mind already – use the above for inspiration, and the bottom for implementation

• http://www.somacon.com/p141.php

Related posts:

1. Ical events – moved and html/css changes For those of you monitoring the RSS feed for ical events, please note two things: All Ical events related work...
2. CSS for horizontal tab menus I am having some fun (not!) in finalising some clean elegant css examples for my tab menu widget. I’m fussy...
3. Category specific css to achieve a print “cover page” css look For a school’s online newsletter we wanted the “photo of the week” category to present differently from other posts. Ideally...

Some difficulties so far:

list item (ol/ul li) white space

Yes it is there – for both Firefox and Internet Explorer! Not a problem if you want to space your menu items out, and/or are not doing interesting stuff with backgrounds. The answer for the widget I’m working on seems to be to have concise code!

See the test page with image examples here.

Rob Glazebrook has some comments on the whitespace problem here.

Some example ideas:

SMH example

More later…..

Related posts:

1. Why horizontal scrollbar? You think your html and css looking good and then you notice – a horizontal scrollbar when the site should...
2. Category specific css to achieve a print “cover page” css look For a school’s online newsletter we wanted the “photo of the week” category to present differently from other posts. Ideally...
3. CSS for real html tables There are occasions when an HTML table is appropriate. One then wants the data to be presented well. Following are...

Reasons for a scrollbar

They all come down to the same thing – the browser thinks it needs a bit more space…… Some situations that may trigger this perception or actual need:

• 100% width, plus some padding makes it more than 100%!
• 100% width, plus Italics : IE has to make it just that bit wider for the italics, perhaps forcing a horizontal scrollbar.
• <pre> preformatted code that is wider than it’s containing element.

Using overflow just hides the problem

A number of sites will advise using the overflow property to get rid of it. That may well bandaid it and admittedly it is a quick fix.

Related posts:

1. CSS for horizontal tab menus I am having some fun (not!) in finalising some clean elegant css examples for my tab menu widget. I’m fussy...

The Auto CSS Layout generator has preview pages. In these we wanted the real html templates and the real tableless CSS required for each particular layout to be used, rather than screen dumps. this seemed like a more ethical approach and also allowed one to “test” all the layouts in one go. We also wanted the user to be able to “click’ on the preview to choose the layout style, just like a normal link.

You can see a working test demo of the preview here.

The problem: Link elements are empty

However we had no images to use and a link element is by definition empty – it may not contain div’s – let alone a set of nested divs.

The problem2: No content

In a multi layout situation, we did not want the screen to be too busy, so we did not want superfluous “content” for our clickable links.

The answer: Clickable space links that are displayed as blocks

Since some “content” is needed to make sure that the div’s do not collapse, we use the old space ” ” – in each div that needed content. We made each space a link to the same “chosen layout” page. In the CSS we then made the links in the nested div’s display as block elements and that seemed to do the trick!

View the test and view source to see the code.

css:

div.container a {display: block; text-decoration: none;}

html:

<div class="container">
  <div class="header">
       <a href="http://www.webdesign.anmari.com/web-tools/layout-generator/"
        title="The header or branding div" >     </a>
  </div>
  <div class="wrapper">
    <div class="content">
      <a href="http://www.webdesign.anmari.com/web-tools/layout-generator/"
      title="The content div">      </a>
    </div>
  </div>
  <div class="nav"><a href="http://www.webdesign.anmari.com/web-tools/layout-generator/"
     title="The navigation div">      </a></div>
  <div class="extra"><a href="http://www.webdesign.anmari.com/web-tools/layout-generator/"
     title="The extra or sidebar div">      </a></div>
<div class="footer"><a href="http://www.webdesign.anmari.com/web-tools/layout-generator/"
     title="The footer div">      </a></div>
</div>

Related posts:

1. Layout Generator The CSS Layout generator generates tableless CSS only layouts or grids that have A-grade browser support. Unlike Yahoo Grids it...
2. Widgetized headers and footers? Dynamic (widgetized) Sidebars are great, but would you not like to have a dynamic header and footer in your theme...