Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Apr 2008
    Posts
    12
    Member #
    16667
    Hi guys, I am new here. I've been reading the forum for a while but this is my first post ever.

    I need some help, I've been trying to figure this out for over 3 hours and IT'S DRIVING ME NUTS!

    So, here's the deal: I've been designing websites for a while, but always personal ones, so I really didn't care a lot about SEO or HTML standards. The problem is that I've been working with tables for layout and it is very easy and convenient, but according to what I read here, is bad for SEO and doesn't comply with HTML standards, or is wrong for some reason.

    Well, I want to do something like this with Dreamweaver CS3:



    That is just an example, but the idea would be to have 3 icons on the left and their explanations (text) on the right.

    When I try to do that with tables, it is very easy, here's the code:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="../My Documents/Marriage Green Card/website/oneColElsCtr.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body class="oneColElsCtr">
    
    <div id="container">
      <div id="mainContent">
        <table width="484" border="1">
          <tr>
            <th width="192" scope="row"><img src="http://tbn0.google.com/images?q=tbn:_iQ-nHCpYrnTqM:http://www.bursar.psu.edu/images/8863form.gif" width="106" height="137" /></th>
            <td width="276">Step 1: Fill out our online form</td>
          </tr>
          <tr>
            <th scope="row"><img src="http://tbn0.google.com/images?q=tbn:2D6dkp4AfJamOM:http://www.fire.london.ca/images/checkmark.gif" width="89" height="99" /></th>
            <td>Step 2: Verify your Information</td>
          </tr>
          <tr>
            <th scope="row"><img src="http://tbn0.google.com/images?q=tbn:Gg7x-3flVYrImM:http://www.aiga.org/Resources/SymbolSigns/gif_large/01_telephone_inv.gif" width="136" height="136" /></th>
            <td>Step 3: We will call you</td>
          </tr>
        </table>
        </div>
    </div>
    </body>
    </html>
    But the problem is when I try to use the div tags. Here's the code:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>divs</title>
    <link href="../My Documents/Marriage Green Card/website/oneColElsCtr.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    #apDiv1 {
        position:absolute;
        left:164px;
        top:0px;
        width:0px;
        height:3px;
        z-index:1;
    }
    #apDiv2 {
        position:absolute;
        left:158px;
        top:27px;
        width:150px;
        height:150px;
        z-index:2;
    }
    #apDiv3 {
        position:absolute;
        left:158px;
        top:177px;
        width:150px;
        height:150px;
        z-index:2;
    }
    #apDiv4 {
        position:absolute;
        left:158px;
        top:327px;
        width:150px;
        height:150px;
        z-index:2;
    }
    #apDiv5 {    position:absolute;
        left:158px;
        top:177px;
        width:150px;
        height:150px;
        z-index:2;
    }
    #apDiv6 {
        position:absolute;
        left:308px;
        top:27px;
        width:500px;
        height:150px;
        z-index:3;
    }
    #apDiv7 {
        position:absolute;
        left:308px;
        top:177px;
        width:500px;
        height:150px;
        z-index:3;
    }
    #apDiv8 {
        position:absolute;
        left:0px;
        top:150px;
        width:500px;
        height:150px;
        z-index:3;
    }
    #apDiv9 {    position:absolute;
        left:308px;
        top:177px;
        width:500px;
        height:150px;
        z-index:3;
    }
    -->
    </style>
    </head>
    
    <body class="oneColElsCtr">
    
    <div id="apDiv1"></div>
    <div id="apDiv2"><img src="http://tbn0.google.com/images?q=tbn:_iQ-nHCpYrnTqM:http://www.bursar.psu.edu/images/8863form.gif" alt="" width="106" height="137" /></div>
    <div id="apDiv6">
      <div align="left">Step 1: Fill out our online form</div>
    </div>
    <div id="container">
      <div id="mainContent">
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <div id="apDiv3"></div>
        <p>&nbsp;</p>
        <div id="apDiv5"><img src="http://tbn0.google.com/images?q=tbn:2D6dkp4AfJamOM:http://www.fire.london.ca/images/checkmark.gif" alt="" width="89" height="99" /></div>
        <div id="apDiv7">
          <div id="apDiv8">Step 3: We will call you</div>
        Step 2: Verify your Information</div>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <div id="apDiv4"><img src="http://tbn0.google.com/images?q=tbn:Gg7x-3flVYrImM:http://www.aiga.org/Resources/SymbolSigns/gif_large/01_telephone_inv.gif" alt="" width="136" height="136" /></div>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      </div>
    </div>
    </body>
    </html>
    By the way, both files are linked to a CSS which code is:

    HTML Code:
    @charset "utf-8";
    body {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        background: #666666;
        margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
        padding: 0;
        text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
        color: #000000;
    }
    .oneColElsCtr #container {
        width: 46em;
        background: #FFFFFF;
        margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
        border: 1px solid #000000;
        text-align: left; /* this overrides the text-align: center on the body element. */
    }
    .oneColElsCtr #mainContent {
        padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    }
    Here's the problem for the case where I used the AP Divs:

    This is an image of how do I see it on the Dreamweaver, and I would like to see it like that on my browser too:



    But this is how I actually see it on my browser:



    ------------------------------------------------------------------

    Now, here is the challenge: how in the world do I use AP divs to get the same control and results that I get with tables? When I resize the browser window, the images and the text change positions.

    I would like to be able to use div tags instead of tables, since divs are supposed to be way better, but it is so hard to manage them. Tables were very easy!

    Please HELP!!!!

    Thank you so much in advance for your help guys.

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Give us a link to the real page, not .jpegs

    Vertical centering is harder with CSS (horizontal centering much easier).

    There actually is no reason you can't use a <table> for that part of your page.

    Tables are not recommended for page layouts, they are designed for displaying
    tabular data (usually from a database)... but in your case, to display that grid of
    content, why not use <table>?

    Do this ...

    Use XHTML W3C standards for developing your pages, but in places where
    you get stuck (like your example above), use <table> like you are used to using.
    When done, show us a link to your page and we can see if there's a non-table
    solution that complies.


  4. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Oh dear. All that absolute positioning makes things a bit dreary.

    The best solution for what you're doing is done with semantic markup. The HTML

    HTML Code:
    <ol id="steps">
        <li id="step1"><span>Step 1: Fill out our online form</span></li>
        <li id="step2"><span>Step 2: Verify your Information</span></li>
        <li id="step3"><span>Step 3: We will call you</span></li>
    </ol>
    This creates an ordered list, which is what you are trying to do. Sadly, because IE doesn't properly support counters or content generation, we can't actually make the step 1, 2, 3 be automatically generated in place of the numbers. Instead, we have to make them disappear. Notice the ids on each of these, and the fact that the only stuff in our markup is the content (except for those pesky spans, which are needed for a trick we will use in a second for vertical centering). Thusly, the CSS:

    Code:
    ol#steps li
    {
      list-style-type: none;
    
      background-repeat: no-repeat;
    
      font-size: 2em;
    
      padding-left: 5em;
    }
    
    li#step1
    {
      background-image: url("http://tbn0.google.com/images?q=tbn:_iQ-nHCpYrnTqM:http://www.bursar.psu.edu/images/8863form.gif");
    
      height: 137px;
    
      padding-top: 68.5px;
    }
    
    li#step2
    {
      background-image: url("http://tbn0.google.com/images?q=tbn:2D6dkp4AfJamOM:http://www.fire.london.ca/images/checkmark.gif");
    
      height: 99px;
    
      padding-top: 49.5px;
    }
    
    li#step3
    {
      background-image: url("http://tbn0.google.com/images?q=tbn:Gg7x-3flVYrImM:http://www.aiga.org/Resources/SymbolSigns/gif_large/01_telephone_inv.gif");
    
      height: 136px;
    
      padding-top: 68px;
    }
    
    ol#steps li span
    {
      display: block;
      margin-top: -0.5em;
    }
    A few things are going on in the above code:
    • The first thing we do is clear the numbers in the list (list-stype-type: none takes care of that).
    • Then, we set things up so the background of the list items will not repeat, set their font size to twice the base font size (the default is a bit smaller than what your image shows, though there is probably still some room for tweaking), and set up a left padding of 5em -- this will be the space between the left edge and the text, and will be the area where the images will show. Also notice that we set it to the same for all the list items. This ensures they are aligned horizontally.
    • For each of the lis, referred to by id, we set the background image to the appropriate image. We also set the height to the image's height. Finally, we set the top padding to half the height of the image. This will push the text's top edge halfway down the list item, so that the top edge will be aligned with the middle of the image.
    • Because we want the center of the text to be aligned with the center of the image, we then use the spans inside the lis to move the text up by half its size (this is approximate -- 1em is not exactly the height of the text, but it's close enough). The display: block is needed so the margin-top will take effect, and the negative top margin is used to move the text's top edge up by half its size.
    Hope this clarified things and helped! I couldn't quite get it to work without the useless span that's sitting in there, unfortunately, but at least the rest of the markup is semantic. I've attached my test file (note that it has the CSS inlined in the file, and that's a bad idea!).


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:33 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com