ansaurus

Question

CSS layout question

Answer 1

A:

css:

a { display:table-cell; }
li { display: table-row; }
ul { display: table; }

I can't test this right now (submitting from my cell phone) but it should be easy enough to find out.

pinkfloydx33 2010-10-31 05:11:07

I doubt he wants to style *all* his A, LI and UL tags this way

bemace 2010-10-31 08:18:41

Answer 2

+2 A:

I'd rather give the enclosing ul element an id='navbar' and define properties in the following fashion

#navbar {/*properties for ul*/}
#navbar a {/*properties for a element*/}
#navbar li (/*properties for li element*/}

This should allow you to control multiple unordered list elements without cluttering your css with different classes.

philar 2010-10-31 06:17:44

Answer 3

+1 A:

This is not going to help you much for IE, but I thought I'd share what we can do now in Gecko and WebKit browsers, and hopefully very soon in other browsers as well using CSS3 Flexible Box Layout Module. It's quite powerful. You could conceivably use this today with another technique of your choice as a fallback for other browsers.

To see how it works, paste this into your text editor, save it, and run it in a recent version of Firefox, Chrome or Safari:

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
      ul {
        list-style: none;
        padding: 0;
        width: 500px;
        background: gray;
        }
      li {
        width: 500px;
        display: -moz-box;
        display: box;
        -moz-box-orient: horizontal;
        -webkit-box-orient: horizontal;
        box-orient: horizontal;
        }
      li a {
        display: block;
        text-align: center;
        -moz-box-flex: 1;
        -webkit-box-flex: 1;
        box-flex: 1;
        margin: 2px;
        background: silver;
        }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#">One</a></li>
      <li><a href="#">Two.one</a><a href="#">Two.two</a><a href="#">Two.three</a></li>
      <li><a href="#">Three.one</a><a href="#">Three.two</a></li>
    </ul>
  </body>
</html>

The end result should look like this screenshot from FF3.6:

A list of anchors display width Flexbox

I wrote about this CSS3 module, nicknamed "Flexbox", at http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/. See also http://www.html5rocks.com/tutorials/flexbox/quick/.

stephenhay 2010-10-31 08:11:57

ansaurus

tags:

views:

answers:

CSS layout question

related questions