SitePoint Sponsor

User Tag List

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

    newbie q: tidying style from table into css

    Hi folks,
    I'm a newbie to the land of css, and am having a few (what I hope are simple) issues with sorting out a design.


    I've been given a table based layout that uses this to render a box with rounded edges and a title bar:

    Code:
    			
    <table  width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="7" height="7" class="TableCornerTopLeft">&nbsp;</td>
                    <td height="7" class="TableTitleBar">Table Name Here</td>
                    <td width="7" height="7" class="TableCornerTopRight">&nbsp;</td>
                  </tr>
                  <tr>
                    <td class="TableLeftImage">&nbsp;</td>
                    <td class="TableContent"></td>
                    <td class="TableRightImage"></td>
                  </tr>
                  <tr height="20">
                    <td class="TableCornerBottomLeft">&nbsp;</td>
                    <td class="TableBottomImage"></td>
                    <td class="TableCornerBottomRight"></td>
                  </tr>
                </table>
    with some css of this:
    Code:
    .TableTitleBar {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: bold;
        color: #006699;
        background-image: url(Images/tableTitleImage.gif);
        background-repeat: repeat-x;
    }
    
    .TableCornerTopLeft {
        background-image: url(Images/tablecorner_topleft.gif);
        background-repeat: no-repeat;
        background-position: left top;
    }
    
    .TableCornerTopRight {
        background-image: url(Images/tablecorner_topright.gif);
        background-repeat: no-repeat;
        background-position: right top;
    }
    
    .TableCornerBottomRight {
        background-image: url(Images/tablecorner_bottomright.gif);
        background-repeat: no-repeat;
        background-position: right bottom;
    }
    .TableCornerBottomLeft {
        background-image: url(Images/tablecorner_bottomleft.gif);
        background-repeat: no-repeat;
        background-position: left bottom;
    }
    
    .TableBottomImage {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: bold;
        color: #006699;
        background-image: url(Images/tablebottomImage.gif);
        background-repeat: repeat-x;
        background-position: left bottom;
        background-color: #FFFFFF;
    }
    
    .TableLeftImage {
        background-image: url(Images/tableleftImage.gif);
        background-repeat: repeat-y;
        background-position: left;
    }
    
    .TableRightImage {
        background-image: url(Images/tablerightImage.gif);
        background-repeat: repeat-y;
        background-position: right top;
    }
    .TableContent {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: normal;
        color: #006699;
        background-color: #FFFFFF;
    }

    so I'm trying to compress this and use div tags in my own version of it... but I'd really like to compress it a bit as well and not have

    Code:
    <div id="table">
      <div id="tabletopleft"></div>
      <div id="tabletopright"></div>
      <div id="tableleft"></div>
      <div id="tablecontent"></div>
      <div id="tableright"></div>
      <div id="tablebottomleft"></div>
      <div id="tablebottom"></div>
      <div id="tablebottomright"></div>
    </div>
    as this just seems a lot of markup for no good reason.... but i'm not sure how to start reducing it...

    any help greatly appreciated folks.

    thanks

    Marty

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you are trying to make a rounded box with graphical images for the corners and for the sides then there is no getting away from the fact thay you need 8 "hooks" in total to hang your images on.

    You can try and utilise existing inner elements to reduce the number of nestings needed. If for example you have a title as you mention above then you can use the parent div for the first round corner and then use the title element (h2 etc) for the opposing corner. Then you will probably have content elements that you attach images to for the bottom corner. You will still need some extra elements but you will have reduced 3 elements already.

    read the sitepoint article on corners (theres even a generator) that explains the procesees in more detail.

    http://tools.sitepoint.com/spanky/

    There are many more rounded corner tutorials out there and they all boil down to the need to have something to apply your images to.

    Have a look at some of the articles on this search to give you more ideas.

    http://www.google.co.uk/search?hl=en...orners&spell=1


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
  •