SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Tables -> CSS issue...

    Hi guys, just trying out something here which I can create using tables for positioning, but not using CSS, can anyone help me out here?

    Code:
    <html>
    
    <head>
    <title>Menu Test</title>
    
    <style type="text/css">
    
    body  {margin:0px; padding:0px;}
    table  {margin:0px; padding:20px 0px 0px 0px; width:100%; border:0px;}
    td.links  {padding:5px; margin:0px; border:1px solid #000; color:#000; background-color:#eee; text-align:center;}
    td.links:hover  {color:#fff; background-color:#777;}
    td.spacer  {border:0px; width:15%;}
    
    </style>
    
    </head>
    
    <body>
    <table>
      <tr>
        <td class="spacer">&nbsp;</td>
    	<td class="links">1</td>
    	<td class="links">2</td>
    	<td class="links">3</td>
    	<td class="links">4</td>
        <td class="links">5</td>
    	<td class="spacer">&nbsp;</td>
      </tr>
    </table>
    </body>
    
    </html>
    Now I can achieve the same thing in CSS with the cells under each other using an unordered list, but this one is getting me... Anyone?

  2. #2
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    <html>
    <
    head>
    <
    title>Menu Test</title>
    <
    style type="text/css">
    body  {margin:0pxpadding:0px;}
    div.links{margin-left:15%; margin-right:15%;padding:20px 0px 0px 0pxdisplay:tablewidth:70%;}
    div.links a{border:1px solid #000;background:#EEE;color:#000;display:table-cell;margin:0px;padding:5px;text-align:center;}
    div.links a:hover{color:#FFF;background:#777;}
    </style>
    </
    head>

    <
    body>
    <
    div class="links">
      <
    a href="#">1</a>
      <
    a href="#">2</a>
      <
    a href="#">3</a>
      <
    a href="#">4</a>
      <
    a href="#">5</a>
    </
    div>
    </
    body>
    </
    html
    ----Adopt-a-Sig----
    Your message here!

  3. #3
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhhh Randem, that is bloody fantastic

    I never knew about CSS' display:table properties, reading up more on this now, could make things massively easier in the future...

    Again thank you

  4. #4
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems that IE does not like that "display:table" attribute, does anyone know anyway around this? I wish all browsers supported all CSS *sigh*

    Example:

    http://members.optusnet.com.au/wizardx8/mwd



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
  •