SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Turning a table into a DIV

    I'm currently building a website and I have been using tables forever. I feel like it's time for me to move in div layouts but I am having a problem figuring out how to accurately display what I need using a div. The left and right images are rounded corner graphics and I am designing this for a mobile website so the buttons need to expand and contract dynamically. Any help would be greatly appreciated. Thanks in advance.

    My current code:


    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="btn" style="background-color: #828b70;">
    <tr>
    <td align="right" width="10"><img src="images/btn_left.gif" alt="" width="10" height="36" /></td>
    <td height="36" class="buttontxt"><a href="link.html">link</a></td>
    <td width="40"><img src="images/btn_right.gif" alt="" width="39" height="36" /></td>
    </tr>
    </table>


    The CSS:


    .buttontxt {
    font-size: 13px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#85574c;
    padding-left:15px;
    background-image:url(images/btn_bkg.gif);
    background-repeat:repeat-x;
    }

    table.btn td a{
    display: block;
    width:100%;
    text-decoration: none;
    font-size: 13px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#85574c;
    padding-top:6px;
    padding-bottom:6px;
    }

    table.btn td a:link, table.navbar td a:visited {
    font-size: 13px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#85574c;
    }

    table.btn td a:hover, table.navbar td a:active {
    font-size: 13px;
    line-height:normal;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#85574c;
    }

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,827
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    A good place to start is with Sliding Doors. Although they've used the technique to created tab labels, it's exactly the same principle for putting graphic rounded corners on any other box.

    Of course, if you just want rounded corners and you haven't got any kind of graphic/artwork on them, and if you're not bothered about prehistoric versions of IE showing old-fashioned square corners, it's much easier to use border-radius on a single block element.

  3. #3
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Do you have a screenshot? Ideally, this can be cut down to just the link, but it depends on what type of border effect you need. At least if you want to support current browsers
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  4. #4
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello.

    Thank-you for your replies. Stevie D I looked into sliding doors and it seems it utilizes floats which I have been told to stay away from when designing a mobile website. Do you think that is accurate information?

    C. Ankerstjerne, Here is a screenshot of one of the buttons.

    button.jpg

  5. #5
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,827
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by pixelpirate View Post
    C. Ankerstjerne, Here is a screenshot of one of the buttons.

    button.jpg
    OK then, the way I would do that would be, assuming you've got it set up as links within an unordered list (colours are approximate!):
    Code css:
    ul#nav {background-color: rgb(27,52,12); padding:1px; width:10em;}
     
    ul#nav li {line-height:2em; background-image:url(fade.png); background-color:rgb(250,240,210); margin:2px; border-radius:3px; list-style:none; padding-left:0.5em;}
     
    ul#nav a {background-image:url(fade.png); background-position:90% 50%; background-repeat:no-repeat; color:rgb(200,30,30); display:block; text-decoration:none;}

    Although, to be honest, for a mobile site I wouldn't go anywhere near that complicated. I would leave the face off, and possibly the fade as well. When people are reading on their mobiles, by and large they want something simple and clear, without too many fancy graphics.


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
  •