SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot gregs's Avatar
    Join Date
    Aug 2002
    Posts
    161
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Coverting tabular images to CSS

    Should I just leave it as such or could someone show me how I would go about exchanging the tables for CSS, please?

    This is what I have so far in my CSS file.
    Code:
    #wrapper {
      width: 960px;
      margin: 0 auto;
      overflow: hidden;
      background: #fff;
      text-align: center;
    }
    Here is the code with the tables.
    Code:
    <div id="wrapper">
      <!-- BANNER -->
      <table width="960" height="100" background="images/top_banner_background.jpg" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td align="left" valign="top"><img src="images/top_banner_left.jpg" width="345" height="100" border="0"></td>
          <td align="right" valign="top"><img src="images/top_banner_right.jpg" width="405" height="100" border="0"></td>
        </tr>
      </table>
     
      <!-- GRID & GIF -->
      <table width="960" height="100" background="images/grid.gif" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td align="center" valign="center"><img src="images/motion.gif"></td>
        </tr>
      </table>
     
      <table width="960" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td valign="top" align="left" width="150">
            <img src="images/menu_top.jpg">
            <ul id="Menu1" class="MM">
              <li><a href="#">Home</a></li>
              <li><a href="#">Forums</a></li>
              <li class="NOSEPARATOR"><a href="#">Admin</a></li>
            </ul>
          </td>
          <td width="660" valign="top">
              {{content}}
          </td>
          <td width="150" align="right" valign="top" width="150">
            <img src="images/1.jpg" /><br />
            <img src="images/2.gif" /><br />
          </td>
        </tr>
      </table>
     
    </div>

  2. #2
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Hey there.

    The way you need to think about it is using HTML to get all the elements you need onto the webpage, and using the CSS stylesheet to move and colour and style them into place.

    So for the first part, the top banner you could maybe wrap into a <div> and put the two images into that <div> ;

    Code:
    <div id="TopBanner">
     <img src="top_banner_left.jpg" alt="" />
     <img src="top_banner_right.jpg" alt="" />
    </div>
    If you're using XHTML I believe those two images should already sit side by side, and by removing all margins as you already seemed to do, they ought to line up nicely.

    But to make things even neater, how about merging those two left and right images together in your image editor (Photoshop or whatever you use) and load it onto your webpage whole? It'd be less code and it'd make styling easier too.


    If that background to the top table is important, put that into the stylesheet too;

    Code:
    #TopBanner{background:url(top_banner_background.jpg);}
    And continue with that methodology throughout. Replace tables with containers (if necessary), load images onto webpage, style them into place.
    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  3. #3
    SitePoint Zealot gregs's Avatar
    Join Date
    Aug 2002
    Posts
    161
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I had been using the two images as links to elsewhere when you hovered over them. I used to have Paint Shop that I did all my work in but don't have anything like that now, so making them into one image isn't possible at this time. The background image is a filler BETWEEN the two images that I used when I was using a percentage width. I really need the two images to split, one left and one right and let the background image still link them.

    The reason I chose 960px for width is I want consistancy. I am not a percentage type person. I hated that aspect before and finally just had to get back to set pixels.

  4. #4
    SitePoint Zealot gregs's Avatar
    Join Date
    Aug 2002
    Posts
    161
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I did this and it SEEMS to work.

    Code:
    html, body {
      color: black;
      font: 12px verdana;
    }
    
    #wrapper {
      width: 960px;
      margin: 0 auto;
      overflow: hidden;
      background: #fff;
      text-align: center;
    }
    
    #TopBanner {
      width: 960px;
      margin: 0 auto;
      overflow: hidden;
      background: #fff;
      background:url(images/top_banner_background.jpg);
    }
    Code:
    <!-- BANNER -->
    <div id="TopBanner">
    <img style="float:left" src="images/top_banner_left.jpg" />
    <img style="float:right" src="images/top_banner_right.jpg" />
    </div>

  5. #5
    SitePoint Zealot gregs's Avatar
    Join Date
    Aug 2002
    Posts
    161
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Why will the image swarm.gif not vertical align in the center of this div?
    The image size changes from time to time. The Div will always be height:100. I want this image placed directly in the middle of the DiV, both horizontal and vertical.

    Code:
    html, body {
      color: black;
      font: 12px verdana;
    }
    #wrapper {
      width: 960px;
      text-align: center;
      margin: 0 auto;
      overflow: hidden;
      background: #fff;
    }
    
    #TopBanner {
      margin: 0 auto;
      overflow: hidden;
      background: #fff;
      background:url(images/top_banner_background.jpg);
    }
    
    #TopGrid {
      height: 100px;
      margin: 0 auto;
      overflow: hidden;
      background: #fff;
      background:url(images/grid.gif);
    }
    Code:
      <!-- GRID & GIF -->
      <div id="TopGrid">
        <img style="vertical-align:middle" src="images/swarm.gif" />
      </div>


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
  •