SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2007
    Location
    East of Ottawa, ON
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question rowspan equivalent in css

    I have a menu created with a table and it uses a rowspan for structure, how can I recreate using css?

    <table width="100%" border="1" cellpadding="3" cellspacing="0">
    <tr>
    <td><a href="#">a</a></td>
    <td><a href="#">b</a></td>
    <td><a href="#">c</a></td>
    </tr>
    <tr>
    <td><a href="#">d</a></td>
    <td rowspan="2"><a href="#">f</a></td>
    <td rowspan="2"><a href="#">g</a></td>
    </tr>
    <tr>
    <td><a href="#">e</a></td>
    </tr>
    </table>

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi, and Welcome to Sitepoint

    I have a menu created with a table and it uses a rowspan for structure
    rowspan is an important part of the structure and you should use it where appropriate..
    While it's possible with CSS to change the appearance of those two cells to make them stretch over the two rows, it's unnecessary.
    What you have is valid and clean don't worry about the rowspan attributes.

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2007
    Location
    East of Ottawa, ON
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    I've tried to recreate the same effect with css, your thoughts?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    ul#navlist
    {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    position: relative;
    }
    #navlist li
    {
    display: inline;
    list-style-type: none;
    width: 89px;
    position: absolute;
    }
    #navlist a
    {
    padding: 5px 10px;
    border-top: 1px solid #ccc;
    display: block;
    }

    #navlist a:link, #navlist a:visited
    {
    color: #fff;
    background-color: #036;
    text-decoration: none;
    }
    #navlist a:hover
    {
    color: #fff;
    background-color: #369;
    text-decoration: none;
    }
    #navlist #a {left: 0; top: 0;}
    #navlist #b {left: 90px; top: 0;}
    #navlist #c {left: 180px; top: 0;}
    #navlist #d {left: 270px; top: 0;}
    #navlist #e {left: 360px; top: 0;}
    #navlist #f {left: 0px; top: 30px;}
    #navlist #g {left: 270px; top: 30px;}
    #navlist #h {left: 360px; top: 30px;}

    #navlist #b a, #navlist #c a { height: 49px;}
    </style>
    </head>
    <body>

    <ul id="navlist">
    <li id="a"><a href="#">a</a></li>
    <li id="b"><a href="#">b</a></li>
    <li id="c"><a href="#">c</a></li>
    <li id="d"><a href="#">d</a></li>
    <li id="e"><a href="#">e</a></li>
    <li id="f"><a href="#">f</a></li>
    <li id="g"><a href="#">g</a></li>
    <li id="h"><a href="#">h</a></li>
    </ul>

    </body>
    </html>

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    I'd stick with the table.
    Using absolute positioning like this is pretty inflexible and hard to maintain, where as the table solution is far more robust, it won't break on text resize - you can easily change the width of columns etc..

    But it's definitely good to experiment with these things, you might be interested in having a look at Paul's equalizing columns examples on his site.. pmob.co.uk


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •